Mercurial > libervia-templates

comparison default/static/styles.css @ 133:0a0d9a953d98

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
css: some more refactoring
author Goffi <goffi@goffi.org>
date Mon, 26 Mar 2018 08:13:53 +0200
parents ca42dc037bbf
children b1e22caab8bc
comparison
equal deleted inserted replaced
132:c70f405f9b86 133:0a0d9a953d98
1 :root { 1 :root {
2 --select-bg-color: #ddd; 2 --select-bg-color: #ddd;
3 --size-medium: 3em;
3 } 4 }
4 5
5 6
6 html { 7 html {
7 font-family: "sat-base-font"; 8 font-family: "sat-base-font";
64 } 65 }
65 66
66 /*** Generic ***/ 67 /*** Generic ***/
67 68
68 .button { 69 .button {
69 padding: 0.5em 1em; 70 padding: 0.5em 1em;
70 background: #333; 71 background: #333;
71 color: #ccc; 72 color: #ccc;
72 border: 1px solid #555; 73 border: 1px solid #555;
73 border-radius: 0.8em; 74 border-radius: 0.8em;
74 font-weight: bold; 75 font-weight: bold;
75 } 76 }
76 77
77 78
78 .button:hover { 79 .button:hover {
79 background-color: #bc0000; 80 background-color: #bc0000;
83 font-size: 1.5em; 84 font-size: 1.5em;
84 text-align: center; 85 text-align: center;
85 } 86 }
86 87
87 .instructions--alt { 88 .instructions--alt {
88 text-align: center; 89 text-align: center;
89 font-style: italic; 90 font-style: italic;
91 }
92
93 .items_vert--centered {
94 display: flex;
95 flex-direction: column;
96 align-items: center;
90 } 97 }
91 98
92 /*** blocks ***/ 99 /*** blocks ***/
93 100
94 .block_separator { 101 .block_separator {
96 display: flex; 103 display: flex;
97 } 104 }
98 105
99 .block_separator__label { 106 .block_separator__label {
100 display: inline-block; 107 display: inline-block;
101 margin: 0 0.2em; 108 margin: 0 0.2em;
102 } 109 }
103 110
104 .block_separator__line { 111 .block_separator__line {
105 height: 1px; 112 height: 1px;
106 background: #ccc; 113 background: #ccc;
107 flex: 1; 114 flex: 1;
108 margin-top: 0.7em; 115 margin-top: 0.7em;
109 } 116 }
110 117
111 /*** grids ***/ 118 /*** grids ***/
112 119
113 .grid { 120 .grid {
137 144
138 .grid__item--selectable:hover { 145 .grid__item--selectable:hover {
139 background-color: var(--select-bg-color); 146 background-color: var(--select-bg-color);
140 } 147 }
141 148
149 /*** avatars ***/
150
151 .avatar {
152 height: 2rem;
153 width: 2rem;
154 display: inline-flex;
155 flex-direction: column;
156 align-content: center;
157 justify-content: center;
158 background: #ccc;
159 border-radius: 0.2rem;
160 }
161
162 .avatar__content {
163
164 }
165
166 .avatar--medium {
167 height: var(--size-medium);
168 width: var(--size-medium);
169 border-radius: 0.5rem;
170 }
171
172 .avatar--generated {
173 text-align: center;
174 background: #43d2f6;
175 }
176
177
142 /*** icons ***/ 178 /*** icons ***/
143 179
144 .icon--medium { 180 .icon--medium {
145 height: 3em; 181 height: var(--size-medium);
146 display: block; 182 display: block;
147 margin: 0 auto; 183 margin: 0 auto;
148 } 184 }
149 185
150 .icon--small { 186 .icon--small {
309 .form_single { 345 .form_single {
310 text-align: center; 346 text-align: center;
311 } 347 }
312 348
313 .form_single input:not([type="submit"]) { 349 .form_single input:not([type="submit"]) {
314 margin: 0 1em; 350 margin: 0 1em;
315 width: 15em; 351 width: 15em;
316 border-radius: 0.7em; 352 border-radius: 0.7em;
317 outline: none; 353 outline: none;
318 border: 1px solid black; 354 border: 1px solid black;
319 padding: 0.4em; 355 padding: 0.4em;
320 box-shadow: none; 356 box-shadow: none;
321 } 357 }
322 358
323 359
324 .form_submit { 360 .form_submit {
417 453
418 454
419 /*** Notifications ***/ 455 /*** Notifications ***/
420 456
421 .notification.retry { 457 .notification.retry {
422 position: fixed; 458 position: fixed;
423 top: 1rem; 459 top: 1rem;
424 margin: auto; 460 margin: auto;
425 width: 80%; 461 width: 80%;
426 background: #DB1616; 462 background: #DB1616;
427 border: 3px solid silver; 463 border: 3px solid silver;
428 left: 10%; 464 left: 10%;
429 text-align: center; 465 text-align: center;
430 } 466 }
431 467
432 #retry_counter { 468 #retry_counter {
433 font-weight: bold; 469 font-weight: bold;
434 } 470 }
435 471
436 #retry_now { 472 #retry_now {
437 color: blue; 473 color: blue;
438 text-decoration: underline; 474 text-decoration: underline;
439 cursor: pointer; 475 cursor: pointer;
440 } 476 }
441 477
442 @media (min-width: 800px) { 478 @media (min-width: 800px) {
443 html { 479 html {
444 background-size: auto; 480 background-size: auto;