]> git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blame - sources/skins/moonocolor/panel.css
Change skin and add video button
[perso/Immae/Projets/packagist/ludivine-ckeditor-component.git] / sources / skins / moonocolor / panel.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
7panel.css (part of editor.css)\r
8================================\r
9\r
10Panels are floating elements that can hold different types of contents.\r
11The 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
18Panel contents are wrapped into an iframe, so it is possible to have additional\r
19CSS loaded inside them (e.g. to have more accurate preview on the styles combo).\r
20\r
21The 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
39This file also defines styles for panel lists (used by combos). For menu-like\r
40panel 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
95Here we start the definition of panel lists (e.g. combo panels). The following\r
96is 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