wok-current view tazpanel-theme-sandfive/stuff/style.css @ rev 16886
libwebkit-video: use original ver receipt: no ruby builddep
| author | Xander Ziiryanoff <psychomaniak@xakep.ru> |
|---|---|
| date | Mon Jul 14 02:53:40 2014 +0300 (2014-07-14) |
| parents | |
| children |
line source
1 /*
2 * CSS style for TazPanel - (C) 2011 SliTaz GNU/Linux
3 *
4 */
6 /* To always have a scroll bar */
7 html {
8 min-height: 102%;
9 }
11 body {
12 background: #F0EFE4;
13 color: #453A1C;
14 font: 12px "Coda", "Sans", FreeSans, sans-serif;
15 margin: 25px 0 0;
16 }
18 * {
19 outline: 0;
20 }
22 h1 { color: #CE895E; padding: 6px 0 0 20px; font-size: 180%; }
23 h2 { color: #5E4F26; margin: 10px 0 10px; font-size: 150%; }
24 h3 { color: #453A1C; font-size: 140%; }
25 h4 { color: #453A1C; font-size: 120%; margin: 10px 0 5px; }
26 img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
27 p { margin: 10px 0; }
28 ul { list-style-type: square; }
29 li { padding: 4px 0; }
30 a { text-decoration: none; color: #807455; }
31 a:hover { color: #2A220E; }
33 /* Header and main title */
35 #header {
36 background: #FAFAFA;
37 text-shadow: 1px 1px 1px rgb(220,220,220);
38 padding: 10px 0;
39 box-shadow: inset 0 0 10px 0 rgb(200,200,200);
40 }
42 /* Desktop gui style bar */
44 #toolbar {
45 position: fixed;
46 top: 0;
47 left: 0;
48 height: 23px;
49 width: 100%;
50 padding: 4px 0;
51 background: #DBD9CC;
52 border-bottom: 1px solid #F2F2F2;
53 z-index: 200;
54 cursor: default;
55 }
57 #menu {
58 margin: 0;
59 padding: 0;
60 }
61 #menu li {
62 list-style: none;
63 float: left;
64 padding: 0;
65 }
66 #menu li a {
67 display: block;
68 padding: 4px 6px;
69 background-color: inherit;
70 text-decoration: none;
71 cursor: default;
72 color: #000;
73 }
74 #menu li a:hover {
75 color: #FFF;
76 background: #CE895E; /* no support gradient */
77 background-image: linear-gradient(to bottom, #DFA17B, #CE895E);
78 background-image: webkit-linear-gradient(to bottom, #DFA17B, #CE895E);
79 border-top-right-radius: 3px;
80 border-top-left-radius: 3px;
81 }
82 #menu li ul {
83 display: none;
84 min-width: 180px;
85 background: #DBD9CC;
86 border: 1px solid #D1D0C3;
87 }
88 #menu li ul a {
89 padding: 4px 6px;
90 }
91 #menu li:hover ul {
92 display: block;
93 position: absolute;
94 margin: 0;
95 padding: 0;
96 }
97 #menu li:hover li {
98 float: none;
99 }
100 #menu li:hover li a {
101 background-color: #DBD9CC;
102 color: #453A1C;
103 }
104 #menu li li a { border: none; }
105 #menu li li a:hover {
106 background: #CE895E; /* no support gradient */
107 background-image: linear-gradient(to bottom, #DFA17B, #CE895E);
108 background-image: webkit-linear-gradient(to bottom, #DFA17B, #CE895E);
109 color: #FFF;
110 border-radius: 2px;
111 }
112 /* addings
113 *
114 */
115 #menu > ul {
116 visibility: hidden;
117 opacity: 0;
118 transition: visibility 0s linear 0.5s, opacity 0.5s linear;
119 }
120 #menu:hover > ul {
121 visibility: visible;
122 opacity: 1;
123 transition-delay: 0s;
124 }
127 #icons { margin: 3px 8px; float: right; }
128 #icons img { padding: 0; }
130 #loading {
131 z-index: 1000;
132 background: #F6F6A8;
133 color: #453A1C;
134 text-align: center;
135 cursor: progress;
136 position: fixed;
137 top: 123px;
138 right: 0px;
139 width: 248px;
140 padding: 40px 12px;
141 border: 2px solid #E38E5E;
142 /* box-shadow: 0 0 2000px 2000px #453A1C; */
143 }
145 /* Blocks */
147 #block { float: left; }
149 /* Sidebar menus */
151 #sidebar {
152 background: rgba(255,255,255, .5);
153 position: fixed;
154 top: 118px;
155 right: 0;
156 width: 116px;
157 padding: 20px 0;
158 border-radius: 4px;
159 box-shadow: 0 0 10px 0 rgba(0,0,0, .3);
160 }
162 #sidebar a {
163 display: block;
164 padding: 0px 0 0px 12px;
165 margin: 0;
166 }
168 #sidebar a.active {
169 color: #000;
170 font-weight: bold;
171 }
173 #sidebar h4 { margin: 0 0 2px 12px; }
174 #sidebar ul { list-style-type: none; padding: 0; }
176 /* Content */
178 #content { margin: 20px; }
179 #content-sidebar { margin: 20px 120px 20px 20px; }
180 #wrapper { margin: 10px 0 20px; }
182 #actions {
183 min-height: 20px;
184 padding: 16px 0;
185 }
187 #actions p { margin: 6px 0; }
189 .search {
190 position: absolute;
191 right: 40px;
192 top: 43px;
193 }
195 .search * {
196 font-size: 11px!important;
197 }
199 .search input[type=submit] {
200 letter-spacing: 1px;
201 padding: 5px;
202 margin-left: -4px;
203 background: #DEDCD0;
204 cursor: pointer;
205 color: #000;
206 font-weight: normal;
207 border-radius: 0px;
208 }
210 .search input[type=submit].radius {
211 border-radius: 4px;
212 border-top-left-radius: 0px;
213 border-bottom-left-radius: 0px;
214 }
216 .search input[type=text] {
217 background: #F2F2F2;
218 color: #453A1C;
219 border: 2px solid #DEDCD0;
220 padding: 4px;
221 height: 17px;
222 margin: 0;
223 width: 200px;
224 border-top-left-radius: 4px;
225 border-bottom-left-radius: 4px;
226 }
228 .box {
229 margin: 10px 0;
230 padding: 12px;
231 background: #FFF;
232 border: 1px solid #D1D1C7;
233 box-shadow: 0 0 4px 0 #C2C1B8;
234 }
236 .box ul { list-style-type: none; padding: 0; }
238 .debug {
239 position: fixed;
240 bottom: 0px;
241 right: 10px;
242 left: 10px;
243 margin: 5px;
244 padding: 4px 10px;
245 background: #453A1C;
246 color: #FFF;
247 border: 0;
248 font-size: 12px;
249 opacity: 0.9;
250 }
252 .float-left {
253 float: left;
254 }
255 .float-right {
256 float: right;
257 }
259 /* Table */
261 table {
262 background-color: #f8f8f8;
263 border: 1px solid #DBD9CC;
264 padding: 10px;
265 width: 100%;
266 margin: 0 0 6px 0;
267 }
269 table a { color: #000; }
270 table a:hover { color: #666; }
271 td.small { min-width: 60px; }
272 td.pkg { max-width: 160px; }
273 td.desc { max-width: 300px; }
274 td.pct { min-width: 200px; background: #E3E1D3; }
275 div.pct { background: #ccc; }
276 td.pct, div.pct { border-radius: 2px; }
278 #thead, .thead, thead {
279 height: 10px;
280 font-weight: bold;
281 }
283 /*
284 * Table Zebra
285 */
287 table.zebra {
288 border: none;
289 border-collapse: collapse;
290 margin: 16px 0;
291 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #D1D0C3;
292 }
293 table.zebra tr:nth-child(even) {
294 background-color: #E3E1D4;
295 }
296 table.zebra thead tr td {
297 height: 22px;
298 background-color: #E3E1D3;
299 text-align: center;
300 vertical-align: middle;
301 }
302 table.zebra td + td {
303 border-left: 1px solid #DBD9CC;
304 }
307 /*
308 * syntax_highlighter
309 */
311 span.conf-comment { color: #666; }
312 span.conf-var { color: #392600; }
313 span.conf-val, span.sh-val { color: #f35a00; }
314 span.sh-comment { color: #b20000; }
315 span.activity-log { color: #888; }
316 span.diff-rm { color: red; }
317 span.diff-add { color: green; }
318 span.diff-at { color: blue; }
319 span.top { color: #00c800; font-weight: normal; }
320 span.kernel-hex { color: #18A423; }
321 span.kernel-id { color: #287FC7; }
322 span.kernel-id2 { color: #843523; }
324 /* alert messages */
325 span.msg-ok { color: limegreen; }
326 span.msg-nok { color: tomato; }
328 /* Misc */
330 pre, .pre-main {
331 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
332 background-color: #f8f8f8;
333 border: 1px solid #DBD9CC;
334 padding: 10px;
335 margin: 10px 0;
336 overflow: auto;
337 }
339 .pre-main { margin: 16px 0; }
341 input[type=submit], select, .button {
342 padding: 4px;
343 margin: 0;
344 background-color: #f1f1f1;
345 border: 1px solid #DBD9CC;
346 cursor: pointer;
347 color: #000;
348 }
349 a.button {
350 white-space: nowrap;
351 height: 16px;
352 margin: 2px 0;
353 display: inline-block;
354 }
356 input[type=submit]:hover, select:hover, .button:hover {
357 background-color: #DBD9CC;
358 border: 1px solid #999;
359 }
361 input[type=text], input[type=password] { height: 18px; }
363 div.scroll { height: 200px; overflow: auto;
364 border: 1px solid #DBD9CC; }
365 div.scroll table { border: 0px solid #fff; }
367 #terminal {
368 background: #000;
369 color: #fff;
370 border: 1px solid #444;
371 min-height: 180px;
372 opacity: 0.8;
373 }
375 /* Round corner */
377 #loading, table, pre, input[type=submit], .debug, .box,
378 .button, div.scroll {
379 /*-moz-border-radius: 4px;
380 -webkit-border-radius: 4px; */
381 border-radius: 4px;
382 }
384 /* Help page */
386 #help { text-align: justify; }
387 #help a { color: #215090; text-decoration: underline; }
388 #help a:hover { text-decoration: none; color: blue; }
390 /* Footer */
392 #footer {
393 /* border-bottom: 1px solid #c1baad; */
394 height: 25px;
395 text-align: center;
396 padding: 40px 10px;
397 font-size: 11px;
398 color: inherit;
399 }
401 #footer a { color: #817553; text-decoration:underline; }
402 #footer a:hover { color: #2B2513; text-decoration:none; }
404 /* HTML5 Meter */
405 .meter {
406 height: 22px;
407 min-width: 200px;
408 cursor: default;
409 }
410 .meter meter {
411 height: inherit;
412 width: 100%;
413 display: block;
414 border: 1px solid #DBD9CC;
415 border-radius: 4px;
416 }
417 .meter span {
418 height: 22px;
419 display: block;
420 white-space: nowrap;
421 position: absolute;
422 margin: -18px auto 0 2px;
423 }
426 a.button, input {
427 -webkit-transition: all 0.3s ease-in-out;
428 -moz-transition: all 0.3s ease-in-out;
429 -o-transition: all 0.3s ease-in-out;
430 -ms-transition: all 0.3s ease-in-out;
431 transition: all 0.3s ease-in-out;
432 }
434 input {
435 border: 1px solid #B4AC95!important;
436 border-radius: 2px!important;
437 }