ckeditor-dialog.pcss.css

Same filename and directory in other branches
  1. 8.9.x core/themes/claro/css/theme/ckeditor-dialog.pcss.css

CKEditor-native dialogs theming.

File

core/themes/claro/css/theme/ckeditor-dialog.pcss.css

View source
  1. /**
  2. * @file
  3. * CKEditor-native dialogs theming.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .cke_dialog_background_cover {
  7. display: none;
  8. }
  9. .cke_dialog:before {
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. content: "";
  16. opacity: 0.7;
  17. background: #000;
  18. }
  19. [dir="rtl"] .cke_reset_all * {
  20. text-align: right;
  21. direction: rtl;
  22. }
  23. .cke_reset_all .cke_dialog_body {
  24. position: relative;
  25. border: 0;
  26. border-radius: 0;
  27. background: none;
  28. }
  29. .cke_reset_all .cke_dialog_body * {
  30. font: 13px/1.538em var(--font-family);
  31. }
  32. /* Dialog's header. */
  33. .cke_reset_all .cke_dialog_title {
  34. padding: 15px 49px 15px 15px;
  35. color: #fff;
  36. border: 0;
  37. border-top-left-radius: 5px;
  38. border-top-right-radius: 5px;
  39. background: #6b6b6b;
  40. box-shadow: none;
  41. text-shadow: none;
  42. font-size: 1.3344em;
  43. font-weight: 600;
  44. line-height: 1.315em;
  45. -webkit-font-smoothing: antialiased;
  46. }
  47. [dir="rtl"] .cke_reset_all .cke_dialog_title {
  48. padding: 15px 15px 15px 49px;
  49. }
  50. /* More specificity to prevent overriding in high density screens. */
  51. .cke_reset_all .cke_dialog .cke_dialog_close_button {
  52. top: 16px;
  53. right: 20px;
  54. width: 16px;
  55. height: 16px;
  56. opacity: 1;
  57. background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat;
  58. }
  59. [dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_close_button {
  60. right: auto;
  61. left: 20px;
  62. }
  63. .cke_reset_all .cke_dialog .cke_label {
  64. display: none;
  65. }
  66. /* Dialog's body. */
  67. .cke_reset_all .cke_dialog_contents {
  68. border-bottom-right-radius: 5px;
  69. border-bottom-left-radius: 5px;
  70. }
  71. .cke_reset_all .cke_dialog_contents_body {
  72. padding: 1em;
  73. }
  74. .cke_reset_all tr:hover,
  75. .cke_reset_all tr:focus {
  76. background: none;
  77. }
  78. [dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_first,
  79. [dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_child {
  80. padding-right: 0;
  81. padding-left: 10px;
  82. }
  83. .cke_reset_all .cke_dialog_body label {
  84. display: table;
  85. margin: 0 0 0.1em;
  86. padding: 0;
  87. font-weight: bold;
  88. }
  89. .cke_reset_all .cke_dialog_body .cke_dialog_ui_input_text,
  90. .cke_reset_all .cke_dialog_body .cke_dialog_ui_input_textarea,
  91. .cke_reset_all .cke_dialog_body div.cke_dialog_ui_input_select {
  92. border: 0;
  93. }
  94. .cke_reset_all .cke_dialog_body textarea,
  95. .cke_reset_all .cke_dialog_body input[type="text"],
  96. .cke_reset_all select.cke_dialog_ui_input_select {
  97. box-sizing: border-box;
  98. max-width: 100%;
  99. margin: 0 0 3px;
  100. padding: 0.3em 0.4em 0.3em 0.5em;
  101. -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  102. transition: border linear 0.2s, box-shadow linear 0.2s;
  103. color: #595959;
  104. border: 1px solid #b8b8b8;
  105. border-top-color: #999;
  106. border-radius: 2px;
  107. background: #fcfcfa;
  108. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
  109. font-size: 1em;
  110. line-height: normal;
  111. }
  112. .cke_reset_all select.cke_dialog_ui_input_select {
  113. padding-right: 1.5em;
  114. background: #fcfcfa url(../../images/core/333333/caret-down.svg) no-repeat 99% 63%;
  115. }
  116. .cke_reset_all .cke_dialog_body textarea:focus,
  117. .cke_reset_all .cke_dialog_body input[type="text"]:focus,
  118. .cke_reset_all select.cke_dialog_ui_input_select:focus {
  119. border-color: #40b6ff;
  120. outline: 0;
  121. background-color: #fff;
  122. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
  123. }
  124. /* Dialog's footer. */
  125. .cke_reset_all .cke_dialog .cke_dialog_footer {
  126. margin: 0;
  127. padding: 15px 20px;
  128. text-align: left;
  129. border: 0;
  130. border-bottom-right-radius: 5px;
  131. border-bottom-left-radius: 5px;
  132. outline: none;
  133. background: #f5f5f2;
  134. }
  135. [dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_footer {
  136. text-align: right;
  137. }
  138. .cke_reset_all .cke_dialog .cke_resizer {
  139. display: none;
  140. }
  141. .cke_reset_all .cke_dialog_footer_buttons {
  142. margin: 0;
  143. }
  144. .cke_dialog_footer_buttons td {
  145. float: right;
  146. }
  147. [dir="rtl"] .cke_dialog_footer_buttons td {
  148. float: left;
  149. }
  150. .cke_reset_all a.cke_dialog_ui_button {
  151. position: relative;
  152. display: inline-block;
  153. box-sizing: border-box;
  154. margin-right: 1em;
  155. padding: 4px 1.5em;
  156. cursor: pointer;
  157. -webkit-transition: all 0.1s;
  158. transition: all 0.1s;
  159. text-align: center;
  160. text-decoration: none;
  161. color: #333;
  162. border: 1px solid #a6a6a6;
  163. border-radius: 20em;
  164. background-color: #f2f1eb;
  165. background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  166. background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  167. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  168. font-size: 14px;
  169. font-size: 0.875rem;
  170. font-weight: 600;
  171. line-height: normal;
  172. -webkit-appearance: none;
  173. -moz-appearance: none;
  174. -webkit-font-smoothing: antialiased;
  175. }
  176. [dir="rtl"] .cke_reset_all a.cke_dialog_ui_button {
  177. margin-right: 0;
  178. margin-left: 1em;
  179. }
  180. /* More specificity to prevent overriding in high contrast mode. */
  181. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover,
  182. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
  183. padding: 4px 1.5em;
  184. text-decoration: none;
  185. color: #1a1a1a;
  186. border: 1px solid #a6a6a6;
  187. background-color: #f9f8f6;
  188. background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
  189. background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
  190. box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
  191. }
  192. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
  193. z-index: 10;
  194. border: 1px solid #3ab2ff;
  195. box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
  196. }
  197. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active {
  198. padding: 4px 1.5em;
  199. -webkit-transition: none;
  200. transition: none;
  201. border: 1px solid #a6a6a6;
  202. background-color: #dfdfd9;
  203. background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  204. background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  205. box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  206. }
  207. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button span {
  208. padding: 0;
  209. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  210. font-size: 0.875rem;
  211. line-height: normal;
  212. }
  213. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover span,
  214. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus span,
  215. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active span {
  216. padding: 0;
  217. }
  218. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok {
  219. color: #fff;
  220. border-color: #1e5c90;
  221. background-color: #0071b8;
  222. background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  223. background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  224. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  225. font-weight: 700;
  226. -webkit-font-smoothing: antialiased;
  227. }
  228. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:hover,
  229. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
  230. color: #fff;
  231. border-color: #1e5c90;
  232. background-color: #2369a6;
  233. background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  234. background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  235. box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
  236. }
  237. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
  238. border: 1px solid #1280df;
  239. box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
  240. }
  241. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:active {
  242. border-color: #144b78;
  243. background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
  244. background-image: linear-gradient(to bottom, #08639b, #0071b8);
  245. box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  246. }
  247. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok span {
  248. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  249. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.