rev |
line source |
pankso@1
|
1 /*
|
al@311
|
2 * CSS style for TazPanel - (C) 2011-12 SliTaz GNU/Linux
|
pankso@1
|
3 */
|
pankso@1
|
4
|
pankso@17
|
5 /* To always have a scroll bar */
|
pankso@17
|
6 html {
|
pankso@17
|
7 min-height: 102%;
|
al@311
|
8 }
|
al@311
|
9
|
pankso@17
|
10 body {
|
pankso@384
|
11 background: #fff;
|
pankso@17
|
12 color: black;
|
al@303
|
13 font: 13px "DejaVu Sans", Ubuntu, "Droid Sans", "Liberation Sans", FreeSans, sans-serif;
|
pankso@384
|
14 margin: 80px 0 0;
|
pankso@17
|
15 }
|
pankso@17
|
16
|
pankso@384
|
17 h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; }
|
pankso@384
|
18 h2 { color: #333; margin: 10px 0 10px; font-size: 180%; }
|
pankso@384
|
19 h3 { color: #444; font-size: 160%; }
|
pankso@384
|
20 h4 { color: #666; font-size: 140%; }
|
pankso@41
|
21 img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
|
pankso@110
|
22 p { margin: 10px 0; }
|
pankso@73
|
23 ul { list-style-type: square; }
|
pankso@1
|
24 li { padding: 4px 0; }
|
pankso@1
|
25 a { text-decoration: none; color: #666; }
|
pankso@1
|
26 a:hover { color: #000; }
|
pankso@1
|
27
|
pankso@17
|
28 /* Header and main title */
|
pankso@17
|
29
|
pankso@17
|
30 #header {
|
pankso@384
|
31 height: 40px;
|
pankso@384
|
32 /*border-bottom: 4px solid #afafaf;*/
|
pankso@384
|
33 background: #222 url(images/logo.png) no-repeat left;
|
pankso@384
|
34 position: fixed;
|
pankso@384
|
35 top: 0;
|
pankso@384
|
36 width: 100%;
|
pankso@384
|
37 }
|
pankso@384
|
38
|
pankso@384
|
39 #header h1 {
|
pankso@384
|
40 margin: 0;
|
pankso@384
|
41 padding: 8px 0 0 42px;
|
pankso@384
|
42 font-style: italic;
|
pankso@1
|
43 }
|
pankso@1
|
44
|
pankso@17
|
45 /* Desktop gui style bar */
|
pankso@14
|
46
|
pankso@31
|
47 #toolbar {
|
pankso@14
|
48 position: fixed;
|
pankso@384
|
49 top: 40px;
|
pankso@14
|
50 left: 0;
|
pankso@246
|
51 height: 23px;
|
pankso@14
|
52 width: 100%;
|
pankso@45
|
53 padding: 0;
|
pankso@14
|
54 background-color: #f1efeb;
|
pankso@17
|
55 border-bottom: 1px solid #c1baad;
|
pankso@14
|
56 z-index: 200;
|
pankso@17
|
57 cursor: default;
|
pankso@14
|
58 }
|
pankso@44
|
59
|
pankso@246
|
60 #menu {
|
pankso@246
|
61 margin: 0;
|
pankso@246
|
62 padding: 0;
|
pankso@246
|
63 }
|
pankso@246
|
64 #menu li {
|
pankso@246
|
65 list-style: none;
|
pankso@246
|
66 float: left;
|
pankso@246
|
67 padding: 0;
|
pankso@246
|
68 }
|
pankso@246
|
69 #menu li a {
|
pankso@246
|
70 display: block;
|
pankso@246
|
71 padding: 4px 6px;
|
pankso@246
|
72 background-color: inherit;
|
pankso@246
|
73 text-decoration: none;
|
pankso@246
|
74 cursor: default;
|
pankso@246
|
75 color: #000;
|
pankso@246
|
76 }
|
pankso@246
|
77 #menu li a:hover {
|
pankso@246
|
78 color: #ffffff;
|
pankso@246
|
79 background-color: #d66018;
|
pankso@246
|
80 }
|
pankso@246
|
81 #menu li ul {
|
al@311
|
82 display: none;
|
al@303
|
83 min-width: 180px;
|
pankso@246
|
84 background-color: #f1efeb;
|
pankso@246
|
85 border: 1px solid #c1baad;
|
pankso@246
|
86 }
|
pankso@246
|
87 #menu li ul a {
|
pankso@384
|
88 padding: 4px 6px 2px;
|
pankso@246
|
89 }
|
pankso@246
|
90 #menu li:hover ul {
|
pankso@246
|
91 display: block;
|
pankso@246
|
92 position: absolute;
|
pankso@246
|
93 margin: 0;
|
pankso@246
|
94 padding: 0;
|
pankso@246
|
95 }
|
pankso@246
|
96 #menu li:hover li {
|
pankso@246
|
97 float: none;
|
pascal@368
|
98 position: relative;
|
pankso@246
|
99 }
|
pankso@246
|
100 #menu li:hover li a {
|
pankso@246
|
101 background-color: #f1efeb;
|
pankso@246
|
102 color: #000;
|
pankso@246
|
103 }
|
pankso@246
|
104 #menu li li a { border: 1px solid #f1efeb; }
|
pankso@246
|
105 #menu li li a:hover {
|
pankso@246
|
106 background-color: #d66018;
|
pankso@246
|
107 color: #ffffff;
|
pankso@246
|
108 border-radius: 2px;
|
pankso@246
|
109 /* border: 1px solid #c1baad; */
|
pankso@246
|
110 }
|
al@303
|
111
|
pascal@368
|
112 /* submenus */
|
pascal@368
|
113 #menu li:hover li ul {
|
pascal@368
|
114 display: none;
|
pascal@368
|
115 position: absolute;
|
pascal@368
|
116 left: 180px;
|
pascal@368
|
117 top: 0px;
|
pascal@373
|
118 z-index:1;
|
pascal@368
|
119 }
|
pascal@368
|
120 #menu li:hover li:hover ul {
|
pascal@368
|
121 display: block;
|
pascal@368
|
122 }
|
pankso@246
|
123
|
pankso@246
|
124 #icons { margin: 3px 8px; float: right; }
|
pankso@17
|
125 #icons img { padding: 0; }
|
pankso@14
|
126
|
pankso@45
|
127 #loading {
|
pankso@191
|
128 /* font-weight: bold; */
|
pankso@191
|
129 background-color: #f8f8f8;
|
pankso@191
|
130 border: 1px solid #ddd;
|
pankso@191
|
131 color: #666;
|
pankso@191
|
132 cursor: progress;
|
pankso@191
|
133 position: fixed;
|
pankso@384
|
134 top: 76px;
|
pankso@191
|
135 right: 120px;
|
pankso@191
|
136 width: 248px;
|
pankso@191
|
137 padding: 4px 4px 2px;
|
pankso@45
|
138 }
|
pankso@17
|
139
|
pankso@41
|
140 /* Blocks */
|
pankso@41
|
141
|
pankso@41
|
142 #block { float: left; }
|
pankso@41
|
143
|
pankso@41
|
144 /* Sidebar menus */
|
pankso@41
|
145
|
pankso@41
|
146 #sidebar {
|
pankso@41
|
147 position: fixed;
|
pankso@384
|
148 top: 124px;
|
pankso@41
|
149 right: 5px;
|
pankso@41
|
150 width: 116px;
|
pankso@41
|
151 }
|
pankso@41
|
152
|
pankso@41
|
153 #sidebar a {
|
pankso@41
|
154 display: block;
|
pankso@73
|
155 padding: 0px 0 0px 12px;
|
pankso@73
|
156 margin: 0;
|
pankso@41
|
157 }
|
pankso@41
|
158
|
pankso@41
|
159 #sidebar a.active {
|
pankso@41
|
160 color: #000;
|
pankso@41
|
161 font-weight: bold;
|
pankso@41
|
162 }
|
pankso@73
|
163
|
pankso@384
|
164 #sidebar h4 { margin: 0 0 2px 12px; font-size: 16px; color: #222; }
|
pankso@73
|
165 #sidebar ul { list-style-type: none; padding: 0; }
|
pankso@41
|
166
|
al@312
|
167
|
pankso@41
|
168 /* Content */
|
pankso@41
|
169
|
pankso@185
|
170 #content { margin: 20px; }
|
pankso@185
|
171 #content-sidebar { margin: 20px 120px 20px 20px; }
|
pankso@384
|
172 #wrapper, .wrapper { margin: 20px 0; }
|
pankso@41
|
173
|
pankso@120
|
174 #actions {
|
al@303
|
175 min-height: 20px;
|
pankso@384
|
176 padding: 0;
|
pankso@120
|
177 }
|
pankso@120
|
178
|
pankso@120
|
179 #actions p { margin: 6px 0; }
|
pankso@120
|
180
|
pankso@41
|
181 .search {
|
pankso@384
|
182 position: fixed;
|
pankso@384
|
183 right: 10px;
|
pankso@384
|
184 top: -8px;
|
pankso@41
|
185 }
|
pankso@41
|
186
|
pankso@41
|
187 .search input[type=submit] {
|
pankso@246
|
188 padding: 5px;
|
pankso@80
|
189 margin-left: -4px;
|
pankso@41
|
190 background-color: #f1f1f1;
|
pankso@41
|
191 border: 1px solid #ddd;
|
pankso@41
|
192 cursor: pointer;
|
pankso@41
|
193 color: #000;
|
pankso@41
|
194 font-weight: bold;
|
pankso@80
|
195 border-radius: 0px;
|
pankso@80
|
196 }
|
pankso@80
|
197
|
pankso@80
|
198 .search input[type=submit].radius {
|
pankso@41
|
199 border-top-right-radius: 4px;
|
pankso@41
|
200 border-bottom-right-radius: 4px;
|
pankso@41
|
201 border-top-left-radius: 0px;
|
pankso@41
|
202 border-bottom-left-radius: 0px;
|
pankso@41
|
203 }
|
pankso@41
|
204
|
pankso@41
|
205 .search input[type=text] {
|
pankso@41
|
206 border: 1px solid #ddd;
|
pankso@41
|
207 padding: 4px;
|
pankso@384
|
208 height: 18px;
|
pankso@41
|
209 margin: 0;
|
pankso@49
|
210 width: 200px;
|
pankso@41
|
211 border-top-left-radius: 4px;
|
pankso@41
|
212 border-bottom-left-radius: 4px;
|
pankso@41
|
213 }
|
pankso@41
|
214
|
pankso@41
|
215 .box {
|
pankso@41
|
216 margin: 10px 0;
|
pankso@41
|
217 padding: 12px;
|
pankso@41
|
218 background: #f8f8f8;
|
pankso@41
|
219 border: 1px solid #ddd;
|
pankso@41
|
220 }
|
pankso@41
|
221
|
pankso@89
|
222 .box ul { list-style-type: none; padding: 0; }
|
pankso@89
|
223
|
pankso@41
|
224 .debug {
|
pankso@41
|
225 position: fixed;
|
pankso@45
|
226 bottom: 0px;
|
pankso@70
|
227 right: 10px;
|
pankso@70
|
228 left: 10px;
|
pankso@70
|
229 margin: 5px;
|
pankso@70
|
230 padding: 4px 10px;
|
pankso@70
|
231 background-color: #111;
|
pankso@70
|
232 color: #fff;
|
pankso@70
|
233 border: 0;
|
pankso@70
|
234 font-size: 12px;
|
pankso@70
|
235 opacity: 0.9;
|
pankso@41
|
236 }
|
pankso@41
|
237
|
al@303
|
238 .float-left {
|
al@303
|
239 float: left;
|
al@303
|
240 }
|
al@303
|
241 .float-right {
|
al@303
|
242 float: right;
|
al@303
|
243 }
|
pankso@41
|
244
|
pankso@41
|
245 /* Table */
|
pankso@41
|
246
|
pankso@41
|
247 table {
|
pankso@41
|
248 background-color: #f8f8f8;
|
pankso@384
|
249 border: 4px solid #ddd;
|
pankso@41
|
250 padding: 10px;
|
pankso@41
|
251 width: 100%;
|
pankso@41
|
252 margin: 0 0 6px 0;
|
pankso@41
|
253 }
|
pankso@41
|
254
|
pankso@41
|
255 table a { color: #000; }
|
pankso@41
|
256 table a:hover { color: #666; }
|
pankso@46
|
257 td.small { min-width: 60px; }
|
pankso@41
|
258 td.pkg { max-width: 160px; }
|
pankso@41
|
259 td.desc { max-width: 300px; }
|
pankso@153
|
260 td.pct { min-width: 200px; background: #eee; }
|
pascal@217
|
261 div.pct { background: #ccc; }
|
pankso@153
|
262 td.pct, div.pct { border-radius: 2px; }
|
pankso@41
|
263
|
pankso@42
|
264 #thead, .thead, thead {
|
pankso@41
|
265 height: 10px;
|
pankso@41
|
266 font-weight: bold;
|
pankso@41
|
267 }
|
pankso@41
|
268
|
al@303
|
269 /*
|
al@303
|
270 * Table Zebra
|
al@303
|
271 */
|
al@303
|
272
|
al@303
|
273 table.zebra {
|
al@303
|
274 border: none;
|
al@303
|
275 border-collapse: collapse;
|
pankso@384
|
276 margin: 20px 0;
|
al@303
|
277 }
|
al@303
|
278 table.zebra tr:nth-child(even) {
|
al@303
|
279 background-color: rgba(0,0,0,0.05);
|
al@303
|
280 }
|
al@303
|
281 table.zebra thead tr td {
|
al@303
|
282 height: 22px;
|
al@303
|
283 background-color: #eee;
|
al@303
|
284 text-align: center;
|
al@303
|
285 vertical-align: middle;
|
al@303
|
286 }
|
al@303
|
287 table.zebra td + td {
|
al@303
|
288 border-left: 1px solid #ddd;
|
pankso@384
|
289 height: 22px;
|
al@303
|
290 }
|
pankso@384
|
291 table.zebra td:first-child { padding-left: 6px; }
|
al@311
|
292 .outbox {
|
psychomaniak@400
|
293 box-shadow: 0 0 2px 4px #ddd;
|
al@311
|
294 }
|
al@311
|
295 .fixed {
|
al@311
|
296 table-layout: fixed;
|
al@311
|
297 }
|
al@303
|
298
|
al@303
|
299 /*
|
al@303
|
300 * syntax_highlighter
|
al@303
|
301 */
|
pankso@74
|
302
|
pankso@74
|
303 span.conf-comment { color: #666; }
|
pankso@76
|
304 span.conf-var { color: #392600; }
|
pankso@75
|
305 span.conf-val, span.sh-val { color: #f35a00; }
|
pankso@75
|
306 span.sh-comment { color: #b20000; }
|
al@303
|
307 span.activity-log { color: #888; }
|
pankso@120
|
308 span.diff-rm { color: red; }
|
pankso@120
|
309 span.diff-add { color: green; }
|
pankso@153
|
310 span.diff-at { color: blue; }
|
al@303
|
311 span.top { color: #00c800; font-weight: normal; }
|
al@303
|
312 span.kernel-hex { color: #18A423; }
|
al@303
|
313 span.kernel-id { color: #287FC7; }
|
al@303
|
314 span.kernel-id2 { color: #843523; }
|
al@363
|
315 span.lsusb-h, span.lspci-h { color: #800; font-weight: bold; }
|
al@363
|
316 span.lsusb-t, span.lspci-t { color: #448; font-weight: bold; }
|
pankso@153
|
317
|
pankso@29
|
318 /* Misc */
|
pankso@17
|
319
|
al@311
|
320 pre, .pre-main {
|
al@303
|
321 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
|
al@311
|
322 background-color: #f8f8f8;
|
pankso@384
|
323 border: 4px solid #ddd;
|
pankso@17
|
324 padding: 10px;
|
pankso@17
|
325 margin: 10px 0;
|
pankso@17
|
326 overflow: auto;
|
pankso@17
|
327 }
|
pankso@17
|
328
|
pankso@41
|
329 .pre-main { margin: 16px 0; }
|
pankso@41
|
330
|
pankso@41
|
331 input[type=submit], select, .button {
|
pankso@384
|
332 color: #444444;
|
pankso@384
|
333 border: 1px solid #afafaf;
|
pankso@41
|
334 padding: 4px;
|
pankso@384
|
335 margin: 4px 0px;
|
pankso@384
|
336 font-size: 14px;
|
pankso@384
|
337 line-height: 1.2em;
|
pankso@384
|
338 background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
|
pankso@384
|
339 background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
|
pankso@384
|
340 -webkit-appearance: none;
|
pankso@384
|
341 -webkit-padding-end: 12px;
|
pankso@384
|
342 -webkit-padding-start: 6px;
|
pankso@17
|
343 }
|
pankso@384
|
344 input[type="submit"] {
|
pankso@384
|
345 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
pankso@384
|
346 -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
pankso@384
|
347 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
pankso@384
|
348 }
|
pankso@384
|
349 /*select {
|
pankso@384
|
350 background-image: url(images/down.png),
|
pankso@384
|
351 -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
|
pankso@384
|
352 background-position: center right;
|
pankso@384
|
353 background-repeat: no-repeat;
|
pankso@384
|
354 }*/
|
al@303
|
355 a.button {
|
al@303
|
356 white-space: nowrap;
|
al@303
|
357 height: 16px;
|
al@303
|
358 margin: 2px 0;
|
al@303
|
359 display: inline-block;
|
al@303
|
360 }
|
pankso@17
|
361
|
pankso@41
|
362 input[type=submit]:hover, select:hover, .button:hover {
|
pankso@17
|
363 background-color: #ddd;
|
pankso@17
|
364 border: 1px solid #999;
|
pankso@17
|
365 }
|
pankso@17
|
366
|
pankso@49
|
367 input[type=text], input[type=password] { height: 18px; }
|
pankso@14
|
368
|
pankso@44
|
369 div.scroll { height: 200px; overflow: auto;
|
pankso@44
|
370 border: 1px solid #ddd; }
|
pankso@42
|
371 div.scroll table { border: 0px solid #fff; }
|
pankso@42
|
372
|
pankso@191
|
373 #terminal {
|
pankso@191
|
374 background: #000;
|
pankso@191
|
375 color: #fff;
|
pankso@191
|
376 border: 1px solid #444;
|
pankso@384
|
377 min-height: 240px;
|
pankso@191
|
378 }
|
pankso@191
|
379
|
pankso@1
|
380 /* Round corner */
|
pankso@10
|
381
|
pankso@45
|
382 #loading, table, pre, input[type=submit], .debug, .box,
|
al@312
|
383 .button, div.scroll, .outbox, section {
|
al@312
|
384 -moz-border-radius: 4px;
|
al@312
|
385 -webkit-border-radius: 4px;
|
pankso@1
|
386 border-radius: 4px;
|
pankso@1
|
387 }
|
pankso@41
|
388
|
pankso@112
|
389 /* Help page */
|
pankso@112
|
390
|
pankso@112
|
391 #help { text-align: justify; }
|
pankso@112
|
392 #help a { color: #215090; text-decoration: underline; }
|
pankso@112
|
393 #help a:hover { text-decoration: none; color: blue; }
|
pankso@112
|
394
|
pankso@41
|
395 /* Footer */
|
pankso@41
|
396
|
pankso@41
|
397 #footer {
|
pankso@41
|
398 /* border-bottom: 1px solid #c1baad; */
|
pankso@41
|
399 height: 25px;
|
pankso@41
|
400 text-align: center;
|
pankso@41
|
401 padding: 40px 10px;
|
pankso@41
|
402 font-size: 11px;
|
pankso@116
|
403 color: #bbb;
|
pankso@112
|
404 }
|
pankso@112
|
405
|
pankso@116
|
406 #footer a { color: #bbb; }
|
pankso@116
|
407 #footer a:hover { color: #555; }
|
al@303
|
408
|
al@303
|
409 /* HTML5 Meter */
|
al@303
|
410 .meter {
|
al@303
|
411 height: 22px;
|
al@303
|
412 min-width: 200px;
|
al@303
|
413 cursor: default;
|
al@303
|
414 }
|
al@303
|
415 .meter meter {
|
al@303
|
416 height: inherit;
|
al@303
|
417 width: 100%;
|
al@303
|
418 display: block;
|
al@303
|
419 border: 1px solid #ddd;
|
al@303
|
420 border-radius: 4px;
|
al@303
|
421 }
|
al@303
|
422 .meter span {
|
al@303
|
423 height: 22px;
|
al@303
|
424 display: block;
|
al@303
|
425 white-space: nowrap;
|
al@303
|
426 position: absolute;
|
al@303
|
427 margin: -18px auto 0 2px;
|
al@303
|
428 }
|
al@303
|
429
|
al@303
|
430 a.button, input {
|
al@303
|
431 -webkit-transition: all 0.3s ease-in-out;
|
al@303
|
432 -moz-transition: all 0.3s ease-in-out;
|
al@303
|
433 -o-transition: all 0.3s ease-in-out;
|
al@303
|
434 -ms-transition: all 0.3s ease-in-out;
|
al@303
|
435 transition: all 0.3s ease-in-out;
|
al@303
|
436 }
|
al@312
|
437
|
pankso@384
|
438 /*section {
|
al@312
|
439 margin: 20pt -0.7em;
|
pankso@384
|
440 padding: 0.8em 0.7em 1.2em;
|
al@312
|
441 background-color: #fdfdfd;
|
al@312
|
442 border: 1px solid #ddd;
|
al@312
|
443 border-radius: 1em;
|
pankso@384
|
444 box-shadow: 0 0 3pt 2pt #eee;
|
al@312
|
445 }
|
al@312
|
446 section h4 {
|
al@312
|
447 margin: 0 0 0.5em 0;
|
al@312
|
448 }
|
al@312
|
449 section h3 {
|
pankso@384
|
450 margin: 0 0 0.5em 0; }
|
pankso@384
|
451 */
|