sources/skins/moonocolor/menu.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 menu.css (part of editor.css)
   8 ===============================
   9
  10 This file styles menus used in the editor UI. These menus are the list of
  11 options available inside some "floating panels", like menu buttons of the
  12 toolbar or the context menu.
  13
  14 Note that the menu itself doesn't include the floating element that holds it.
  15 That element is styles in the panel.css file.
  16
  17 The following is a visual representation of the main elements of a menu:
  18
  19 +-- .cke_menu -----------------+
  20 | +-- .cke_menuitem  --------+ |
  21 | | +-- .cke_menubutton ---+ | |
  22 | | |                      | | |
  23 | | +----------------------+ | |
  24 | +--------------------------+ |
  25 | +-- .cke_menuseparator ----+ |
  26 | ...                          |
  27 +------------------------------+
  28
  29 This is the .cke_menubutton structure:
  30 (Note that the menu button icon shares with toolbar button the common class .cke_button_icon to achieve the same outlook.)
  31
  32 +-- .cke_menubutton -------------------------------------------------------------------------+
  33 | +-- .cke_menubutton_inner ---------------------------------------------------------------+ |
  34 | | +-- .cke_menubutton_icon ---+ +-- .cke_menubutton_label --+ +-- .cke_cke_menuarrow --+ | |
  35 | | | +-- .cke_button_icon ---+ | |                           | |                        | | |
  36 | | | |                       | | |                           | |                        | | |
  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         .cke_rtl: Available when the editor UI is on RTL.
  46 */
  47
  48 /* .cke_menuitem is the element that holds the entire structure of each of the
  49    menu items. */
  50
  51 .cke_menubutton
  52 {
  53         /* The "button" inside a menu item is a <a> element.
  54            Transforms it into a block. */
  55         display: block;
  56 }
  57
  58 .cke_menuitem span
  59 {
  60         /* Avoid the text selection cursor inside menu items. */
  61         cursor: default;
  62 }
  63
  64 .cke_menubutton:hover,
  65 .cke_menubutton:focus,
  66 .cke_menubutton:active
  67 {
  68         background-color: #D3D3D3;
  69         display: block;
  70 }
  71
  72 .cke_hc .cke_menubutton
  73 {
  74         padding: 2px;
  75 }
  76
  77 .cke_hc .cke_menubutton:hover,
  78 .cke_hc .cke_menubutton:focus,
  79 .cke_hc .cke_menubutton:active
  80 {
  81         border: 2px solid;
  82         padding: 0;
  83 }
  84
  85 .cke_menubutton_inner {
  86         display: table-row;
  87 }
  88
  89 .cke_menubutton_icon,
  90 .cke_menubutton_label,
  91 .cke_menuarrow {
  92         display: table-cell;
  93 }
  94
  95 /* The menu item icon. */
  96 .cke_menubutton_icon
  97 {
  98         background-color: #D7D8D7;
  99         opacity: 0.70; /* Safari, Opera and Mozilla */
 100         filter: alpha(opacity=70); /* IE */
 101         padding: 4px;
 102 }
 103
 104 .cke_hc .cke_menubutton_icon
 105 {
 106         height: 16px;
 107         width: 0;
 108         padding: 4px 0;
 109 }
 110
 111 .cke_menubutton:hover .cke_menubutton_icon,
 112 .cke_menubutton:focus .cke_menubutton_icon,
 113 .cke_menubutton:active .cke_menubutton_icon
 114 {
 115         background-color: #D0D2D0;
 116 }
 117
 118 .cke_menubutton_disabled:hover .cke_menubutton_icon,
 119 .cke_menubutton_disabled:focus .cke_menubutton_icon,
 120 .cke_menubutton_disabled:active .cke_menubutton_icon
 121 {
 122         /* The icon will get opacity as well when hovered. */
 123         opacity: 0.3;
 124         filter: alpha(opacity=30);
 125 }
 126
 127 /* The textual part of each menu item. */
 128 .cke_menubutton_label
 129 {
 130         padding: 0 5px;
 131         background-color: transparent;
 132         width: 100%;
 133         vertical-align: middle;
 134 }
 135
 136 .cke_menubutton_disabled .cke_menubutton_label
 137 {
 138         /* Greyed label text indicates a disabled menu item. */
 139         opacity: 0.3;
 140         filter: alpha(opacity=30);
 141 }
 142
 143 .cke_menubutton_on
 144 {
 145         border: 1px solid #dedede;
 146         background-color: #f2f2f2;
 147
 148         box-shadow: 0 0 2px rgba(0,0,0,.1) inset;
 149 }
 150
 151 .cke_menubutton_on .cke_menubutton_icon
 152 {
 153         padding-right: 3px;
 154 }
 155
 156 .cke_menubutton:hover,
 157 .cke_menubutton:focus,
 158 .cke_menubutton:active
 159 {
 160         background-color: #EFF0EF;
 161 }
 162
 163 .cke_panel_frame .cke_menubutton_label
 164 {
 165         display: none;
 166 }
 167
 168 /* The separator used to separate menu item groups. */
 169 .cke_menuseparator
 170 {
 171         background-color: #D3D3D3;
 172         height: 1px;
 173         filter: alpha(opacity=70); /* IE */
 174         opacity: 0.70; /* Safari, Opera and Mozilla */
 175 }
 176
 177 /* The small arrow shown for item with sub-menus. */
 178 .cke_menuarrow
 179 {
 180         background-image: url(images/arrow.png);
 181         background-position: 0 10px;
 182         background-repeat: no-repeat;
 183         padding: 0 5px;
 184 }
 185
 186 .cke_rtl .cke_menuarrow
 187 {
 188         background-position: 5px -13px;
 189         background-repeat: no-repeat;
 190 }
 191
 192 .cke_menuarrow span
 193 {
 194         display: none;
 195 }
 196
 197 .cke_hc .cke_menuarrow span
 198 {
 199         vertical-align: middle;
 200         display: inline;
 201 }