ckeditor-dialog.css

Same filename in this branch
  1. 9 core/themes/seven/css/theme/ckeditor-dialog.css
Same filename and directory 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/claro/css/theme/ckeditor-dialog.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * CKEditor-native dialogs theming.
  10. */
  11. .cke_dialog_background_cover {
  12. display: none;
  13. }
  14. .cke_dialog:before {
  15. position: fixed;
  16. top: 0;
  17. left: 0;
  18. width: 100%;
  19. height: 100%;
  20. content: "";
  21. opacity: 0.7;
  22. background: #000;
  23. }
  24. [dir="rtl"] .cke_reset_all * {
  25. text-align: right;
  26. direction: rtl;
  27. }
  28. .cke_reset_all .cke_dialog_body {
  29. position: relative;
  30. border: 0;
  31. border-radius: 0;
  32. background: none;
  33. }
  34. .cke_reset_all .cke_dialog_body * {
  35. font: 0.8125rem/1.538em BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  36. }
  37. /* Dialog's header. */
  38. .cke_reset_all .cke_dialog_title {
  39. padding: 0.9375rem 3.0625rem 0.9375rem 0.9375rem;
  40. color: #fff;
  41. border: 0;
  42. border-top-left-radius: 5px;
  43. border-top-right-radius: 5px;
  44. background: #6b6b6b;
  45. box-shadow: none;
  46. text-shadow: none;
  47. font-size: 1.3344em;
  48. font-weight: 600;
  49. line-height: 1.315em;
  50. -webkit-font-smoothing: antialiased;
  51. }
  52. [dir="rtl"] .cke_reset_all .cke_dialog_title {
  53. padding: 0.9375rem 0.9375rem 0.9375rem 3.0625rem;
  54. }
  55. /* More specificity to prevent overriding in high density screens. */
  56. .cke_reset_all .cke_dialog .cke_dialog_close_button {
  57. top: 1rem;
  58. right: 1.25rem;
  59. width: 1rem;
  60. height: 1rem;
  61. opacity: 1;
  62. background: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z' fill='%23fff'/%3e%3c/svg%3e") 0 0 no-repeat;
  63. }
  64. [dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_close_button {
  65. right: auto;
  66. left: 1.25rem;
  67. }
  68. .cke_reset_all .cke_dialog .cke_label {
  69. display: none;
  70. }
  71. /* Dialog's body. */
  72. .cke_reset_all .cke_dialog_contents {
  73. border-bottom-right-radius: 5px;
  74. border-bottom-left-radius: 5px;
  75. }
  76. .cke_reset_all .cke_dialog_contents_body {
  77. padding: 1em;
  78. }
  79. .cke_reset_all tr:hover,
  80. .cke_reset_all tr:focus {
  81. background: none;
  82. }
  83. [dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_first,
  84. [dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_child {
  85. padding-right: 0;
  86. padding-left: 0.625rem;
  87. }
  88. .cke_reset_all .cke_dialog_body label {
  89. display: table;
  90. margin: 0 0 0.1em;
  91. padding: 0;
  92. font-weight: bold;
  93. }
  94. .cke_reset_all .cke_dialog_body .cke_dialog_ui_input_text,
  95. .cke_reset_all .cke_dialog_body .cke_dialog_ui_input_textarea,
  96. .cke_reset_all .cke_dialog_body div.cke_dialog_ui_input_select {
  97. border: 0;
  98. }
  99. .cke_reset_all .cke_dialog_body textarea,
  100. .cke_reset_all .cke_dialog_body input[type="text"],
  101. .cke_reset_all select.cke_dialog_ui_input_select {
  102. box-sizing: border-box;
  103. max-width: 100%;
  104. margin: 0 0 0.1875rem;
  105. padding: 0.3em 0.4em 0.3em 0.5em;
  106. transition: border linear 0.2s, box-shadow linear 0.2s;
  107. color: #595959;
  108. border: 1px solid #b8b8b8;
  109. border-top-color: #999;
  110. border-radius: 2px;
  111. background: #fcfcfa;
  112. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
  113. font-size: 1em;
  114. line-height: normal;
  115. }
  116. .cke_reset_all select.cke_dialog_ui_input_select {
  117. padding-right: 1.5em;
  118. background: #fcfcfa url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m3.8 5.4c-.165-.22-.075-.4.2-.4h8.002c.275 0 .365.18.199.4l-3.898 5.2c-.166.221-.436.221-.6 0z' fill='%23333'/%3e%3c/svg%3e") no-repeat 99% 63%;
  119. }
  120. .cke_reset_all .cke_dialog_body textarea:focus,
  121. .cke_reset_all .cke_dialog_body input[type="text"]:focus,
  122. .cke_reset_all select.cke_dialog_ui_input_select:focus {
  123. border-color: #40b6ff;
  124. outline: 0;
  125. background-color: #fff;
  126. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
  127. }
  128. /* Dialog's footer. */
  129. .cke_reset_all .cke_dialog .cke_dialog_footer {
  130. margin: 0;
  131. padding: 0.9375rem 1.25rem;
  132. text-align: left;
  133. border: 0;
  134. border-bottom-right-radius: 5px;
  135. border-bottom-left-radius: 5px;
  136. outline: none;
  137. background: #f5f5f2;
  138. }
  139. [dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_footer {
  140. text-align: right;
  141. }
  142. .cke_reset_all .cke_dialog .cke_resizer {
  143. display: none;
  144. }
  145. .cke_reset_all .cke_dialog_footer_buttons {
  146. margin: 0;
  147. }
  148. .cke_dialog_footer_buttons td {
  149. float: right;
  150. }
  151. [dir="rtl"] .cke_dialog_footer_buttons td {
  152. float: left;
  153. }
  154. .cke_reset_all a.cke_dialog_ui_button {
  155. position: relative;
  156. display: inline-block;
  157. box-sizing: border-box;
  158. margin-right: 1em;
  159. padding: 0.25rem 1.5em;
  160. cursor: pointer;
  161. transition: all 0.1s;
  162. text-align: center;
  163. text-decoration: none;
  164. color: #333;
  165. border: 1px solid #a6a6a6;
  166. border-radius: 20em;
  167. background-color: #f2f1eb;
  168. background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  169. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  170. font-size: 14px;
  171. font-size: 0.875rem;
  172. font-weight: 600;
  173. line-height: normal;
  174. -webkit-appearance: none;
  175. -moz-appearance: none;
  176. -webkit-font-smoothing: antialiased;
  177. }
  178. [dir="rtl"] .cke_reset_all a.cke_dialog_ui_button {
  179. margin-right: 0;
  180. margin-left: 1em;
  181. }
  182. /* More specificity to prevent overriding in high contrast mode. */
  183. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover,
  184. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
  185. padding: 0.25rem 1.5em;
  186. text-decoration: none;
  187. color: #1a1a1a;
  188. border: 1px solid #a6a6a6;
  189. background-color: #f9f8f6;
  190. background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
  191. box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
  192. }
  193. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
  194. z-index: 10;
  195. border: 1px solid #3ab2ff;
  196. box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
  197. }
  198. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active {
  199. padding: 0.25rem 1.5em;
  200. transition: none;
  201. border: 1px solid #a6a6a6;
  202. background-color: #dfdfd9;
  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: linear-gradient(to bottom, #007bc6, #0071b8);
  222. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  223. font-weight: 700;
  224. -webkit-font-smoothing: antialiased;
  225. }
  226. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:hover,
  227. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
  228. color: #fff;
  229. border-color: #1e5c90;
  230. background-color: #2369a6;
  231. background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  232. box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
  233. }
  234. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
  235. border: 1px solid #1280df;
  236. box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
  237. }
  238. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:active {
  239. border-color: #144b78;
  240. background-image: linear-gradient(to bottom, #08639b, #0071b8);
  241. box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  242. }
  243. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok span {
  244. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  245. }

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