form-quill-editor.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /* Set dropdown font-families */
  2. .ql-toolbar .ql-font span[data-label='Sailec Light']::before {
  3. font-family: 'Sailec Light'; }
  4. .ql-toolbar .ql-font span[data-label='Sofia Pro']::before {
  5. font-family: 'Sofia'; }
  6. .ql-toolbar .ql-font span[data-label='Slabo 27px']::before {
  7. font-family: 'Slabo 27px'; }
  8. .ql-toolbar .ql-font span[data-label='Roboto Slab']::before {
  9. font-family: 'Roboto Slab'; }
  10. .ql-toolbar .ql-font span[data-label='Inconsolata']::before {
  11. font-family: 'Inconsolata'; }
  12. .ql-toolbar .ql-font span[data-label='Ubuntu Mono']::before {
  13. font-family: 'Ubuntu Mono'; }
  14. /* Set content font-families */
  15. .ql-font-sofia {
  16. font-family: 'Sofia'; }
  17. .ql-font-slabo {
  18. font-family: 'Slabo 27px'; }
  19. .ql-font-roboto {
  20. font-family: 'Roboto Slab'; }
  21. .ql-font-inconsolata {
  22. font-family: 'Inconsolata'; }
  23. .ql-font-ubuntu {
  24. font-family: 'Ubuntu Mono'; }
  25. .ql-toolbar {
  26. border-color: #d8d6de !important; }
  27. .ql-toolbar .ql-formats:focus,
  28. .ql-toolbar .ql-formats *:focus {
  29. outline: 0; }
  30. .ql-toolbar .ql-formats .ql-picker-label:hover, .ql-toolbar .ql-formats .ql-picker-label:focus,
  31. .ql-toolbar .ql-formats button:hover,
  32. .ql-toolbar .ql-formats button:focus {
  33. color: #7367f0 !important; }
  34. .ql-toolbar .ql-formats .ql-picker-label:hover .ql-stroke, .ql-toolbar .ql-formats .ql-picker-label:focus .ql-stroke,
  35. .ql-toolbar .ql-formats button:hover .ql-stroke,
  36. .ql-toolbar .ql-formats button:focus .ql-stroke {
  37. stroke: #7367f0 !important; }
  38. .ql-toolbar .ql-formats .ql-picker-label:hover .ql-fill, .ql-toolbar .ql-formats .ql-picker-label:focus .ql-fill,
  39. .ql-toolbar .ql-formats button:hover .ql-fill,
  40. .ql-toolbar .ql-formats button:focus .ql-fill {
  41. fill: #7367f0 !important; }
  42. .ql-toolbar .ql-formats .ql-picker-label.ql-active,
  43. .ql-toolbar .ql-formats button.ql-active {
  44. color: #7367f0 !important; }
  45. .ql-toolbar .ql-formats .ql-picker-item.ql-selected {
  46. color: #7367f0 !important; }
  47. .ql-toolbar .ql-formats .ql-picker-options .ql-picker-item:hover {
  48. color: #7367f0 !important; }
  49. .ql-toolbar .ql-formats .ql-picker-options .ql-active {
  50. color: #7367f0 !important; }
  51. .ql-bubble .ql-picker {
  52. color: #fff !important; }
  53. .ql-bubble .ql-stroke {
  54. stroke: #fff !important; }
  55. .ql-bubble .ql-fill {
  56. fill: #fff !important; }
  57. .ql-container {
  58. border-color: #d8d6de !important;
  59. font-family: "Montserrat", Helvetica, Arial, serif; }
  60. .ql-editor a {
  61. color: #7367f0; }
  62. .ql-picker {
  63. color: #5e5873 !important; }
  64. .ql-stroke {
  65. stroke: #5e5873 !important; }
  66. .ql-active .ql-stroke {
  67. stroke: #7367f0 !important; }
  68. .ql-active .ql-fill {
  69. fill: #7367f0 !important; }
  70. .ql-fill {
  71. fill: #5e5873 !important; }
  72. .ql-toolbar,
  73. .ql-container {
  74. border-top-right-radius: 0.357rem;
  75. border-top-left-radius: 0.357rem; }
  76. .ql-toolbar + .ql-container,
  77. .ql-container + .ql-toolbar {
  78. border-bottom-right-radius: 0.357rem;
  79. border-bottom-left-radius: 0.357rem;
  80. border-top-right-radius: unset;
  81. border-top-left-radius: unset; }
  82. .dark-layout .quill-toolbar,
  83. .dark-layout .ql-toolbar {
  84. background-color: #283046;
  85. border-color: #3b4253 !important; }
  86. .dark-layout .quill-toolbar .ql-picker,
  87. .dark-layout .ql-toolbar .ql-picker {
  88. color: #fff !important; }
  89. .dark-layout .quill-toolbar .ql-stroke,
  90. .dark-layout .ql-toolbar .ql-stroke {
  91. stroke: #fff !important; }
  92. .dark-layout .quill-toolbar .ql-fill,
  93. .dark-layout .ql-toolbar .ql-fill {
  94. fill: #fff !important; }
  95. .dark-layout .quill-toolbar .ql-picker-options,
  96. .dark-layout .quill-toolbar .ql-picker-label,
  97. .dark-layout .ql-toolbar .ql-picker-options,
  98. .dark-layout .ql-toolbar .ql-picker-label {
  99. background-color: #283046; }
  100. .dark-layout .quill-toolbar .ql-picker-options .ql-active,
  101. .dark-layout .quill-toolbar .ql-picker-label .ql-active,
  102. .dark-layout .ql-toolbar .ql-picker-options .ql-active,
  103. .dark-layout .ql-toolbar .ql-picker-label .ql-active {
  104. color: #7367f0 !important; }
  105. .dark-layout .ql-active .ql-stroke {
  106. stroke: #7367f0 !important; }
  107. .dark-layout .ql-active .ql-fill {
  108. fill: #7367f0 !important; }
  109. .dark-layout .ql-bubble .ql-toolbar {
  110. background: #3b4253;
  111. border-radius: 2rem; }
  112. .dark-layout .ql-container {
  113. border-color: #3b4253 !important;
  114. background-color: #283046; }
  115. .dark-layout .ql-editor .ql-syntax {
  116. background-color: #161d31; }
  117. .dark-layout .ql-editor.ql-blank:before {
  118. color: #b4b7bd; }
  119. [data-textdirection='rtl'] .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) i,
  120. [data-textdirection='rtl'] .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  121. left: auto !important;
  122. right: 0; }