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 body.light { background: #EBEBEB; }
|
al@419
|
7 body.dark { background: #3C3C3C; }
|
al@419
|
8
|
al@419
|
9
|
al@419
|
10
|
al@419
|
11 /*********************
|
al@419
|
12 * Toolbar with menu *
|
al@419
|
13 *********************/
|
al@419
|
14
|
al@419
|
15 .dark nav {
|
al@419
|
16 background-image: -webkit-linear-gradient(#3B3B3B, #393939);
|
al@419
|
17 border-top-color: #454545; border-bottom-color: #313131; } /*ok*/
|
al@419
|
18 .light nav {
|
al@419
|
19 background-image: -webkit-linear-gradient(#EAEAEA, #E0E0E0);
|
al@419
|
20 border-top-color: #F5F5F5; border-bottom-color: #C1C1C1; } /*ok*/
|
al@419
|
21
|
al@419
|
22
|
al@419
|
23
|
al@419
|
24 .light #toolbarMenu menu { background-color: #F7F7F7; border-color: #A4A4A4;} /*ok*/
|
al@419
|
25 .dark #toolbarMenu menu { background-color: #333333; border-color: #222222;} /*ok*/
|
al@419
|
26
|
al@419
|
27
|
al@419
|
28
|
al@419
|
29 /*******************
|
al@419
|
30 * Panes, sections *
|
al@419
|
31 *******************/
|
al@419
|
32
|
al@419
|
33 .dark #sidebar, .dark section {
|
al@419
|
34 border-color: #2E2E2E; /*ok*/
|
al@419
|
35 background-color: #454545; /*ok*/
|
al@419
|
36 box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05);
|
al@419
|
37 }
|
al@419
|
38 .light #sidebar, .light section {
|
al@419
|
39 border-color: #A3A3A3; /*ok*/
|
al@419
|
40 background-color: #F5F5F5; /*ok*/
|
al@419
|
41 box-shadow: inset 1pt 1pt 0 0 #FFF, inset -1pt -1pt 0 0 #EBEBEB; /*ok*/
|
al@419
|
42 }
|
al@419
|
43
|
al@419
|
44 .dark #sidebar, .dark section header {
|
al@419
|
45 background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0.04), transparent); /*ok*/
|
al@419
|
46 }
|
al@419
|
47 .light #sidebar, .light section header {
|
al@419
|
48 background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)); /*ok*/
|
al@419
|
49 }
|
al@419
|
50
|
al@419
|
51 .dark section footer {
|
al@419
|
52 background-image: -webkit-linear-gradient(transparent, hsla(0, 0%, 0%, 0.1)); /*ok*/
|
al@419
|
53 }
|
al@419
|
54 .light section footer {
|
al@419
|
55 background-image: -webkit-linear-gradient(transparent, hsla(0, 0%, 0%, 0.1)); /*ok*/
|
al@419
|
56 }
|
al@419
|
57
|
al@419
|
58
|
al@419
|
59
|
al@419
|
60 .dark fieldset {
|
al@419
|
61 border-color: #313131;
|
al@419
|
62 box-shadow: inset 1pt 1pt 0 0 #3E3E3E, 1pt 1pt 0 0 #3E3E3E; /*ok*/
|
al@419
|
63 }
|
al@419
|
64 .light fieldset {
|
al@419
|
65 border-color: #C1C1C1; }
|
al@419
|
66 .dark legend { background-color: #454545; }
|
al@419
|
67
|
al@419
|
68
|
al@419
|
69
|
al@419
|
70 /* Page first header */
|
al@419
|
71
|
al@419
|
72 .light h2 { color: #333; }
|
al@419
|
73 .dark h2 { color: #CCC; }
|
al@419
|
74
|
al@419
|
75
|
al@419
|
76
|
al@419
|
77 /* Additional headers (obsolete) */
|
al@419
|
78
|
al@419
|
79 .light h3 { color: hsla(0, 0%, 0%, 0.7); } /*#444*/
|
al@419
|
80 .dark h3 { color: hsla(0, 0%, 100%, 0.7); }
|
al@419
|
81 .light h4 { color: hsla(0, 0%, 0%, 0.6); } /*#666*/
|
al@419
|
82 .dark h4 { color: hsla(0, 0%, 100%, 0.6); }
|
al@419
|
83
|
al@419
|
84
|
al@419
|
85
|
al@419
|
86 /**********
|
al@419
|
87 * Tables *
|
al@419
|
88 **********/
|
al@419
|
89
|
al@419
|
90 /* Table Zebra */
|
al@419
|
91 .light .zebra tr:nth-child(odd) { background-color: #FFFFFF; } /*ok*/
|
al@419
|
92 .light .zebra tr:nth-child(even) { background-color: #ECECEC; } /*ok*/
|
al@419
|
93 .dark .zebra tr:nth-child(odd) { background-color: #4C4C4C; } /*ok*/
|
al@419
|
94 .dark .zebra tr:nth-child(even) { background-color: #484848; } /*ok*/
|
al@419
|
95 .light .zebra thead td {
|
al@419
|
96 background-image: -webkit-linear-gradient(#FFFFFF, #FFFFFF 49%, #F4F4F4 50%, #D9D9D9); /*ok*/
|
al@419
|
97 border-color: #9C9C9C hsla(0, 0%, 0%, 0.1) #B1B1B1 transparent; /*ok*/
|
al@419
|
98 box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.5);
|
al@419
|
99 }
|
al@419
|
100 .dark .zebra thead td {
|
al@419
|
101 background-image: -webkit-linear-gradient(#565656, #515151 49%, #484848 50%, #414141); /*ok*/
|
al@419
|
102 border-color: #282828 hsla(0, 0%, 0%, 0.1) #2F2F2F transparent; /*ok*/
|
al@419
|
103 box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.1);
|
al@419
|
104 }
|
al@419
|
105 .dark .zebra thead td:nth-child(1) { box-shadow: none; } /*fix*/
|
al@419
|
106
|
al@419
|
107
|
al@419
|
108
|
al@419
|
109 .light .borders.zebra td + td { border-color: #ddd; }
|
al@419
|
110 .dark .borders.zebra td + td { border-color: #383838; }
|
al@419
|
111
|
al@419
|
112 .light .borders tr { border-color: rgba(92, 92, 92, 0.1); }
|
al@419
|
113 .dark .borders tr { border-color: #111; }
|
al@419
|
114
|
al@419
|
115 .light .hborders thead tr { border-color: rgba(92, 92, 92, 0.1); }
|
al@419
|
116 .dark .hborders thead tr { border-color: #333; }
|
al@419
|
117
|
al@419
|
118
|
al@419
|
119
|
al@419
|
120 /**********************
|
al@419
|
121 * Syntax highlighter *
|
al@419
|
122 **********************/
|
al@419
|
123
|
al@419
|
124 .sh-comment, .conf-comment {font-style:italic}
|
al@419
|
125
|
al@419
|
126 .light .conf-var {color:hsl(40, 100%, 30%)} .dark .conf-var {color:hsl(40, 100%, 50%)} /*brown*/
|
al@419
|
127 .light .conf-val {color:hsl(22, 100%, 50%)} .dark .conf-val {color:hsl(22, 100%, 60%)} /*orange*/
|
al@419
|
128 .light .conf-comment {color:hsl( 0, 0%, 40%)} .dark .conf-comment {color:hsl( 0, 0%, 50%)} /*gray*/
|
al@419
|
129
|
al@419
|
130 .light .sh-var {color:hsl(40, 100%, 30%)} .dark .sh-var {color:hsl(40, 100%, 50%)} /*brown*/
|
al@419
|
131 .light .sh-val {color:hsl(22, 100%, 50%)} .dark .sh-val {color:hsl(22, 100%, 60%)} /*orange*/
|
al@419
|
132 .light .sh-comment {color:hsl( 0, 100%, 35%)} .dark .sh-comment {color:hsl( 0, 100%, 60%)} /*tomato*/
|
al@419
|
133
|
al@419
|
134
|
al@419
|
135
|
al@419
|
136 .activity-log { color: #888; }
|
al@419
|
137
|
al@419
|
138 .light .diff-rm {color:hsl( 0, 100%, 50%)} .dark .diff-rm {color:hsl( 0, 100%, 70%)} /*red*/
|
al@419
|
139 .light .diff-add{color:hsl(120, 100%, 40%)} .dark .diff-add{color:hsl(120, 100%, 40%)} /*green*/
|
al@419
|
140 .light .diff-at {color:hsl(240, 100%, 50%)} .dark .diff-at {color:hsl(240, 100%, 70%)} /*blue*/
|
al@419
|
141
|
al@419
|
142 .top { color: #00C800; font-weight: normal; }
|
al@419
|
143 .kernel-hex { color: #18A423; }
|
al@419
|
144 .kernel-id { color: #287FC7; }
|
al@419
|
145 .kernel-id2 { color: #843523; }
|
al@419
|
146 .kernel-trace { background-color: red; }
|
al@419
|
147
|
al@419
|
148 .lsusb-h, .lspci-h, .lsusb-t, .lspci-t { font-weight: bold; }
|
al@419
|
149 .light .lsusb-h, .light .lspci-h { color: #800; }
|
al@419
|
150 .dark .lsusb-h, .dark .lspci-h { color: #C66; }
|
al@419
|
151 .light .lsusb-t, .light .lspci-t { color: #448; }
|
al@419
|
152 .dark .lsusb-t, .dark .lspci-t { color: #66C; }
|
al@419
|
153
|
al@419
|
154 .xlog-timestamp { color: #287FC7; }
|
al@419
|
155 .xlog-probed, .xlog-config, .xlog-default, .xlog-cmdline, .xlog-info { color: #5A0; }
|
al@419
|
156 .xlog-notice, .xlog-warn { color: #A50; }
|
al@419
|
157 .xlog-error, .xlog-ni, .xlog-unknown { color: #F00; }
|
al@419
|
158 .xlog { cursor: help; }
|
al@419
|
159
|
al@419
|
160
|
al@419
|
161
|
al@419
|
162 /* Misc */
|
al@419
|
163
|
al@419
|
164 .dark .scroll { border-color: #2E2E2E; }
|
al@419
|
165
|
al@419
|
166
|
al@419
|
167
|
al@419
|
168 /***************
|
al@419
|
169 * Page footer *
|
al@419
|
170 ***************/
|
al@419
|
171
|
al@419
|
172 .light > footer { border-color: #C1C1C1; background-color: #EBEBEB; color: #888; }
|
al@419
|
173 .dark > footer { border-color: #313131; background-color: #3C3C3C; color: #666; }
|
al@419
|
174
|
al@419
|
175 .light > footer a { color: #666; }
|
al@419
|
176 .light > footer a:hover { color: #888; }
|
al@419
|
177
|
al@419
|
178 .dark > footer a { color: #bbb; }
|
al@419
|
179 .dark > footer a:hover { color: #555; }
|
al@419
|
180
|
al@419
|
181
|
al@419
|
182
|
al@419
|
183 /**********************
|
al@419
|
184 * Buttons with icons *
|
al@419
|
185 **********************/
|
al@419
|
186
|
al@426
|
187 .light button[data-icon]::before {
|
al@426
|
188 text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.9); }
|
al@419
|
189
|
al@426
|
190 .dark [data-icon]:not([disabled])::before, .dark [data-img] {
|
al@419
|
191 /* Experimental webkit-only styles */
|
al@419
|
192 background-image: -webkit-radial-gradient(25% 25%, #fff, #777);
|
al@419
|
193 -webkit-background-clip: text;
|
al@419
|
194 -webkit-text-fill-color: transparent;
|
al@419
|
195 }
|
al@419
|
196 /*.light a[data-icon]:before { color: #333; }*/
|
al@419
|
197 a[data-icon] { white-space: pre-line; }
|
al@419
|
198
|
al@419
|
199 [data-icon="cancel"]::before, [data-icon="delete"]::before,
|
al@426
|
200 [data-icon="remove"]::before, [data-icon="stop"]:not([disabled])::before,
|
al@419
|
201 [data-img="help"]::before, [data-img="man"]::before,
|
al@419
|
202 [data-img="off"]::before, [data-img="remove"]::before,
|
al@426
|
203 [data-img="stop"]::before, [data-icon="pkgib"]::before {color:#dc322f} /*red*/
|
al@419
|
204
|
al@426
|
205 [data-icon="restart"]:not([disabled])::before, [data-img="conf"]::before {color:#cb4b16} /*orange*/
|
al@419
|
206
|
al@419
|
207 [data-icon="ok"]::before, [data-icon="run"]::before,
|
al@426
|
208 [data-icon="start"]:not([disabled])::before, [data-img="on"]::before,
|
al@426
|
209 [data-img="opt"]::before, [data-img="run"]::before, [data-icon="pkgi"]::before {color:#859900} /*green*/
|
al@419
|
210
|
al@426
|
211 [data-img="web"]::before {color:#268bd2}, [data-icon="pkg"]::before /*blue*/
|
al@419
|
212
|
al@420
|
213 /* disabled buttons with gray icons */
|
al@426
|
214 /*.light [disabled][data-icon]::before {color:#888}
|
al@426
|
215 .dark [disabled][data-icon]::before {color:#222}*/
|
al@420
|
216
|
al@419
|
217
|
al@419
|
218
|
al@419
|
219 /**********
|
al@419
|
220 * Inputs *
|
al@419
|
221 **********/
|
al@419
|
222
|
al@419
|
223 .dark textarea { border-color: #2E2E2E; }
|
al@419
|
224 .light textarea { border-color: #A3A3A3; }
|
al@419
|
225
|
al@419
|
226
|
al@419
|
227
|
al@419
|
228 /***********************
|
al@419
|
229 * System memory gauge *
|
al@419
|
230 ***********************/
|
al@419
|
231
|
al@419
|
232 .dark .sysmem { border-color: #2E2E2E; }
|
al@419
|
233 .light .sysmem { border-color: #A3A3A3; }
|
al@419
|
234
|