tazpanel view styles/default/tweaks.css @ rev 419
Bunch of changes. Development in progress, please note it have few known bugs.
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Tue Mar 24 03:39:08 2015 +0200 (2015-03-24) |
| parents | |
| children | a279382f786f |
line source
1 /**
2 * CSS style for TazPanel - (C) 2011-2015 SliTaz GNU/Linux
3 */
6 body.light { background: #EBEBEB; }
7 body.dark { background: #3C3C3C; }
11 /*********************
12 * Toolbar with menu *
13 *********************/
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*/
24 .light #toolbarMenu menu { background-color: #F7F7F7; border-color: #A4A4A4;} /*ok*/
25 .dark #toolbarMenu menu { background-color: #333333; border-color: #222222;} /*ok*/
29 /*******************
30 * Panes, sections *
31 *******************/
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 }
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 }
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 }
60 .dark fieldset {
61 border-color: #313131;
62 box-shadow: inset 1pt 1pt 0 0 #3E3E3E, 1pt 1pt 0 0 #3E3E3E; /*ok*/
63 }
64 .light fieldset {
65 border-color: #C1C1C1; }
66 .dark legend { background-color: #454545; }
70 /* Page first header */
72 .light h2 { color: #333; }
73 .dark h2 { color: #CCC; }
77 /* Additional headers (obsolete) */
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); }
86 /**********
87 * Tables *
88 **********/
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*/
109 .light .borders.zebra td + td { border-color: #ddd; }
110 .dark .borders.zebra td + td { border-color: #383838; }
112 .light .borders tr { border-color: rgba(92, 92, 92, 0.1); }
113 .dark .borders tr { border-color: #111; }
115 .light .hborders thead tr { border-color: rgba(92, 92, 92, 0.1); }
116 .dark .hborders thead tr { border-color: #333; }
120 /**********************
121 * Syntax highlighter *
122 **********************/
124 .sh-comment, .conf-comment {font-style:italic}
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*/
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*/
136 .activity-log { color: #888; }
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*/
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; }
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; }
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; }
162 /* Misc */
164 .dark .scroll { border-color: #2E2E2E; }
168 /***************
169 * Page footer *
170 ***************/
172 .light > footer { border-color: #C1C1C1; background-color: #EBEBEB; color: #888; }
173 .dark > footer { border-color: #313131; background-color: #3C3C3C; color: #666; }
175 .light > footer a { color: #666; }
176 .light > footer a:hover { color: #888; }
178 .dark > footer a { color: #bbb; }
179 .dark > footer a:hover { color: #555; }
183 /**********************
184 * Buttons with icons *
185 **********************/
187 .light .icon:before,
188 .light .icon2:before,
189 .light [class|="icon"]:before {
190 text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.3), 0 0 3px hsla(0, 0%, 100%, 0.7); }
191 .dark .icon:before,
192 .dark .icon2:before {
193 text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.7), 0 1px 0 hsla(0, 0%, 0%, 0.3); }
195 .dark.nowebkit [data-icon]::before {
196 text-shadow:
197 0 1px 0 hsla(0, 0%, 0%, 0.7), 0 -1px 0 hsla(0, 0%, 0%, 0.4),
198 1px 0 0 hsla(0, 0%, 0%, 0.4), -1px 0 0 hsla(0, 0%, 0%, 0.4); }
199 .light button[data-icon]::before, button {
200 text-shadow:
201 0 1px 0 hsla(0, 0%, 100%, 0.9) /*, 0 -1px 0 hsla(0, 0%, 100%, 0.6),
202 1px 0 0 hsla(0, 0%, 100%, 0.6), -1px 0 0 hsla(0, 0%, 100%, 0.6)*/; }
204 .dark [data-icon]:before, .dark [data-img] {
205 /* Experimental webkit-only styles */
206 background-image: -webkit-radial-gradient(25% 25%, #fff, #777);
207 -webkit-background-clip: text;
208 -webkit-text-fill-color: transparent;
209 }
210 /*.light a[data-icon]:before { color: #333; }*/
211 a[data-icon] { white-space: pre-line; }
213 [data-icon="cancel"]::before, [data-icon="delete"]::before,
214 [data-icon="remove"]::before, [data-icon="stop"]::before,
215 [data-img="help"]::before, [data-img="man"]::before,
216 [data-img="off"]::before, [data-img="remove"]::before,
217 [data-img="stop"]::before {color:#dc322f} /*red*/
219 [data-icon="restart"]::before, [data-img="conf"]::before {color:#cb4b16} /*orange*/
221 [data-icon="ok"]::before, [data-icon="run"]::before,
222 [data-icon="start"]::before, [data-img="on"]::before,
223 [data-img="opt"]::before, [data-img="run"]::before {color:#859900} /*green*/
225 [data-img="web"]::before {color:#268bd2} /*blue*/
229 /**********
230 * Inputs *
231 **********/
233 .dark textarea { border-color: #2E2E2E; }
234 .light textarea { border-color: #A3A3A3; }
238 /***********************
239 * System memory gauge *
240 ***********************/
242 .dark .sysmem { border-color: #2E2E2E; }
243 .light .sysmem { border-color: #A3A3A3; }