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