dialog.css 22 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061
  1. /*
  2. Copyright (c) 2003-2015, 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. Comments in this file will give more details about each of the above blocks.
  34. */
  35. /* The outer container of the dialog. */
  36. .cke_dialog
  37. {
  38. /* Mandatory: Because the dialog.css file is loaded on demand, we avoid
  39. showing an unstyled dialog by hidding it. Here, we restore its visibility. */
  40. visibility: visible;
  41. }
  42. /* The inner boundary container. */
  43. .cke_dialog_body
  44. {
  45. z-index: 1;
  46. background: #eaeaea;
  47. border: 1px solid #b2b2b2;
  48. border-bottom-color: #999;
  49. border-radius: 3px;
  50. box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  51. }
  52. /* Due to our reset we have to recover the styles of some elements. */
  53. .cke_dialog strong
  54. {
  55. font-weight: bold;
  56. }
  57. /* The dialog title. */
  58. .cke_dialog_title
  59. {
  60. font-weight: bold;
  61. font-size: 13px;
  62. cursor: move;
  63. position: relative;
  64. color: #474747;
  65. text-shadow: 0 1px 0 rgba(255,255,255,.75);
  66. border-bottom: 1px solid #999;
  67. padding: 6px 10px;
  68. border-radius: 2px 2px 0 0;
  69. box-shadow: 0 1px 0 #fff inset;
  70. background: #cfd1cf;
  71. background-image: linear-gradient(to bottom, #f5f5f5, #cfd1cf);
  72. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');
  73. }
  74. .cke_dialog_spinner
  75. {
  76. border-radius: 50%;
  77. width: 12px;
  78. height: 12px;
  79. overflow: hidden;
  80. text-indent: -9999em;
  81. border-top: 2px solid rgba(102, 102, 102, 0.2);
  82. border-right: 2px solid rgba(102, 102, 102, 0.2);
  83. border-bottom: 2px solid rgba(102, 102, 102, 0.2);
  84. border-left: 2px solid rgba(102, 102, 102, 1);
  85. -webkit-animation: dialog_spinner 1s infinite linear;
  86. animation: dialog_spinner 1s infinite linear;
  87. }
  88. /* A GIF fallback for IE8 and IE9 which does not support CSS animations. */
  89. .cke_browser_ie8 .cke_dialog_spinner,
  90. .cke_browser_ie9 .cke_dialog_spinner
  91. {
  92. background: url(images/spinner.gif) center top no-repeat;
  93. width: 16px;
  94. height: 16px;
  95. border: 0;
  96. }
  97. @-webkit-keyframes dialog_spinner
  98. {
  99. 0% {
  100. -webkit-transform: rotate(0deg);
  101. transform: rotate(0deg);
  102. }
  103. 100% {
  104. -webkit-transform: rotate(360deg);
  105. transform: rotate(360deg);
  106. }
  107. }
  108. @keyframes dialog_spinner
  109. {
  110. 0% {
  111. -webkit-transform: rotate(0deg);
  112. transform: rotate(0deg);
  113. }
  114. 100% {
  115. -webkit-transform: rotate(360deg);
  116. transform: rotate(360deg);
  117. }
  118. }
  119. /* The outer part of the dialog contants, which contains the contents body
  120. and the footer. */
  121. .cke_dialog_contents
  122. {
  123. background-color: #fff;
  124. overflow: auto;
  125. padding: 15px 10px 5px 10px;
  126. margin-top: 30px;
  127. border-top: 1px solid #bfbfbf;
  128. border-radius: 0 0 3px 3px;
  129. }
  130. /* The contents body part, which will hold all elements available in the dialog. */
  131. .cke_dialog_contents_body
  132. {
  133. overflow: auto;
  134. padding: 17px 10px 5px 10px;
  135. margin-top: 22px;
  136. }
  137. /* The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
  138. well as a resize handler. */
  139. .cke_dialog_footer
  140. {
  141. text-align: right;
  142. position: relative;
  143. border: none;
  144. outline: 1px solid #bfbfbf;
  145. box-shadow: 0 1px 0 #fff inset;
  146. border-radius: 0 0 2px 2px;
  147. background: #cfd1cf;
  148. background-image: linear-gradient(to bottom, #ebebeb, #cfd1cf);
  149. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');
  150. }
  151. .cke_rtl .cke_dialog_footer
  152. {
  153. text-align: left;
  154. }
  155. .cke_hc .cke_dialog_footer
  156. {
  157. outline: none;
  158. border-top: 1px solid #fff;
  159. }
  160. .cke_dialog .cke_resizer
  161. {
  162. margin-top: 22px;
  163. }
  164. .cke_dialog .cke_resizer_rtl
  165. {
  166. margin-left: 5px;
  167. }
  168. .cke_dialog .cke_resizer_ltr
  169. {
  170. margin-right: 5px;
  171. }
  172. /*
  173. Dialog tabs
  174. -------------
  175. Tabs are presented on some of the dialogs to make it possible to have its
  176. contents split on different groups, visible one after the other.
  177. The main element that holds the tabs can be made hidden, in case of no tabs
  178. available.
  179. The following is the visual representation of the tabs block:
  180. +-- .cke_dialog_tabs ------------------------------------+
  181. | +-- .cke_dialog_tab --+ +-- .cke_dialog_tab --+ ... |
  182. | | | | | |
  183. | +---------------------+ +---------------------+ |
  184. +--------------------------------------------------------+
  185. The .cke_dialog_tab_selected class is appended to the active tab.
  186. */
  187. /* The main tabs container. */
  188. .cke_dialog_tabs
  189. {
  190. height: 24px;
  191. display: inline-block;
  192. margin: 5px 0 0;
  193. position: absolute;
  194. z-index: 2;
  195. left: 10px;
  196. }
  197. .cke_rtl .cke_dialog_tabs
  198. {
  199. right: 10px;
  200. }
  201. /* A single tab (an <a> element). */
  202. a.cke_dialog_tab
  203. {
  204. height: 16px;
  205. padding: 4px 8px;
  206. margin-right: 3px;
  207. display: inline-block;
  208. cursor: pointer;
  209. line-height: 16px;
  210. outline: none;
  211. color: #595959;
  212. border: 1px solid #bfbfbf;
  213. border-radius: 3px 3px 0 0;
  214. background: #d4d4d4;
  215. background-image: linear-gradient(to bottom, #fafafa, #ededed);
  216. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fafafa', endColorstr='#ededed');
  217. }
  218. .cke_rtl a.cke_dialog_tab
  219. {
  220. margin-right: 0;
  221. margin-left: 3px;
  222. }
  223. /* A hover state of a regular inactive tab. */
  224. a.cke_dialog_tab:hover,
  225. a.cke_dialog_tab:focus
  226. {
  227. background: #ebebeb;
  228. background: linear-gradient(to bottom, #ebebeb 0%,#dfdfdf 100%);
  229. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#dfdfdf',GradientType=0 );
  230. }
  231. a.cke_dialog_tab_selected
  232. {
  233. background: #fff;
  234. color: #383838;
  235. border-bottom-color: #fff;
  236. cursor: default;
  237. filter: none;
  238. }
  239. /* A hover state for selected tab. */
  240. a.cke_dialog_tab_selected:hover,
  241. a.cke_dialog_tab_selected:focus,
  242. {
  243. background: #ededed;
  244. background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
  245. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
  246. }
  247. .cke_hc a.cke_dialog_tab:hover,
  248. .cke_hc a.cke_dialog_tab:focus,
  249. .cke_hc a.cke_dialog_tab_selected
  250. {
  251. border: 3px solid;
  252. padding: 2px 6px;
  253. }
  254. a.cke_dialog_tab_disabled
  255. {
  256. color: #bababa;
  257. cursor: default;
  258. }
  259. /* The .cke_single_page class is appended to the dialog outer element in case
  260. of dialogs that has no tabs. */
  261. .cke_single_page .cke_dialog_tabs
  262. {
  263. display: none;
  264. }
  265. .cke_single_page .cke_dialog_contents
  266. {
  267. padding-top: 5px;
  268. margin-top: 0;
  269. border-top: none;
  270. }
  271. /* The close button at the top of the dialog. */
  272. a.cke_dialog_close_button
  273. {
  274. background-image: url(images/close.png);
  275. background-repeat: no-repeat;
  276. background-position: 50%;
  277. position: absolute;
  278. cursor: pointer;
  279. text-align: center;
  280. height: 20px;
  281. width: 20px;
  282. top: 4px;
  283. z-index: 5;
  284. opacity: 0.8;
  285. filter: alpha(opacity = 80);
  286. }
  287. .cke_dialog_close_button:hover
  288. {
  289. opacity: 1;
  290. filter: alpha(opacity = 100);
  291. }
  292. .cke_hidpi .cke_dialog_close_button
  293. {
  294. background-image: url(images/hidpi/close.png);
  295. background-size: 16px;
  296. }
  297. .cke_dialog_close_button span
  298. {
  299. display: none;
  300. }
  301. .cke_hc .cke_dialog_close_button span
  302. {
  303. display: inline;
  304. cursor: pointer;
  305. font-weight: bold;
  306. position: relative;
  307. top: 3px;
  308. }
  309. .cke_ltr .cke_dialog_close_button
  310. {
  311. right: 5px;
  312. }
  313. .cke_rtl .cke_dialog_close_button
  314. {
  315. left: 6px;
  316. }
  317. .cke_dialog_close_button
  318. {
  319. top: 4px;
  320. }
  321. /*
  322. Dialog UI Elements
  323. --------------------
  324. The remaining styles define the UI elements that can be used inside dialog
  325. contents.
  326. Most of the UI elements on dialogs contain a textual label. All of them share
  327. the same labelling structure, having the label text inside an element with
  328. .cke_dialog_ui_labeled_label and the element specific part inside the
  329. .cke_dialog_ui_labeled_content class.
  330. */
  331. /* If an element is supposed to be disabled, the .cke_disabled class is
  332. appended to it. */
  333. div.cke_disabled .cke_dialog_ui_labeled_content div *
  334. {
  335. background-color: #ddd;
  336. cursor: default;
  337. }
  338. /*
  339. Horizontal-Box and Vertical-Box
  340. ---------------------------------
  341. There are basic layou element used by the editor to properly align elements in
  342. the dialog. They're basically tables that have each cell filled by UI elements.
  343. The following is the visual representation of a H-Box:
  344. +-- .cke_dialog_ui_hbox --------------------------------------------------------------------------------+
  345. | +-- .cke_dialog_ui_hbox_first --+ +-- .cke_dialog_ui_hbox_child --+ +-- .cke_dialog_ui_hbox_last --+ |
  346. | + + + + + + |
  347. | +-------------------------------+ +-------------------------------+ +------------------------------+ |
  348. +-------------------------------------------------------------------------------------------------------+
  349. It is possible to have nested V/H-Boxes.
  350. */
  351. .cke_dialog_ui_vbox table,
  352. .cke_dialog_ui_hbox table
  353. {
  354. margin: auto;
  355. }
  356. .cke_dialog_ui_vbox_child
  357. {
  358. padding: 5px 0px;
  359. }
  360. .cke_dialog_ui_hbox
  361. {
  362. width: 100%;
  363. }
  364. .cke_dialog_ui_hbox_first,
  365. .cke_dialog_ui_hbox_child,
  366. .cke_dialog_ui_hbox_last
  367. {
  368. vertical-align: top;
  369. }
  370. .cke_ltr .cke_dialog_ui_hbox_first,
  371. .cke_ltr .cke_dialog_ui_hbox_child
  372. {
  373. padding-right: 10px;
  374. }
  375. .cke_rtl .cke_dialog_ui_hbox_first,
  376. .cke_rtl .cke_dialog_ui_hbox_child
  377. {
  378. padding-left: 10px;
  379. }
  380. .cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
  381. .cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child
  382. {
  383. padding-right: 5px;
  384. }
  385. .cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
  386. .cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child
  387. {
  388. padding-left: 5px;
  389. padding-right: 0;
  390. }
  391. /* Applies to all labeled dialog fields */
  392. .cke_hc div.cke_dialog_ui_input_text,
  393. .cke_hc div.cke_dialog_ui_input_password,
  394. .cke_hc div.cke_dialog_ui_input_textarea,
  395. .cke_hc div.cke_dialog_ui_input_select,
  396. .cke_hc div.cke_dialog_ui_input_file
  397. {
  398. border: 1px solid;
  399. }
  400. /*
  401. Text Input
  402. ------------
  403. The basic text field to input text.
  404. +-- .cke_dialog_ui_text --------------------------+
  405. | +-- .cke_dialog_ui_labeled_label ------------+ |
  406. | | | |
  407. | +--------------------------------------------+ |
  408. | +-- .cke_dialog_ui_labeled_content ----------+ |
  409. | | +-- div.cke_dialog_ui_input_text --------+ | |
  410. | | | +-- input.cke_dialog_ui_input_text --+ | | |
  411. | | | | | | | |
  412. | | | +------------------------------------+ | | |
  413. | | +----------------------------------------+ | |
  414. | +--------------------------------------------+ |
  415. +-------------------------------------------------+
  416. */
  417. /*
  418. Textarea
  419. ----------
  420. The textarea field to input larger text.
  421. +-- .cke_dialog_ui_textarea --------------------------+
  422. | +-- .cke_dialog_ui_labeled_label ----------------+ |
  423. | | | |
  424. | +------------------------------------------------+ |
  425. | +-- .cke_dialog_ui_labeled_content --------------+ |
  426. | | +-- div.cke_dialog_ui_input_textarea --------+ | |
  427. | | | +-- input.cke_dialog_ui_input_textarea --+ | | |
  428. | | | | | | | |
  429. | | | +----------------------------------------+ | | |
  430. | | +--------------------------------------------+ | |
  431. | +------------------------------------------------+ |
  432. +-----------------------------------------------------+
  433. */
  434. textarea.cke_dialog_ui_input_textarea
  435. {
  436. overflow: auto;
  437. resize: none;
  438. }
  439. input.cke_dialog_ui_input_text,
  440. input.cke_dialog_ui_input_password,
  441. textarea.cke_dialog_ui_input_textarea
  442. {
  443. background-color: #fff;
  444. border: 1px solid #c9cccf;
  445. border-top-color: #aeb3b9;
  446. padding: 0px 6px;
  447. outline: none;
  448. width: 100%;
  449. *width: 95%;
  450. box-sizing: border-box;
  451. border-radius: 3px;
  452. box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
  453. height: 22px;
  454. }
  455. input.cke_dialog_ui_input_text:hover,
  456. input.cke_dialog_ui_input_password:hover,
  457. textarea.cke_dialog_ui_input_textarea:hover
  458. {
  459. border: 1px solid #aeb3b9;
  460. border-top-color: #a0a6ad;
  461. }
  462. input.cke_dialog_ui_input_text:focus,
  463. input.cke_dialog_ui_input_password:focus,
  464. textarea.cke_dialog_ui_input_textarea:focus,
  465. select.cke_dialog_ui_input_select:focus
  466. {
  467. outline: none;
  468. border: 1px solid #139ff7;
  469. border-top-color: #1392e9;
  470. }
  471. /*
  472. Button
  473. --------
  474. The buttons used in the dialog footer or inside the contents.
  475. +-- a.cke_dialog_ui_button -----------+
  476. | +-- span.cke_dialog_ui_button --+ |
  477. | | | |
  478. | +-------------------------------+ |
  479. +-------------------------------------+
  480. */
  481. /* The outer part of the button. */
  482. a.cke_dialog_ui_button
  483. {
  484. display: inline-block;
  485. *display: inline;
  486. *zoom: 1;
  487. padding: 4px 0;
  488. margin: 0;
  489. text-align: center;
  490. color: #333;
  491. vertical-align: middle;
  492. cursor: pointer;
  493. border: 1px solid #b6b6b6;
  494. border-bottom-color: #999;
  495. border-radius: 3px;
  496. box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
  497. background: #e4e4e4;
  498. background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);
  499. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
  500. }
  501. span.cke_dialog_ui_button
  502. {
  503. padding: 0 10px;
  504. }
  505. a.cke_dialog_ui_button:hover
  506. {
  507. border-color: #9e9e9e;
  508. background: #ccc;
  509. background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
  510. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
  511. }
  512. /* :focus/:active styles for dialog buttons: regular and footer. */
  513. a.cke_dialog_ui_button:focus,
  514. a.cke_dialog_ui_button:active
  515. {
  516. border-color: #969696;
  517. outline: none;
  518. box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
  519. }
  520. .cke_hc a.cke_dialog_ui_button:hover,
  521. .cke_hc a.cke_dialog_ui_button:focus,
  522. .cke_hc a.cke_dialog_ui_button:active
  523. {
  524. border: 3px solid;
  525. padding-top: 1px;
  526. padding-bottom: 1px;
  527. }
  528. .cke_hc a.cke_dialog_ui_button:hover span,
  529. .cke_hc a.cke_dialog_ui_button:focus span,
  530. .cke_hc a.cke_dialog_ui_button:active span
  531. {
  532. padding-left: 10px;
  533. padding-right: 10px;
  534. }
  535. /*
  536. a.cke_dialog_ui_button[style*="width"]
  537. {
  538. display: block !important;
  539. width: auto !important;
  540. }
  541. */
  542. /* The inner part of the button (both in dialog tabs and dialog footer). */
  543. .cke_dialog_footer_buttons a.cke_dialog_ui_button span
  544. {
  545. color: inherit;
  546. font-size: 12px;
  547. font-weight: bold;
  548. line-height: 18px;
  549. padding: 0 12px;
  550. }
  551. /* Special class appended to the Ok button. */
  552. a.cke_dialog_ui_button_ok
  553. {
  554. color: #fff;
  555. text-shadow: 0 -1px 0 #55830c;
  556. border-color: #62a60a #62a60a #4d9200;
  557. background: #69b10b;
  558. background-image: linear-gradient(to bottom, #9ad717, #69b10b);
  559. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#9ad717', endColorstr='#69b10b');
  560. }
  561. a.cke_dialog_ui_button_ok:hover
  562. {
  563. border-color: #5b9909 #5b9909 #478500;
  564. background: #88be14;
  565. background: linear-gradient(to bottom, #88be14 0%,#5d9c0a 100%);
  566. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88be14', endColorstr='#5d9c0a',GradientType=0 );
  567. }
  568. a.cke_dialog_ui_button_ok.cke_disabled {
  569. border-color: #7D9F51;
  570. background: #8DAD62;
  571. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B3D271), to(#8DAD62));
  572. background-image: -webkit-linear-gradient(top, #B3D271, #8DAD62);
  573. background-image: -o-linear-gradient(top, #B3D271, #8DAD62);
  574. background-image: linear-gradient(to bottom, #B3D271, #8DAD62);
  575. background-image: -moz-linear-gradient(top, #B3D271, #8DAD62);
  576. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#B3D271', endColorstr='#8DAD62');
  577. }
  578. a.cke_dialog_ui_button_ok.cke_disabled span {
  579. color: #E0E8D1;
  580. }
  581. /* Default text shadow used for inner parts of all dialog buttons (both in dialog tabs and dialog footer). */
  582. a.cke_dialog_ui_button span
  583. {
  584. text-shadow: 0 1px 0 #fff;
  585. }
  586. /* Text shadow used for inner part of OK dialog button in footer. */
  587. a.cke_dialog_ui_button_ok span
  588. {
  589. text-shadow: 0 -1px 0 #55830c;
  590. }
  591. span.cke_dialog_ui_button
  592. {
  593. cursor: pointer;
  594. }
  595. /* :focus/:active styles for dialog footer buttons (ok & cancel) */
  596. a.cke_dialog_ui_button_ok:focus,
  597. a.cke_dialog_ui_button_ok:active,
  598. a.cke_dialog_ui_button_cancel:focus,
  599. a.cke_dialog_ui_button_cancel:active
  600. {
  601. border-width: 2px;
  602. padding: 3px 0;
  603. }
  604. a.cke_dialog_ui_button_ok:focus,
  605. a.cke_dialog_ui_button_ok:active
  606. {
  607. border-color: #568C0A;
  608. }
  609. a.cke_dialog_ui_button_ok.cke_disabled:focus,
  610. a.cke_dialog_ui_button_ok.cke_disabled:active
  611. {
  612. border-color: #6F8C49;
  613. }
  614. /* :focus/:active styles for dialog footer buttons (ok & cancel) spans */
  615. a.cke_dialog_ui_button_ok:focus span,
  616. a.cke_dialog_ui_button_ok:active span,
  617. a.cke_dialog_ui_button_cancel:focus span,
  618. a.cke_dialog_ui_button_cancel:active span
  619. {
  620. padding: 0 11px; /* Thick button border must be compensated. */
  621. }
  622. /* A special container that holds the footer buttons. */
  623. .cke_dialog_footer_buttons
  624. {
  625. display: inline-table;
  626. margin: 5px;
  627. width: auto;
  628. position: relative;
  629. vertical-align: middle;
  630. }
  631. /*
  632. Styles for other dialog element types.
  633. */
  634. div.cke_dialog_ui_input_select
  635. {
  636. display: table;
  637. }
  638. select.cke_dialog_ui_input_select
  639. {
  640. height: 25px;
  641. line-height: 25px;
  642. background-color: #fff;
  643. border: 1px solid #c9cccf;
  644. border-top-color: #aeb3b9;
  645. padding: 3px 3px 3px 6px;
  646. outline: none;
  647. border-radius: 3px;
  648. box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
  649. }
  650. .cke_dialog_ui_input_file
  651. {
  652. width: 100%;
  653. height: 25px;
  654. }
  655. .cke_hc .cke_dialog_ui_labeled_content input:focus,
  656. .cke_hc .cke_dialog_ui_labeled_content select:focus,
  657. .cke_hc .cke_dialog_ui_labeled_content textarea:focus
  658. {
  659. outline: 1px dotted;
  660. }
  661. /*
  662. * Some utility CSS classes for dialog authors.
  663. */
  664. .cke_dialog .cke_dark_background
  665. {
  666. background-color: #DEDEDE;
  667. }
  668. .cke_dialog .cke_light_background
  669. {
  670. background-color: #EBEBEB;
  671. }
  672. .cke_dialog .cke_centered
  673. {
  674. text-align: center;
  675. }
  676. .cke_dialog a.cke_btn_reset
  677. {
  678. float: right;
  679. background: url(images/refresh.png) top left no-repeat;
  680. width: 16px;
  681. height: 16px;
  682. border: 1px none;
  683. font-size: 1px;
  684. }
  685. .cke_hidpi .cke_dialog a.cke_btn_reset {
  686. background-size: 16px;
  687. background-image: url(images/hidpi/refresh.png);
  688. }
  689. .cke_rtl .cke_dialog a.cke_btn_reset
  690. {
  691. float: left;
  692. }
  693. .cke_dialog a.cke_btn_locked,
  694. .cke_dialog a.cke_btn_unlocked
  695. {
  696. float: left;
  697. width: 16px;
  698. height: 16px;
  699. background-repeat: no-repeat;
  700. border: none 1px;
  701. font-size: 1px;
  702. }
  703. .cke_dialog a.cke_btn_locked .cke_icon
  704. {
  705. display: none;
  706. }
  707. .cke_rtl .cke_dialog a.cke_btn_locked,
  708. .cke_rtl .cke_dialog a.cke_btn_unlocked
  709. {
  710. float: right;
  711. }
  712. .cke_dialog a.cke_btn_locked
  713. {
  714. background-image: url(images/lock.png);
  715. }
  716. .cke_dialog a.cke_btn_unlocked
  717. {
  718. background-image: url(images/lock-open.png);
  719. }
  720. .cke_hidpi .cke_dialog a.cke_btn_unlocked,
  721. .cke_hidpi .cke_dialog a.cke_btn_locked {
  722. background-size: 16px;
  723. }
  724. .cke_hidpi .cke_dialog a.cke_btn_locked {
  725. background-image: url(images/hidpi/lock.png);
  726. }
  727. .cke_hidpi .cke_dialog a.cke_btn_unlocked {
  728. background-image: url(images/hidpi/lock-open.png);
  729. }
  730. .cke_dialog .cke_btn_over
  731. {
  732. border: outset 1px;
  733. cursor: pointer;
  734. }
  735. /*
  736. The rest of the file contains style used on several common plugins. There is a
  737. tendency that these will be moved to the plugins code in the future.
  738. */
  739. .cke_dialog .ImagePreviewBox
  740. {
  741. border: 2px ridge black;
  742. overflow: scroll;
  743. height: 200px;
  744. width: 300px;
  745. padding: 2px;
  746. background-color: white;
  747. }
  748. .cke_dialog .ImagePreviewBox table td
  749. {
  750. white-space: normal;
  751. }
  752. .cke_dialog .ImagePreviewLoader
  753. {
  754. position: absolute;
  755. white-space: normal;
  756. overflow: hidden;
  757. height: 160px;
  758. width: 230px;
  759. margin: 2px;
  760. padding: 2px;
  761. opacity: 0.9;
  762. filter: alpha(opacity = 90);
  763. background-color: #e4e4e4;
  764. }
  765. .cke_dialog .FlashPreviewBox
  766. {
  767. white-space: normal;
  768. border: 2px ridge black;
  769. overflow: auto;
  770. height: 160px;
  771. width: 390px;
  772. padding: 2px;
  773. background-color: white;
  774. }
  775. .cke_dialog .cke_pastetext
  776. {
  777. width: 346px;
  778. height: 170px;
  779. }
  780. .cke_dialog .cke_pastetext textarea
  781. {
  782. width: 340px;
  783. height: 170px;
  784. resize: none;
  785. }
  786. .cke_dialog iframe.cke_pasteframe
  787. {
  788. width: 346px;
  789. height: 130px;
  790. background-color: white;
  791. border: 1px solid #aeb3b9;
  792. border-radius: 3px;
  793. }
  794. .cke_dialog .cke_hand
  795. {
  796. cursor: pointer;
  797. }
  798. .cke_disabled
  799. {
  800. color: #a0a0a0;
  801. }
  802. .cke_dialog_body .cke_label
  803. {
  804. display: none;
  805. }
  806. .cke_dialog_body label
  807. {
  808. display: inline;
  809. margin-bottom: auto;
  810. cursor: default;
  811. }
  812. .cke_dialog_body label.cke_required
  813. {
  814. font-weight: bold;
  815. }
  816. a.cke_smile
  817. {
  818. overflow: hidden;
  819. display: block;
  820. text-align: center;
  821. padding: 0.3em 0;
  822. }
  823. a.cke_smile img
  824. {
  825. vertical-align: middle;
  826. }
  827. a.cke_specialchar
  828. {
  829. cursor: inherit;
  830. display: block;
  831. height: 1.25em;
  832. padding: 0.2em 0.3em;
  833. text-align: center;
  834. }
  835. a.cke_smile,
  836. a.cke_specialchar
  837. {
  838. border: 1px solid transparent;
  839. }
  840. a.cke_smile:hover,
  841. a.cke_smile:focus,
  842. a.cke_smile:active,
  843. a.cke_specialchar:hover,
  844. a.cke_specialchar:focus,
  845. a.cke_specialchar:active
  846. {
  847. background: #fff;
  848. outline: 0;
  849. }
  850. a.cke_smile:hover,
  851. a.cke_specialchar:hover
  852. {
  853. border-color: #888;
  854. }
  855. a.cke_smile:focus,
  856. a.cke_smile:active,
  857. a.cke_specialchar:focus,
  858. a.cke_specialchar:active
  859. {
  860. border-color: #139FF7;
  861. }
  862. /**
  863. * Styles specific to "cellProperties" dialog.
  864. */
  865. .cke_dialog_contents a.colorChooser
  866. {
  867. display: block;
  868. margin-top: 6px;
  869. margin-left: 10px;
  870. width: 80px;
  871. }
  872. .cke_rtl .cke_dialog_contents a.colorChooser
  873. {
  874. margin-right: 10px;
  875. }
  876. /* Compensate focus outline for some input elements. (#6200) */
  877. .cke_dialog_ui_checkbox_input:focus,
  878. .cke_dialog_ui_radio_input:focus,
  879. .cke_btn_over
  880. {
  881. outline: 1px dotted #696969;
  882. }
  883. .cke_iframe_shim
  884. {
  885. display: block;
  886. position: absolute;
  887. top: 0;
  888. left: 0;
  889. z-index: -1;
  890. filter: alpha(opacity = 0);
  891. width: 100%;
  892. height: 100%;
  893. }