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

style.css: move search panel styles to tazpkg/tazpanel + tiny edits; clear executable bit in start.png, stop.png.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Wed Jan 21 17:05:46 2015 +0200 (2015-01-21)
parents 235547201804
children e4ad3356ac6a
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 /* Content */
154
155 #content { margin: 20px; }
156 #wrapper, .wrapper { margin: 20px 0; }
157
158 #actions {
159 min-height: 20px;
160 padding: 0;
161 }
162
163 #actions p { margin: 6px 0; }
164
165 .box {
166 margin: 10px 0;
167 padding: 12px;
168 background: #f8f8f8;
169 border: 1px solid #ddd;
170 }
171
172 .box ul { list-style-type: none; padding: 0; }
173
174 .debug {
175 position: fixed;
176 bottom: 0px;
177 right: 10px;
178 left: 10px;
179 margin: 5px;
180 padding: 4px 10px;
181 background-color: #111;
182 color: #fff;
183 border: 0;
184 font-size: 12px;
185 opacity: 0.9;
186 }
187
188 .float-left {
189 float: left;
190 }
191 .float-right {
192 float: right;
193 }
194
195
196
197 /*
198 * Table
199 */
200
201 table {
202 background-color: #f8f8f8;
203 border: 4px solid #ddd;
204 padding: 10px;
205 width: 100%;
206 margin: 0 0 6px 0;
207 }
208
209 table a { color: #000; }
210 table a:hover { color: #666; }
211 td.small { min-width: 60px; }
212 td.pct { min-width: 200px; background: #eee; }
213 div.pct { background: #ccc; }
214 td.pct, div.pct { border-radius: 2px; }
215
216 #thead, .thead, thead {
217 height: 10px;
218 font-weight: bold;
219 }
220
221 /* Table Zebra */
222
223 table.zebra {
224 border: none;
225 border-collapse: collapse;
226 margin: 20px 0;
227 }
228 table.zebra tr:nth-child(even) {
229 background-color: rgba(0,0,0,0.05);
230 }
231 table.zebra thead tr td {
232 height: 22px;
233 background-color: #eee;
234 text-align: center;
235 vertical-align: middle;
236 }
237 table.zebra td + td {
238 border-left: 1px solid #ddd;
239 height: 22px;
240 }
241 table.zebra td:first-child { padding-left: 6px; }
242 .outbox {
243 box-shadow: 0 0 2px 4px #ddd;
244 }
245 .fixed {
246 table-layout: fixed;
247 }
248
249
250
251 /*
252 * syntax_highlighter
253 */
254
255 .conf-comment { color: #666; }
256 .conf-var { color: #392600; }
257 .conf-val, .sh-val { color: #f35a00; }
258 .sh-comment { color: #b20000; }
259 .activity-log { color: #888; }
260 .diff-rm { color: red; }
261 .diff-add { color: green; }
262 .diff-at { color: blue; }
263 .top { color: #00c800; font-weight: normal; }
264 .kernel-hex { color: #18A423; }
265 .kernel-id { color: #287FC7; }
266 .kernel-id2 { color: #843523; }
267 .lsusb-h, .lspci-h { color: #800; font-weight: bold; }
268 .lsusb-t, .lspci-t { color: #448; font-weight: bold; }
269
270
271
272 /* Misc */
273
274 pre, .pre-main {
275 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
276 background-color: #f8f8f8;
277 border: 4px solid #ddd;
278 padding: 10px;
279 margin: 10px 0;
280 overflow: auto;
281 }
282
283 .pre-main { margin: 16px 0; }
284
285 input[type=submit], .button {
286 color: #444444;
287 border: 1px solid #afafaf;
288 padding: 4px;
289 /*margin: 4px 0px;*/
290 font-size: 14px;
291 /*line-height: 1.2em;*/
292 background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
293 background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
294 /*-webkit-appearance: none;
295 -webkit-padding-end: 12px;
296 -webkit-padding-start: 6px;*/
297 }
298 input[type="submit"] {
299 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
300 -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
301 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
302 }
303 /*select {
304 background-image: url(images/down.png),
305 -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
306 background-position: center right;
307 background-repeat: no-repeat;
308 }*/
309 a.button {
310 white-space: nowrap;
311 height: 16px;
312 margin: 2px 0;
313 display: inline-block;
314 -webkit-appearance: button; -moz-appearance: button;
315 }
316
317 input[type=submit]:hover, .button:hover {
318 background-color: #ddd;
319 border: 1px solid #999;
320 }
321
322 input[type=text], input[type=password] { height: 18px; }
323
324 div.scroll { height: 200px; overflow: auto;
325 border: 1px solid #ddd; }
326 div.scroll table { border: 0px solid #fff; }
327
328 #terminal {
329 background: #000;
330 color: #fff;
331 border: 1px solid #444;
332 min-height: 240px;
333 }
334
335 /* Round corner */
336
337 #loading, table, pre, input[type=submit], .debug, .box,
338 .button, div.scroll, .outbox, section {
339 -moz-border-radius: 4px;
340 -webkit-border-radius: 4px;
341 border-radius: 4px;
342 }
343
344 /* Help page */
345
346 #help { text-align: justify; }
347 #help a { color: #215090; text-decoration: underline; }
348 #help a:hover { text-decoration: none; color: blue; }
349
350
351
352 /*
353 * Footer
354 */
355
356 footer {
357 /* border-bottom: 1px solid #c1baad; */
358 height: 25px;
359 text-align: center;
360 padding: 40px 10px;
361 font-size: 11px;
362 color: #bbb;
363 }
364
365 footer a { color: #bbb; }
366 footer a:hover { color: #555; }
367
368
369
370 /*
371 * HTML5 Meter
372 */
373
374 .meter {
375 height: 22px;
376 min-width: 200px;
377 cursor: default;
378 }
379 .meter meter {
380 height: inherit;
381 width: 100%;
382 display: block;
383 border: 1px solid #ddd;
384 border-radius: 4px;
385 }
386 .meter span {
387 height: 22px;
388 display: block;
389 white-space: nowrap;
390 position: absolute;
391 margin: -18px auto 0 2px;
392 }
393
394
395
396 /*
397 * Animations
398 */
399
400 a.button, input {
401 -webkit-transition: all 0.3s ease-in-out;
402 -moz-transition: all 0.3s ease-in-out;
403 -o-transition: all 0.3s ease-in-out;
404 -ms-transition: all 0.3s ease-in-out;
405 transition: all 0.3s ease-in-out;
406 }
407
408 /*section {
409 margin: 20pt -0.7em;
410 padding: 0.8em 0.7em 1.2em;
411 background-color: #fdfdfd;
412 border: 1px solid #ddd;
413 border-radius: 1em;
414 box-shadow: 0 0 3pt 2pt #eee;
415 }
416 section h4 {
417 margin: 0 0 0.5em 0;
418 }
419 section h3 {
420 margin: 0 0 0.5em 0; }
421 */
422
423 #tabs {
424 font-weight: bold;
425 font-size: 14px;
426 list-style-type: none;
427 padding-bottom: 25px;
428 border-bottom: 1px solid #aaa;
429 }
430
431 #tabs li {
432 float: left;
433 height: 16px;
434 background-color: #eee;
435 margin: 0 40px 0 -40px;
436 border: 1px solid #aaa;
437 text-align: center;
438 min-width: 100px;
439 -moz-border-top-right-radius: 4px;
440 -moz-border-top-left-radius: 4px;
441 -webkit-border-top-right-radius: 4px;
442 -webkit-border-top-left-radius: 4px;
443 border-top-right-radius: 4px;
444 border-top-left-radius: 4px;
445 }
446
447 #tabs li.active {
448 border-bottom: 1px solid #fff;
449 background-color: #fff;
450 }
451
452 #tabs a {
453 padding: 8px;
454 }