]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/skins/moono/menu.css
0c1ab59d0568f28a4d969099354ad6e70367a644
2 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.md or http://ckeditor.com/license
7 menu.css (part of editor.css)
8 ===============================
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.
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.
17 The following is a visual representation of the main elements of a menu:
19 +-- .cke_menu -----------------+
20 | +-- .cke_menuitem --------+ |
21 | | +-- .cke_menubutton ---+ | |
23 | | +----------------------+ | |
24 | +--------------------------+ |
25 | +-- .cke_menuseparator ----+ |
27 +------------------------------+
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.)
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 +--------------------------------------------------------------------------------------------+
42 Special outer level classes used in this file:
44 .cke_hc: Available when the editor is rendered on "High Contrast".
45 .cke_rtl: Available when the editor UI is on RTL.
48 /* .cke_menuitem is the element that holds the entire structure of each of the
53 /* The "button" inside a menu item is a <a> element.
54 Transforms it into a block. */
60 /* Avoid the text selection cursor inside menu items. */
64 .cke_menubutton:hover
,
65 .cke_menubutton:focus
,
66 .cke_menubutton:active
68 background-color: #D3D3D3;
72 .cke_hc
.cke_menubutton
77 .cke_hc
.cke_menubutton:hover
,
78 .cke_hc
.cke_menubutton:focus
,
79 .cke_hc
.cke_menubutton:active
85 .cke_menubutton_inner {
90 .cke_menubutton_label
,
95 /* The menu item icon. */
98 background-color: #D7D8D7;
99 opacity: 0.70; /* Safari, Opera and Mozilla */
100 filter: alpha
(opacity
=70); /* IE */
104 .cke_hc
.cke_menubutton_icon
111 .cke_menubutton:hover
.cke_menubutton_icon
,
112 .cke_menubutton:focus
.cke_menubutton_icon
,
113 .cke_menubutton:active
.cke_menubutton_icon
115 background-color: #D0D2D0;
118 .cke_menubutton_disabled:hover
.cke_menubutton_icon
,
119 .cke_menubutton_disabled:focus
.cke_menubutton_icon
,
120 .cke_menubutton_disabled:active
.cke_menubutton_icon
122 /* The icon will get opacity as well when hovered. */
124 filter: alpha
(opacity
=30);
127 /* The textual part of each menu item. */
128 .cke_menubutton_label
131 background-color: transparent
;
133 vertical-align: middle
;
136 /* Keyboard shortcut placed next to the label. */
137 .cke_menubutton_shortcut
142 .cke_menubutton_disabled
.cke_menubutton_label
144 /* Greyed label text indicates a disabled menu item. */
146 filter: alpha
(opacity
=30);
151 border: 1px solid
#dedede;
152 background-color: #f2f2f2;
154 box-shadow: 0 0 2px rgba
(0,0,0,.1) inset
;
157 .cke_menubutton_on
.cke_menubutton_icon
162 .cke_menubutton:hover
,
163 .cke_menubutton:focus
,
164 .cke_menubutton:active
166 background-color: #EFF0EF;
169 .cke_panel_frame
.cke_menubutton_label
174 /* The separator used to separate menu item groups. */
177 background-color: #D3D3D3;
179 filter: alpha
(opacity
=70); /* IE */
180 opacity: 0.70; /* Safari, Opera and Mozilla */
183 /* The small arrow shown for item with sub-menus. */
186 background-image: url
(images/arrow.png);
187 background-position: 0 10px;
188 background-repeat: no-repeat
;
192 .cke_rtl
.cke_menuarrow
194 background-position: 5px -13px;
195 background-repeat: no-repeat
;
203 .cke_hc
.cke_menuarrow span
205 vertical-align: middle
;