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

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