slitaz-forge view scn/style.css @ rev 653

Update CSS style
author Christophe Lincoln <pankso@slitaz.org>
date Mon Feb 20 14:41:24 2017 +0100 (2017-02-20)
parents 0f1e69658f38
children 7367332b16fc
line source
1 /* CSS style for SliTaz Bugs/TinyCM */
2
3 html { min-height: 102%; }
4 body { font: 13px sans-serif, vernada, arial; margin: 0; }
5 h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; }
6 h1 a { color: #fff; text-decoration: none; }
7 h2 { color: #444; } h3 { color: #666; font-size: 140%; }
8 a { text-decoration: underline; color: #215090; }
9 a:hover { text-decoration: none; }
10 img { border: 0pt none; vertical-align: middle; }
11 pre {
12 overflow: auto;
13 font-size: 98%;
14 }
15 textarea, table { width: 100%; }
16 thead { font-weight: bold; }
17
18 /* Header */
19
20 #header {
21 background: #111 url(images/logo.png) no-repeat left;
22 height: 40px;
23 }
24
25 #header h1 {
26 margin: 0;
27 padding: 8px 0 0 42px;
28 width: 250px;
29 }
30
31 #header h1 a {
32 color: white;
33 text-decoration: none;
34 font-size: 20px;
35 font-style: italic;
36 }
37
38 #header h1 a:hover {
39 color: #afafaf;
40 }
41
42 /* Header links */
43
44 #network {
45 float: right;
46 padding: 14px 5px 0;
47 font-size: 12px;
48 margin-right: 100px;
49 }
50
51 #network a, #network span {
52 padding: 0 4px;
53 color: #fff;
54 font-weight: bold;
55 text-decoration: none;
56 }
57
58 #network a:hover, #user a:hover, #network span { color: #afafaf; }
59
60 /* Logo */
61
62 #logo {
63 background: url(images/logo.png) no-repeat left;
64 position: absolute;
65 float: left;
66 left: 0px;
67 top: 0px;
68 width: 40px;
69 height: 40px;
70 }
71
72 /* Login and user box */
73
74 #login { width: 240px; float: left; height: 120px; }
75
76 #login input[type="text"], #login input[type="password"] {
77 width: 200px; }
78
79 #signup input[type="text"], #signup input[type="password"] {
80 width: 400px; }
81
82 #login input[type="submit"] { float: none; }
83 #login p { display: inline; }
84
85 #user {
86 background-color: #222;
87 padding: 4px;
88 width: 84px;
89 float: right;
90 font-size: 12px;
91 position: absolute;
92 right: 10px;
93 top: 6px;
94 }
95 #user a { padding: 0 2px; color: #fff;
96 font-weight: bold; text-decoration: none; }
97
98 #account-info { width: 380px; height: 120px; float: right; }
99
100 /* Navigation */
101
102 nav {
103 font-size: 120%;
104 min-height: 54px;
105 background: #ddd;
106 padding: 30px 6% 0;
107 text-align: center;
108 color: #222;
109 border-bottom: 1px solid #afafaf;
110 margin-bottom: 20px;
111 top: 40px;
112 }
113
114 nav ul {
115 margin: 0; padding: 0;
116 list-style: none;
117 }
118 nav li { display: inline; }
119
120 nav a, nav form {
121 text-decoration: none;
122 padding: 12px;
123 color: #fff;
124 font-weight: bold;
125 vertical-align: middle;
126 -webkit-transition: background-color 0.6s;
127 transition: background-color 0.6s;
128 }
129 nav p { padding: 8px; color: #333; font-size: 92%; }
130
131 nav input { padding: 0px;}
132 .nav1 { background-color: #333; }
133 .nav1:hover { background-color: #128da9; }
134 .nav2 { background-color: #ab3c00; }
135 .nav2:hover { background-color: #ff9b00; }
136 .navpi { background-color: #444; }
137 .navpi:hover { background-color: #bc1142; }
138
139
140 /* Languages */
141
142 #lang {
143 position: absolute;
144 right: 0;
145 top: 152px;
146 padding: 6px;
147 font-size: 12px;
148 }
149
150 #lang a {
151 text-decoration: none;
152 padding: 0 2px;
153 }
154
155 #lang a:hover {
156 text-decoration: underline;
157 }
158
159 /* Search */
160
161 #search {
162 position: absolute;
163 right: 20px;
164 top: 72px;
165
166 }
167
168 #search input[type="text"] { width: 180px; }
169
170 /* Content */
171
172 #content {
173 margin: 40px auto;
174 padding: 0 20px;
175 text-align: justify;
176 max-width: 680px;
177 }
178
179 #edit textarea { width: 100%; height: 240px; background: #f8f8f8; }
180 #edit a { text-decoration: none; }
181
182 .box, pre, #login, #account-info {
183 background-color: #f8f8f8;
184 border: 1px solid #ddd;
185 padding: 10px;
186 }
187
188 pre img { margin: 4px 4px 4px 0px; }
189 #content p img { display: block;
190 margin: 0 auto; }
191
192 .mobile { display: none !important; }
193 .error { color: red; }
194 .ok { color: green; }
195 .date { color: #666; font-size: 96%; }
196
197 /* Progress bar */
198
199 .pct { background: #9dff4a; padding: 2px 4px; }
200
201 .pctbar {
202 margin: 0;
203 color: #666;
204 background: #f1f1f1;
205 border: 1px solid #ddd;
206 overflow: hidden;
207 clear: both;
208 }
209
210 /* Form */
211
212 form { display: inline; }
213 textarea { border: 2px solid #ccc; padding: 4px; width: 100%; }
214 select { min-width: 180px; }
215 input[type="submit"], input[type="text"], input[type="password"],
216 select, #tools a {
217 color: #444444;
218 border: 1px solid #cccccc;
219 padding: 4px;
220 margin: 4px 0px;
221 font-size: 14px;
222 line-height: 1.2em;
223 background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
224 background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
225 -webkit-appearance: none;
226 -webkit-padding-end: 12px;
227 -webkit-padding-start: 6px;
228 }
229
230 input[type="text"], input[type="password"] {
231 background: #fefefe; border: 2px solid #ccc;
232 width: 100%; }
233 /*input[type="file"] { border: 2px solid #ddd; }*/
234 /*input[type="checkbox"] { background: #fefefe; }*/
235
236 /* Be compatible with old FF and Webkit version. */
237 input[type="submit"] {
238 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
239 -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
240 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
241 }
242
243 input[type="submit"]:hover, #tools a:hover {
244 cursor: pointer;
245 color: black;
246 }
247
248 select {
249 background-image: url(images/down.png),
250 -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
251 background-position: center right;
252 background-repeat: no-repeat;
253 }
254
255 #tools {
256 padding-top: 10px;
257 margin: 20px 0px;
258 /*border-top: 1px dotted #ccc;
259 position: fixed;
260 bottom: 10px;*/
261 }
262 #tools a { text-decoration: none; }
263
264 /* Round corner */
265
266 pre, .button, .pctbar, .box, #login, #account-info, #user, img,
267 input, textarea, select, #tools a, nav a, #cloud-upload, .wall-message {
268 -moz-border-radius: 4px;
269 -webkit-border-radius: 4px;
270 border-radius: 4px;
271 }
272
273 /* notes */
274
275 .noteclassic,.noteimportant,.notewarning,.notetip {
276 margin:2em;
277 margin-left:auto;
278 margin-right:auto;
279 width:70% !important;
280 min-height:40px;
281 clear:both;
282 text-align:justify;
283 vertical-align:middle;
284 border-collapse:collapse;
285 padding:15px 20px 15px 80px;
286 background-position:20px 50%;
287 background-repeat:no-repeat;
288 -moz-border-radius:20px;
289 -khtml-border-radius:20px;
290 border-radius:20px;
291 }
292
293 .noteclassic {
294 background-color:#eef;
295 background-image:url(images/note.png);
296 }
297
298 .noteimportant {
299 background-color:#ffc;
300 background-image:url(images/important.png);
301 }
302
303 .notewarning {
304 background-color:#fdd;
305 background-image:url(images/warning.png);
306 }
307
308 .notetip {
309 background-color:#dfd;
310 background-image:url(images/tip.png);
311 }
312
313 /* Footer */
314
315 #footer {
316 text-align: center;
317 padding: 20px;
318 border-top: 1px solid #ddd;
319 font-size: 90%;
320 }
321
322 #footer a { padding: 0 2px; }
323
324 /* Plugins CSS */
325
326 /* Blog */
327 .post-tools {
328 border-top: 1px dotted #ddd;
329 border-bottom: 1px dotted #ddd;
330 padding: 4px 0; }
331 .post-tools a { text-decoration: none; }
332 .post-tools a:hover { text-decoration: underline; }
333
334 /* Forum */
335 #hashtags { font-size: 16px; font-weight: bold; }
336 #hashtags a { text-decoration: none; padding: 0 4px; }
337 .topic { padding: 6px; margin: 4px; }
338 .topic span a { text-decoration: none; color: #666;
339 font-weight: bold; padding-left: 2px; }
340 .forum-msg { background-color: #eee; padding: 10px;
341 border: 2px solid #ddd; width: 98%;}
342
343 /* Cloud */
344 #cloud-upload {
345 text-align: center;
346 color: #444444;
347 border: 1px solid #cccccc;
348 padding: 0px;
349 margin: 4px 0px;
350 background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
351 background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
352 }
353
354 #cloud-upload input[type="file"] {
355 border: 0px solid #cccccc;
356 width: 85%;
357 -webkit-appearance: none;
358 -webkit-padding-end: 0px;
359 -webkit-padding-start: 0px;
360 }
361
362 /* Community */
363 #wall-form textarea { height: 50px; background: #f8f8f8; }
364 .wall-message {
365 border: 1px solid #ddd;
366 background: #fafafa;
367 margin: 20px 0;
368 padding: 0;
369 }
370 .wall-message div {
371 padding: 10px 0 0 10px;
372 }
373 .wall-message p {
374 border-top: 1px solid #eee;
375 padding: 10px;
376 }
377
378 /* Users & Dashboard */
379 #users table, #plugins table { border-collapse: collapse; }
380 #users tr, #plugins tr {
381 padding:.3em 1em;
382 border-bottom: 1px solid #ddd;
383 }
384 #users td, #plugins td { padding: 4px 0; }