sources/skins/moonocolor/colorpanel.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 colorpanel.css (part of editor.css)
   8 =====================================
   9
  10 The color panel is related to the contents part of the panels that are
  11 displayed when clicking the color buttons of the toolbar. See panels.css for
  12 styles related to the outer part of panels.
  13
  14 The following is the visual representation of the color panel contents:
  15
  16 +-- .cke_panel_block.cke_colorblock --+
  17 | +-- a.cke_colorauto --------------+ |
  18 | |                                 | |
  19 | |         AUTOMATIC COLOR         | |
  20 | |                                 | |
  21 | +---------------------------------+ |
  22 | +-- table ------------------------+ |
  23 | |                                 | |
  24 | |          COLOR PALETTE          | |
  25 | |                                 | |
  26 | |---------------------------------| |
  27 | |          "More Colors"          | |
  28 | +---------------------------------+ |
  29 +-------------------------------------+
  30
  31 The AUTOMATIC COLOR section is an <a> containing a table with two cells with
  32 the following contents:
  33
  34 +-- TD -----------------+ +-- TD -----------------+
  35 | +-- .cke_colorbox --+ | |                       |
  36 | |                   | | |      "Automatic"      |
  37 | +-------------------+ | |                       |
  38 +-----------------------+ +-----------------------+
  39
  40 The COLOR PALETTE section instead is a table with a variable number of cells
  41 (by default 8). Each cell represents a color box, with the following structure:
  42
  43 +-- A.cke_colorbox ---------+
  44 | +-- SPAN.cke_colorbox --+ |
  45 | |                       | |
  46 | +-----------------------+ |
  47 +---------------------------+
  48 */
  49
  50 /* The container of the color palette. */
  51 .cke_colorblock
  52 {
  53         padding: 3px;
  54         font-size: 11px;
  55         font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif;
  56 }
  57
  58 .cke_colorblock,
  59 .cke_colorblock a
  60 {
  61         text-decoration: none;
  62         color: #000;
  63 }
  64
  65 /* The box which is to represent a single color on the color palette.
  66    It is a small, square-shaped element which can be selected from the palette. */
  67 span.cke_colorbox
  68 {
  69         width: 10px;
  70         height: 10px;
  71         border: #808080 1px solid;
  72         float: left;
  73 }
  74
  75 .cke_rtl span.cke_colorbox
  76 {
  77         float: right;
  78 }
  79
  80 /* The wrapper of the span.cke_colorbox. It provides an extra border and padding. */
  81 a.cke_colorbox
  82 {
  83         border: #fff 1px solid;
  84         padding: 2px;
  85         float: left;
  86         width: 12px;
  87         height: 12px;
  88 }
  89
  90 .cke_rtl a.cke_colorbox
  91 {
  92         float: right;
  93 }
  94
  95 /* Different states of the a.cke_colorbox wrapper. */
  96 a:hover.cke_colorbox,
  97 a:focus.cke_colorbox,
  98 a:active.cke_colorbox
  99 {
 100         border: #b6b6b6 1px solid;
 101         background-color: #e5e5e5;
 102 }
 103
 104 /* Buttons which are visible at the top/bottom of the color palette:
 105    - cke_colorauto (TOP) applies the automatic color.
 106    - cke_colormore (BOTTOM) executes the color dialog.
 107 */
 108 a.cke_colorauto,
 109 a.cke_colormore
 110 {
 111         border: #fff 1px solid;
 112         padding: 2px;
 113         display: block;
 114         cursor: pointer;
 115 }
 116
 117 /* Different states of cke_colorauto/cke_colormore buttons. */
 118 a:hover.cke_colorauto,
 119 a:hover.cke_colormore,
 120 a:focus.cke_colorauto,
 121 a:focus.cke_colormore,
 122 a:active.cke_colorauto,
 123 a:active.cke_colormore
 124 {
 125         border: #b6b6b6 1px solid;
 126         background-color: #e5e5e5;
 127 }