sources/skins/moono/menu.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 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 /* Keyboard shortcut placed next to the label. */
 137 .cke_menubutton_shortcut
 138 {
 139         color: #979797;
 140 }
 141
 142 .cke_menubutton_disabled .cke_menubutton_label
 143 {
 144         /* Greyed label text indicates a disabled menu item. */
 145         opacity: 0.3;
 146         filter: alpha(opacity=30);
 147 }
 148
 149 .cke_menubutton_on
 150 {
 151         border: 1px solid #dedede;
 152         background-color: #f2f2f2;
 153
 154         box-shadow: 0 0 2px rgba(0,0,0,.1) inset;
 155 }
 156
 157 .cke_menubutton_on .cke_menubutton_icon
 158 {
 159         padding-right: 3px;
 160 }
 161
 162 .cke_menubutton:hover,
 163 .cke_menubutton:focus,
 164 .cke_menubutton:active
 165 {
 166         background-color: #EFF0EF;
 167 }
 168
 169 .cke_panel_frame .cke_menubutton_label
 170 {
 171         display: none;
 172 }
 173
 174 /* The separator used to separate menu item groups. */
 175 .cke_menuseparator
 176 {
 177         background-color: #D3D3D3;
 178         height: 1px;
 179         filter: alpha(opacity=70); /* IE */
 180         opacity: 0.70; /* Safari, Opera and Mozilla */
 181 }
 182
 183 /* The small arrow shown for item with sub-menus. */
 184 .cke_menuarrow
 185 {
 186         background-image: url(images/arrow.png);
 187         background-position: 0 10px;
 188         background-repeat: no-repeat;
 189         padding: 0 5px;
 190 }
 191
 192 .cke_rtl .cke_menuarrow
 193 {
 194         background-position: 5px -13px;
 195         background-repeat: no-repeat;
 196 }
 197
 198 .cke_menuarrow span
 199 {
 200         display: none;
 201 }
 202
 203 .cke_hc .cke_menuarrow span
 204 {
 205         vertical-align: middle;
 206         display: inline;
 207 }