Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/styles.css @ 254:8411a274448e
bulma (css): new `is-not-selectable` class
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Sat, 01 Aug 2020 17:01:31 +0200 |
| parents | 7397d81dd633 |
| children | c8eb86b49cb5 |
| 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; | |
| 252 | 166 } |
| 167 | |
| 168 .comments_side_panel.open { | |
| 253 | 169 width: 55rem; |
| 170 transition: width 0.3s ease-out; | |
| 252 | 171 } |
| 172 | |
| 173 /************* | |
| 174 * slideshow * | |
| 175 *************/ | |
| 176 | |
| 177 .slideshow { | |
| 178 position: absolute; | |
| 179 top: 0; | |
| 180 left: 0; | |
| 181 width: 100vw; | |
| 182 height: 100vh; | |
| 183 background-color: black; | |
| 184 color: white; | |
| 185 z-index: 100; | |
| 186 /* color: white; */ | |
| 187 } | |
| 188 | |
| 189 div.slideshow>button.delete { | |
| 190 z-index: 100; | |
| 191 background-color: var(--grey-light); | |
| 192 position: absolute; | |
| 193 top: 1rem; | |
| 194 right: 2rem; | |
| 195 } | |
| 196 | |
| 197 div.slideshow>div.click_to_comment { | |
| 198 z-index: 100; | |
| 199 position: absolute; | |
| 200 right: 1.7rem; | |
| 201 bottom: 2rem; | |
| 202 cursor: pointer; | |
| 203 } | |
| 204 | |
| 205 div.slideshow>div.comments__count { | |
| 206 z-index: 100; | |
| 207 position: absolute; | |
| 208 right: 1.7rem; | |
| 209 bottom: 0.5rem; | |
| 210 font-weight: bold; | |
| 211 } | |
| 212 | |
| 213 .swiper-slide { | |
| 214 display: flex; | |
| 215 align-items: center; | |
| 216 justify-content: center; | |
| 217 } | |
| 218 | |
| 219 .swiper-container { | |
| 220 height: 100%; | |
| 221 width: 100%; | |
| 222 } | |
| 223 | |
| 224 .swiper-button-prev { | |
| 253 | 225 left: 2.1rem !important; |
| 252 | 226 color: #f1f1f1 !important; |
| 227 } | |
| 228 | |
| 229 .swiper-button-next { | |
| 253 | 230 right: 2.1rem !important; |
| 252 | 231 color: #f1f1f1 !important; |
| 232 } | |
| 233 | |
| 234 .slide_img { | |
| 235 max-height: 100%; | |
| 236 max-width: 100%; | |
| 237 } | |
|
242
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 /*************** |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
240 * progression * |
|
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_started img { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
244 filter: grayscale(100%); |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
245 } |
|
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 .progress_finished img { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
248 filter: grayscale(0%); |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
249 transition: filter 1.5s ease-out; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
250 } |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
251 |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
252 .progress_finished progress { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
253 height: 0; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
254 opacity: 0; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
255 transition: all 1.5s ease-out; |
|
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 .progress { |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
259 transition: width 5s ease; |
|
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
260 } |
|
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 |
|
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 * drawer * |
|
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 |
| 230 | 267 |
| 268 .panel-drawer { | |
| 269 /* A panel which is hidden by default but can be | |
| 270 opened when it's clicked */ | |
| 271 max-height: 0; | |
| 272 opacity: 0; | |
| 273 overflow: hidden; | |
| 274 transition: max-height 0.5s, opacity 0.5s; | |
| 275 } | |
| 276 | |
| 277 .panel-drawer.state_clicked { | |
| 278 opacity: 1; | |
| 279 } | |
| 280 | |
| 281 /******** | |
| 282 * code * | |
| 283 ********/ | |
| 284 | |
| 285 .highlight { | |
| 286 overflow: auto; | |
| 287 } | |
| 288 | |
| 289 /********** | |
| 290 * blocks * | |
| 291 **********/ | |
| 292 | |
| 293 .block_separator { | |
| 294 font-size: 1.4em; | |
| 295 display: flex; | |
| 296 margin: 1rem 0; | |
| 297 } | |
| 298 | |
| 299 .block_separator__label { | |
| 300 display: inline-block; | |
| 301 margin: 0 0.2em; | |
| 302 } | |
| 303 | |
| 304 .block_separator__line { | |
| 305 height: 1px; | |
| 306 background: #ccc; | |
| 307 flex: 1; | |
| 308 margin-top: 0.7em; | |
| 309 } | |
| 310 | |
| 311 /******** | |
| 312 * tabs * | |
| 313 *******/ | |
| 314 | |
| 315 #tab_guests { | |
| 316 overflow: auto; | |
| 317 } | |
| 318 | |
| 319 .tab__page { | |
| 320 display: None; | |
| 321 } | |
| 322 | |
| 323 .tab__page.state_clicked { | |
| 324 display: block; | |
| 325 } |