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

add visual sections to pages
author Aleksej Bobylev <al.bobylev@gmail.com>
date Thu May 17 14:52:15 2012 +0300 (2012-05-17)
parents 3e9acc16f728
children 7b6cf90e0155
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 /* alert messages */
296 span.msg-ok { color: limegreen; }
297 span.msg-nok { color: tomato; }
298
299 /* Misc */
300
301 pre, .pre-main {
302 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
303 background-color: #f8f8f8;
304 border: 1px solid #ddd;
305 padding: 10px;
306 margin: 10px 0;
307 overflow: auto;
308 }
309
310 .pre-main { margin: 16px 0; }
311
312 input[type=submit], select, .button {
313 padding: 4px;
314 margin: 0;
315 background-color: #f1f1f1;
316 border: 1px solid #ddd;
317 cursor: pointer;
318 color: #000;
319 }
320 a.button {
321 white-space: nowrap;
322 height: 16px;
323 margin: 2px 0;
324 display: inline-block;
325 }
326
327 input[type=submit]:hover, select:hover, .button:hover {
328 background-color: #ddd;
329 border: 1px solid #999;
330 }
331
332 input[type=text], input[type=password] { height: 18px; }
333
334 div.scroll { height: 200px; overflow: auto;
335 border: 1px solid #ddd; }
336 div.scroll table { border: 0px solid #fff; }
337
338 #terminal {
339 background: #000;
340 color: #fff;
341 border: 1px solid #444;
342 min-height: 180px;
343 opacity: 0.8;
344 }
345
346 /* Round corner */
347
348 #loading, table, pre, input[type=submit], .debug, .box,
349 .button, div.scroll, .outbox, section {
350 -moz-border-radius: 4px;
351 -webkit-border-radius: 4px;
352 border-radius: 4px;
353 }
354
355 /* Help page */
356
357 #help { text-align: justify; }
358 #help a { color: #215090; text-decoration: underline; }
359 #help a:hover { text-decoration: none; color: blue; }
360
361 /* Footer */
362
363 #footer {
364 /* border-bottom: 1px solid #c1baad; */
365 height: 25px;
366 text-align: center;
367 padding: 40px 10px;
368 font-size: 11px;
369 color: #bbb;
370 }
371
372 #footer a { color: #bbb; }
373 #footer a:hover { color: #555; }
374
375 /* HTML5 Meter */
376 .meter {
377 height: 22px;
378 min-width: 200px;
379 cursor: default;
380 }
381 .meter meter {
382 height: inherit;
383 width: 100%;
384 display: block;
385 border: 1px solid #ddd;
386 border-radius: 4px;
387 }
388 .meter span {
389 height: 22px;
390 display: block;
391 white-space: nowrap;
392 position: absolute;
393 margin: -18px auto 0 2px;
394 }
395
396
397 a.button, input {
398 -webkit-transition: all 0.3s ease-in-out;
399 -moz-transition: all 0.3s ease-in-out;
400 -o-transition: all 0.3s ease-in-out;
401 -ms-transition: all 0.3s ease-in-out;
402 transition: all 0.3s ease-in-out;
403 }
404
405 section {
406 margin: 20pt -0.7em;
407 padding: 0.7em;
408 background-color: #fdfdfd;
409 border: 1px solid #ddd;
410 border-radius: 1em;
411 /*box-shadow: 0 0 3pt 2pt #eee;*/
412 }
413 section h4 {
414 margin: 0 0 0.5em 0;
415 }
416 section h3 {
417 margin: 0 0 0.5em 0;