You are here

ckeditor-dialog.css in Dialog 7.2

CKEditor-native dialogs theming.

File

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. content: '';
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. background: #000;
  16. opacity: 0.70;
  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. border: 0;
  35. border-top-left-radius: 5px;
  36. border-top-right-radius: 5px;
  37. font-size: 1.3344em;
  38. line-height: 1.315em;
  39. font-weight: 600;
  40. background: #6b6b6b;
  41. color: #fff;
  42. box-shadow: none;
  43. text-shadow: none;
  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. background: url(../../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;
  56. opacity: 1;
  57. }
  58. [dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_close_button {
  59. left: 20px;
  60. right: auto;
  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-left-radius: 5px;
  68. border-bottom-right-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-left: 10px;
  80. padding-right: 0;
  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. border: 1px solid #b8b8b8;
  101. border-top-color: #999;
  102. border-radius: 2px;
  103. font-size: 1em;
  104. line-height: normal;
  105. background: #fcfcfa;
  106. color: #595959;
  107. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
  108. -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  109. transition: border linear 0.2s, box-shadow linear 0.2s;
  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. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
  121. background-color: #fff;
  122. }
  123. /* Dialog's footer. */
  124. .cke_reset_all .cke_dialog .cke_dialog_footer {
  125. margin: 0;
  126. padding: 15px 20px;
  127. border: 0;
  128. border-bottom-left-radius: 5px;
  129. border-bottom-right-radius: 5px;
  130. outline: none;
  131. text-align: left;
  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_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. box-sizing: border-box;
  152. display: inline-block;
  153. margin-right: 1em;
  154. padding: 4px 1.5em;
  155. border: 1px solid #a6a6a6;
  156. border-radius: 20em;
  157. text-align: center;
  158. font-weight: 600;
  159. font-size: 14px;
  160. font-size: 0.875rem;
  161. line-height: normal;
  162. background-color: #f2f1eb;
  163. background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  164. background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  165. color: #333;
  166. text-decoration: none;
  167. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  168. cursor: pointer;
  169. -webkit-appearance: none;
  170. -moz-appearance: none;
  171. -webkit-transition: all 0.1s;
  172. transition: all 0.1s;
  173. -webkit-font-smoothing: antialiased;
  174. }
  175. [dir="rtl"] .cke_reset_all a.cke_dialog_ui_button {
  176. margin-left: 1em;
  177. margin-right: 0;
  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. border: 1px solid #a6a6a6;
  184. background-color: #f9f8f6;
  185. background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
  186. background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
  187. color: #1a1a1a;
  188. text-decoration: none;
  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. border: 1px solid #a6a6a6;
  199. background-color: #dfdfd9;
  200. background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  201. background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  202. box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  203. -webkit-transition: none;
  204. transition: none;
  205. }
  206. .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button span {
  207. padding: 0;
  208. font-size: 0.875rem;
  209. line-height: normal;
  210. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  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. border-color: #1e5c90;
  219. font-weight: 700;
  220. background-color: #0071b8;
  221. background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  222. background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  223. color: #fff;
  224. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  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. background-color: #2369a6;
  230. background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  231. background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  232. border-color: #1e5c90;
  233. color: #fff;
  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. background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
  242. background-image: linear-gradient(to bottom, #08639b, #0071b8);
  243. border-color: #144b78;
  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. }
  249. /* Remove Seven theme's unnecessary right table border. */
  250. .cke_dialog tr td:last-child {
  251. border-right: none;
  252. }