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

change 'zebra' table styles to use in scrollable tables
author Aleksej Bobylev <al.bobylev@gmail.com>
date Thu May 17 14:02:41 2012 +0300 (2012-05-17)
parents fdfc6b494539
children 42367a53cf50
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 /* Content */
148
149 #content { margin: 20px; }
150 #content-sidebar { margin: 20px 120px 20px 20px; }
151 #wrapper { margin: 10px 0 20px; }
152
153 #actions {
154 min-height: 20px;
155 padding: 16px 0;
156 }
157
158 #actions p { margin: 6px 0; }
159
160 .search {
161 position: absolute;
162 right: 40px;
163 top: 23px;
164 }
165
166 .search input[type=submit] {
167 padding: 5px;
168 margin-left: -4px;
169 background-color: #f1f1f1;
170 border: 1px solid #ddd;
171 cursor: pointer;
172 color: #000;
173 font-weight: bold;
174 border-radius: 0px;
175 }
176
177 .search input[type=submit].radius {
178 border-top-right-radius: 4px;
179 border-bottom-right-radius: 4px;
180 border-top-left-radius: 0px;
181 border-bottom-left-radius: 0px;
182 }
183
184 .search input[type=text] {
185 border: 1px solid #ddd;
186 padding: 4px;
187 height: 17px;
188 margin: 0;
189 width: 200px;
190 border-top-left-radius: 4px;
191 border-bottom-left-radius: 4px;
192 }
193
194 .box {
195 margin: 10px 0;
196 padding: 12px;
197 background: #f8f8f8;
198 border: 1px solid #ddd;
199 }
200
201 .box ul { list-style-type: none; padding: 0; }
202
203 .debug {
204 position: fixed;
205 bottom: 0px;
206 right: 10px;
207 left: 10px;
208 margin: 5px;
209 padding: 4px 10px;
210 background-color: #111;
211 color: #fff;
212 border: 0;
213 font-size: 12px;
214 opacity: 0.9;
215 }
216
217 .float-left {
218 float: left;
219 }
220 .float-right {
221 float: right;
222 }
223
224 /* Table */
225
226 table {
227 background-color: #f8f8f8;
228 border: 1px solid #ddd;
229 padding: 10px;
230 width: 100%;
231 margin: 0 0 6px 0;
232 }
233
234 table a { color: #000; }
235 table a:hover { color: #666; }
236 td.small { min-width: 60px; }
237 td.pkg { max-width: 160px; }
238 td.desc { max-width: 300px; }
239 td.pct { min-width: 200px; background: #eee; }
240 div.pct { background: #ccc; }
241 td.pct, div.pct { border-radius: 2px; }
242
243 #thead, .thead, thead {
244 height: 10px;
245 font-weight: bold;
246 }
247
248 /*
249 * Table Zebra
250 */
251
252 table.zebra {
253 border: none;
254 border-collapse: collapse;
255 margin: 0;
256 }
257 table.zebra tr:nth-child(even) {
258 background-color: rgba(0,0,0,0.05);
259 }
260 table.zebra thead tr td {
261 height: 22px;
262 background-color: #eee;
263 text-align: center;
264 vertical-align: middle;
265 }
266 table.zebra td + td {
267 border-left: 1px solid #ddd;
268 }
269 .outbox {
270 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc;
271 }
272 .fixed {
273 table-layout: fixed;
274 }
275
276 /*
277 * syntax_highlighter
278 */
279
280 span.conf-comment { color: #666; }
281 span.conf-var { color: #392600; }
282 span.conf-val, span.sh-val { color: #f35a00; }
283 span.sh-comment { color: #b20000; }
284 span.activity-log { color: #888; }
285 span.diff-rm { color: red; }
286 span.diff-add { color: green; }
287 span.diff-at { color: blue; }
288 span.top { color: #00c800; font-weight: normal; }
289 span.kernel-hex { color: #18A423; }
290 span.kernel-id { color: #287FC7; }
291 span.kernel-id2 { color: #843523; }
292
293 /* alert messages */
294 span.msg-ok { color: limegreen; }
295 span.msg-nok { color: tomato; }
296
297 /* Misc */
298
299 pre, .pre-main {
300 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
301 background-color: #f8f8f8;
302 border: 1px solid #ddd;
303 padding: 10px;
304 margin: 10px 0;
305 overflow: auto;
306 }
307
308 .pre-main { margin: 16px 0; }
309
310 input[type=submit], select, .button {
311 padding: 4px;
312 margin: 0;
313 background-color: #f1f1f1;
314 border: 1px solid #ddd;
315 cursor: pointer;
316 color: #000;
317 }
318 a.button {
319 white-space: nowrap;
320 height: 16px;
321 margin: 2px 0;
322 display: inline-block;
323 }
324
325 input[type=submit]:hover, select:hover, .button:hover {
326 background-color: #ddd;
327 border: 1px solid #999;
328 }
329
330 input[type=text], input[type=password] { height: 18px; }
331
332 div.scroll { height: 200px; overflow: auto;
333 border: 1px solid #ddd; }
334 div.scroll table { border: 0px solid #fff; }
335
336 #terminal {
337 background: #000;
338 color: #fff;
339 border: 1px solid #444;
340 min-height: 180px;
341 opacity: 0.8;
342 }
343
344 /* Round corner */
345
346 #loading, table, pre, input[type=submit], .debug, .box,
347 .button, div.scroll, .outbox {
348 /*-moz-border-radius: 4px;
349 -webkit-border-radius: 4px; */
350 border-radius: 4px;
351 }
352
353 /* Help page */
354
355 #help { text-align: justify; }
356 #help a { color: #215090; text-decoration: underline; }
357 #help a:hover { text-decoration: none; color: blue; }
358
359 /* Footer */
360
361 #footer {
362 /* border-bottom: 1px solid #c1baad; */
363 height: 25px;
364 text-align: center;
365 padding: 40px 10px;
366 font-size: 11px;
367 color: #bbb;
368 }
369
370 #footer a { color: #bbb; }
371 #footer a:hover { color: #555; }
372
373 /* HTML5 Meter */
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 a.button, input {
396 -webkit-transition: all 0.3s ease-in-out;
397 -moz-transition: all 0.3s ease-in-out;
398 -o-transition: all 0.3s ease-in-out;
399 -ms-transition: all 0.3s ease-in-out;
400 transition: all 0.3s ease-in-out;
401 }