ckeditor-dialog.css

Same filename in this branch
  1. 9 core/themes/claro/css/theme/ckeditor-dialog.css
Same filename in other branches
  1. 8.9.x core/themes/seven/css/theme/ckeditor-dialog.css
  2. 8.9.x core/themes/claro/css/theme/ckeditor-dialog.css

CKEditor-native dialogs theming.

File

core/themes/seven/css/theme/ckeditor-dialog.css

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

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