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