Mercurial > libervia-templates

comparison sat_templates/default/static/styles.css @ 147:33c7ce833d3f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
install: setup.py fix + moved "default" dir in a "sat_templates" dir: the merge request at https://bugs.goffi.org/mr/view/3 was a good basis, but not fully working ("default" dir was removed), this patch fixes it, and do some improvments: - moved "default" in "sat_templates" dir, which correspond to the python module, so it can be found easily from python - added VERSION, and mercurial hash detection, in the same way as for Cagou and backend - slight modification of classifiers - replaces tabs coming from MR by spaces
author Goffi <goffi@goffi.org>
date Sat, 02 Jun 2018 17:25:43 +0200
parents default/static/styles.css@b1e22caab8bc
children 1b214b168948
comparison
equal deleted inserted replaced
146:7dc00829c32f 147:33c7ce833d3f
1 :root {
2 --select-bg-color: #ddd;
3 --size-medium: 3em;
4 }
5
6
7 html {
8 font-family: "sat-base-font";
9 }
10
11 body {
12 margin: 0;
13 padding: 0;
14 display: flex;
15 height: 100vh;
16 flex-direction: column;
17 box-sizing: border-box;
18 }
19
20 ul {
21 padding: 0;
22 }
23
24 #main_side_bar {
25
26 }
27
28 #main_area {
29 flex: 1;
30 display: flex;
31 flex-direction: column;
32 box-sizing: border-box;
33 }
34
35 #body {
36 flex: 1;
37 position: relative;
38 }
39
40 footer {
41 text-align: center;
42 font-size: 0.7em;
43 font-weight: bold;
44 }
45
46 .box {
47 background-color: #edf2ff;
48 border-radius: 0;
49 border-color: silver;
50 }
51
52 .box__tools {
53 margin: 0;
54 padding: 0;
55 }
56
57 .box__tools a {
58 text-decoration: none;
59 color: inherit;
60 padding: 0.2em;
61 border-radius: 0.4em;
62 }
63
64 .box__tools a:hover {
65 background-color: var(--select-bg-color);
66 }
67
68 .title {
69 font-weight: bold;
70 text-align: center;
71 }
72
73 .post_confirm {
74 text-align: center;
75 background-color: lightgreen;
76 padding: 1em;
77 font-size: 1.2em;
78 font-weight: bold;
79 width: 60%;
80 margin: 1.5em auto;
81 }
82
83 /*** Generic ***/
84
85 .button {
86 padding: 0.5em 1em;
87 background: #333;
88 color: #ccc;
89 border: 1px solid #555;
90 border-radius: 0.8em;
91 font-weight: bold;
92 }
93
94
95 .button:hover {
96 background-color: #bc0000;
97 }
98
99 .instructions--head {
100 font-size: 1.5em;
101 text-align: center;
102 }
103
104 .instructions--alt {
105 text-align: center;
106 font-style: italic;
107 }
108
109 .items_vert--centered {
110 display: flex;
111 flex-direction: column;
112 align-items: center;
113 }
114
115 /*** blocks ***/
116
117 .block_separator {
118 font-size: 1.4em;
119 display: flex;
120 }
121
122 .block_separator__label {
123 display: inline-block;
124 margin: 0 0.2em;
125 }
126
127 .block_separator__line {
128 height: 1px;
129 background: #ccc;
130 flex: 1;
131 margin-top: 0.7em;
132 }
133
134 /*** grids ***/
135
136 .grid {
137 list-style: none;
138 display: flex;
139 flex-wrap: wrap;
140 }
141
142 .grid--center {
143 justify-content: center;
144 }
145
146 .grid__item>a {
147 text-decoration: none;
148 color: inherit;
149 }
150
151 .grid__item--medium {
152 width: 170px;
153 padding: 0.2em;
154 text-align: center;
155 }
156
157 .grid__item--selectable {
158 cursor: pointer;
159 }
160
161 .grid__item--selectable:hover {
162 background-color: var(--select-bg-color);
163 }
164
165 /*** avatars ***/
166
167 .avatar {
168 height: 2rem;
169 width: 2rem;
170 display: inline-flex;
171 flex-direction: column;
172 align-content: center;
173 justify-content: center;
174 background: #ccc;
175 border-radius: 0.2rem;
176 }
177
178 .avatar__content {
179
180 }
181
182 .avatar--medium {
183 height: var(--size-medium);
184 width: var(--size-medium);
185 border-radius: 0.5rem;
186 }
187
188 .avatar--generated {
189 text-align: center;
190 background: #43d2f6;
191 }
192
193
194 /*** icons ***/
195
196 .icon--medium {
197 height: var(--size-medium);
198 display: block;
199 margin: 0 auto;
200 }
201
202 .icon--small {
203 height: 1em;
204 }
205
206 .icon--soft {
207 fill: #777;
208 }
209
210 .icon__name {
211
212 }
213
214 /*** Messages ***/
215
216 .message--info {
217 max-width: 500px;
218 margin: 0 auto;
219 padding: 1em;
220 text-align: justify;
221 }
222
223 .message--info pre {
224 background: #ddd;
225 padding: 1em;
226 }
227
228 /*** Menus ***/
229
230 .menu ul {
231 display: flex;
232 margin-top: 8px;
233 list-style: none;
234 }
235
236 .menu a {
237 display: block;
238 color: inherit;
239 text-decoration: none;
240 font-variant: small-caps;
241 }
242
243 .main_menu {
244 min-width: 200px;
245 /* background-color: #eaeaea; */
246 background-color: #333;
247 color: white;
248 }
249
250 .main_menu ul {
251 flex-direction: row;
252 flex-wrap: wrap;
253 }
254
255 .main_menu li {
256 flex: 1;
257 padding: 0;
258 margin: 0 0.5em;
259 }
260
261 .main_menu a {
262 display: inline;
263 white-space: nowrap;
264 }
265
266 .main_menu a:hover {
267 background-color: initial;
268 text-shadow: 1px 1px 2px;
269 font-weight: bold;
270 }
271
272 .category_menu ul {
273 justify-content: center;
274 }
275
276 .category_menu li {
277 margin: 0.5em;
278 text-align: center;
279 }
280
281 .category_menu a {
282 border: solid 1px;
283 padding: 0.5em;
284 border-radius: 0.2em;
285 background: #eee;
286 }
287
288 /*** containers ***/
289
290 /* tabs */
291
292 .tab_container {
293 max-width: 1000px;
294 margin: 0 auto;
295 }
296
297 .tab_header {
298 background-color: white;
299 border-bottom: 1px solid lightgrey;
300 }
301
302 .tab_header ul {
303 display: flex;
304 margin: 0;
305 padding: 0;
306 list-style: none;
307 background-color: white;
308 }
309
310 .tab_page {
311 box-sizing: border-box;
312 padding-top: 2em;
313 border: 1px solid lightgrey;
314 border-top: none;
315 display: None;
316 }
317
318 .tab_page.clicked {
319 display: block;
320 }
321
322 .tab_button {
323 display: inline;
324 color: grey;
325 background-color: white;
326 border-top: 1px solid lightgrey;
327 border-left: 1px solid lightgrey;
328 border-bottom: 1px solid lightgrey;
329 padding: 0 1em;
330 cursor: pointer;
331 /* we go down by 1px to remove bottom border from .tab_header */
332 margin-bottom: -1px;
333 }
334
335 .tab_button.clicked {
336 /* background: lightgrey; */
337 color: inherit;
338 border-bottom: none;
339 }
340
341 li.tab_button:last-child {
342 border-right: 1px solid lightgrey;
343 }
344
345 .tab_button input {
346 display: None;
347 }
348
349 .tab_button label {
350 margin: 1em;
351 }
352
353 .tab_button input:checked + label {
354 font-weight: bold;
355 }
356
357 /*** Forms ***/
358
359 /* a form with only one field */
360
361 .form_single {
362 text-align: center;
363 }
364
365 .form_single input:not([type="submit"]) {
366 margin: 0 1em;
367 width: 15em;
368 border-radius: 0.7em;
369 outline: none;
370 border: 1px solid black;
371 padding: 0.4em;
372 box-shadow: none;
373 }
374
375
376 .form_submit {
377 margin: 1em auto 0;
378 display: block;
379 }
380
381 .form_jid {
382 text-align: center;
383 }
384
385 /* Textboxes */
386
387 form.textbox>* {
388 display: block;
389 margin: 1em auto;
390 text-align: center;
391 max-width: 100%;
392 box-sizing: border-box;
393 }
394
395 form.textbox>textarea {
396 text-align: left;
397 }
398
399 .log_request {
400 text-align: center;
401 }
402
403 /*** Navigation ***/
404
405 .prev_next_links ul {
406 list-style: none;
407 display: flex;
408 padding: 0 2em;
409 margin: 0;
410 }
411
412 .prev_next_links li {
413 flex: 1;
414 }
415
416 .prev_next_links li.older_items {
417 text-align: right;
418 }
419
420 .prev_next_links img {
421 display: block;
422 }
423
424 .prev_next_links .older_items img {
425 display: block;
426 margin-left: auto;
427 margin-right: 0;
428 }
429
430 .prev_next_links a {
431 display: inline-block;
432 margin-top: 1em;
433 padding: 0.2em;
434 text-decoration: None;
435 color: inherit;
436 font-variant: small-caps;
437 background: rgba(200,200,200,0.6);
438 border-radius: 0.5em;
439 }
440
441 .prev_next_links a:hover {
442 background-color: #ddd;
443 }
444
445 /*** XMLUI ***/
446
447 .xmlui_cont_vertical>* {
448 display: block;
449 box-sizing: border-box;
450 }
451
452 .xmlui_cont_vertical>.xmlui_widget {
453 width: 100%;
454 min-height: 1em;
455 min-width: 1px;
456 }
457
458 label.xmlui_label {
459 font-weight: bold;
460 }
461
462 td a {
463 /* we use <a> for non JS links in table
464 * so we don't want specific color/text-decoration by default
465 */
466 color: inherit;
467 text-decoration: inherit;
468 }
469
470
471 /*** Notifications ***/
472
473 .notification.retry {
474 position: fixed;
475 top: 1rem;
476 margin: auto;
477 width: 80%;
478 background: #DB1616;
479 border: 3px solid silver;
480 left: 10%;
481 text-align: center;
482 }
483
484 #retry_counter {
485 font-weight: bold;
486 }
487
488 #retry_now {
489 color: blue;
490 text-decoration: underline;
491 cursor: pointer;
492 }
493
494 @media (min-width: 800px) {
495 html {
496 background-size: auto;
497 }
498
499 body {
500 flex-direction: row;
501 }
502
503 #main_area {
504 overflow: auto;
505 }
506
507 .box {
508 border-radius: 1em;
509 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5);
510 }
511
512 .main_menu a {
513 display: block;
514 padding: 2em 0;
515 }
516
517 .main_menu ul {
518 flex-direction: column;
519 padding-left: 2em;
520 }
521
522 .prev_next_links ul {
523 padding: 0 6em;
524 }
525
526 .instructions--alt {
527 padding-top: 3rem;
528 }
529
530 /*** forms ***/
531
532 .form_single .form_submit.button {
533 display: inline;
534 }
535 }