sources/skins/moonocolor/mainui.css

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