rev |
line source |
pankso@1
|
1 /*
|
pankso@112
|
2 * CSS style for TazPanel - (C) 2011 SliTaz GNU/Linux
|
pankso@112
|
3 *
|
pankso@1
|
4 */
|
pankso@1
|
5
|
pankso@17
|
6 /* To always have a scroll bar */
|
pankso@17
|
7 html {
|
pankso@17
|
8 min-height: 102%;
|
pankso@17
|
9 }
|
pankso@17
|
10
|
pankso@17
|
11 body {
|
pankso@17
|
12 background: #ffffff;
|
pankso@17
|
13 color: black;
|
pankso@17
|
14 font: 13px sans-serif, vernada, arial;
|
pankso@17
|
15 margin: 25px 0 0;
|
pankso@17
|
16 }
|
pankso@17
|
17
|
pankso@185
|
18 h1 { color: #d66018; padding: 6px 0 0 20px; font-size: 180%; }
|
pankso@185
|
19 h2 { color: #444; margin: 10px 0 10px; font-size: 150%; }
|
pankso@17
|
20 h3 { color: #666; font-size: 140%; }
|
pankso@42
|
21 h4 { color: #888; font-size: 120%; margin: 10px 0 5px; }
|
pankso@41
|
22 img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
|
pankso@110
|
23 p { margin: 10px 0; }
|
pankso@73
|
24 ul { list-style-type: square; }
|
pankso@1
|
25 li { padding: 4px 0; }
|
pankso@1
|
26 a { text-decoration: none; color: #666; }
|
pankso@1
|
27 a:hover { color: #000; }
|
pankso@1
|
28
|
pankso@17
|
29 /* Header and main title */
|
pankso@17
|
30
|
pankso@17
|
31 #header {
|
pankso@185
|
32 height: 42px;
|
pankso@17
|
33 border-bottom: 1px dotted #ddd;
|
pankso@1
|
34 }
|
pankso@1
|
35
|
pankso@17
|
36 /* Desktop gui style bar */
|
pankso@14
|
37
|
pankso@31
|
38 #toolbar {
|
pankso@14
|
39 position: fixed;
|
pankso@14
|
40 top: 0;
|
pankso@14
|
41 left: 0;
|
pankso@246
|
42 height: 23px;
|
pankso@14
|
43 width: 100%;
|
pankso@45
|
44 padding: 0;
|
pankso@14
|
45 background-color: #f1efeb;
|
pankso@17
|
46 border-bottom: 1px solid #c1baad;
|
pankso@14
|
47 z-index: 200;
|
pankso@17
|
48 cursor: default;
|
pankso@14
|
49 }
|
pankso@44
|
50
|
pankso@246
|
51 #menu {
|
pankso@246
|
52 margin: 0;
|
pankso@246
|
53 padding: 0;
|
pankso@246
|
54 }
|
pankso@246
|
55 #menu li {
|
pankso@246
|
56 list-style: none;
|
pankso@246
|
57 float: left;
|
pankso@246
|
58 padding: 0;
|
pankso@246
|
59 }
|
pankso@246
|
60 #menu li a {
|
pankso@246
|
61 display: block;
|
pankso@246
|
62 padding: 4px 6px;
|
pankso@246
|
63 background-color: inherit;
|
pankso@246
|
64 text-decoration: none;
|
pankso@246
|
65 cursor: default;
|
pankso@246
|
66 color: #000;
|
pankso@246
|
67 }
|
pankso@246
|
68 #menu li a:hover {
|
pankso@246
|
69 color: #ffffff;
|
pankso@246
|
70 background-color: #d66018;
|
pankso@246
|
71 border-top-right-radius: 3px;
|
pankso@246
|
72 border-top-left-radius: 3px;
|
pankso@246
|
73 }
|
pankso@246
|
74 #menu li ul {
|
pankso@246
|
75 display: none;
|
pankso@246
|
76 width: 180px;
|
pankso@246
|
77 background-color: #f1efeb;
|
pankso@246
|
78 border: 1px solid #c1baad;
|
pankso@246
|
79 }
|
pankso@246
|
80 #menu li ul a {
|
pankso@246
|
81 padding: 4px 6px;
|
pankso@246
|
82 }
|
pankso@246
|
83 #menu li:hover ul {
|
pankso@246
|
84 display: block;
|
pankso@246
|
85 position: absolute;
|
pankso@246
|
86 margin: 0;
|
pankso@246
|
87 padding: 0;
|
pankso@246
|
88 }
|
pankso@246
|
89 #menu li:hover li {
|
pankso@246
|
90 float: none;
|
pankso@246
|
91 }
|
pankso@246
|
92 #menu li:hover li a {
|
pankso@246
|
93 background-color: #f1efeb;
|
pankso@246
|
94 color: #000;
|
pankso@246
|
95 }
|
pankso@246
|
96 #menu li li a { border: 1px solid #f1efeb; }
|
pankso@246
|
97 #menu li li a:hover {
|
pankso@246
|
98 background-color: #d66018;
|
pankso@246
|
99 color: #ffffff;
|
pankso@246
|
100 border-radius: 2px;
|
pankso@246
|
101 /* border: 1px solid #c1baad; */
|
pankso@246
|
102 }
|
pankso@246
|
103
|
pankso@246
|
104 #icons { margin: 3px 8px; float: right; }
|
pankso@17
|
105 #icons img { padding: 0; }
|
pankso@14
|
106
|
pankso@45
|
107 #loading {
|
pankso@191
|
108 /* font-weight: bold; */
|
pankso@191
|
109 background-color: #f8f8f8;
|
pankso@191
|
110 border: 1px solid #ddd;
|
pankso@191
|
111 color: #666;
|
pankso@191
|
112 cursor: progress;
|
pankso@191
|
113 position: fixed;
|
pankso@191
|
114 top: 92px;
|
pankso@191
|
115 right: 120px;
|
pankso@191
|
116 width: 248px;
|
pankso@191
|
117 padding: 4px 4px 2px;
|
pankso@45
|
118 }
|
pankso@17
|
119
|
pankso@41
|
120 /* Blocks */
|
pankso@41
|
121
|
pankso@41
|
122 #block { float: left; }
|
pankso@41
|
123
|
pankso@41
|
124 /* Sidebar menus */
|
pankso@41
|
125
|
pankso@41
|
126 #sidebar {
|
pankso@41
|
127 position: fixed;
|
pankso@185
|
128 top: 92px;
|
pankso@41
|
129 right: 5px;
|
pankso@41
|
130 width: 116px;
|
pankso@41
|
131 }
|
pankso@41
|
132
|
pankso@41
|
133 #sidebar a {
|
pankso@41
|
134 display: block;
|
pankso@73
|
135 padding: 0px 0 0px 12px;
|
pankso@73
|
136 margin: 0;
|
pankso@41
|
137 }
|
pankso@41
|
138
|
pankso@41
|
139 #sidebar a.active {
|
pankso@41
|
140 color: #000;
|
pankso@41
|
141 font-weight: bold;
|
pankso@41
|
142 }
|
pankso@73
|
143
|
pankso@41
|
144 #sidebar h4 { margin: 0 0 2px 12px; }
|
pankso@73
|
145 #sidebar ul { list-style-type: none; padding: 0; }
|
pankso@41
|
146
|
pankso@41
|
147 /* Content */
|
pankso@41
|
148
|
pankso@185
|
149 #content { margin: 20px; }
|
pankso@185
|
150 #content-sidebar { margin: 20px 120px 20px 20px; }
|
pankso@41
|
151 #wrapper { margin: 10px 0 20px; }
|
pankso@41
|
152
|
pankso@120
|
153 #actions {
|
pankso@120
|
154 height: 20px;
|
pankso@120
|
155 margin: 16px 0;
|
pankso@120
|
156 }
|
pankso@120
|
157
|
pankso@120
|
158 #actions p { margin: 6px 0; }
|
pankso@120
|
159
|
pankso@41
|
160 .search {
|
pankso@41
|
161 position: absolute;
|
pankso@41
|
162 right: 40px;
|
pankso@185
|
163 top: 23px;
|
pankso@41
|
164 }
|
pankso@41
|
165
|
pankso@41
|
166 .search input[type=submit] {
|
pankso@246
|
167 padding: 5px;
|
pankso@80
|
168 margin-left: -4px;
|
pankso@41
|
169 background-color: #f1f1f1;
|
pankso@41
|
170 border: 1px solid #ddd;
|
pankso@41
|
171 cursor: pointer;
|
pankso@41
|
172 color: #000;
|
pankso@41
|
173 font-weight: bold;
|
pankso@80
|
174 border-radius: 0px;
|
pankso@80
|
175 }
|
pankso@80
|
176
|
pankso@80
|
177 .search input[type=submit].radius {
|
pankso@41
|
178 border-top-right-radius: 4px;
|
pankso@41
|
179 border-bottom-right-radius: 4px;
|
pankso@41
|
180 border-top-left-radius: 0px;
|
pankso@41
|
181 border-bottom-left-radius: 0px;
|
pankso@41
|
182 }
|
pankso@41
|
183
|
pankso@41
|
184 .search input[type=text] {
|
pankso@41
|
185 border: 1px solid #ddd;
|
pankso@41
|
186 padding: 4px;
|
pankso@41
|
187 height: 17px;
|
pankso@41
|
188 margin: 0;
|
pankso@49
|
189 width: 200px;
|
pankso@41
|
190 border-top-left-radius: 4px;
|
pankso@41
|
191 border-bottom-left-radius: 4px;
|
pankso@41
|
192 }
|
pankso@41
|
193
|
pankso@41
|
194 .box {
|
pankso@41
|
195 margin: 10px 0;
|
pankso@41
|
196 padding: 12px;
|
pankso@41
|
197 background: #f8f8f8;
|
pankso@41
|
198 border: 1px solid #ddd;
|
pankso@41
|
199 }
|
pankso@41
|
200
|
pankso@89
|
201 .box ul { list-style-type: none; padding: 0; }
|
pankso@89
|
202
|
pankso@41
|
203 .debug {
|
pankso@41
|
204 position: fixed;
|
pankso@45
|
205 bottom: 0px;
|
pankso@70
|
206 right: 10px;
|
pankso@70
|
207 left: 10px;
|
pankso@70
|
208 margin: 5px;
|
pankso@70
|
209 padding: 4px 10px;
|
pankso@70
|
210 background-color: #111;
|
pankso@70
|
211 color: #fff;
|
pankso@70
|
212 border: 0;
|
pankso@70
|
213 font-size: 12px;
|
pankso@70
|
214 opacity: 0.9;
|
pankso@41
|
215 }
|
pankso@41
|
216
|
pankso@41
|
217 .float-left { float: left; }
|
pankso@41
|
218 .float-right { float: right; }
|
pankso@41
|
219
|
pankso@41
|
220 /* Table */
|
pankso@41
|
221
|
pankso@41
|
222 table {
|
pankso@41
|
223 background-color: #f8f8f8;
|
pankso@41
|
224 border: 1px solid #ddd;
|
pankso@41
|
225 padding: 10px;
|
pankso@41
|
226 width: 100%;
|
pankso@41
|
227 margin: 0 0 6px 0;
|
pankso@41
|
228 }
|
pankso@41
|
229
|
pankso@41
|
230 table a { color: #000; }
|
pankso@41
|
231 table a:hover { color: #666; }
|
pankso@46
|
232 td.small { min-width: 60px; }
|
pankso@41
|
233 td.pkg { max-width: 160px; }
|
pankso@41
|
234 td.desc { max-width: 300px; }
|
pankso@153
|
235 td.pct { min-width: 200px; background: #eee; }
|
pascal@217
|
236 div.pct { background: #ccc; }
|
pankso@153
|
237 td.pct, div.pct { border-radius: 2px; }
|
pankso@41
|
238
|
pankso@42
|
239 #thead, .thead, thead {
|
pankso@41
|
240 height: 10px;
|
pankso@41
|
241 font-weight: bold;
|
pankso@41
|
242 }
|
pankso@41
|
243
|
pankso@74
|
244 /* syntax_highlighter */
|
pankso@74
|
245
|
pankso@74
|
246 span.conf-comment { color: #666; }
|
pankso@76
|
247 span.conf-var { color: #392600; }
|
pankso@75
|
248 span.conf-val, span.sh-val { color: #f35a00; }
|
pankso@75
|
249 span.sh-comment { color: #b20000; }
|
pankso@120
|
250 span.activity-log { color: #888; font-size: 95%; }
|
pankso@120
|
251 span.diff-rm { color: red; }
|
pankso@120
|
252 span.diff-add { color: green; }
|
pankso@153
|
253 span.diff-at { color: blue; }
|
pankso@152
|
254 span.top { color: #00c800; font-weight: bold; font-size: 95%; }
|
pankso@153
|
255
|
pankso@29
|
256 /* Misc */
|
pankso@17
|
257
|
pankso@41
|
258 pre, .pre-main {
|
pankso@17
|
259 background-color: #f8f8f8;
|
pankso@17
|
260 border: 1px solid #ddd;
|
pankso@17
|
261 padding: 10px;
|
pankso@17
|
262 margin: 10px 0;
|
pankso@17
|
263 overflow: auto;
|
pankso@17
|
264 }
|
pankso@17
|
265
|
pankso@41
|
266 .pre-main { margin: 16px 0; }
|
pankso@41
|
267
|
pankso@41
|
268 input[type=submit], select, .button {
|
pankso@41
|
269 padding: 4px;
|
pankso@41
|
270 margin: 0;
|
pankso@17
|
271 background-color: #f1f1f1;
|
pankso@17
|
272 border: 1px solid #ddd;
|
pankso@17
|
273 cursor: pointer;
|
pankso@41
|
274 color: #000;
|
pankso@17
|
275 }
|
pankso@17
|
276
|
pankso@41
|
277 input[type=submit]:hover, select:hover, .button:hover {
|
pankso@17
|
278 background-color: #ddd;
|
pankso@17
|
279 border: 1px solid #999;
|
pankso@17
|
280 }
|
pankso@17
|
281
|
pankso@49
|
282 input[type=text], input[type=password] { height: 18px; }
|
pankso@14
|
283
|
pankso@44
|
284 div.scroll { height: 200px; overflow: auto;
|
pankso@44
|
285 border: 1px solid #ddd; }
|
pankso@42
|
286 div.scroll table { border: 0px solid #fff; }
|
pankso@42
|
287
|
pankso@191
|
288 #terminal {
|
pankso@191
|
289 background: #000;
|
pankso@191
|
290 color: #fff;
|
pankso@191
|
291 border: 1px solid #444;
|
pankso@191
|
292 min-height: 180px;
|
pankso@191
|
293 opacity: 0.8;
|
pankso@191
|
294 }
|
pankso@191
|
295
|
pankso@1
|
296 /* Round corner */
|
pankso@10
|
297
|
pankso@45
|
298 #loading, table, pre, input[type=submit], .debug, .box,
|
pankso@44
|
299 .button, div.scroll {
|
pankso@41
|
300 /*-moz-border-radius: 4px;
|
pankso@41
|
301 -webkit-border-radius: 4px; */
|
pankso@1
|
302 border-radius: 4px;
|
pankso@1
|
303 }
|
pankso@41
|
304
|
pankso@112
|
305 /* Help page */
|
pankso@112
|
306
|
pankso@112
|
307 #help { text-align: justify; }
|
pankso@112
|
308 #help a { color: #215090; text-decoration: underline; }
|
pankso@112
|
309 #help a:hover { text-decoration: none; color: blue; }
|
pankso@112
|
310
|
pankso@41
|
311 /* Footer */
|
pankso@41
|
312
|
pankso@41
|
313 #footer {
|
pankso@41
|
314 /* border-bottom: 1px solid #c1baad; */
|
pankso@41
|
315 height: 25px;
|
pankso@41
|
316 text-align: center;
|
pankso@41
|
317 padding: 40px 10px;
|
pankso@41
|
318 font-size: 11px;
|
pankso@116
|
319 color: #bbb;
|
pankso@112
|
320 }
|
pankso@112
|
321
|
pankso@116
|
322 #footer a { color: #bbb; }
|
pankso@116
|
323 #footer a:hover { color: #555; }
|