rev |
line source |
al@419
|
1 /**
|
al@419
|
2 * CSS style for TazPanel - (C) 2011-2015 SliTaz GNU/Linux
|
al@419
|
3 */
|
al@419
|
4
|
al@419
|
5
|
al@419
|
6 /* To always have a scroll bar */
|
al@419
|
7 /*html { min-height: 102%; } */
|
al@419
|
8
|
al@419
|
9 body { color: CaptionText; font: caption; margin: 72px 0 0 0; }
|
al@419
|
10
|
al@419
|
11
|
al@419
|
12
|
al@419
|
13 /**
|
al@419
|
14 * Header and main title
|
al@419
|
15 */
|
al@419
|
16
|
al@419
|
17 body > header {
|
al@419
|
18 position: fixed; top: 0; left: 0;
|
al@501
|
19 width: 100%; height: 40px;
|
al@419
|
20 background-color: #222;
|
al@519
|
21 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUXFxciIygUb+JNAAAAEUlEQVQIHWNkYGDMFQYhDAYAJbADCjwbCYUAAAAASUVORK5CYII=');
|
al@419
|
22 }
|
al@419
|
23
|
al@419
|
24 body > header h1 {
|
al@419
|
25 margin: 0;
|
al@501
|
26 color: #CCC;
|
al@501
|
27 font-size: 18px; line-height: 21px;
|
al@501
|
28 font-weight: 300;
|
al@501
|
29 white-space: nowrap; overflow: hidden;
|
al@501
|
30 vertical-align: middle;
|
al@501
|
31 }
|
al@501
|
32
|
al@501
|
33 body > header div {
|
al@501
|
34 position: absolute; left: 40px; top: 21px;
|
al@501
|
35 color: #FFF; background: transparent;
|
al@501
|
36 font-size: 14px; line-height: 19px;
|
al@501
|
37 font-weight: 300;
|
al@419
|
38 white-space: nowrap; overflow: hidden;
|
al@419
|
39 vertical-align: middle;
|
al@419
|
40 }
|
al@419
|
41
|
al@419
|
42
|
al@419
|
43 /**
|
al@419
|
44 * Toolbar with menu
|
al@419
|
45 */
|
al@419
|
46
|
al@419
|
47 nav {
|
al@419
|
48 position: fixed; top: 40px; left: 0;
|
al@419
|
49 width: 100%;
|
al@419
|
50 display: table;
|
al@419
|
51 border: 1px solid; border-right: none; border-left: none;
|
al@419
|
52 }
|
al@419
|
53
|
al@419
|
54
|
al@419
|
55
|
al@419
|
56 /* menu panel */
|
al@419
|
57 #toolbarMenu { margin: 0; padding: 0; height: 100%; font: menu; }
|
al@419
|
58
|
al@471
|
59 /* shadows */
|
al@471
|
60 #toolbar { z-index: 10; box-shadow: 0 0 8px #000; }
|
al@471
|
61 menu.opened, menu.opened li:hover menu { z-index: 9; box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.3); }
|
al@471
|
62
|
al@419
|
63 /* menu items */
|
al@419
|
64 #toolbarMenu li {
|
al@419
|
65 list-style: none;
|
al@419
|
66 float: left;
|
al@419
|
67 display: block;
|
al@419
|
68 padding: 0;
|
al@419
|
69 color: inherit; background: inherit;
|
al@419
|
70 outline: none;
|
al@419
|
71 }
|
al@419
|
72 #toolbarMenu > li > span {
|
al@419
|
73 display: inline-block;
|
al@419
|
74 padding: 0.2rem;
|
al@437
|
75 cursor: pointer;
|
al@419
|
76 }
|
al@419
|
77
|
al@437
|
78 #toolbarMenu menu li a {
|
al@419
|
79 padding: 0.2rem;
|
al@419
|
80 }
|
al@419
|
81
|
al@419
|
82 /* Selected menu item */
|
al@419
|
83 #toolbarMenu li:focus span,
|
al@419
|
84 #toolbarMenu li:hover span,
|
al@419
|
85 #toolbarMenu menu li:focus,
|
al@437
|
86 .user #toolbarMenu menu li:hover > a:not([data-root]),
|
al@437
|
87 .root #toolbarMenu menu li:hover {
|
al@419
|
88 background-color: hsla(30, 100%, 50%, 0.5);
|
al@419
|
89 }
|
al@419
|
90
|
al@419
|
91
|
al@419
|
92
|
al@419
|
93
|
al@419
|
94 #toolbarMenu menu {
|
al@419
|
95 position: absolute;
|
al@419
|
96 margin: 0; padding: 0;
|
al@419
|
97 white-space: nowrap;
|
al@419
|
98 border: 1px solid;
|
al@419
|
99 display: none;
|
al@419
|
100 }
|
al@419
|
101
|
al@419
|
102 /* Submenus */
|
al@419
|
103 #toolbarMenu menu menu {
|
al@419
|
104 left: 100%; top: 0;
|
al@419
|
105 min-width: 100%;
|
al@419
|
106 }
|
al@419
|
107
|
al@419
|
108 /* Show menu list */
|
al@419
|
109 #toolbarMenu menu.opened {
|
al@419
|
110 display: block; z-index: 10;
|
al@419
|
111 }
|
al@419
|
112
|
al@419
|
113 /* By default hide submenus */
|
al@419
|
114 #toolbarMenu menu.opened menu {
|
al@419
|
115 display: none;
|
al@419
|
116 }
|
al@419
|
117 /* Show submenu on mouse over */
|
al@419
|
118 .opened li:hover menu { display: block !important; }
|
al@419
|
119
|
al@419
|
120 /* Menu items one below the other */
|
al@419
|
121 #toolbarMenu menu li {
|
al@419
|
122 position: relative;
|
al@419
|
123 float: none;
|
al@419
|
124 }
|
al@419
|
125 /* Show arrow for submenu */
|
al@419
|
126 #toolbarMenu a:after { content: "‣"; float: right; }
|
al@419
|
127 #toolbarMenu a:only-child:after { content: " "; }
|
al@419
|
128
|
al@419
|
129 #toolbarMenu a { display: block; color: inherit; text-decoration: none; }
|
al@419
|
130
|
al@426
|
131 /* Clicking this layer close menu */
|
al@419
|
132 #noMenu {
|
al@471
|
133 position: absolute; top: 63px; bottom: 0; left: 0; right: 0;
|
al@426
|
134 background-color: transparent;
|
al@419
|
135 display: none;
|
al@471
|
136 z-index: 9;
|
al@419
|
137 }
|
al@419
|
138
|
al@419
|
139
|
al@419
|
140 /**
|
al@419
|
141 * Panes, sections
|
al@419
|
142 */
|
al@419
|
143
|
al@419
|
144 section {
|
al@419
|
145 display: block;
|
al@419
|
146 border: 1pt solid; border-radius: 0.3rem;
|
al@419
|
147 padding: 0; margin: 0.5rem 0 0 0;
|
al@419
|
148 }
|
al@419
|
149
|
al@419
|
150 section header {
|
al@419
|
151 padding: 0.2rem 0.3rem; margin: 0;
|
al@419
|
152 display: table; width: 100%;
|
al@419
|
153 border-radius: 0.3rem 0.3rem 0 0;
|
al@419
|
154 font-weight: bold; font-size: 1.1rem;/* line-height: 0;*/
|
al@470
|
155 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.2);
|
al@419
|
156 overflow: auto; /* provide break after floated objects */
|
al@419
|
157 vertical-align: baseline;
|
al@543
|
158 box-sizing: border-box;
|
al@419
|
159 }
|
al@419
|
160 section header form, section footer form {
|
al@419
|
161 display: table-cell; vertical-align: baseline; line-height: 0; width: 1px; white-space: nowrap;
|
al@419
|
162 }
|
al@526
|
163 section header button, section header input, section footer button, section footer input { margin: 0; }
|
al@419
|
164
|
al@519
|
165 section header a { float: right; }
|
al@519
|
166
|
al@419
|
167 section footer {
|
al@419
|
168 padding: 0 0.3rem 0.2rem; margin: 0;
|
al@419
|
169 display: block;
|
al@419
|
170 overflow: auto; /* provide break after floated objects */
|
al@419
|
171 vertical-align: baseline;
|
al@419
|
172 }
|
al@419
|
173
|
al@419
|
174 section > pre,
|
al@419
|
175 section div { padding: 0.3rem 0.3rem 0.2rem 0.3rem; margin: 0; }
|
al@419
|
176 section td:nth-child(1) { padding-left: 0.3rem; }
|
al@419
|
177 section table { margin-bottom: 0.3rem; }
|
al@419
|
178 .nogap { word-spacing: 0; } /* remove gap between buttons in line */
|
al@419
|
179
|
al@448
|
180 .scroll { max-height: 12rem; overflow: auto; }
|
al@448
|
181 section .scroll { padding: 0; margin: 0; border: 1pt solid; }
|
al@448
|
182 section pre.scroll { margin: 0.1rem; padding: 0.1rem; }
|
al@419
|
183
|
al@419
|
184
|
al@419
|
185
|
al@419
|
186
|
al@419
|
187
|
al@419
|
188
|
al@419
|
189
|
al@419
|
190
|
al@419
|
191 #actions {
|
al@419
|
192 display: block;
|
al@419
|
193 margin: 0; padding: 0.2rem 0.3rem;
|
al@419
|
194 overflow: auto; /* provide break after floated objects */
|
al@419
|
195 }
|
al@419
|
196 .float-left, .float-right { display: table-cell; padding: 0; margin: 0; }
|
al@419
|
197 .float-left { float: left; }
|
al@419
|
198 .float-right { float: right; }
|
al@419
|
199
|
al@419
|
200
|
al@419
|
201
|
al@426
|
202 fieldset { border: 1pt solid; border-radius: 0.3rem; margin-bottom: 0.2rem; }
|
al@437
|
203 fieldset[disabled] { background-color: hsla(0, 0%, 50%, 0.1);}
|
al@419
|
204
|
al@419
|
205
|
al@419
|
206
|
al@419
|
207
|
al@419
|
208
|
al@419
|
209 /* Icons on the right of the toolbar */
|
al@419
|
210 #icons {
|
al@419
|
211 display: table-cell; vertical-align: middle; /* center vertical */
|
al@419
|
212 padding: 0.1rem 0.3rem;
|
al@419
|
213 white-space: nowrap; width: 1rem; /* minimal width */
|
al@419
|
214 }
|
al@419
|
215
|
al@419
|
216
|
al@419
|
217
|
al@419
|
218 /* Loading notification bar */
|
al@419
|
219 #loading {
|
al@419
|
220 position: fixed; top: 76px; right: 140px; width: 248px;
|
al@419
|
221 padding: 4px 4px 2px;
|
al@419
|
222 background-color: #f8f8f8; color: #666;
|
al@419
|
223 border: 1px solid #ddd;
|
al@419
|
224 cursor: progress;
|
al@419
|
225 }
|
al@419
|
226
|
al@419
|
227
|
al@419
|
228
|
al@419
|
229 /* Page content container */
|
al@463
|
230 #content { margin: 0; padding: 1ex; }
|
al@419
|
231
|
al@419
|
232
|
al@419
|
233 /* Page first header */
|
al@463
|
234 h2 { font-size: 1.5rem; height: 1.5rem; padding: 0; margin: 0; }
|
al@419
|
235
|
al@419
|
236
|
al@419
|
237 /* Additional headers (obsolete) */
|
al@419
|
238 h3 { font-size: 1.3rem; margin: 0; }
|
al@419
|
239 h4 { font-size: 1.1rem; margin: 0; }
|
al@419
|
240
|
al@419
|
241
|
al@419
|
242 /* Plain paragraph */
|
al@463
|
243 p { margin: 0.5ex 0; }
|
al@419
|
244
|
al@419
|
245
|
al@419
|
246 #actions p { margin: 6px 0; }
|
al@419
|
247
|
al@419
|
248
|
al@419
|
249
|
al@419
|
250
|
al@419
|
251
|
al@419
|
252 button img { padding: 0 3px 0 0; margin: 0; }
|
al@419
|
253 button, input, select {
|
al@419
|
254 /*color: ButtonText;*/
|
al@419
|
255 vertical-align: middle; }
|
al@419
|
256 button:before, input:before, select:before {
|
al@419
|
257 padding: 3px; }
|
al@419
|
258
|
al@419
|
259 ul { list-style-type: square; }
|
al@419
|
260 li { padding: 4px 0; }
|
al@419
|
261
|
al@419
|
262
|
al@419
|
263 /* Blocks */
|
al@419
|
264
|
al@419
|
265 #block { float: left; }
|
al@419
|
266
|
al@419
|
267 #wrapper, .wrapper { margin: 20px 0; }
|
al@419
|
268
|
al@419
|
269 .box {
|
al@437
|
270 display: table;
|
al@437
|
271 padding: 1em;
|
al@437
|
272 width: 50%; margin: 0.5em auto;
|
al@419
|
273 }
|
al@501
|
274 .box span { display: inline-block; margin-right: 0.5rem; float: left; }
|
al@419
|
275
|
al@419
|
276 .box ul { list-style-type: none; padding: 0; }
|
al@419
|
277
|
al@419
|
278 .debug {
|
al@419
|
279 position: fixed;
|
al@419
|
280 bottom: 0px;
|
al@419
|
281 right: 10px;
|
al@419
|
282 left: 10px;
|
al@419
|
283 margin: 5px;
|
al@419
|
284 padding: 4px 10px;
|
al@419
|
285 background-color: #111;
|
al@419
|
286 color: #fff;
|
al@419
|
287 border: 0;
|
al@419
|
288 /*font-size: 12px;*/
|
al@419
|
289 opacity: 0.9;
|
al@419
|
290 }
|
al@419
|
291
|
al@419
|
292
|
al@419
|
293
|
al@419
|
294
|
al@419
|
295 /**********
|
al@419
|
296 * Tables *
|
al@419
|
297 **********/
|
al@419
|
298
|
al@419
|
299 /* Base style */
|
al@419
|
300 table { margin: 0; padding: 0; border: 0 none; border-collapse: collapse; }
|
al@419
|
301
|
al@419
|
302 /* Bold header */
|
al@419
|
303 thead { font-weight: bold; }
|
al@419
|
304
|
al@419
|
305 /* Wide table */
|
al@419
|
306 .wide { width: 100%; }
|
al@419
|
307
|
al@419
|
308 /* Center content excluding first column */
|
al@419
|
309 .center tr td { text-align: center; }
|
al@419
|
310 .center tr td:nth-child(1) { text-align: left; padding-left: 0.3rem; }
|
al@419
|
311
|
al@419
|
312 /* Table Zebra */
|
al@419
|
313 .zebra thead td { line-height: 1.5em; text-align: center; vertical-align: middle; border: 1pt solid; }
|
al@419
|
314
|
al@419
|
315
|
al@419
|
316
|
al@419
|
317 .borders.zebra td + td { border-left: 1px solid; }
|
al@419
|
318
|
al@419
|
319
|
al@419
|
320
|
al@419
|
321 .outbox { box-shadow: 0 0 2px 4px #ddd; }
|
al@419
|
322 .fixed { table-layout: fixed; }
|
al@419
|
323
|
al@419
|
324
|
al@419
|
325 .borders tr { border-bottom: 1pt solid; }
|
al@419
|
326
|
al@419
|
327 .hborders thead tr { border-top: 1.5pt solid; border-bottom: 1.5pt solid; }
|
al@419
|
328
|
al@419
|
329 td.small { min-width: 60px; }
|
al@419
|
330 td.pct { min-width: 200px; background: #eee; }
|
al@419
|
331 div.pct { background: #ccc; }
|
al@419
|
332 td.pct, div.pct { border-radius: 2px; }
|
al@419
|
333 td img {vertical-align: middle; }
|
al@419
|
334
|
al@419
|
335 table.daemons td:nth-child(4), table.daemons td:nth-child(5) { text-align: center; }
|
al@419
|
336
|
al@419
|
337
|
al@419
|
338
|
al@419
|
339
|
al@419
|
340
|
al@437
|
341 /**
|
al@437
|
342 * Misc
|
al@437
|
343 */
|
al@437
|
344
|
al@437
|
345 /* Links */
|
al@419
|
346
|
al@419
|
347 a { text-decoration: none; color: #268bd2; cursor: pointer; }
|
al@419
|
348 a:not([data-img]):hover { text-decoration: underline; }
|
al@419
|
349
|
al@419
|
350
|
al@419
|
351 form { display: inline-block; padding: 0; margin: 0; }
|
al@419
|
352
|
al@419
|
353 pre { margin: 0; padding: 0; color: CaptionText; }
|
al@419
|
354
|
al@419
|
355 .pre-main { margin: 16px 0; }
|
al@452
|
356 .pre-wrap { white-space: pre-wrap; }
|
al@419
|
357
|
al@419
|
358
|
al@419
|
359
|
al@419
|
360 /* Round corner */
|
al@419
|
361
|
al@437
|
362 #loading, .debug, .box, .outbox, section {
|
al@419
|
363 -moz-border-radius: 4px;
|
al@419
|
364 -webkit-border-radius: 4px;
|
al@419
|
365 border-radius: 4px;
|
al@419
|
366 }
|
al@419
|
367
|
al@419
|
368 /* Help page */
|
al@419
|
369
|
al@419
|
370 #help { text-align: justify; }
|
al@419
|
371 #help a { text-decoration: underline; }
|
al@419
|
372 #help a:hover { text-decoration: none; }
|
al@419
|
373
|
al@419
|
374
|
al@419
|
375
|
al@419
|
376 /*
|
al@419
|
377 * Page footer
|
al@419
|
378 */
|
al@419
|
379
|
al@419
|
380 body > footer {
|
al@419
|
381 border-top: 1px solid;
|
al@419
|
382 text-align: center;
|
al@498
|
383 height: 19px; margin: 0; padding: 0;
|
al@498
|
384 line-height: 16px; vertical-align: middle;
|
al@498
|
385 z-index: 10;
|
al@499
|
386 overflow: hidden;
|
al@419
|
387 }
|
al@499
|
388 #defaultStatus, #statusBar { font-size: smaller; vertical-align: middle; }
|
al@419
|
389
|
al@498
|
390 #content { z-index: 5; }
|
al@498
|
391
|
al@498
|
392 #ajaxStatus {
|
al@499
|
393 position: absolute; right: 0; top: -4px;
|
al@498
|
394 display: inline-block;
|
al@499
|
395 font-size: 16px!important; line-height: 16px!important; vertical-align: middle;
|
al@498
|
396 padding: 0; margin: 0;
|
al@498
|
397 height: 16px;
|
al@498
|
398 }
|
al@419
|
399
|
al@419
|
400 /***************
|
al@419
|
401 * HTML5 Meter *
|
al@419
|
402 ***************/
|
al@419
|
403
|
al@419
|
404 .meter {
|
al@419
|
405 height: 1.2rem;
|
al@419
|
406 min-width: 150px;
|
al@419
|
407 color: #222;
|
al@419
|
408 /*cursor: default;*/
|
al@419
|
409 }
|
al@419
|
410 .meter meter {
|
al@419
|
411 height: inherit;
|
al@419
|
412 width: 100%;
|
al@419
|
413 display: block;
|
al@419
|
414 border: 1px solid #ddd;
|
al@419
|
415 border-radius: 4px;
|
al@419
|
416 }
|
al@419
|
417 .meter span {
|
al@419
|
418 display: block;
|
al@419
|
419 white-space: nowrap;
|
al@419
|
420 position: absolute;
|
al@419
|
421 margin: -1.1rem auto 0 0.3rem;
|
al@419
|
422 }
|
al@419
|
423
|
al@419
|
424
|
al@419
|
425
|
al@419
|
426 /**************
|
al@419
|
427 * Animations *
|
al@419
|
428 **************/
|
al@419
|
429
|
al@419
|
430 a.button {
|
al@419
|
431 -webkit-transition: all 0.3s ease-in-out;
|
al@419
|
432 -moz-transition: all 0.3s ease-in-out;
|
al@419
|
433 -o-transition: all 0.3s ease-in-out;
|
al@419
|
434 -ms-transition: all 0.3s ease-in-out;
|
al@419
|
435 transition: all 0.3s ease-in-out;
|
al@419
|
436 }
|
al@419
|
437
|
al@419
|
438 /*section {
|
al@419
|
439 margin: 20pt -0.7em;
|
al@419
|
440 padding: 0.8em 0.7em 1.2em;
|
al@419
|
441 background-color: #fdfdfd;
|
al@419
|
442 border: 1px solid #ddd;
|
al@419
|
443 border-radius: 1em;
|
al@419
|
444 box-shadow: 0 0 3pt 2pt #eee;
|
al@419
|
445 }
|
al@419
|
446 section h4 {
|
al@419
|
447 margin: 0 0 0.5em 0;
|
al@419
|
448 }
|
al@419
|
449 section h3 {
|
al@419
|
450 margin: 0 0 0.5em 0; }
|
al@419
|
451 */
|
al@419
|
452
|
al@419
|
453 #tabs {
|
al@419
|
454 font-weight: bold;
|
al@419
|
455 /*font-size: 14px;*/
|
al@419
|
456 list-style-type: none;
|
al@419
|
457 padding-bottom: 25px;
|
al@419
|
458 border-bottom: 1px solid #aaa;
|
al@419
|
459 }
|
al@419
|
460
|
al@419
|
461 #tabs li {
|
al@419
|
462 float: left;
|
al@419
|
463 height: 16px;
|
al@419
|
464 background-color: #eee;
|
al@419
|
465 margin: 0 40px 0 -40px;
|
al@419
|
466 border: 1px solid #aaa;
|
al@419
|
467 text-align: center;
|
al@419
|
468 min-width: 100px;
|
al@419
|
469 -webkit-border-radius: 4px 4px 0 0;
|
al@419
|
470 -moz-border-radius: 4px 4px 0 0;
|
al@419
|
471 border-radius: 4px 4px 0 0;
|
al@419
|
472 -webkit-appearance: tab;
|
al@419
|
473 appearance: tab;
|
al@419
|
474 }
|
al@419
|
475
|
al@419
|
476 #tabs li.active {
|
al@419
|
477 border-bottom: 1px solid #fff;
|
al@419
|
478 background-color: #fff;
|
al@419
|
479 }
|
al@419
|
480
|
al@419
|
481 #tabs a {
|
al@419
|
482 padding: 8px;
|
al@419
|
483 }
|
al@419
|
484
|
al@419
|
485
|
al@419
|
486
|
al@419
|
487 /****************
|
al@419
|
488 * Search block *
|
al@419
|
489 ****************/
|
al@419
|
490 .search {
|
al@419
|
491 display: block; white-space: nowrap;
|
al@419
|
492 position: fixed; right: 7px; top: 7px;
|
al@419
|
493 margin: 0; padding: 0; border: none;
|
al@419
|
494 }
|
al@419
|
495 .search input {
|
al@419
|
496 display: inline-block;
|
al@419
|
497 width: 200px; height: 24px;
|
al@419
|
498 }
|
al@419
|
499 .search button {
|
al@419
|
500 -webkit-appearance: button;
|
al@419
|
501 height: 100%; margin: 0;
|
al@419
|
502 }
|
al@419
|
503
|
al@419
|
504
|
al@419
|
505
|
al@419
|
506 /**********************
|
al@419
|
507 * Buttons with icons *
|
al@419
|
508 **********************/
|
al@419
|
509 @font-face {
|
al@419
|
510 font-family: TazPanelWeb;
|
al@419
|
511 src: url('/styles/default/tazpanel.ttf');
|
al@419
|
512 }
|
al@419
|
513
|
al@419
|
514 [data-icon]:before, [data-img] {
|
al@419
|
515 vertical-align: baseline;
|
al@419
|
516 padding: 0;
|
al@419
|
517 margin: 0 /*0 0 -0.5em*/;
|
al@419
|
518 font-size: 1.2em;
|
al@419
|
519 font-family: TazPanel, TazPanelWeb;
|
al@419
|
520
|
al@419
|
521 font-style: normal;
|
al@419
|
522 font-weight: normal;
|
al@419
|
523 font-variant: normal;
|
al@419
|
524 text-transform: none;
|
al@419
|
525 line-height: 1.2em;
|
al@419
|
526 display: inline-block;
|
al@419
|
527 text-decoration: none;
|
al@419
|
528 width: 1.2em; text-align: center;
|
al@419
|
529
|
al@419
|
530 -webkit-font-feature-settings: "liga", "dlig";
|
al@419
|
531 -moz-font-feature-settings: "liga=1, dlig=1";
|
al@419
|
532 -o-font-feature-settings: "liga", "dlig";
|
al@419
|
533 font-feature-settings: "liga", "dlig";
|
al@419
|
534
|
al@419
|
535 -webkit-text-rendering: optimizeLegibility;
|
al@419
|
536 -moz-text-rendering: optimizeLegibility;
|
al@419
|
537 -o-text-rendering: optimizeLegibility;
|
al@419
|
538 text-rendering: optimizeLegibility;
|
al@419
|
539
|
al@419
|
540 -webkit-font-smoothing: antialiased;
|
al@419
|
541 -moz-font-smoothing: antialiased;
|
al@419
|
542 -o-font-smoothing: antialiased;
|
al@419
|
543 font-smoothing: antialiased;
|
al@419
|
544 }
|
al@419
|
545 button[data-icon]::before { font-size: 16px; line-height: 16px; width: 16px; }
|
al@419
|
546
|
al@419
|
547 [data-icon]::before { content: attr(data-icon); }
|
al@419
|
548 [data-img]::before { content: attr(data-img); }
|
al@419
|
549
|
al@419
|
550 [data-icon], [data-img] { display: inline-block; }
|
al@419
|
551
|
al@419
|
552
|
al@419
|
553 /* Solarized:
|
al@419
|
554 red #dc322f
|
al@419
|
555 orange #cb4b16
|
al@419
|
556 yellow #b58900
|
al@419
|
557 green #859900
|
al@419
|
558 cyan #2aa198
|
al@419
|
559 blue #268bd2
|
al@419
|
560 magenta #d33682
|
al@419
|
561 */
|
al@419
|
562
|
al@419
|
563
|
al@419
|
564 [data-icon="tazpanel"]::before {
|
al@419
|
565 display: inline-block;
|
al@498
|
566 content: '\f151';
|
al@501
|
567 border: 1pt solid; border-radius: 0.2rem;
|
al@419
|
568 font-size: 32px; line-height: 32px;
|
al@419
|
569
|
al@419
|
570 height: 32px; width: 32px;
|
al@419
|
571 margin: 0.2rem;
|
al@419
|
572 padding: 0;
|
al@419
|
573 vertical-align: top;
|
al@419
|
574 }
|
al@419
|
575
|
al@558
|
576 [data-icon="@msg@"]::before, [data-icon="@msgerr@"]::before,
|
al@558
|
577 [data-icon="@msgwarn@"]::before, [data-icon="@msgup@"]::before,
|
al@558
|
578 [data-icon="@msgtip@"]::before { height: 32px; width: 32px; font-size: 32px; line-height: 32px; }
|
al@419
|
579
|
al@419
|
580
|
al@419
|
581 /*******************
|
al@419
|
582 * Terminal colors *
|
al@419
|
583 *******************/
|
al@419
|
584
|
al@419
|
585 /* Using color palettes from Sakura terminal source */
|
al@419
|
586
|
al@419
|
587 .term {
|
al@419
|
588 padding: 0.3rem;
|
al@419
|
589 height: 24rem; max-height: 24rem;
|
al@419
|
590 white-space: pre-wrap;
|
al@419
|
591 overflow: auto;
|
al@419
|
592 z-index: 4;
|
al@419
|
593 background: transparent;
|
al@419
|
594 }
|
al@419
|
595
|
al@419
|
596 /* SliTaz Spider on background */
|
al@419
|
597 /*.term_ { display: block; position: relative; z-index: 2; }
|
al@419
|
598 .term_::after {
|
al@419
|
599 display: block; border: 1pt solid;
|
al@419
|
600 font-family: TazPanel;
|
al@419
|
601 font-size: 16rem;
|
al@419
|
602 position: absolute; right: 0; bottom: 0;
|
al@419
|
603 content: '\f13f';
|
al@419
|
604 opacity: 1;
|
al@419
|
605 color: orange;
|
al@419
|
606 z-index: 1;
|
al@419
|
607 }*/
|
al@419
|
608
|
al@419
|
609 .term.log { white-space: pre; }
|
al@419
|
610 /*.term input[type="text"] {
|
al@419
|
611 width: 100%!important; padding: 0; margin: 0; vertical-align: middle;
|
al@419
|
612 -webkit-appearance: none!important; -moz-appearance: none; appearance: none;
|
al@419
|
613 display: inline;
|
al@419
|
614 background-color: transparent; color: inherit; border: none; outline: none;
|
al@419
|
615 font: inherit; line-height: 1rem;
|
al@419
|
616 }*/
|
al@419
|
617 .term .cmdline {
|
al@419
|
618 /*position: relative; float: left; display: inline-block; white-space: pre-wrap;
|
al@419
|
619 width: 100%; overflow: hidden; left: 0;
|
al@419
|
620 vertical-align: middle;*/
|
al@419
|
621 padding: 0;
|
al@419
|
622 }
|
al@419
|
623 #typeField {
|
al@419
|
624 outline-style: none !important;
|
al@419
|
625 -webkit-user-modify: read-write;
|
al@419
|
626 word-wrap: break-word;
|
al@419
|
627 -webkit-nbsp-mode: space;
|
al@419
|
628 -webkit-line-break: after-white-space;
|
al@419
|
629 }
|
al@419
|
630 #num_hist {
|
al@419
|
631 display: inline-block;
|
al@419
|
632 position: absolute; right: 0.5rem; float: right;
|
al@419
|
633 height: 0;
|
al@419
|
634 color: #FFF; background: #FFF;
|
al@419
|
635 }
|
al@419
|
636
|
al@419
|
637 /* Tango palette (default) */
|
al@419
|
638 .color30{color:#2E3436} .color1.color30{color:#555753} .color40{background:#2E3436}
|
al@419
|
639 .color31{color:#CC0000} .color1.color31{color:#EF2929} .color41{background:#CC0000}
|
al@419
|
640 .color32{color:#4E9A06} .color1.color32{color:#8AE234} .color42{background:#4E9A06}
|
al@419
|
641 .color33{color:#C4A000} .color1.color33{color:#FCE94F} .color43{background:#C4A000}
|
al@419
|
642 .color34{color:#3465A4} .color1.color34{color:#729FCF} .color44{background:#3465A4}
|
al@419
|
643 .color35{color:#75507B} .color1.color35{color:#AD7FA8} .color45{background:#75507B}
|
al@419
|
644 .color36{color:#06989A} .color1.color36{color:#34E2E2} .color46{background:#06989A}
|
al@419
|
645 .color37{color:#D3D7CF} .color1.color37{color:#EEEEEC} .color47{background:#D3D7CF}
|
al@419
|
646 .term {color:#D3D7CF; background:#2E3436}
|
al@419
|
647
|
al@419
|
648 /* Linux palette */
|
al@419
|
649 .linux .color30{color:#000} .linux .color1.color30{color:#555} .linux .color40{background:#000}
|
al@419
|
650 .linux .color31{color:#A00} .linux .color1.color31{color:#F55} .linux .color41{background:#A00}
|
al@419
|
651 .linux .color32{color:#0A0} .linux .color1.color32{color:#5F5} .linux .color42{background:#0A0}
|
al@419
|
652 .linux .color33{color:#A50} .linux .color1.color33{color:#FF5} .linux .color43{background:#A50}
|
al@419
|
653 .linux .color34{color:#00A} .linux .color1.color34{color:#55F} .linux .color44{background:#00A}
|
al@419
|
654 .linux .color35{color:#A0A} .linux .color1.color35{color:#F5F} .linux .color45{background:#A0A}
|
al@419
|
655 .linux .color36{color:#0AA} .linux .color1.color36{color:#5FF} .linux .color46{background:#0AA}
|
al@419
|
656 .linux .color37{color:#AAA} .linux .color1.color37{color:#FFF} .linux .color47{background:#AAA}
|
al@419
|
657 .linux.term {color:#AAA; background:#000}
|
al@419
|
658
|
al@419
|
659 /* Xterm palette */
|
al@419
|
660 .xterm .color30{color:#000000} .xterm .color1.color30{color:#4C4C4C} .xterm .color40{background:#000000}
|
al@419
|
661 .xterm .color31{color:#CD0000} .xterm .color1.color31{color:#FF0000} .xterm .color41{background:#CD0000}
|
al@419
|
662 .xterm .color32{color:#00CD00} .xterm .color1.color32{color:#00FFFF} .xterm .color42{background:#00CD00}
|
al@419
|
663 .xterm .color33{color:#CDCD00} .xterm .color1.color33{color:#FFFF00} .xterm .color43{background:#CDCD00}
|
al@419
|
664 .xterm .color34{color:#1E90FF} .xterm .color1.color34{color:#4682B4} .xterm .color44{background:#1E90FF}
|
al@419
|
665 .xterm .color35{color:#CD00CD} .xterm .color1.color35{color:#FF00FF} .xterm .color45{background:#CD00CD}
|
al@419
|
666 .xterm .color36{color:#00CDCD} .xterm .color1.color36{color:#00FFFF} .xterm .color46{background:#00CDCD}
|
al@419
|
667 .xterm .color37{color:#E5E5E5} .xterm .color1.color37{color:#FFFFFF} .xterm .color47{background:#E5E5E5}
|
al@419
|
668 .xterm.term {color:#E5E5E5; background:#000000}
|
al@419
|
669
|
al@419
|
670 /* Rxvt palette */
|
al@419
|
671 .rxvt .color30{color:#000000} .rxvt .color1.color30{color:#404040} .rxvt .color40{background:#000000}
|
al@419
|
672 .rxvt .color31{color:#CD0000} .rxvt .color1.color31{color:#FF0000} .rxvt .color41{background:#CD0000}
|
al@419
|
673 .rxvt .color32{color:#00CD00} .rxvt .color1.color32{color:#00FFFF} .rxvt .color42{background:#00CD00}
|
al@419
|
674 .rxvt .color33{color:#CDCD00} .rxvt .color1.color33{color:#FFFF00} .rxvt .color43{background:#CDCD00}
|
al@419
|
675 .rxvt .color34{color:#0000CD} .rxvt .color1.color34{color:#0000FF} .rxvt .color44{background:#0000CD}
|
al@419
|
676 .rxvt .color35{color:#CD00CD} .rxvt .color1.color35{color:#FF00FF} .rxvt .color45{background:#CD00CD}
|
al@419
|
677 .rxvt .color36{color:#00CDCD} .rxvt .color1.color36{color:#00FFFF} .rxvt .color46{background:#00CDCD}
|
al@419
|
678 .rxvt .color37{color:#FAEBD7} .rxvt .color1.color37{color:#FFFFFF} .rxvt .color47{background:#FAEBD7}
|
al@419
|
679 .rxvt.term {color:#FAEBD7; background:#000000}
|
al@419
|
680
|
al@419
|
681 /* Echo palette (http://mso-chronicles.blogspot.com/2013/02/xfce-terminal-and-xchat-colour-scheme.html) */
|
al@419
|
682 .echo .color30{color:#000000} .echo .color1.color30{color:#5E5E5E} .echo .color40{background:#000000}
|
al@419
|
683 .echo .color31{color:#B40000} .echo .color1.color31{color:#FF5200} .echo .color41{background:#B40000}
|
al@419
|
684 .echo .color32{color:#00AA00} .echo .color1.color32{color:#93DA00} .echo .color42{background:#00AA00}
|
al@419
|
685 .echo .color33{color:#CB7C00} .echo .color1.color33{color:#FFE139} .echo .color43{background:#CB7C00}
|
al@419
|
686 .echo .color34{color:#003F68} .echo .color1.color34{color:#0073A2} .echo .color44{background:#003F68}
|
al@419
|
687 .echo .color35{color:#BF00EF} .echo .color1.color35{color:#DB81FF} .echo .color45{background:#BF00EF}
|
al@419
|
688 .echo .color36{color:#00A6D0} .echo .color1.color36{color:#81E3FF} .echo .color46{background:#00A6D0}
|
al@419
|
689 .echo .color37{color:#C6C6C6} .echo .color1.color37{color:#FFFFFF} .echo .color47{background:#C6C6C6}
|
al@419
|
690 .echo.term {color:#C6C6C6; background:#000000}
|
al@419
|
691
|
al@419
|
692 .color1 { font-weight: bold; }
|
al@419
|
693
|
al@419
|
694 /* History table for terminal */
|
al@419
|
695 .history { width: 100%; }
|
al@419
|
696 .history td:nth-child(1), .history td:nth-child(2), .history td:nth-child(3) {
|
al@419
|
697 white-space: nowrap;
|
al@419
|
698 width: 1px;
|
al@419
|
699 }
|
al@419
|
700
|
al@419
|
701
|
al@419
|
702
|
al@419
|
703 /**********
|
al@419
|
704 * Inputs *
|
al@419
|
705 **********/
|
al@419
|
706
|
al@426
|
707 /*:default { outline: 1px dotted hsla(240, 100%, 50%, 0.5); outline-offset: -4px; }*/
|
al@419
|
708 :required { outline: 1px solid hsla( 30, 100%, 50%, 0.7); outline-offset: -3px; }
|
al@419
|
709 :invalid { outline: 2px solid hsla( 0, 100%, 50%, 0.7); outline-offset: -3px; }
|
al@419
|
710
|
al@419
|
711
|
al@419
|
712 /* HACK for Tazweb (as clean Webkit browser): remove 1px white border around textfield */
|
al@419
|
713 input[type="text"], input[type="password"], input[type="number"], textarea { -webkit-appearance: searchfield; }
|
al@419
|
714
|
al@419
|
715 textarea { display: block; color: CaptionText; font-family: monospace; box-sizing: border-box; }
|
al@419
|
716
|
al@419
|
717
|
al@419
|
718
|
al@419
|
719
|
al@419
|
720
|
al@419
|
721 /***********************
|
al@419
|
722 * System memory gauge *
|
al@419
|
723 ***********************/
|
al@419
|
724
|
al@419
|
725 .sysmem {
|
al@419
|
726 margin: 0.2rem; padding: 0;
|
al@419
|
727 border: 1pt solid;
|
al@419
|
728 border-radius: 0.2rem;
|
al@419
|
729 box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05);
|
al@419
|
730 width: 100%; margin: 0; padding: 0;
|
al@419
|
731 }
|
al@419
|
732
|
al@419
|
733 .sysmem_used, .sysmem_buff, .sysmem_free {
|
al@419
|
734 display: inline-block;
|
al@419
|
735 padding: 0.2rem 0; margin: 0;
|
al@419
|
736 height: 120%;
|
al@419
|
737 text-align: center; vertical-align: middle;
|
al@419
|
738 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
|
al@419
|
739 text-align: center;
|
al@419
|
740 }
|
al@419
|
741
|
al@419
|
742 .sysmem_used {
|
al@419
|
743 background-color: #f28f68;
|
al@419
|
744 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
|
al@419
|
745 border-radius: 0.2rem 0 0 0.2rem;
|
al@419
|
746 }
|
al@419
|
747 .sysmem_buff {
|
al@419
|
748 background-color: #f28f68;
|
al@419
|
749 background-image:
|
al@419
|
750 -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2)),
|
al@419
|
751 -webkit-linear-gradient(135deg,
|
al@419
|
752 transparent, transparent 25%,
|
al@419
|
753 #719fd1 25%, #719fd1 50%,
|
al@419
|
754 transparent 50%, transparent 75%,
|
al@419
|
755 #719fd1 75%);
|
al@419
|
756 background-size: 100% 100%;
|
al@419
|
757 }
|
al@419
|
758 .sysmem_free {
|
al@419
|
759 background-color: #719fd1;
|
al@419
|
760 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
|
al@419
|
761 border-radius: 0 0.2rem 0.2rem 0;
|
al@419
|
762 }
|
al@437
|
763
|
al@437
|
764
|
al@437
|
765
|
al@437
|
766 /* Disable some links to root actions */
|
al@437
|
767 button:not([disabled]) { cursor: pointer; }
|
al@437
|
768 .user [data-root] { pointer-events: none; cursor: default !important; }
|
al@463
|
769
|
al@463
|
770
|
al@463
|
771 html,body { height: 100%; width: 100%; margin: 0; padding: 0; }
|
al@463
|
772 body > header { position: absolute; top: 0; }
|
al@463
|
773 body > footer { position: absolute; bottom: 0; left: 0; right: 0; }
|
al@463
|
774 #content, #content-sidebar {
|
al@498
|
775 position: absolute; top: 63px; bottom: 20px; left: 0; right: 0;
|
al@463
|
776 overflow-y: auto; overflow-x: hidden;
|
al@463
|
777 }
|
al@463
|
778
|
al@463
|
779 .bigNoScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
|
al@463
|
780 section.bigNoScrollable { margin: 0.5rem; }
|
al@463
|
781
|
al@463
|
782 .bigScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }
|
al@463
|
783 #fileContent.bigScrollable { margin: 0.2rem; top: 2.5rem; }
|
al@501
|
784
|
al@501
|
785 section section { margin: 0.2rem; }
|
al@525
|
786
|
al@525
|
787
|
al@525
|
788 /* Styles for network.cgi: Wi-Fi sub-page */
|
al@525
|
789
|
al@525
|
790 #connection input[type="text"], #connection input[type="password"] { width: 14rem; }
|
al@525
|
791 #connection select { width: 14.4rem; }
|
al@525
|
792
|
al@525
|
793 #connection td { padding: 0; margin: 0; }
|
al@525
|
794 #connection [class] div {
|
al@525
|
795 max-height: 0; overflow: hidden; padding: 0; margin: 0;
|
al@525
|
796 -webkit-transition: all 0.5s ease-in-out;
|
al@525
|
797 -moz-transition: all 0.5s ease-in-out;
|
al@525
|
798 transition: all 0.5s ease-in-out;
|
al@525
|
799 }
|
al@525
|
800 .wep .wep div, .wpa .wpa div, .eap .eap div,
|
al@525
|
801 .eap.peap .eap1 div, .eap.tls .eap1 div, .eap.ttls .eap1 div {
|
al@525
|
802 max-height: 2em !important;
|
al@525
|
803 }
|
al@525
|
804
|
al@525
|
805 #shader {
|
al@525
|
806 z-index: 100;
|
al@525
|
807 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
al@525
|
808 background-color: #000;
|
al@525
|
809 opacity: 0.6;
|
al@525
|
810 }
|
al@525
|
811 #shader.hidden {
|
al@525
|
812 display: none;
|
al@525
|
813 opacity: 0;
|
al@525
|
814 }
|
al@525
|
815
|
al@525
|
816 #popup_qr {
|
al@525
|
817 z-index: 101;
|
al@525
|
818 position: fixed;
|
al@525
|
819 width: 100%;
|
al@525
|
820 bottom: 2em;
|
al@525
|
821 transition: all 0.5s;
|
al@525
|
822 -webkit-transition: all 0.5s;
|
al@525
|
823 -webkit-transition-delay: 0.3s;
|
al@525
|
824 }
|
al@525
|
825 #popup_qr_inner {
|
al@525
|
826 display: inline-block;
|
al@525
|
827 text-align: center;
|
al@525
|
828 margin: 0.5em;
|
al@525
|
829 background: #fff; color: #222;
|
al@525
|
830 border: 0.16em solid ; border-radius: 0.5em;
|
al@525
|
831
|
al@525
|
832 padding: 0.5em;
|
al@525
|
833 }
|
al@525
|
834 #popup_qr.hidden {bottom: -30em; }
|
al@525
|
835
|
al@525
|
836 #qrimg { margin: 3em 1.5em 2em 3em; }
|
al@525
|
837
|
al@525
|
838 /* END: Styles for network.cgi: Wi-Fi sub-page */
|
al@525
|
839
|