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

More reliable menu.d calls
author Pascal Bellard <pascal.bellard@slitaz.org>
date Mon Jan 06 00:45:40 2014 +0100 (2014-01-06)
parents 448b0f6d7311
children 6a8ad3b2b789
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 z-index:1;
111 }
112 #menu li:hover li:hover ul {
113 display: block;
114 }
115
116 #icons { margin: 3px 8px; float: right; }
117 #icons img { padding: 0; }
118
119 #loading {
120 /* font-weight: bold; */
121 background-color: #f8f8f8;
122 border: 1px solid #ddd;
123 color: #666;
124 cursor: progress;
125 position: fixed;
126 top: 92px;
127 right: 120px;
128 width: 248px;
129 padding: 4px 4px 2px;
130 }
131
132 /* Blocks */
133
134 #block { float: left; }
135
136 /* Sidebar menus */
137
138 #sidebar {
139 position: fixed;
140 top: 92px;
141 right: 5px;
142 width: 116px;
143 }
144
145 #sidebar a {
146 display: block;
147 padding: 0px 0 0px 12px;
148 margin: 0;
149 }
150
151 #sidebar a.active {
152 color: #000;
153 font-weight: bold;
154 }
155
156 #sidebar h4 { margin: 0 0 2px 12px; }
157 #sidebar ul { list-style-type: none; padding: 0; }
158
159
160 /* Content */
161
162 #content { margin: 20px; }
163 #content-sidebar { margin: 20px 120px 20px 20px; }
164 #wrapper { margin: 10px 0 20px; }
165
166 #actions {
167 min-height: 20px;
168 padding: 16px 0;
169 }
170
171 #actions p { margin: 6px 0; }
172
173 .search {
174 position: absolute;
175 right: 40px;
176 top: 23px;
177 }
178
179 .search input[type=submit] {
180 padding: 5px;
181 margin-left: -4px;
182 background-color: #f1f1f1;
183 border: 1px solid #ddd;
184 cursor: pointer;
185 color: #000;
186 font-weight: bold;
187 border-radius: 0px;
188 }
189
190 .search input[type=submit].radius {
191 border-top-right-radius: 4px;
192 border-bottom-right-radius: 4px;
193 border-top-left-radius: 0px;
194 border-bottom-left-radius: 0px;
195 }
196
197 .search input[type=text] {
198 border: 1px solid #ddd;
199 padding: 4px;
200 height: 17px;
201 margin: 0;
202 width: 200px;
203 border-top-left-radius: 4px;
204 border-bottom-left-radius: 4px;
205 }
206
207 .box {
208 margin: 10px 0;
209 padding: 12px;
210 background: #f8f8f8;
211 border: 1px solid #ddd;
212 }
213
214 .box ul { list-style-type: none; padding: 0; }
215
216 .debug {
217 position: fixed;
218 bottom: 0px;
219 right: 10px;
220 left: 10px;
221 margin: 5px;
222 padding: 4px 10px;
223 background-color: #111;
224 color: #fff;
225 border: 0;
226 font-size: 12px;
227 opacity: 0.9;
228 }
229
230 .float-left {
231 float: left;
232 }
233 .float-right {
234 float: right;
235 }
236
237
238 /* Table */
239
240 table {
241 background-color: #f8f8f8;
242 border: 1px solid #ddd;
243 padding: 10px;
244 width: 100%;
245 margin: 0 0 6px 0;
246 }
247
248 table a { color: #000; }
249 table a:hover { color: #666; }
250 td.small { min-width: 60px; }
251 td.pkg { max-width: 160px; }
252 td.desc { max-width: 300px; }
253 td.pct { min-width: 200px; background: #eee; }
254 div.pct { background: #ccc; }
255 td.pct, div.pct { border-radius: 2px; }
256
257 #thead, .thead, thead {
258 height: 10px;
259 font-weight: bold;
260 }
261
262 /*
263 * Table Zebra
264 */
265
266 table.zebra {
267 border: none;
268 border-collapse: collapse;
269 margin: 0;
270 }
271 table.zebra tr:nth-child(even) {
272 background-color: rgba(0,0,0,0.05);
273 }
274 table.zebra thead tr td {
275 height: 22px;
276 background-color: #eee;
277 text-align: center;
278 vertical-align: middle;
279 }
280 table.zebra td + td {
281 border-left: 1px solid #ddd;
282 }
283 .outbox {
284 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc;
285 }
286 .fixed {
287 table-layout: fixed;
288 }
289
290 /*
291 * syntax_highlighter
292 */
293
294 span.conf-comment { color: #666; }
295 span.conf-var { color: #392600; }
296 span.conf-val, span.sh-val { color: #f35a00; }
297 span.sh-comment { color: #b20000; }
298 span.activity-log { color: #888; }
299 span.diff-rm { color: red; }
300 span.diff-add { color: green; }
301 span.diff-at { color: blue; }
302 span.top { color: #00c800; font-weight: normal; }
303 span.kernel-hex { color: #18A423; }
304 span.kernel-id { color: #287FC7; }
305 span.kernel-id2 { color: #843523; }
306 span.lsusb-h, span.lspci-h { color: #800; font-weight: bold; }
307 span.lsusb-t, span.lspci-t { color: #448; font-weight: bold; }
308
309 /* Misc */
310
311 pre, .pre-main {
312 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
313 background-color: #f8f8f8;
314 border: 1px solid #ddd;
315 padding: 10px;
316 margin: 10px 0;
317 overflow: auto;
318 }
319
320 .pre-main { margin: 16px 0; }
321
322 input[type=submit], select, .button {
323 padding: 4px;
324 margin: 0;
325 background-color: #f1f1f1;
326 border: 1px solid #ddd;
327 cursor: pointer;
328 color: #000;
329 }
330 a.button {
331 white-space: nowrap;
332 height: 16px;
333 margin: 2px 0;
334 display: inline-block;
335 }
336
337 input[type=submit]:hover, select:hover, .button:hover {
338 background-color: #ddd;
339 border: 1px solid #999;
340 }
341
342 input[type=text], input[type=password] { height: 18px; }
343
344 div.scroll { height: 200px; overflow: auto;
345 border: 1px solid #ddd; }
346 div.scroll table { border: 0px solid #fff; }
347
348 #terminal {
349 background: #000;
350 color: #fff;
351 border: 1px solid #444;
352 min-height: 180px;
353 opacity: 0.8;
354 }
355
356 /* Round corner */
357
358 #loading, table, pre, input[type=submit], .debug, .box,
359 .button, div.scroll, .outbox, section {
360 -moz-border-radius: 4px;
361 -webkit-border-radius: 4px;
362 border-radius: 4px;
363 }
364
365 /* Help page */
366
367 #help { text-align: justify; }
368 #help a { color: #215090; text-decoration: underline; }
369 #help a:hover { text-decoration: none; color: blue; }
370
371 /* Footer */
372
373 #footer {
374 /* border-bottom: 1px solid #c1baad; */
375 height: 25px;
376 text-align: center;
377 padding: 40px 10px;
378 font-size: 11px;
379 color: #bbb;
380 }
381
382 #footer a { color: #bbb; }
383 #footer a:hover { color: #555; }
384
385 /* HTML5 Meter */
386 .meter {
387 height: 22px;
388 min-width: 200px;
389 cursor: default;
390 }
391 .meter meter {
392 height: inherit;
393 width: 100%;
394 display: block;
395 border: 1px solid #ddd;
396 border-radius: 4px;
397 }
398 .meter span {
399 height: 22px;
400 display: block;
401 white-space: nowrap;
402 position: absolute;
403 margin: -18px auto 0 2px;
404 }
405
406
407 a.button, input {
408 -webkit-transition: all 0.3s ease-in-out;
409 -moz-transition: all 0.3s ease-in-out;
410 -o-transition: all 0.3s ease-in-out;
411 -ms-transition: all 0.3s ease-in-out;
412 transition: all 0.3s ease-in-out;
413 }
414
415 section {
416 margin: 20pt -0.7em;
417 padding: 0.7em;
418 background-color: #fdfdfd;
419 border: 1px solid #ddd;
420 border-radius: 1em;
421 /*box-shadow: 0 0 3pt 2pt #eee;*/
422 }
423 section h4 {
424 margin: 0 0 0.5em 0;
425 }
426 section h3 {
427 margin: 0 0 0.5em 0;