]>
Commit | Line | Data |
---|---|---|
c63493c8 | 1 | /*\r |
7183f6a6 | 2 | Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r |
c63493c8 IB |
3 | For licensing, see LICENSE.md or http://ckeditor.com/license\r |
4 | */\r | |
5 | \r | |
6 | /*\r | |
7 | panel.css (part of editor.css)\r | |
8 | ================================\r | |
9 | \r | |
10 | Panels are floating elements that can hold different types of contents.\r | |
11 | The following are common uses of it:\r | |
12 | \r | |
13 | - The element that toolbar combos display when opening them.\r | |
14 | - The context menu.\r | |
15 | - The list of items displayed by "menu buttons" (e.g. scayt).\r | |
16 | - The panel shown when opening "panel buttons" (e.g. color buttons).\r | |
17 | \r | |
18 | Panel contents are wrapped into an iframe, so it is possible to have additional\r | |
19 | CSS loaded inside them (e.g. to have more accurate preview on the styles combo).\r | |
20 | \r | |
21 | The following is a visual representation of the outer elements of a panel:\r | |
22 | \r | |
23 | +-- .cke_panel(*) ---------------------+\r | |
24 | | +-- IFRAME.cke_panel_frame --------+ |\r | |
25 | | | +-- HTML.cke_panel_container --+ | |\r | |
26 | | | | +-- .cke_panel_block ------+ | | |\r | |
27 | | | | | | | | |\r | |
28 | | | | | (contents here) | | | |\r | |
29 | | | | | | | | |\r | |
30 | | | | +--------------------------+ | | |\r | |
31 | | | +------------------------------+ | |\r | |
32 | | +----------------------------------+ |\r | |
33 | +--------------------------------------+\r | |
34 | \r | |
35 | (*) All kinds of panel share the above structure. Menu panels adds the\r | |
36 | .cke_menu_panel class to the outer element, while toolbar combos add the\r | |
37 | .cke_combopanel class.\r | |
38 | \r | |
39 | This file also defines styles for panel lists (used by combos). For menu-like\r | |
40 | panel contents and color panels check menu.css and colorpanel.css.\r | |
41 | */\r | |
42 | \r | |
43 | /* The box that holds an IFRAME. It's inserted into a host document and positioned\r | |
44 | absolutely by the application. It floats above the host document/editor. */\r | |
45 | .cke_panel\r | |
46 | {\r | |
47 | /* Restore the loading hide */\r | |
48 | visibility: visible;\r | |
49 | width: 120px;\r | |
50 | height: 100px;\r | |
51 | overflow: hidden;\r | |
52 | \r | |
53 | background-color: #fff;\r | |
54 | border: 1px solid #b6b6b6;\r | |
55 | border-bottom-color: #999;\r | |
56 | \r | |
57 | border-radius: 3px;\r | |
58 | \r | |
59 | box-shadow: 0 0 3px rgba(0,0,0,.15);\r | |
60 | }\r | |
61 | \r | |
62 | /* This class represents panels which are used as context menus. */\r | |
63 | .cke_menu_panel\r | |
64 | {\r | |
65 | padding: 0;\r | |
66 | margin: 0;\r | |
67 | }\r | |
68 | \r | |
69 | /* This class represents panels which are used by rich combos. */\r | |
70 | .cke_combopanel\r | |
71 | {\r | |
72 | width: 150px;\r | |
73 | height: 170px;\r | |
74 | }\r | |
75 | \r | |
76 | /* The IFRAME the panel is wrapped into. */\r | |
77 | .cke_panel_frame\r | |
78 | {\r | |
79 | width: 100%;\r | |
80 | height: 100%;\r | |
81 | font-size: 12px;\r | |
82 | \r | |
83 | overflow: auto;\r | |
84 | overflow-x: hidden;\r | |
85 | }\r | |
86 | \r | |
87 | /* The HTML document which is a direct descendant of the IFRAME */\r | |
88 | .cke_panel_container\r | |
89 | {\r | |
90 | overflow-y: auto;\r | |
91 | overflow-x: hidden;\r | |
92 | }\r | |
93 | \r | |
94 | /*\r | |
95 | Here we start the definition of panel lists (e.g. combo panels). The following\r | |
96 | is its visual representation:\r | |
97 | \r | |
98 | +-- .cke_panel_block -----------------+\r | |
99 | | +-- .cke_panel_grouptitle --------+ |\r | |
100 | | | | |\r | |
101 | | +---------------------------------+ |\r | |
102 | | +-- .cke_panel_list --------------+ |\r | |
103 | | | +-- .cke_panel_listItem ------+ | |\r | |
104 | | | | +-- a --------------------+ | | |\r | |
105 | | | | | +-- span -------------+ | | | |\r | |
106 | | | | | | | | | | |\r | |
107 | | | | | +---------------------+ | | | |\r | |
108 | | | | +-------------------------+ | | |\r | |
109 | | | +-----------------------------+ | |\r | |
110 | | | +-- .cke_panel_listItem ------+ | |\r | |
111 | | | | +-- a --------------------+ | | |\r | |
112 | | | | | +-- span -------------+ | | | |\r | |
113 | | | | | | | | | | |\r | |
114 | | | | | +---------------------+ | | | |\r | |
115 | | | | +-------------------------+ | | |\r | |
116 | | | +-----------------------------+ | |\r | |
117 | | | ... | |\r | |
118 | | +---------------------------------+ |\r | |
119 | +-------------------------------------+\r | |
120 | */\r | |
121 | \r | |
122 | \r | |
123 | /* The list of panel items. */\r | |
124 | .cke_panel_list\r | |
125 | {\r | |
126 | list-style-type: none;\r | |
127 | margin: 3px;\r | |
128 | padding: 0;\r | |
129 | white-space: nowrap;\r | |
130 | }\r | |
131 | \r | |
132 | /* The item of .cke_panel_list */\r | |
133 | .cke_panel_listItem\r | |
134 | {\r | |
135 | margin: 0;\r | |
136 | padding-bottom: 1px;\r | |
137 | }\r | |
138 | \r | |
139 | /* The child of .cke_panel_listItem. These elements contain spans which are\r | |
140 | to display a real name of the property which is visible for an end-user. */\r | |
141 | .cke_panel_listItem a\r | |
142 | {\r | |
143 | padding: 3px 4px;\r | |
144 | display: block;\r | |
145 | border: 1px solid #fff;\r | |
146 | color: inherit !important;\r | |
147 | text-decoration: none;\r | |
148 | overflow: hidden;\r | |
149 | text-overflow: ellipsis;\r | |
150 | \r | |
151 | border-radius: 2px;\r | |
152 | }\r | |
153 | \r | |
154 | /* IE6 */\r | |
155 | * html .cke_panel_listItem a\r | |
156 | {\r | |
157 | width : 100%;\r | |
158 | \r | |
159 | /* IE is not able to inherit the color, so we must force it to black */\r | |
160 | color: #000;\r | |
161 | }\r | |
162 | \r | |
163 | /* IE7 */\r | |
164 | *:first-child+html .cke_panel_listItem a\r | |
165 | {\r | |
166 | /* IE is not able to inherit the color, so we must force it to black */\r | |
167 | color: #000;\r | |
168 | }\r | |
169 | \r | |
170 | .cke_panel_listItem.cke_selected a\r | |
171 | {\r | |
172 | border: 1px solid #dedede;\r | |
173 | background-color: #f2f2f2;\r | |
174 | \r | |
175 | box-shadow: 0 0 2px rgba(0,0,0,.1) inset;\r | |
176 | }\r | |
177 | \r | |
178 | .cke_panel_listItem a:hover,\r | |
179 | .cke_panel_listItem a:focus,\r | |
180 | .cke_panel_listItem a:active\r | |
181 | {\r | |
182 | border-color: #dedede;\r | |
183 | background-color: #f2f2f2;\r | |
184 | \r | |
185 | box-shadow: 0 0 2px rgba(0,0,0,.1) inset;\r | |
186 | }\r | |
187 | \r | |
188 | .cke_hc .cke_panel_listItem a\r | |
189 | {\r | |
190 | border-style: none;\r | |
191 | }\r | |
192 | \r | |
193 | .cke_hc .cke_panel_listItem a:hover,\r | |
194 | .cke_hc .cke_panel_listItem a:focus,\r | |
195 | .cke_hc .cke_panel_listItem a:active\r | |
196 | {\r | |
197 | border: 2px solid;\r | |
198 | padding: 1px 2px;\r | |
199 | }\r | |
200 | \r | |
201 | /* The title of the entire panel which is visible on top of the list. */\r | |
202 | .cke_panel_grouptitle\r | |
203 | {\r | |
204 | cursor: default;\r | |
205 | font-size: 11px;\r | |
206 | font-weight: bold;\r | |
207 | white-space: nowrap;\r | |
208 | margin: 0;\r | |
209 | padding: 4px 6px;\r | |
210 | \r | |
211 | color: #474747;\r | |
212 | text-shadow: 0 1px 0 rgba(255,255,255,.75);\r | |
213 | border-bottom: 1px solid #b6b6b6;\r | |
214 | \r | |
215 | border-radius: 2px 2px 0 0;\r | |
216 | \r | |
217 | box-shadow: 0 1px 0 #fff inset;\r | |
218 | \r | |
219 | background: #cfd1cf;\r | |
220 | background-image: linear-gradient(to bottom, #f5f5f5, #cfd1cf);\r | |
221 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');\r | |
222 | }\r | |
223 | \r | |
224 | /* The following styles set defaults of the elements used by the Paragraph\r | |
225 | Format panel. */\r | |
226 | .cke_panel_listItem p,\r | |
227 | .cke_panel_listItem h1,\r | |
228 | .cke_panel_listItem h2,\r | |
229 | .cke_panel_listItem h3,\r | |
230 | .cke_panel_listItem h4,\r | |
231 | .cke_panel_listItem h5,\r | |
232 | .cke_panel_listItem h6,\r | |
233 | .cke_panel_listItem pre\r | |
234 | {\r | |
235 | margin-top: 0px;\r | |
236 | margin-bottom: 0px;\r | |
237 | }\r |