Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/styles.css @ 252:a0e889d73bad
bulma (photo): slideshow
CSS + template for slideshow and the comments panel used inside.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Thu, 16 Jul 2020 09:08:34 +0200 |
| parents | a841837afe78 |
| children | 7397d81dd633 |
| 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 { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
53 background-color: var(--col-primary) !important; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
54 border-radius: 50%; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
55 box-shadow: 0px 0px 0 0.25rem var(--col-primary); |
|
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 { | |
| 69 box-shadow: none !important; | |
| 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 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
107 .selected_for_deletion { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
108 outline: solid red 0.25rem; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
109 } |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
110 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
111 /*************** |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
112 * misc states * |
|
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
113 ***************/ |
|
242
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 .state_deleted { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
116 opacity: 0; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
117 transform: scale(0); |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
118 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
|
119 } |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
120 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
121 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
122 /*********** |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
123 * dialogs * |
|
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
124 ***********/ |
|
242
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 .modal-content { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
127 transform: scaleY(0); |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
128 } |
|
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 div.state_appended .modal-content { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
131 transform: scaleY(1); |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
132 transition: transform 0.15s ease-in; |
|
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 |
| 252 | 135 .click_to_close { |
| 136 cursor: pointer; | |
| 137 } | |
| 138 | |
| 139 /********** | |
| 140 * panels * | |
| 141 **********/ | |
| 142 | |
| 143 .panel_wrapper { | |
| 144 position: absolute; | |
| 145 top: 0; | |
| 146 right: 0; | |
| 147 height: 100vh; | |
| 148 width: 100vw; | |
| 149 z-index: 150; | |
| 150 } | |
| 151 | |
| 152 .comments_side_panel { | |
| 153 position: absolute; | |
| 154 top: 0; | |
| 155 right: 0; | |
| 156 height: 100vh; | |
| 157 width: 0; | |
| 158 max-width: 80%; | |
| 159 z-index: 200; | |
| 160 background: white; | |
| 161 transition: width 0.3s ease-out; | |
| 162 } | |
| 163 | |
| 164 .comments_side_panel.open { | |
| 165 width: 55rem; | |
| 166 transition: width 0.3s ease-out; | |
| 167 } | |
| 168 | |
| 169 /************* | |
| 170 * slideshow * | |
| 171 *************/ | |
| 172 | |
| 173 .slideshow { | |
| 174 position: absolute; | |
| 175 top: 0; | |
| 176 left: 0; | |
| 177 width: 100vw; | |
| 178 height: 100vh; | |
| 179 background-color: black; | |
| 180 color: white; | |
| 181 z-index: 100; | |
| 182 /* color: white; */ | |
| 183 } | |
| 184 | |
| 185 div.slideshow>button.delete { | |
| 186 z-index: 100; | |
| 187 background-color: var(--grey-light); | |
| 188 position: absolute; | |
| 189 top: 1rem; | |
| 190 right: 2rem; | |
| 191 } | |
| 192 | |
| 193 div.slideshow>div.click_to_comment { | |
| 194 z-index: 100; | |
| 195 position: absolute; | |
| 196 right: 1.7rem; | |
| 197 bottom: 2rem; | |
| 198 cursor: pointer; | |
| 199 } | |
| 200 | |
| 201 div.slideshow>div.comments__count { | |
| 202 z-index: 100; | |
| 203 position: absolute; | |
| 204 right: 1.7rem; | |
| 205 bottom: 0.5rem; | |
| 206 font-weight: bold; | |
| 207 } | |
| 208 | |
| 209 .swiper-slide { | |
| 210 display: flex; | |
| 211 align-items: center; | |
| 212 justify-content: center; | |
| 213 } | |
| 214 | |
| 215 .swiper-container { | |
| 216 height: 100%; | |
| 217 width: 100%; | |
| 218 } | |
| 219 | |
| 220 .swiper-button-prev { | |
| 221 left: 2.1rem !important; | |
| 222 color: #f1f1f1 !important; | |
| 223 } | |
| 224 | |
| 225 .swiper-button-next { | |
| 226 right: 2.1rem !important; | |
| 227 color: #f1f1f1 !important; | |
| 228 } | |
| 229 | |
| 230 .slide_img { | |
| 231 max-height: 100%; | |
| 232 max-width: 100%; | |
| 233 } | |
|
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
234 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
235 /*************** |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
236 * progression * |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
237 ***************/ |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
238 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
239 .progress_started img { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
240 filter: grayscale(100%); |
|
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 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
243 .progress_finished img { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
244 filter: grayscale(0%); |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
245 transition: filter 1.5s ease-out; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
246 } |
|
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 .progress_finished progress { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
249 height: 0; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
250 opacity: 0; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
251 transition: all 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 { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
255 transition: width 5s ease; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
256 } |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
257 |
|
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 * drawer * |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
261 **********/ |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
262 |
| 230 | 263 |
| 264 .panel-drawer { | |
| 265 /* A panel which is hidden by default but can be | |
| 266 opened when it's clicked */ | |
| 267 max-height: 0; | |
| 268 opacity: 0; | |
| 269 overflow: hidden; | |
| 270 transition: max-height 0.5s, opacity 0.5s; | |
| 271 } | |
| 272 | |
| 273 .panel-drawer.state_clicked { | |
| 274 opacity: 1; | |
| 275 } | |
| 276 | |
| 277 /******** | |
| 278 * code * | |
| 279 ********/ | |
| 280 | |
| 281 .highlight { | |
| 282 overflow: auto; | |
| 283 } | |
| 284 | |
| 285 /********** | |
| 286 * blocks * | |
| 287 **********/ | |
| 288 | |
| 289 .block_separator { | |
| 290 font-size: 1.4em; | |
| 291 display: flex; | |
| 292 margin: 1rem 0; | |
| 293 } | |
| 294 | |
| 295 .block_separator__label { | |
| 296 display: inline-block; | |
| 297 margin: 0 0.2em; | |
| 298 } | |
| 299 | |
| 300 .block_separator__line { | |
| 301 height: 1px; | |
| 302 background: #ccc; | |
| 303 flex: 1; | |
| 304 margin-top: 0.7em; | |
| 305 } | |
| 306 | |
| 307 /******** | |
| 308 * tabs * | |
| 309 *******/ | |
| 310 | |
| 311 #tab_guests { | |
| 312 overflow: auto; | |
| 313 } | |
| 314 | |
| 315 .tab__page { | |
| 316 display: None; | |
| 317 } | |
| 318 | |
| 319 .tab__page.state_clicked { | |
| 320 display: block; | |
| 321 } |