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

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