tazpanel view styles/default/style.css @ rev 368

Add submenu support
author Pascal Bellard <pascal.bellard@slitaz.org>
date Sun Jun 30 17:06:07 2013 +0200 (2013-06-30)
parents df2865290e55
children 0369a5cb81e3
line source
1 /*
2 * CSS style for TazPanel - (C) 2011-12 SliTaz GNU/Linux
3 */
4
5 /* To always have a scroll bar */
6 html {
7 min-height: 102%;
8 }
9
10 body {
11 background: #ffffff;
12 color: black;
13 font: 13px "DejaVu Sans", Ubuntu, "Droid Sans", "Liberation Sans", FreeSans, sans-serif;
14 margin: 25px 0 0;
15 }
16
17 h1 { color: #d66018; padding: 6px 0 0 20px; font-size: 180%; }
18 h2 { color: #444; margin: 10px 0 10px; font-size: 150%; }
19 h3 { color: #666; font-size: 140%; }
20 h4 { color: #888; font-size: 120%; margin: 10px 0 5px; }
21 img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
22 p { margin: 10px 0; }
23 ul { list-style-type: square; }
24 li { padding: 4px 0; }
25 a { text-decoration: none; color: #666; }
26 a:hover { color: #000; }
27
28 /* Header and main title */
29
30 #header {
31 height: 42px;
32 border-bottom: 1px dotted #ddd;
33 }
34
35 /* Desktop gui style bar */
36
37 #toolbar {
38 position: fixed;
39 top: 0;
40 left: 0;
41 height: 23px;
42 width: 100%;
43 padding: 0;
44 background-color: #f1efeb;
45 border-bottom: 1px solid #c1baad;
46 z-index: 200;
47 cursor: default;
48 }
49
50 #menu {
51 margin: 0;
52 padding: 0;
53 }
54 #menu li {
55 list-style: none;
56 float: left;
57 padding: 0;
58 }
59 #menu li a {
60 display: block;
61 padding: 4px 6px;
62 background-color: inherit;
63 text-decoration: none;
64 cursor: default;
65 color: #000;
66 }
67 #menu li a:hover {
68 color: #ffffff;
69 background-color: #d66018;
70 border-top-right-radius: 3px;
71 border-top-left-radius: 3px;
72 }
73 #menu li ul {
74 display: none;
75 min-width: 180px;
76 background-color: #f1efeb;
77 border: 1px solid #c1baad;
78 }
79 #menu li ul a {
80 padding: 4px 6px;
81 }
82 #menu li:hover ul {
83 display: block;
84 position: absolute;
85 margin: 0;
86 padding: 0;
87 }
88 #menu li:hover li {
89 float: none;
90 position: relative;
91 }
92 #menu li:hover li a {
93 background-color: #f1efeb;
94 color: #000;
95 }
96 #menu li li a { border: 1px solid #f1efeb; }
97 #menu li li a:hover {
98 background-color: #d66018;
99 color: #ffffff;
100 border-radius: 2px;
101 /* border: 1px solid #c1baad; */
102 }
103
104 /* submenus */
105 #menu li:hover li ul {
106 display: none;
107 position: absolute;
108 left: 180px;
109 top: 0px;
110 }
111 #menu li:hover li:hover ul {
112 display: block;
113 }
114
115 #icons { margin: 3px 8px; float: right; }
116 #icons img { padding: 0; }
117
118 #loading {
119 /* font-weight: bold; */
120 background-color: #f8f8f8;
121 border: 1px solid #ddd;
122 color: #666;
123 cursor: progress;
124 position: fixed;
125 top: 92px;
126 right: 120px;
127 width: 248px;
128 padding: 4px 4px 2px;
129 }
130
131 /* Blocks */
132
133 #block { float: left; }
134
135 /* Sidebar menus */
136
137 #sidebar {
138 position: fixed;
139 top: 92px;
140 right: 5px;
141 width: 116px;
142 }
143
144 #sidebar a {
145 display: block;
146 padding: 0px 0 0px 12px;
147 margin: 0;
148 }
149
150 #sidebar a.active {
151 color: #000;
152 font-weight: bold;
153 }
154
155 #sidebar h4 { margin: 0 0 2px 12px; }
156 #sidebar ul { list-style-type: none; padding: 0; }
157
158
159 /* Content */
160
161 #content { margin: 20px; }
162 #content-sidebar { margin: 20px 120px 20px 20px; }
163 #wrapper { margin: 10px 0 20px; }
164
165 #actions {
166 min-height: 20px;
167 padding: 16px 0;
168 }
169
170 #actions p { margin: 6px 0; }
171
172 .search {
173 position: absolute;
174 right: 40px;
175 top: 23px;
176 }
177
178 .search input[type=submit] {
179 padding: 5px;
180 margin-left: -4px;
181 background-color: #f1f1f1;
182 border: 1px solid #ddd;
183 cursor: pointer;
184 color: #000;
185 font-weight: bold;
186 border-radius: 0px;
187 }
188
189 .search input[type=submit].radius {
190 border-top-right-radius: 4px;
191 border-bottom-right-radius: 4px;
192 border-top-left-radius: 0px;
193 border-bottom-left-radius: 0px;
194 }
195
196 .search input[type=text] {
197 border: 1px solid #ddd;
198 padding: 4px;
199 height: 17px;
200 margin: 0;
201 width: 200px;
202 border-top-left-radius: 4px;
203 border-bottom-left-radius: 4px;
204 }
205
206 .box {
207 margin: 10px 0;
208 padding: 12px;
209 background: #f8f8f8;
210 border: 1px solid #ddd;
211 }
212
213 .box ul { list-style-type: none; padding: 0; }
214
215 .debug {
216 position: fixed;
217 bottom: 0px;
218 right: 10px;
219 left: 10px;
220 margin: 5px;
221 padding: 4px 10px;
222 background-color: #111;
223 color: #fff;
224 border: 0;
225 font-size: 12px;
226 opacity: 0.9;
227 }
228
229 .float-left {
230 float: left;
231 }
232 .float-right {
233 float: right;
234 }
235
236
237 /* Table */
238
239 table {
240 background-color: #f8f8f8;
241 border: 1px solid #ddd;
242 padding: 10px;
243 width: 100%;
244 margin: 0 0 6px 0;
245 }
246
247 table a { color: #000; }
248 table a:hover { color: #666; }
249 td.small { min-width: 60px; }
250 td.pkg { max-width: 160px; }
251 td.desc { max-width: 300px; }
252 td.pct { min-width: 200px; background: #eee; }
253 div.pct { background: #ccc; }
254 td.pct, div.pct { border-radius: 2px; }
255
256 #thead, .thead, thead {
257 height: 10px;
258 font-weight: bold;
259 }
260
261 /*
262 * Table Zebra
263 */
264
265 table.zebra {
266 border: none;
267 border-collapse: collapse;
268 margin: 0;
269 }
270 table.zebra tr:nth-child(even) {
271 background-color: rgba(0,0,0,0.05);
272 }
273 table.zebra thead tr td {
274 height: 22px;
275 background-color: #eee;
276 text-align: center;
277 vertical-align: middle;
278 }
279 table.zebra td + td {
280 border-left: 1px solid #ddd;
281 }
282 .outbox {
283 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc;
284 }
285 .fixed {
286 table-layout: fixed;
287 }
288
289 /*
290 * syntax_highlighter
291 */
292
293 span.conf-comment { color: #666; }
294 span.conf-var { color: #392600; }
295 span.conf-val, span.sh-val { color: #f35a00; }
296 span.sh-comment { color: #b20000; }
297 span.activity-log { color: #888; }
298 span.diff-rm { color: red; }
299 span.diff-add { color: green; }
300 span.diff-at { color: blue; }
301 span.top { color: #00c800; font-weight: normal; }
302 span.kernel-hex { color: #18A423; }
303 span.kernel-id { color: #287FC7; }
304 span.kernel-id2 { color: #843523; }
305 span.lsusb-h, span.lspci-h { color: #800; font-weight: bold; }
306 span.lsusb-t, span.lspci-t { color: #448; font-weight: bold; }
307
308 /* Misc */
309
310 pre, .pre-main {
311 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
312 background-color: #f8f8f8;
313 border: 1px solid #ddd;
314 padding: 10px;
315 margin: 10px 0;
316 overflow: auto;
317 }
318
319 .pre-main { margin: 16px 0; }
320
321 input[type=submit], select, .button {
322 padding: 4px;
323 margin: 0;
324 background-color: #f1f1f1;
325 border: 1px solid #ddd;
326 cursor: pointer;
327 color: #000;
328 }
329 a.button {
330 white-space: nowrap;
331 height: 16px;
332 margin: 2px 0;
333 display: inline-block;
334 }
335
336 input[type=submit]:hover, select:hover, .button:hover {
337 background-color: #ddd;
338 border: 1px solid #999;
339 }
340
341 input[type=text], input[type=password] { height: 18px; }
342
343 div.scroll { height: 200px; overflow: auto;
344 border: 1px solid #ddd; }
345 div.scroll table { border: 0px solid #fff; }
346
347 #terminal {
348 background: #000;
349 color: #fff;
350 border: 1px solid #444;
351 min-height: 180px;
352 opacity: 0.8;
353 }
354
355 /* Round corner */
356
357 #loading, table, pre, input[type=submit], .debug, .box,
358 .button, div.scroll, .outbox, section {
359 -moz-border-radius: 4px;
360 -webkit-border-radius: 4px;
361 border-radius: 4px;
362 }
363
364 /* Help page */
365
366 #help { text-align: justify; }
367 #help a { color: #215090; text-decoration: underline; }
368 #help a:hover { text-decoration: none; color: blue; }
369
370 /* Footer */
371
372 #footer {
373 /* border-bottom: 1px solid #c1baad; */
374 height: 25px;
375 text-align: center;
376 padding: 40px 10px;
377 font-size: 11px;
378 color: #bbb;
379 }
380
381 #footer a { color: #bbb; }
382 #footer a:hover { color: #555; }
383
384 /* HTML5 Meter */
385 .meter {
386 height: 22px;
387 min-width: 200px;
388 cursor: default;
389 }
390 .meter meter {
391 height: inherit;
392 width: 100%;
393 display: block;
394 border: 1px solid #ddd;
395 border-radius: 4px;
396 }
397 .meter span {
398 height: 22px;
399 display: block;
400 white-space: nowrap;
401 position: absolute;
402 margin: -18px auto 0 2px;
403 }
404
405
406 a.button, input {
407 -webkit-transition: all 0.3s ease-in-out;
408 -moz-transition: all 0.3s ease-in-out;
409 -o-transition: all 0.3s ease-in-out;
410 -ms-transition: all 0.3s ease-in-out;
411 transition: all 0.3s ease-in-out;
412 }
413
414 section {
415 margin: 20pt -0.7em;
416 padding: 0.7em;
417 background-color: #fdfdfd;
418 border: 1px solid #ddd;
419 border-radius: 1em;
420 /*box-shadow: 0 0 3pt 2pt #eee;*/
421 }
422 section h4 {
423 margin: 0 0 0.5em 0;
424 }
425 section h3 {
426 margin: 0 0 0.5em 0;