mainui.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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. mainui.css (part of editor.css)
  7. =================================
  8. This file styles the basic structure of the CKEditor user interface - the box
  9. that holds everything.
  10. CKEditor offers two main editing modes. The main UI blocks that compose these
  11. modes are:
  12. For "Theme UI" mode, the one most generally used:
  13. +-- .cke_chrome ----------------------+
  14. |+-- .cke_inner ---------------------+|
  15. || +-- .cke_top -------------------+ ||
  16. || | | ||
  17. || +-------------------------------+ ||
  18. || +-- .cke_contents --------------+ ||
  19. || | | ||
  20. || +-------------------------------+ ||
  21. || +-- .cke_bottom ----------------+ ||
  22. || | | ||
  23. || +-------------------------------+ ||
  24. |+-----------------------------------+|
  25. +-------------------------------------+
  26. For "Inline Editing" mode:
  27. +-- .cke_chrome .cke_float------------+
  28. |+-- .cke_inner ---------------------+|
  29. || +-- .cke_top -------------------+ ||
  30. || | | ||
  31. || +-------------------------------+ ||
  32. |+-----------------------------------+|
  33. +-------------------------------------+
  34. Special outer level classes used in this file:
  35. .cke_hc: Available when the editor is rendered on "High Contrast".
  36. */
  37. /* The outer boundary of the interface. */
  38. .cke_chrome
  39. {
  40. /* This is <span>, so transform it into a block.*/
  41. display: block;
  42. border: 1px solid #b6b6b6;
  43. padding: 0;
  44. box-shadow: 0 0 3px rgba(0,0,0,.15);
  45. }
  46. /* The inner boundary of the interface. */
  47. .cke_inner
  48. {
  49. /* This is <span>, so transform it into a block.*/
  50. display: block;
  51. -webkit-touch-callout: none;
  52. background: #fff;
  53. padding: 0;
  54. }
  55. /* Added to the outer boundary of the UI when in inline editing,
  56. when the UI is floating. */
  57. .cke_float
  58. {
  59. /* Make white the space between the outer and the inner borders. */
  60. border: none;
  61. }
  62. .cke_float .cke_inner
  63. {
  64. /* As we don't have blocks following top (toolbar) we suppress the padding
  65. as the toolbar defines its own margin. */
  66. padding-bottom: 0;
  67. }
  68. /* Make the main spaces enlarge to hold potentially floated content. */
  69. .cke_top,
  70. .cke_contents,
  71. .cke_bottom
  72. {
  73. /* These are <span>s, so transform them into blocks.*/
  74. display: block;
  75. /* Ideally this should be "auto", but it shows scrollbars in IE7. */
  76. overflow: hidden;
  77. }
  78. .cke_top
  79. {
  80. /*border: 1px solid #b2b2b2;*/
  81. border-bottom: 1px solid #b6b6b6;
  82. padding: 6px 8px 2px;
  83. /* Allow breaking toolbars when in a narrow editor. (#9947) */
  84. white-space: normal;
  85. box-shadow: 0 1px 0 #fff inset;
  86. background: #cfd1cf;
  87. background-image: linear-gradient(to bottom, #f5f5f5, #cfd1cf);
  88. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');
  89. }
  90. .cke_float .cke_top
  91. {
  92. border: 1px solid #b6b6b6;
  93. border-bottom-color: #999;
  94. }
  95. .cke_bottom
  96. {
  97. padding: 6px 8px 2px;
  98. position: relative;
  99. border-top: 1px solid #bfbfbf;
  100. box-shadow: 0 1px 0 #fff inset;
  101. background: #cfd1cf;
  102. background-image: linear-gradient(to bottom, #ebebeb, #cfd1cf);
  103. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');
  104. }
  105. /* On iOS we need to manually enable scrolling in the contents block. (#9945) */
  106. .cke_browser_ios .cke_contents
  107. {
  108. overflow-y: auto;
  109. -webkit-overflow-scrolling: touch;
  110. }
  111. /* The resizer is the small UI element that is rendered at the bottom right
  112. part of the editor. It makes is possible to resize the editor UI. */
  113. .cke_resizer
  114. {
  115. /* To avoid using images for the resizer, we create a small triangle,
  116. using some CSS magic. */
  117. width: 0;
  118. height: 0;
  119. overflow: hidden;
  120. width: 0;
  121. height: 0;
  122. overflow: hidden;
  123. border-width: 10px 10px 0 0;
  124. border-color: transparent #666 transparent transparent;
  125. border-style: dashed solid dashed dashed;
  126. font-size: 0;
  127. vertical-align: bottom;
  128. margin-top: 6px;
  129. /* A margin in case of no other element in the same container
  130. to keep a distance to the bottom edge. */
  131. margin-bottom: 2px;
  132. box-shadow: 0 1px 0 rgba(255,255,255,.3);
  133. }
  134. .cke_hc .cke_resizer
  135. {
  136. font-size: 15px;
  137. width: auto;
  138. height: auto;
  139. border-width: 0;
  140. }
  141. .cke_resizer_ltr
  142. {
  143. cursor: se-resize;
  144. float: right;
  145. margin-right: -4px;
  146. }
  147. /* This class is added in RTL mode. This is a special case for the resizer
  148. (usually the .cke_rtl class is used), because it may not necessarily be in
  149. RTL mode if the main UI is RTL. It depends instead on the context where the
  150. editor is inserted on. */
  151. .cke_resizer_rtl
  152. {
  153. border-width: 10px 0 0 10px;
  154. border-color: transparent transparent transparent #A5A5A5;
  155. border-style: dashed dashed dashed solid;
  156. cursor: sw-resize;
  157. float: left;
  158. margin-left: -4px;
  159. right: auto;
  160. }
  161. /* The editing area (where users type) can be rendered as an editable <div>
  162. element (e.g. divarea plugin). In that case, this is the class applied to
  163. that element. */
  164. .cke_wysiwyg_div
  165. {
  166. display: block;
  167. height: 100%;
  168. overflow: auto;
  169. padding: 0 8px;
  170. outline-style: none;
  171. box-sizing: border-box;
  172. }