Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/styles.css @ 255:c8eb86b49cb5
bulma (css): fixed overflow in slideshow
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Sat, 01 Aug 2020 17:01:31 +0200 |
| parents | 8411a274448e |
| children | caadb06854a0 |
| 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 | |
| 156 .comments_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 | |
| 170 .comments_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 * | |
| 315 *******/ | |
| 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 } |