dialog.scss 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822
  1. /*
  2. Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
  3. For licensing, see LICENSE.md or http://ckeditor.com/license
  4. */
  5. /*
  6. dialog.css
  7. ============
  8. This file styles dialogs and all widgets available inside of it (tabs, buttons,
  9. fields, etc.).
  10. Dialogs are a complex system because they're very flexible. The CKEditor API
  11. makes it easy to create and customize dialogs by code, by making use of several
  12. different widgets inside its contents.
  13. All dialogs share a main dialog strucuture, which can be visually represented
  14. as follows:
  15. +-- .cke_dialog -------------------------------------------------+
  16. | +-- .cke_dialog_body ----------------------------------------+ |
  17. | | +-- .cke_dialog_title --+ +-- .cke_dialog_close_button --+ | |
  18. | | | | | | | |
  19. | | +-----------------------+ +------------------------------+ | |
  20. | | +-- .cke_dialog_tabs ------------------------------------+ | |
  21. | | | | | |
  22. | | +--------------------------------------------------------+ | |
  23. | | +-- .cke_dialog_contents --------------------------------+ | |
  24. | | | +-- .cke_dialog_contents_body -----------------------+ | | |
  25. | | | | | | | |
  26. | | | +----------------------------------------------------+ | | |
  27. | | | +-- .cke_dialog_footer ------------------------------+ | | |
  28. | | | | | | | |
  29. | | | +----------------------------------------------------+ | | |
  30. | | +--------------------------------------------------------+ | |
  31. | +------------------------------------------------------------+ |
  32. +----------------------------------------------------------------+
  33. /* Config files, where variables are defined */
  34. @import "../config/config";
  35. /* Comments in this file will give more details about each of the above blocks.
  36. */
  37. /* The outer container of the dialog. */
  38. .cke_dialog {
  39. /* Mandatory: Because the dialog.css file is loaded on demand, we avoid
  40. showing an unstyled dialog by hidding it. Here, we restore its visibility. */
  41. visibility: visible;
  42. }
  43. /* The inner boundary container. */
  44. .cke_dialog_body {
  45. z-index: 1;
  46. background: $gray-lighter;
  47. border: 1px solid $hr-border;
  48. border-radius: $border-radius;
  49. }
  50. /* This one is required by Firefox 3.6. Without it,
  51. dialog tabs and resizer float outside of the dialog.
  52. Although this rule doesn't seem to break anything on other
  53. browsers, it doesn't work with broken jQueryUI - #9851. */
  54. .cke_browser_gecko19 .cke_dialog_body {
  55. position: relative;
  56. }
  57. /* Due to our reset we have to recover the styles of some elements. */
  58. .cke_dialog strong {
  59. font-weight: bold;
  60. }
  61. /* The dialog title. */
  62. .cke_dialog_title {
  63. font-weight: bold;
  64. font-size: 13px;
  65. cursor: move;
  66. position: relative;
  67. color: $text-color;
  68. border-bottom: 1px solid $hr-border;
  69. padding: 10px 12px;
  70. background: $gray-lighter;
  71. }
  72. /* The outer part of the dialog contants, which contains the contents body
  73. and the footer. */
  74. .cke_dialog_contents {
  75. background-color: #fff;
  76. overflow: auto;
  77. padding: 15px 10px 5px 10px;
  78. margin-top: 35px;
  79. border-top: 1px solid $hr-border;
  80. border-radius: 0 0 $border-radius $border-radius;
  81. }
  82. /* The contents body part, which will hold all elements available in the dialog. */
  83. .cke_dialog_contents_body {
  84. overflow: auto;
  85. padding: 17px 10px 5px 10px;
  86. margin-top: 22px;
  87. }
  88. /* The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
  89. well as a resize handler. */
  90. .cke_dialog_footer {
  91. text-align: right;
  92. position: relative;
  93. border-radius: 0 0 $border-radius $border-radius;
  94. border-top: 1px solid $hr-border;
  95. background: $gray-lighter;
  96. }
  97. .cke_rtl .cke_dialog_footer {
  98. text-align: left;
  99. }
  100. .cke_hc .cke_dialog_footer {
  101. outline: none;
  102. border-top: 1px solid #fff;
  103. }
  104. .cke_dialog .cke_resizer {
  105. margin-top: 28px;
  106. }
  107. .cke_dialog .cke_resizer_rtl {
  108. margin-left: 5px;
  109. }
  110. .cke_dialog .cke_resizer_ltr {
  111. margin-right: 5px;
  112. }
  113. /*
  114. Dialog tabs
  115. -------------
  116. Tabs are presented on some of the dialogs to make it possible to have its
  117. contents split on different groups, visible one after the other.
  118. The main element that holds the tabs can be made hidden, in case of no tabs
  119. available.
  120. The following is the visual representation of the tabs block:
  121. +-- .cke_dialog_tabs ------------------------------------+
  122. | +-- .cke_dialog_tab --+ +-- .cke_dialog_tab --+ ... |
  123. | | | | | |
  124. | +---------------------+ +---------------------+ |
  125. +--------------------------------------------------------+
  126. The .cke_dialog_tab_selected class is appended to the active tab.
  127. */
  128. /* The main tabs container. */
  129. .cke_dialog_tabs {
  130. height: 24px;
  131. display: inline-block;
  132. margin: 10px 0 0;
  133. position: absolute;
  134. z-index: 2;
  135. left: 10px;
  136. }
  137. .cke_rtl .cke_dialog_tabs {
  138. right: 10px;
  139. }
  140. /* A single tab (an <a> element). */
  141. a.cke_dialog_tab {
  142. height: 16px;
  143. padding: 4px 8px;
  144. margin-right: 3px;
  145. display: inline-block;
  146. cursor: pointer;
  147. line-height: 16px;
  148. outline: none;
  149. color: $gray-dark;
  150. border: 1px solid $hr-border;
  151. border-radius: 3px 3px 0 0;
  152. background: lighten($gray-lighter, 2%);
  153. }
  154. .cke_rtl a.cke_dialog_tab {
  155. margin-right: 0;
  156. margin-left: 3px;
  157. }
  158. /* A hover state of a regular inactive tab. */
  159. a.cke_dialog_tab:hover {
  160. background: $gray-light;
  161. text-decoration: none;
  162. }
  163. a.cke_dialog_tab_selected
  164. {
  165. background: #fff;
  166. color: $text-color;
  167. border-bottom-color: #fff;
  168. cursor: default;
  169. filter: none;
  170. }
  171. /* A hover state for selected tab. */
  172. a.cke_dialog_tab_selected:hover {
  173. background: #fff;
  174. }
  175. .cke_hc a.cke_dialog_tab:hover,
  176. .cke_hc a.cke_dialog_tab_selected
  177. {
  178. border: 3px solid;
  179. padding: 2px 6px;
  180. }
  181. a.cke_dialog_tab_disabled
  182. {
  183. color: #bababa;
  184. cursor: default;
  185. }
  186. /* selectbox inside tabs container */
  187. .cke_dialog_tabs {
  188. .cke_dialog_ui_input_select {
  189. top: -7px !important;
  190. }
  191. }
  192. /* The .cke_single_page class is appended to the dialog outer element in case
  193. of dialogs that has no tabs. */
  194. .cke_single_page .cke_dialog_tabs
  195. {
  196. display: none;
  197. }
  198. .cke_single_page .cke_dialog_contents
  199. {
  200. padding-top: 5px;
  201. margin-top: 0;
  202. border-top: none;
  203. }
  204. /* The close button at the top of the dialog. */
  205. .cke_dialog_close_button {
  206. background-image: url(images/close.png);
  207. background-repeat: no-repeat;
  208. background-position: 0 0;
  209. position: absolute;
  210. cursor: pointer;
  211. text-align: center;
  212. height: 20px;
  213. width: 20px;
  214. top: 9px;
  215. z-index: 5;
  216. }
  217. .cke_hidpi .cke_dialog_close_button {
  218. background-image: url(images/hidpi/close.png);
  219. background-size: 16px;
  220. }
  221. .cke_dialog_close_button span {
  222. display: none;
  223. }
  224. .cke_hc .cke_dialog_close_button span {
  225. display: inline;
  226. cursor: pointer;
  227. font-weight: bold;
  228. position: relative;
  229. top: 3px;
  230. }
  231. .cke_ltr .cke_dialog_close_button {
  232. right: 5px;
  233. }
  234. .cke_rtl .cke_dialog_close_button {
  235. left: 6px;
  236. }
  237. /*
  238. Dialog UI Elements
  239. --------------------
  240. The remaining styles define the UI elements that can be used inside dialog
  241. contents.
  242. Most of the UI elements on dialogs contain a textual label. All of them share
  243. the same labelling structure, having the label text inside an element with
  244. .cke_dialog_ui_labeled_label and the element specific part inside the
  245. .cke_dialog_ui_labeled_content class.
  246. */
  247. /* If an element is supposed to be disabled, the .cke_disabled class is
  248. appended to it. */
  249. div.cke_disabled .cke_dialog_ui_labeled_content div * {
  250. background-color: #ddd;
  251. cursor: default;
  252. }
  253. /*
  254. Horizontal-Box and Vertical-Box
  255. ---------------------------------
  256. There are basic layou element used by the editor to properly align elements in
  257. the dialog. They're basically tables that have each cell filled by UI elements.
  258. The following is the visual representation of a H-Box:
  259. +-- .cke_dialog_ui_hbox --------------------------------------------------------------------------------+
  260. | +-- .cke_dialog_ui_hbox_first --+ +-- .cke_dialog_ui_hbox_child --+ +-- .cke_dialog_ui_hbox_last --+ |
  261. | + + + + + + |
  262. | +-------------------------------+ +-------------------------------+ +------------------------------+ |
  263. +-------------------------------------------------------------------------------------------------------+
  264. It is possible to have nested V/H-Boxes.
  265. */
  266. .cke_dialog_ui_vbox, .cke_dialog_ui_hbox {
  267. table {
  268. margin: auto;
  269. }
  270. }
  271. .cke_dialog_ui_vbox {
  272. margin-top: 5px;
  273. }
  274. .cke_dialog_ui_vbox_child {
  275. padding: 5px 0px;
  276. }
  277. .cke_dialog_ui_hbox {
  278. width: 100%;
  279. }
  280. .cke_dialog_ui_hbox_first,
  281. .cke_dialog_ui_hbox_child,
  282. .cke_dialog_ui_hbox_last {
  283. vertical-align: top;
  284. }
  285. /* To center a horizontal label-input (selection field dialog / find and replace) */
  286. .cke_dialog_ui_hbox_first,
  287. .cke_dialog_ui_hbox_last {
  288. > .cke_dialog_ui_labeled_label, > .cke_dialog_ui_html {
  289. line-height: 30px;
  290. }
  291. }
  292. .cke_ltr .cke_dialog_ui_hbox_first,
  293. .cke_ltr .cke_dialog_ui_hbox_child {
  294. padding-right: 10px;
  295. }
  296. .cke_rtl .cke_dialog_ui_hbox_first,
  297. .cke_rtl .cke_dialog_ui_hbox_child {
  298. padding-left: 10px;
  299. }
  300. .cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
  301. .cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child {
  302. padding-right: 5px;
  303. }
  304. .cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
  305. .cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child {
  306. padding-left: 5px;
  307. padding-right: 0;
  308. }
  309. /* Applies to all labeled dialog fields */
  310. .cke_hc div {
  311. &.cke_dialog_ui_input_text,
  312. &.cke_dialog_ui_input_password,
  313. &.cke_dialog_ui_input_textarea,
  314. &.cke_dialog_ui_input_select,
  315. &.cke_dialog_ui_input_file {
  316. border: 1px solid;
  317. }
  318. }
  319. /*
  320. Text Input
  321. ------------
  322. The basic text field to input text.
  323. +-- .cke_dialog_ui_text --------------------------+
  324. | +-- .cke_dialog_ui_labeled_label ------------+ |
  325. | | | |
  326. | +--------------------------------------------+ |
  327. | +-- .cke_dialog_ui_labeled_content ----------+ |
  328. | | +-- div.cke_dialog_ui_input_text --------+ | |
  329. | | | +-- input.cke_dialog_ui_input_text --+ | | |
  330. | | | | | | | |
  331. | | | +------------------------------------+ | | |
  332. | | +----------------------------------------+ | |
  333. | +--------------------------------------------+ |
  334. +-------------------------------------------------+
  335. */
  336. .cke_dialog_ui_text {
  337. margin-bottom: 7px;
  338. }
  339. .cke_dialog_ui_select {
  340. height: auto !important;
  341. margin-bottom: 7px;
  342. }
  343. /*
  344. Textarea
  345. ----------
  346. The textarea field to input larger text.
  347. +-- .cke_dialog_ui_textarea --------------------------+
  348. | +-- .cke_dialog_ui_labeled_label ----------------+ |
  349. | | | |
  350. | +------------------------------------------------+ |
  351. | +-- .cke_dialog_ui_labeled_content --------------+ |
  352. | | +-- div.cke_dialog_ui_input_textarea --------+ | |
  353. | | | +-- input.cke_dialog_ui_input_textarea --+ | | |
  354. | | | | | | | |
  355. | | | +----------------------------------------+ | | |
  356. | | +--------------------------------------------+ | |
  357. | +------------------------------------------------+ |
  358. +-----------------------------------------------------+
  359. */
  360. textarea.cke_dialog_ui_input_textarea {
  361. overflow: auto;
  362. resize: none;
  363. }
  364. input.cke_dialog_ui_input_text,
  365. input.cke_dialog_ui_input_password,
  366. textarea.cke_dialog_ui_input_textarea {
  367. @extend %input-style;
  368. }
  369. /*
  370. Button
  371. --------
  372. The buttons used in the dialog footer or inside the contents.
  373. +-- a.cke_dialog_ui_button -----------+
  374. | +-- span.cke_dialog_ui_button --+ |
  375. | | | |
  376. | +-------------------------------+ |
  377. +-------------------------------------+
  378. */
  379. /* The outer part of the button. */
  380. a.cke_dialog_ui_button {
  381. display: inline-block;
  382. *display: inline;
  383. *zoom: 1;
  384. padding: 3px 0;
  385. margin: 0;
  386. text-align: center;
  387. color: $text-color;
  388. vertical-align: middle;
  389. cursor: pointer;
  390. border: 1px solid $hr-border;
  391. border-radius: $border-radius;
  392. background: #fff;
  393. &:hover, &:focus, &:active {
  394. border-color: $gray;
  395. background-color: $gray-lighter;
  396. text-decoration: none;
  397. }
  398. }
  399. /* Buttons inside the content */
  400. .cke_dialog_page_contents {
  401. a.cke_dialog_ui_button {
  402. height: 22px;
  403. line-height: 22px;
  404. background-color: #f4f4f4;
  405. &:hover, &:focus, &:active {
  406. background-color: $gray-lighter;
  407. }
  408. }
  409. }
  410. span.cke_dialog_ui_button {
  411. padding: 0 12px;
  412. }
  413. .cke_hc a.cke_dialog_ui_button {
  414. &:hover, &:focus, &:active {
  415. border: 3px solid;
  416. padding-top: 1px;
  417. padding-bottom: 1px;
  418. span {
  419. padding-left: 10px;
  420. padding-right: 10px;
  421. }
  422. }
  423. }
  424. /*
  425. a.cke_dialog_ui_button[style*="width"]
  426. {
  427. display: block !important;
  428. width: auto !important;
  429. }
  430. */
  431. /* The inner part of the button (both in dialog tabs and dialog footer). */
  432. .cke_dialog_footer_buttons a.cke_dialog_ui_button span {
  433. color: inherit;
  434. font-size: 12px;
  435. line-height: 20px;
  436. }
  437. /* Special class appended to the Ok button. */
  438. a.cke_dialog_ui_button_ok {
  439. color: #fff;
  440. border-color: $success-border;
  441. background: $success;
  442. &:hover, &:focus, &:active {
  443. border-color: $success-border-hover;
  444. background: $success-hover;
  445. }
  446. }
  447. /* Special class appended to the Cancel button. */
  448. a.cke_dialog_ui_button_cancel {
  449. background-color: #fff;
  450. &:focus {
  451. outline: none;
  452. }
  453. }
  454. span.cke_dialog_ui_button {
  455. cursor: pointer;
  456. }
  457. /* A special container that holds the footer buttons. */
  458. .cke_dialog_footer_buttons {
  459. display: inline-table;
  460. margin: 10px;
  461. width: auto;
  462. position: relative;
  463. vertical-align: middle;
  464. }
  465. /*
  466. Styles for other dialog element types.
  467. */
  468. div.cke_dialog_ui_input_select {
  469. display: table;
  470. }
  471. select.cke_dialog_ui_input_select {
  472. height: 30px;
  473. line-height: 30px;
  474. background-color: #fff;
  475. padding: 4px 10px;
  476. border: 1px solid $hr-border;
  477. outline: none;
  478. border-radius: $border-radius;
  479. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  480. box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  481. }
  482. .cke_dialog_ui_input_file {
  483. width: 100%;
  484. height: 30px;
  485. }
  486. .cke_hc .cke_dialog_ui_labeled_content {
  487. input, select, textarea {
  488. &:focus {
  489. outline: 1px dotted;
  490. }
  491. }
  492. }
  493. /*
  494. * Some utility CSS classes for dialog authors.
  495. */
  496. .cke_dialog {
  497. .cke_dark_background {
  498. background-color: $gray-lighter;
  499. }
  500. .cke_light_background {
  501. background-color: $gray-lighter;
  502. }
  503. .cke_centered {
  504. text-align: center;
  505. }
  506. a.cke_btn_reset {
  507. float: right;
  508. background: url(images/refresh.png) top left no-repeat;
  509. width: 16px;
  510. height: 16px;
  511. border: 1px none;
  512. font-size: 1px;
  513. }
  514. a.cke_btn_locked, a.cke_btn_unlocked {
  515. float: left;
  516. width: 16px;
  517. height: 16px;
  518. background-repeat: no-repeat;
  519. border: none 1px;
  520. font-size: 1px;
  521. }
  522. a.cke_btn_locked {
  523. background-image: url(images/lock.png);
  524. .cke_icon {
  525. display: none;
  526. }
  527. }
  528. a.cke_btn_unlocked {
  529. background-image: url(images/lock-open.png);
  530. }
  531. .cke_btn_over {
  532. border: outset 1px;
  533. cursor: pointer;
  534. }
  535. }
  536. .cke_hidpi .cke_dialog {
  537. a.cke_btn_reset {
  538. background-size: 16px;
  539. background-image: url(images/hidpi/refresh.png);
  540. }
  541. a.cke_btn_unlocked, a.cke_btn_locked {
  542. background-size: 16px;
  543. }
  544. a.cke_btn_locked {
  545. background-image: url(images/hidpi/lock.png);
  546. }
  547. a.cke_btn_unlocked {
  548. background-image: url(images/hidpi/lock-open.png);
  549. }
  550. }
  551. .cke_rtl .cke_dialog {
  552. a.cke_btn_reset {
  553. float: left;
  554. }
  555. a.cke_btn_locked, a.cke_btn_unlocked {
  556. float: right;
  557. }
  558. }
  559. /*
  560. The rest of the file contains style used on several common plugins. There is a
  561. tendency that these will be moved to the plugins code in the future.
  562. */
  563. .cke_dialog {
  564. .ImagePreviewBox, .FlashPreviewBox {
  565. border: 1px solid $gray;
  566. border-radius: $border-radius;
  567. padding: 6px 10px;
  568. margin-top: 5px;
  569. background-color: white;
  570. }
  571. .ImagePreviewBox {
  572. overflow: scroll;
  573. height: 205px;
  574. width: 300px;
  575. table td {
  576. white-space: normal;
  577. }
  578. }
  579. .FlashPreviewBox {
  580. white-space: normal;
  581. overflow: auto;
  582. height: 160px;
  583. width: 390px;
  584. }
  585. .ImagePreviewLoader {
  586. position: absolute;
  587. white-space: normal;
  588. overflow: hidden;
  589. height: 160px;
  590. width: 230px;
  591. margin: 2px;
  592. padding: 2px;
  593. opacity: 0.9;
  594. filter: alpha(opacity = 90);
  595. background-color: #e4e4e4;
  596. }
  597. .cke_pastetext {
  598. width: 346px;
  599. height: 170px;
  600. textarea {
  601. width: 340px;
  602. height: 170px;
  603. resize: none;
  604. }
  605. }
  606. iframe.cke_pasteframe {
  607. width: 346px;
  608. height: 130px;
  609. background-color: white;
  610. border: 1px solid #aeb3b9;
  611. border-radius: $border-radius;
  612. }
  613. .cke_hand {
  614. cursor: pointer;
  615. }
  616. }
  617. .cke_disabled {
  618. color: #a0a0a0;
  619. }
  620. .cke_dialog_body {
  621. .cke_label {
  622. display: none;
  623. }
  624. label {
  625. display: inline-block;
  626. margin-bottom: 3px;
  627. cursor: default;
  628. &.cke_required {
  629. font-weight: bold;
  630. }
  631. }
  632. }
  633. .cke_dialog_ui_html {
  634. line-height: 150%;
  635. }
  636. a.cke_smile {
  637. overflow: hidden;
  638. display: block;
  639. text-align: center;
  640. padding: 0.3em 0;
  641. img {
  642. vertical-align: middle;
  643. }
  644. }
  645. a.cke_specialchar {
  646. cursor: inherit;
  647. display: block;
  648. height: 1.25em;
  649. padding: 0.2em 0.3em;
  650. text-align: center;
  651. }
  652. a.cke_smile,
  653. a.cke_specialchar {
  654. background-color: $gray-lighter;
  655. border: 1px solid transparent;
  656. vertical-align: top;
  657. &:hover, &:focus, &:active {
  658. background: #fff;
  659. outline: 0;
  660. }
  661. &:hover {
  662. border-color: $gray;
  663. }
  664. &:focus, &:active {
  665. border-color: $primary;
  666. }
  667. }
  668. /**
  669. * Styles specific to "cellProperties" dialog.
  670. */
  671. .cke_dialog_contents a.colorChooser {
  672. display: block;
  673. margin-top: 6px;
  674. margin-left: 10px;
  675. width: 80px;
  676. }
  677. .cke_rtl .cke_dialog_contents a.colorChooser {
  678. margin-right: 10px;
  679. }
  680. .cke_dialog_ui_checkbox {
  681. display: inline-block;
  682. margin-bottom: 5px;
  683. }
  684. /* Compensate focus outline for some input elements. (#6200) */
  685. .cke_dialog_ui_checkbox_input:focus,
  686. .cke_dialog_ui_radio_input:focus,
  687. .cke_btn_over {
  688. outline: 1px dotted #696969;
  689. }
  690. .cke_iframe_shim {
  691. display: block;
  692. position: absolute;
  693. top: 0;
  694. left: 0;
  695. z-index: -1;
  696. filter: alpha(opacity = 0);
  697. width: 100%;
  698. height: 100%;
  699. }