Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/styles.css @ 262:23180988ee6b
bulma (css): added `icon_animate_spin` class
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 01 Aug 2020 17:01:31 +0200 |
parents | caadb06854a0 |
children | 2378084522e1 |
rev | line source |
---|---|
230 | 1 :root { |
2 --photo-height: 280px; | |
3 --photo-height--poster: 500px; | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
4 --col-primary: #82baff; |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
5 --grey-light: hsl(0, 0%, 71%); |
230 | 6 } |
7 | |
235
f5f428a50c10
chat, ticket: use `pre-wrap` instead of `pre` for whitespaces
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
8 .has-whitespace-pre-wrap { |
f5f428a50c10
chat, ticket: use `pre-wrap` instead of `pre` for whitespaces
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
9 white-space: pre-wrap; |
230 | 10 } |
11 | |
12 .is-avatar { | |
13 height: 64px; | |
14 width: 64px; | |
15 border-radius: 50%; | |
16 border: 1px solid #bbb; | |
17 background-color: #eee; | |
18 overflow: hidden; | |
19 } | |
20 | |
21 .is-photo-thumbnail { | |
22 max-height: var(--photo-height); | |
23 max-width: 100%; | |
24 } | |
25 | |
26 .is-photo-thumbnail-container { | |
27 height: var(--photo-height); | |
28 } | |
29 | |
30 .has-items-centered { | |
31 align-items: center; | |
32 justify-content: center; | |
33 } | |
34 | |
35 .is-poster { | |
36 height: var(--photo-height--poster) !important; | |
37 } | |
38 | |
39 .is-poster>.is-photo-thumbnail { | |
40 max-height: var(--photo-height--poster) !important; | |
41 } | |
42 | |
43 .has-items-vcentered { | |
44 align-items: center; | |
45 } | |
46 | |
47 | |
48 .x-is-hoverable:hover { | |
49 background-color: #eee !important; | |
50 } | |
51 | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
52 .x-is-hoverable-primary:hover { |
253 | 53 background-color: var(--col-primary) !important; |
54 border-radius: 50%; | |
55 box-shadow: 0px 0px 0 0.25rem var(--col-primary); | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
56 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
57 |
230 | 58 .is-chat-message { |
59 margin: 0.5rem 0 0 !important; | |
60 padding: 0 !important; | |
61 border: 0 !important; | |
62 } | |
63 | |
64 a.is-wrapping { | |
65 line-height: 0; | |
66 } | |
67 | |
68 .has-no-background { | |
253 | 69 box-shadow: none !important; |
230 | 70 background-color: initial !important; |
71 } | |
72 | |
73 .pagination-disabled { | |
74 background-color: white; | |
75 border-color: #dbdbdb; | |
76 color: #b5b5b5; | |
77 cursor: auto; | |
78 } | |
79 | |
80 .pagination-disabled:hover { | |
81 background-color: white; | |
82 border-color: #dbdbdb; | |
83 color: #b5b5b5; | |
84 } | |
85 | |
86 .has-text-shortenable { | |
87 overflow: hidden; | |
88 text-overflow: ellipsis; | |
89 } | |
90 | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
91 .has-border-dashed { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
92 border-style: dashed; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
93 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
94 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
95 .has-border-grey-light { |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
96 border-color: var(--grey-light); |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
97 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
98 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
99 .has-justify-start { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
100 justify-content: start; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
101 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
102 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
103 /************** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
104 * selections * |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
105 **************/ |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
106 |
254
8411a274448e
bulma (css): new `is-not-selectable` class
Goffi <goffi@goffi.org>
parents:
253
diff
changeset
|
107 .is-not-selectable { |
8411a274448e
bulma (css): new `is-not-selectable` class
Goffi <goffi@goffi.org>
parents:
253
diff
changeset
|
108 user-select: none; |
8411a274448e
bulma (css): new `is-not-selectable` class
Goffi <goffi@goffi.org>
parents:
253
diff
changeset
|
109 } |
8411a274448e
bulma (css): new `is-not-selectable` class
Goffi <goffi@goffi.org>
parents:
253
diff
changeset
|
110 |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
111 .selected_for_deletion { |
253 | 112 outline: solid red 0.25rem; |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
113 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
114 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
115 /*************** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
116 * misc states * |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
117 ***************/ |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
118 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
119 .state_deleted { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
120 opacity: 0; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
121 transform: scale(0); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
122 transition: opacity 0.5s ease-out, transform 0.5s ease-out; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
123 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
124 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
125 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
126 /*********** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
127 * dialogs * |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
128 ***********/ |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
129 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
130 .modal-content { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
131 transform: scaleY(0); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
132 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
133 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
134 div.state_appended .modal-content { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
135 transform: scaleY(1); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
136 transition: transform 0.15s ease-in; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
137 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
138 |
252 | 139 .click_to_close { |
140 cursor: pointer; | |
141 } | |
142 | |
143 /********** | |
144 * panels * | |
145 **********/ | |
146 | |
147 .panel_wrapper { | |
148 position: absolute; | |
149 top: 0; | |
150 right: 0; | |
151 height: 100vh; | |
152 width: 100vw; | |
153 z-index: 150; | |
154 } | |
155 | |
260
caadb06854a0
bulma (invitation): invitation manager first draft
Goffi <goffi@goffi.org>
parents:
255
diff
changeset
|
156 .comments_side_panel, .invitation_manager_side_panel { |
253 | 157 position: absolute; |
158 top: 0; | |
159 right: 0; | |
160 height: 100vh; | |
161 width: 0; | |
252 | 162 max-width: 80%; |
253 | 163 z-index: 200; |
164 background: white; | |
165 transition: width 0.3s ease-out; | |
255
c8eb86b49cb5
bulma (css): fixed overflow in slideshow
Goffi <goffi@goffi.org>
parents:
254
diff
changeset
|
166 overflow: auto; |
c8eb86b49cb5
bulma (css): fixed overflow in slideshow
Goffi <goffi@goffi.org>
parents:
254
diff
changeset
|
167 color: black; |
252 | 168 } |
169 | |
260
caadb06854a0
bulma (invitation): invitation manager first draft
Goffi <goffi@goffi.org>
parents:
255
diff
changeset
|
170 .comments_side_panel.open, .invitation_manager_side_panel.open { |
253 | 171 width: 55rem; |
172 transition: width 0.3s ease-out; | |
252 | 173 } |
174 | |
175 /************* | |
176 * slideshow * | |
177 *************/ | |
178 | |
179 .slideshow { | |
180 position: absolute; | |
181 top: 0; | |
182 left: 0; | |
183 width: 100vw; | |
184 height: 100vh; | |
185 background-color: black; | |
186 color: white; | |
187 z-index: 100; | |
255
c8eb86b49cb5
bulma (css): fixed overflow in slideshow
Goffi <goffi@goffi.org>
parents:
254
diff
changeset
|
188 overflow: hidden; |
252 | 189 } |
190 | |
191 div.slideshow>button.delete { | |
192 z-index: 100; | |
193 background-color: var(--grey-light); | |
194 position: absolute; | |
195 top: 1rem; | |
196 right: 2rem; | |
197 } | |
198 | |
199 div.slideshow>div.click_to_comment { | |
200 z-index: 100; | |
201 position: absolute; | |
202 right: 1.7rem; | |
203 bottom: 2rem; | |
204 cursor: pointer; | |
205 } | |
206 | |
207 div.slideshow>div.comments__count { | |
208 z-index: 100; | |
209 position: absolute; | |
210 right: 1.7rem; | |
211 bottom: 0.5rem; | |
212 font-weight: bold; | |
213 } | |
214 | |
215 .swiper-slide { | |
216 display: flex; | |
217 align-items: center; | |
218 justify-content: center; | |
219 } | |
220 | |
221 .swiper-container { | |
222 height: 100%; | |
223 width: 100%; | |
224 } | |
225 | |
226 .swiper-button-prev { | |
253 | 227 left: 2.1rem !important; |
252 | 228 color: #f1f1f1 !important; |
229 } | |
230 | |
231 .swiper-button-next { | |
253 | 232 right: 2.1rem !important; |
252 | 233 color: #f1f1f1 !important; |
234 } | |
235 | |
236 .slide_img { | |
237 max-height: 100%; | |
238 max-width: 100%; | |
239 } | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
240 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
241 /*************** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
242 * progression * |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
243 ***************/ |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
244 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
245 .progress_started img { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
246 filter: grayscale(100%); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
247 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
248 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
249 .progress_finished img { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
250 filter: grayscale(0%); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
251 transition: filter 1.5s ease-out; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
252 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
253 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
254 .progress_finished progress { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
255 height: 0; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
256 opacity: 0; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
257 transition: all 1.5s ease-out; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
258 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
259 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
260 .progress { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
261 transition: width 5s ease; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
262 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
263 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
264 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
265 /********** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
266 * drawer * |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
267 **********/ |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
268 |
230 | 269 |
270 .panel-drawer { | |
271 /* A panel which is hidden by default but can be | |
272 opened when it's clicked */ | |
273 max-height: 0; | |
274 opacity: 0; | |
275 overflow: hidden; | |
276 transition: max-height 0.5s, opacity 0.5s; | |
277 } | |
278 | |
279 .panel-drawer.state_clicked { | |
280 opacity: 1; | |
281 } | |
282 | |
283 /******** | |
284 * code * | |
285 ********/ | |
286 | |
287 .highlight { | |
288 overflow: auto; | |
289 } | |
290 | |
291 /********** | |
292 * blocks * | |
293 **********/ | |
294 | |
295 .block_separator { | |
296 font-size: 1.4em; | |
297 display: flex; | |
298 margin: 1rem 0; | |
299 } | |
300 | |
301 .block_separator__label { | |
302 display: inline-block; | |
303 margin: 0 0.2em; | |
304 } | |
305 | |
306 .block_separator__line { | |
307 height: 1px; | |
308 background: #ccc; | |
309 flex: 1; | |
310 margin-top: 0.7em; | |
311 } | |
312 | |
313 /******** | |
314 * tabs * | |
260
caadb06854a0
bulma (invitation): invitation manager first draft
Goffi <goffi@goffi.org>
parents:
255
diff
changeset
|
315 ********/ |
230 | 316 |
317 #tab_guests { | |
318 overflow: auto; | |
319 } | |
320 | |
321 .tab__page { | |
322 display: None; | |
323 } | |
324 | |
325 .tab__page.state_clicked { | |
326 display: block; | |
327 } | |
262
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
328 |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
329 /********* |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
330 * icons * |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
331 *********/ |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
332 |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
333 .icon_animate_spin { |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
334 animation: spin 2s infinite linear; |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
335 display: inline-block; |
23180988ee6b
bulma (css): added `icon_animate_spin` class
Goffi <goffi@goffi.org>
parents:
260
diff
changeset
|
336 } |