tazpanel view styles/default/tweaks.css @ rev 463

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