]>
Commit | Line | Data |
---|---|---|
7adcb81e | 1 | /*\r |
3b35bd27 | 2 | Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r |
7adcb81e IB |
3 | For licensing, see LICENSE.md or http://ckeditor.com/license\r |
4 | */\r | |
5 | \r | |
6 | /*\r | |
7 | menu.css (part of editor.css)\r | |
8 | ===============================\r | |
9 | \r | |
10 | This file styles menus used in the editor UI. These menus are the list of\r | |
11 | options available inside some "floating panels", like menu buttons of the\r | |
12 | toolbar or the context menu.\r | |
13 | \r | |
14 | Note that the menu itself doesn't include the floating element that holds it.\r | |
15 | That element is styles in the panel.css file.\r | |
16 | \r | |
17 | The 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 | |
29 | This 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 | |
42 | Special 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 | |
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 |