sources/skins/moonocolor/toolbar.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 toolbar.css (part of editor.css)
   8 ==================================
   9
  10 This files styles the CKEditor toolbar and its buttons. For toolbar combo
  11 styles, check richcombo.css.
  12
  13 The toolbar is rendered as a big container (called toolbox), which contains
  14 smaller "toolbars". Each toolbar represents a group of items that cannot be
  15 separated. The following is the visual representation of the toolbox.
  16
  17 +-- .cke_toolbox ----------------------------------------------------------+
  18 | +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... +-- .cke_toolbar_break --+ |
  19 | |                  | |                  |     |                        | |
  20 | +------------------+ +------------------+     +------------------------+ |
  21 | +-- .cke_toolbar --+ +-- .cke_toolbar --+ ...                            |
  22 | |                  | |                  |                                |
  23 | +------------------+ +------------------+                                |
  24 +--------------------------------------------------------------------------+
  25
  26 The following instead is the visual representation of a single toolbar:
  27
  28 +-- .cke_toolbar ----------------------------------------------------------------+
  29 | +-- .cke_toolbar_start --+ +-- .cke_toolgroup (*) --+ +-- .cke_toolbar_end --+ |
  30 | |                        | |                        | |                      | |
  31 | +------------------------+ +------------------------+ +----------------------+ |
  32 +--------------------------------------------------------------------------------+
  33 (*) .cke_toolgroup is available only when the toolbar items can be grouped
  34     (buttons). If the items can't be group (combos), this box is not available
  35         and the items are rendered straight in that place.
  36
  37 This file also styles toolbar buttons, which are rendered inside the above
  38 .cke_toolgroup containers. This is the visual representation of a button:
  39
  40 +-- .cke_button -------------------------------------+
  41 | +-- .cke_button_icon --+ +-- .cke_button_label --+ |
  42 | |                      | |                       | |
  43 | +----------------------+ +-----------------------+ |
  44 +----------------------------------------------------+
  45
  46 Special outer level classes used in this file:
  47
  48         .cke_hc: Available when the editor is rendered on "High Contrast".
  49         .cke_rtl: Available when the editor UI is on RTL.
  50 */
  51
  52 /* The box that holds each toolbar. */
  53 .cke_toolbar
  54 {
  55         float: left;
  56 }
  57
  58 .cke_rtl .cke_toolbar
  59 {
  60         float: right;
  61 }
  62
  63 /* The box that holds buttons. */
  64 .cke_toolgroup
  65 {
  66         float: left;
  67         margin: 0 6px 5px 0;
  68         border: 1px solid #a6a6a6;
  69         border-bottom-color: #979797;
  70
  71         border-radius: 3px;
  72
  73         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;
  74
  75         background: #e4e4e4;
  76         background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);
  77         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
  78 }
  79
  80 .cke_hc .cke_toolgroup
  81 {
  82         border: 0;
  83         margin-right: 10px;
  84         margin-bottom: 10px;
  85 }
  86
  87 .cke_rtl .cke_toolgroup
  88 {
  89         float: right;
  90         margin-left: 6px;
  91         margin-right: 0;
  92 }
  93
  94 /* A toolbar button . */
  95 a.cke_button
  96 {
  97         display: inline-block;
  98         height: 18px;
  99         padding: 4px 6px;
 100         outline: none;
 101         cursor: default;
 102         float: left;
 103         border: 0;
 104 }
 105
 106 .cke_ltr .cke_button:last-child,
 107 .cke_rtl .cke_button:first-child
 108 {
 109         /* Don't distort parent's rounded border. */
 110         border-radius: 0 2px 2px 0;
 111 }
 112
 113 .cke_ltr .cke_button:first-child,
 114 .cke_rtl .cke_button:last-child
 115 {
 116         /* Don't distort parent's rounded border. */
 117         border-radius: 2px 0 0 2px;
 118 }
 119
 120 .cke_rtl .cke_button
 121 {
 122         float: right;
 123 }
 124
 125 .cke_hc .cke_button
 126 {
 127         border: 1px solid black;
 128
 129         /* Compensate the added border */
 130         padding: 3px 5px;
 131         margin: -2px 4px 0 -2px;
 132 }
 133
 134 /* This class is applied to the button when it is "active" (pushed).
 135    This style indicates that the feature associated with the button is active
 136    i.e. currently writing in bold or when spell checking is enabled. */
 137 a.cke_button_on
 138 {
 139         box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
 140
 141         background: #b5b5b5;
 142         background-image: linear-gradient(to bottom, #aaa, #cacaca);
 143         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#aaaaaa', endColorstr='#cacaca');
 144 }
 145
 146 .cke_hc .cke_button_on,
 147 .cke_hc a.cke_button_off:hover,
 148 .cke_hc a.cke_button_off:focus,
 149 .cke_hc a.cke_button_off:active,
 150 .cke_hc a.cke_button_disabled:hover,
 151 .cke_hc a.cke_button_disabled:focus,
 152 .cke_hc a.cke_button_disabled:active
 153 {
 154         border-width: 3px;
 155
 156         /* Compensate the border change */
 157         padding: 1px 3px;
 158 }
 159
 160 /* This class is applied to the button when the feature associated with the
 161    button cannot be used (grayed-out).
 162    i.e. paste button remains disabled when there is nothing in the clipboard to
 163    be pasted. */
 164 .cke_button_disabled .cke_button_icon
 165 {
 166         opacity: 0.3;
 167 }
 168
 169 .cke_hc .cke_button_disabled
 170 {
 171         opacity: 0.5;
 172 }
 173
 174 a.cke_button_on:hover,
 175 a.cke_button_on:focus,
 176 a.cke_button_on:active
 177 {
 178         box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
 179 }
 180
 181 a.cke_button_off:hover,
 182 a.cke_button_off:focus,
 183 a.cke_button_off:active,
 184 a.cke_button_disabled:hover,
 185 a.cke_button_disabled:focus,
 186 a.cke_button_disabled:active
 187 {
 188         box-shadow: 0 0 1px rgba(0,0,0,.3) inset;
 189
 190         background: #ccc;
 191         background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
 192         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
 193 }
 194
 195 /* The icon which is a visual representation of the button. */
 196 .cke_button_icon
 197 {
 198         cursor: inherit;
 199         background-repeat: no-repeat;
 200         margin-top: 1px;
 201         width: 16px;
 202         height: 16px;
 203         float: left;
 204         display: inline-block;
 205 }
 206
 207 .cke_rtl .cke_button_icon
 208 {
 209         float: right;
 210 }
 211
 212 .cke_hc .cke_button_icon
 213 {
 214         display: none;
 215 }
 216
 217 /* The label of the button that stores the name of the feature. By default,
 218    labels are invisible. They can be revealed on demand though. */
 219 .cke_button_label
 220 {
 221         display: none;
 222         padding-left: 3px;
 223         margin-top: 1px;
 224         line-height: 17px;
 225         vertical-align: middle;
 226         float: left;
 227         cursor: default;
 228         color: #474747;
 229         text-shadow: 0 1px 0 rgba(255,255,255,.5);
 230 }
 231
 232 .cke_rtl .cke_button_label
 233 {
 234         padding-right: 3px;
 235         padding-left: 0;
 236         float: right;
 237 }
 238
 239 .cke_hc .cke_button_label
 240 {
 241         padding: 0;
 242         display: inline-block;
 243         font-size: 12px;
 244 }
 245
 246 /* The small arrow available on buttons that can be expanded
 247    (e.g. the color buttons). */
 248 .cke_button_arrow
 249 {
 250         /* Arrow in CSS */
 251         display: inline-block;
 252         margin: 8px 0 0 1px;
 253         width: 0;
 254         height: 0;
 255         cursor: default;
 256         vertical-align: top;
 257         border-left: 3px solid transparent;
 258         border-right: 3px solid transparent;
 259         border-top: 3px solid #474747;
 260 }
 261
 262 .cke_rtl .cke_button_arrow
 263 {
 264         margin-right: 5px;
 265         margin-left: 0;
 266 }
 267
 268 .cke_hc .cke_button_arrow
 269 {
 270         font-size: 10px;
 271         margin: 3px -2px 0 3px;
 272         width: auto;
 273         border: 0;
 274 }
 275
 276 /* The vertical separator which is used within a single toolbar to split
 277    buttons into sub-groups. */
 278 .cke_toolbar_separator
 279 {
 280         float: left;
 281         background-color: #c0c0c0;
 282         background-color: rgba(0,0,0,.2);
 283         margin: 5px 2px 0;
 284         height: 18px;
 285         width: 1px;
 286
 287         box-shadow: 1px 0 1px rgba(255,255,255,.5);
 288 }
 289
 290 .cke_rtl .cke_toolbar_separator
 291 {
 292         float: right;
 293
 294         box-shadow: -1px 0 1px rgba(255,255,255,.1);
 295 }
 296
 297 .cke_hc .cke_toolbar_separator
 298 {
 299         width: 0;
 300         border-left: 1px solid;
 301         margin: 1px 5px 0 0px;
 302 }
 303
 304 /* The dummy element that breaks toolbars.
 305    Once it is placed, the very next toolbar is moved to the new row. */
 306 .cke_toolbar_break
 307 {
 308         display: block;
 309         clear: left;
 310 }
 311
 312 .cke_rtl .cke_toolbar_break
 313 {
 314         clear: right;
 315 }
 316
 317 /* The button, which when clicked hides (collapses) all the toolbars. */
 318 a.cke_toolbox_collapser
 319 {
 320         width: 12px;
 321         height: 11px;
 322         float: right;
 323         margin: 11px 0 0;
 324         font-size: 0;
 325         cursor: default;
 326         text-align: center;
 327
 328         border: 1px solid #a6a6a6;
 329         border-bottom-color: #979797;
 330
 331         border-radius: 3px;
 332
 333         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;
 334
 335         background: #e4e4e4;
 336         background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);
 337         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
 338 }
 339
 340 .cke_toolbox_collapser:hover
 341 {
 342         background: #ccc;
 343         background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
 344         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
 345 }
 346
 347 .cke_toolbox_collapser.cke_toolbox_collapser_min
 348 {
 349         margin: 0 2px 4px;
 350 }
 351
 352 .cke_rtl .cke_toolbox_collapser
 353 {
 354         float: left;
 355 }
 356
 357 /* The CSS arrow, which belongs to the toolbar collapser. */
 358 .cke_toolbox_collapser .cke_arrow
 359 {
 360         display: inline-block;
 361
 362         /* Pure CSS Arrow */
 363         height: 0;
 364         width: 0;
 365         font-size: 0;
 366         margin-top: 1px;
 367         border-left: 3px solid transparent;
 368         border-right: 3px solid transparent;
 369         border-bottom: 3px solid #474747;
 370         border-top: 3px solid transparent;
 371 }
 372
 373 .cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow
 374 {
 375         margin-top: 4px;
 376         border-bottom-color: transparent;
 377         border-top-color: #474747;
 378 }
 379
 380 .cke_hc .cke_toolbox_collapser .cke_arrow
 381 {
 382         font-size: 8px;
 383         width: auto;
 384         border: 0;
 385         margin-top: 0;
 386         margin-right: 2px;
 387 }