sources/skins/moono/richcombo.css

   1 /*
   2 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.md or http://ckeditor.com/license
   4 */
   5
   6 /*
   7 richcombo.css (part of editor.css)
   8 =================================
   9
  10 This file holds the style set of the "Rich Combo" widget which is commonly used
  11 in the toolbar. It doesn't, however, styles the panel that is displayed when
  12 clicking on the combo, which is instead styled by panel.css.
  13
  14 The visual representation of a rich combo widget looks as follows:
  15
  16 +-- .cke_combo----------------------------------------------------------------------+
  17 | +-- .cke_combo_label --+ +-- .cke_combo_button ---------------------------------+ |
  18 | |                      | | +-- .cke_combo_text --+ +-- .cke_combo_open -------+ | |
  19 | |                      | | |                     | | +-- .cke_combo_arrow --+ | | |
  20 | |                      | | |                     | | |                      | | | |
  21 | |                      | | |                     | | +----------------------+ | | |
  22 | |                      | | +---------------------+ +--------------------------+ | |
  23 | +----------------------+ +------------------------------------------------------+ |
  24 +-----------------------------------------------------------------------------------+
  25 */
  26
  27 /* The box that hold the entire combo widget */
  28 .cke_combo
  29 {
  30         display: inline-block;
  31         float: left;
  32 }
  33
  34 .cke_rtl .cke_combo
  35 {
  36         float: right;
  37 }
  38
  39 .cke_hc .cke_combo
  40 {
  41         margin-top: -2px;
  42 }
  43
  44 /* The label of the combo widget. It is invisible by default, yet
  45    it's important for semantics and accessibility. */
  46 .cke_combo_label
  47 {
  48         display: none;
  49         float: left;
  50         line-height: 26px;
  51         vertical-align: top;
  52         margin-right: 5px;
  53 }
  54
  55 .cke_rtl .cke_combo_label
  56 {
  57         float: right;
  58         margin-left: 5px;
  59         margin-right: 0;
  60 }
  61
  62 /* The container for combo text and arrow. */
  63 a.cke_combo_button
  64 {
  65         cursor: default;
  66         display: inline-block;
  67         float: left;
  68         margin: 0 6px 5px 0;
  69
  70         border: 1px solid #a6a6a6;
  71         border-bottom-color: #979797;
  72
  73         border-radius: 3px;
  74
  75         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;
  76
  77         background: #e4e4e4;
  78         background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);
  79         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
  80 }
  81
  82 /* Different states of the container. */
  83 .cke_combo_off a.cke_combo_button:hover,
  84 .cke_combo_off a.cke_combo_button:focus
  85 {
  86         background: #ccc;
  87         background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
  88         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
  89
  90         outline: none;
  91 }
  92
  93 .cke_combo_off a.cke_combo_button:active,
  94 .cke_combo_on a.cke_combo_button
  95 {
  96         border: 1px solid #777;
  97
  98         box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.6) inset;
  99
 100         background: #b5b5b5;
 101         background-image: linear-gradient(to bottom, #aaa, #cacaca);
 102         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#aaaaaa', endColorstr='#cacaca');
 103 }
 104
 105 .cke_combo_on a.cke_combo_button:hover,
 106 .cke_combo_on a.cke_combo_button:focus,
 107 .cke_combo_on a.cke_combo_button:active
 108 {
 109         box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
 110 }
 111
 112 .cke_rtl .cke_combo_button
 113 {
 114         float: right;
 115         margin-left: 5px;
 116         margin-right: 0;
 117 }
 118
 119 .cke_hc a.cke_combo_button
 120 {
 121         padding: 3px;
 122 }
 123
 124 .cke_hc .cke_combo_on a.cke_combo_button,
 125 .cke_hc .cke_combo_off a.cke_combo_button:hover,
 126 .cke_hc .cke_combo_off a.cke_combo_button:focus,
 127 .cke_hc .cke_combo_off a.cke_combo_button:active
 128 {
 129         border-width: 3px;
 130         padding: 1px;
 131 }
 132
 133 /* The label that shows the current value of the rich combo.
 134    By default, it holds the name of the property.
 135    See: .cke_combo_inlinelabel */
 136 .cke_combo_text
 137 {
 138         line-height: 26px;
 139         padding-left: 10px;
 140         text-overflow: ellipsis;
 141         overflow: hidden;
 142         float: left;
 143         cursor: default;
 144         color: #474747;
 145         text-shadow: 0 1px 0 rgba(255,255,255,.5);
 146     width: 60px;
 147 }
 148
 149 .cke_rtl .cke_combo_text
 150 {
 151         float: right;
 152         text-align: right;
 153         padding-left: 0;
 154         padding-right: 10px;
 155 }
 156
 157 .cke_hc .cke_combo_text
 158 {
 159         line-height: 18px;
 160         font-size: 12px;
 161 }
 162
 163 /* The handler which opens the panel of rich combo properties.
 164    It holds an arrow as a visual indicator. */
 165 .cke_combo_open
 166 {
 167         cursor: default;
 168         display: inline-block;
 169         font-size: 0;
 170         height: 19px;
 171         line-height: 17px;
 172         margin: 1px 7px 1px;
 173         width: 5px;
 174 }
 175
 176 .cke_hc .cke_combo_open
 177 {
 178         height: 12px;
 179 }
 180
 181 /* The arrow which is displayed inside of the .cke_combo_open handler. */
 182 .cke_combo_arrow
 183 {
 184         cursor: default;
 185         margin: 11px 0 0;
 186         float: left;
 187
 188         /* Pure CSS Arrow */
 189         height: 0;
 190         width: 0;
 191         font-size: 0;
 192         border-left: 3px solid transparent;
 193         border-right: 3px solid transparent;
 194         border-top: 3px solid #474747;
 195 }
 196
 197 .cke_hc .cke_combo_arrow
 198 {
 199         font-size: 10px;
 200         width: auto;
 201         border: 0;
 202         margin-top: 3px;
 203 }
 204
 205 /* Disabled combo button styles. */
 206 .cke_combo_disabled .cke_combo_inlinelabel,
 207 .cke_combo_disabled .cke_combo_open
 208 {
 209         opacity: 0.3;
 210 }