Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/styles.css @ 402:2bbcb7da56bc default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma: use Font-Awesome instead of Fontello + start of major redesign: - Font-Awesome is now used instead of Fontello, following change in Libervia Media. - This is a beginning of a major redesign of the web templates/web frontend. This currently breaks a lot of thing.
author Goffi <goffi@goffi.org>
date Sat, 26 Oct 2024 22:53:26 +0200
parents 9847e6dbeefa
children
comparison
equal deleted inserted replaced
401:0e454358ca49 402:2bbcb7da56bc
1 :root { 1 html, body {
2 --photo-height: 280px;
3 --photo-height--poster: 500px;
4 --col-primary: #82baff;
5 --grey-light: hsl(0, 0%, 71%);
6 }
7 2
8 html { 3 height: 100%;
9 /* Bulma default force scrollbar, we don't want this */
10 overflow-y: auto;
11 }
12
13 body.body--fullscreen {
14 display: flex;
15 flex-direction: column;
16 height: 100vh;
17 width: 100vw;
18 overflow: hidden; 4 overflow: hidden;
19 } 5 }
20 6
21 7 .navbar-item {
22 input[type="search"]::-webkit-search-cancel-button { 8 gap: 0;
23 /* We disable cancel button on webkit based browser for consistency, as we add our */
24 /* own when necessary */
25 display: none;
26 } 9 }
27 10
28 11
29 .is-full-below-menu { 12 .menu-item {
30 /* full viewport minus top menu height */ 13 padding-top: 0.225em;
31 position:relative;
32 height: calc(100vh - 52px);
33 } 14 }
34
35 .has-whitespace-pre-wrap {
36 white-space: pre-wrap;
37 }
38
39 .has-whitespace-pre-line {
40 white-space: pre-line;
41 }
42
43 .has-decoration-line-through {
44 text-decoration: line-through;
45 }
46
47 .is-avatar {
48 height: 64px;
49 width: 64px;
50 border-radius: 50%;
51 border: 1px solid #bbb;
52 background-color: #eee;
53 overflow: hidden;
54 }
55
56 .is-video-thumbnail-wrapper {
57 background-color: black;
58 }
59
60 .is-video-thumbnail-wrapper, .is-video-thumbnail {
61 height: 100%;
62 width: 100%;
63 }
64
65
66 .is-photo-thumbnail {
67 max-height: var(--photo-height);
68 max-width: 100%;
69 }
70
71 .is-photo-thumbnail-container {
72 height: var(--photo-height);
73
74 }
75
76 .is-top-right {
77 /* position element on top right corner, outside document flow (abolute positioning)
78 * useful for delete icon
79 */
80 position: absolute;
81 top: 0.25rem;
82 right: 0.25rem;
83 }
84
85 .is-top-left {
86 position: absolute;
87 top: 0.25em;
88 left: 0.25em;
89 }
90
91 .has-items-centered {
92 align-items: center;
93 justify-content: center;
94 }
95
96 .is-poster {
97 height: var(--photo-height--poster) !important;
98 }
99
100 .is-poster>.is-photo-thumbnail {
101 max-height: var(--photo-height--poster) !important;
102 }
103
104 .has-items-vcentered {
105 align-items: center;
106 }
107
108 .is-valign-middle {
109 vertical-align: middle;
110 }
111
112 .x-is-hoverable:hover {
113 background-color: #eee !important;
114 }
115
116 .x-is-hoverable-primary:hover {
117 background-color: var(--col-primary) !important;
118 border-radius: 50%;
119 box-shadow: 0px 0px 0 0.25rem var(--col-primary);
120 }
121
122 .media.is-chat-message {
123 margin: 0.5rem 0 0;
124 padding: 0;
125 border: 0;
126 }
127
128 .is-text-content {
129 white-space: break-spaces;
130 }
131
132
133 a.is-wrapping {
134 line-height: 0;
135 }
136
137 .has-no-background {
138 box-shadow: none !important;
139 background-color: initial !important;
140 }
141
142 .pagination-disabled {
143 background-color: white;
144 border-color: #dbdbdb;
145 color: #b5b5b5;
146 cursor: auto;
147 }
148
149 .pagination-disabled:hover {
150 background-color: white;
151 border-color: #dbdbdb;
152 color: #b5b5b5;
153 }
154
155 .has-text-shortenable {
156 overflow: hidden;
157 text-overflow: ellipsis;
158 }
159
160 .has-border-dashed {
161 border-style: dashed;
162 }
163
164 .has-border-grey-light {
165 border-color: var(--grey-light);
166 }
167
168 .has-justify-start {
169 justify-content: start;
170 }
171
172 .has-width-7 {
173 width: 7em;
174 }
175
176 .media-content {
177 min-width: 15em;
178 }
179
180 .column {
181 max-width: 100%;
182 }
183
184 :not(div.highlight>pre)>code {
185 border: 1px solid #DDD;
186 color: initial;
187 background-color: unset;
188 padding: 0.05em 0.25em 0.05em;
189 }
190
191 /**************
192 * selections *
193 **************/
194
195 .is-selected-search_item {
196 border: solid 2px #3273dc;
197 background-color: #eff3fa;
198 transform: scale(1.03);
199 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
200 }
201
202 .is-not-selectable {
203 user-select: none;
204 }
205
206 .selected_for_action {
207 outline: solid var(--col-primary) 0.25rem;
208 }
209
210 .selected_for_deletion {
211 outline: solid red 0.25rem;
212 }
213
214 /**************
215 * JID Search *
216 **************/
217
218 .search-item__group-tags {
219 /* we want the item with no group to have the same height as an item with one */
220 min-height: 40px;
221 }
222
223 /***************
224 * misc states *
225 ***************/
226
227 .state_deleted {
228 opacity: 0;
229 transform: scale(0);
230 transition: opacity 0.5s ease-out, transform 0.5s ease-out;
231 }
232
233 /**********
234 * editor *
235 **********/
236
237 .tag_input {
238 flex-grow: 1;
239 margin-bottom: 0.5rem;
240 width: auto;
241 }
242
243
244 /***********
245 * dialogs *
246 ***********/
247
248 .modal-dialog {
249 transform: scaleY(0);
250 }
251
252 div.state_appended .modal-dialog, div.main_notification.state_appended {
253 transform: scaleY(1);
254 transition: transform 0.15s ease-in;
255 }
256
257 div.main_notification.state_closing {
258 transform: scaleY(0);
259 }
260
261 .main_notification {
262 position: fixed;
263 top: 2rem;
264 left: 0;
265 right: 0;
266 z-index: 10000;
267 transform: scaleY(0);
268 transition: transform 0.15s ease-in;
269 }
270
271 div.main_notification>div.column {
272 display: flex;
273 max-width: 95%;
274 }
275 div.main_notification>div.column>div.notification {
276 max-width: 80rem;
277 }
278
279 .click_to_close {
280 cursor: pointer;
281 }
282
283 div.search_dialog.is-active>div.dropdown-menu {
284 display: none;
285 }
286
287 div.search_dialog.open>div.dropdown-menu {
288 display: block;
289 }
290
291 div.dropdown-item.selected {
292 background-color: var(--col-primary);
293 }
294
295 /**********
296 * panels *
297 **********/
298
299 .panel_wrapper {
300 position: absolute;
301 top: 0;
302 right: 0;
303 height: 100vh;
304 width: 100vw;
305 z-index: 150;
306 }
307
308 .comments_side_panel, .invitation_manager_side_panel {
309 position: absolute;
310 top: 0;
311 right: 0;
312 height: 100vh;
313 width: 0;
314 max-width: 80%;
315 z-index: 200;
316 background: white;
317 transition: width 0.3s ease-out;
318 overflow: auto;
319 color: black;
320 }
321
322 .comments_side_panel.open, .invitation_manager_side_panel.open {
323 width: 55rem;
324 transition: width 0.3s ease-out;
325 }
326
327 /*********
328 * embed *
329 *********/
330
331 .embed {
332 width: 100%;
333 height: 100%;
334 }
335
336 /****************
337 * media player *
338 ****************/
339
340 div.media_player>div.media_elt,
341 div.media_player>div.media_elt>ogvjs,
342 div.media_player>div.media_elt>video {
343 width: 100%;
344 height: 100%;
345 }
346
347 /* div.media_player:fullscreen>div.media_elt, */
348 /* div.media_player:fullscreen>div.media_elt>ogvjs, */
349 /* div.media_player:fullscreen>div.media_elt>video */
350 /* { */
351 /* height: 100%; */
352 /* } */
353
354 div.media_player {
355 position: relative;
356 background-color: black;
357 }
358
359 div.media_overlay_play {
360 position: absolute;
361 top: 0;
362 left: 0;
363 width: 100%;
364 height: 100%;
365 }
366
367 div.media_overlay_play>.icon {
368 height: 12rem;
369 width: 12rem;
370 font-size: 10rem;
371 color: #eee;
372 }
373
374 div.media_player.in_use>div.media_overlay_play {
375 display: none !important;
376 }
377
378 div.media_player .media_pause, div.media_player .media_sound_off,
379 div.media_player .media_resize_small {
380 display: none;
381 }
382
383 div.media_player.playing .media_pause {
384 display: inline-block;
385 }
386
387 div.media_player.playing .media_play {
388 display: none;
389 }
390
391 div.media_player.muted .media_sound_off {
392 display: inline-block;
393 }
394
395 div.media_player.muted .media_sound_on {
396 display: none;
397 }
398
399 div.media_player:fullscreen .media_resize_small {
400 display: inline-block;
401 }
402
403 div.media_player:fullscreen .media_resize_full {
404 display: none;
405 }
406
407 div.media_controls {
408 position: absolute;
409 bottom: 0;
410 left: 0;
411 width: 100%;
412 margin: 0;
413 background-color: #000A;
414 color: #eee;
415 z-index: 150;
416 }
417
418 div.media_controls progress {
419 cursor: pointer;
420 }
421
422 div.media_player.playing:hover>.media_controls,
423 div.media_player.playing>.media_controls.hidden:hover
424 {
425 opacity: 1;
426 transition: opacity 0.5s;
427 }
428
429 div.media_player.playing>.media_controls,
430 div.media_player.playing>.media_controls.hidden {
431 opacity: 0;
432 transition: opacity 2s;
433 }
434
435 div.media_player .media_controls .icon:hover {
436 background-color: #777;
437 cursor: pointer;
438 }
439
440 div.media_player .timer {
441 cursor: pointer;
442 width: 5em;
443 text-align: center;
444 }
445
446 div.media_player.no_fullscreen>div.media_controls>div.click_to_fullscreen {
447 display: none;
448 }
449
450
451 /*************
452 * slideshow *
453 *************/
454
455 .slideshow {
456 position: absolute;
457 top: 0;
458 left: 0;
459 width: 100vw;
460 height: 100vh;
461 background-color: black;
462 color: white;
463 z-index: 100;
464 overflow: hidden;
465 }
466
467 div.slideshow>button.delete {
468 z-index: 100;
469 background-color: var(--grey-light);
470 position: absolute;
471 top: 1rem;
472 right: 2rem;
473 }
474
475 div.slideshow>div.click_to_comment {
476 z-index: 100;
477 position: absolute;
478 right: 1.7rem;
479 bottom: 3rem;
480 cursor: pointer;
481 }
482
483 div.slideshow>div.comments__count {
484 z-index: 100;
485 position: absolute;
486 right: 1.7rem;
487 bottom: 0.5rem;
488 font-weight: bold;
489 }
490
491 .swiper-slide {
492 display: flex;
493 align-items: center;
494 justify-content: center;
495 }
496
497 .swiper-container {
498 height: 100%;
499 width: 100%;
500 }
501
502 .swiper-button-prev {
503 left: 2.1rem !important;
504 color: #f1f1f1 !important;
505 z-index: 150;
506 }
507
508 .swiper-button-next {
509 right: 2.1rem !important;
510 color: #f1f1f1 !important;
511 z-index: 150;
512 }
513
514 .slide_img {
515 max-height: 100%;
516 max-width: 100%;
517 }
518
519 .slide_video {
520 height: 100%;
521 width: 100%;
522 }
523
524 div.slideshow.flag_no_pagination>div.swiper-container>div.swiper-pagination {
525 display: none;
526 }
527
528 div.slideshow.flag_no_scrollbar>div.swiper-container>div.swiper-scrollbar {
529 display: none;
530 }
531
532
533 /***************
534 * progression *
535 ***************/
536
537 .progress_started img {
538 filter: grayscale(100%);
539 }
540
541 .progress_finished img {
542 filter: grayscale(0%);
543 transition: filter 1.5s ease-out;
544 }
545
546 .progress_finished progress {
547 height: 0;
548 opacity: 0;
549 transition: all 1.5s ease-out;
550 }
551
552 .progress {
553 transition: width 5s ease;
554 }
555
556
557 /**********
558 * drawer *
559 **********/
560
561
562 .panel-drawer {
563 /* A panel which is hidden by default but can be
564 opened when it's clicked */
565 max-height: 0;
566 opacity: 0;
567 overflow: hidden;
568 transition: max-height 0.5s, opacity 0.5s;
569 }
570
571 .panel-drawer.state_clicked {
572 opacity: 1;
573 }
574
575 /********
576 * code *
577 ********/
578
579 .highlight {
580 overflow: auto;
581 }
582
583 /**********
584 * blocks *
585 **********/
586
587 .block_separator {
588 font-size: 1.4em;
589 display: flex;
590 margin: 1rem 0;
591 }
592
593 .block_separator__label {
594 display: inline-block;
595 margin: 0 0.2em;
596 }
597
598 .block_separator__line {
599 height: 1px;
600 background: #ccc;
601 flex: 1;
602 margin-top: 0.7em;
603 }
604
605 /********
606 * tabs *
607 ********/
608
609 #tab_guests {
610 overflow: auto;
611 }
612
613 .tab__page {
614 display: None;
615 }
616
617 .tab__page.state_clicked {
618 display: block;
619 }
620
621 /*********
622 * icons *
623 *********/
624
625 .svg-icon {
626 fill: currentColor;
627 }
628
629 .icon_animate_spin {
630 animation: spin 2s infinite linear;
631 display: inline-block;
632 }
633
634 @keyframes spin {
635 0% {
636 transform: rotate(0deg);
637 }
638
639 100% {
640 transform: rotate(359deg);
641 }
642 }
643
644 /*******************
645 * common features *
646 ******************/
647
648 .reaction {
649 border-radius: 12px; /* Rounded background */
650 cursor: pointer; /* Pointer cursor for the entire reaction */
651 border: 1px solid #dbdbdb; /* Discreet but visible border */
652 }
653
654 .reaction .emoji {
655 margin-right: .5rem; /* Space between emoji and counter using rem unit */
656 }
657
658 .own-reaction {
659 border-color: #3273dc;
660 }
661
662 /**************
663 * animations *
664 *************/
665
666 /* Fade In */
667
668 @keyframes fade-in {
669 0% {
670 opacity: 0;
671 }
672 100% {
673 opacity: 1;
674 }
675 }
676
677 .fade-in {
678 animation: fade-in 0.5s ease-in forwards;
679 }
680
681 @keyframes fade-in-x {
682 0% {
683 opacity: 0;
684 transform: scaleX(0);
685 }
686 100% {
687 opacity: 1;
688 transform: scaleX(1);
689 }
690 }
691
692 .fade-in-x {
693 animation: fade-in-x 0.5s ease-in forwards;
694 }
695
696 @keyframes fade-in-y {
697 0% {
698 opacity: 0;
699 transform: scaleY(0);
700 }
701 100% {
702 opacity: 1;
703 transform: scaleY(1);
704 }
705 }
706
707 .fade-in-y {
708 animation: fade-in-y 0.5s ease-in forwards;
709 }
710
711 @keyframes fade-in-xy {
712 0% {
713 opacity: 0;
714 transform: scale(0);
715 }
716 100% {
717 opacity: 1;
718 transform: scale(1);
719 }
720 }
721
722 .fade-in-xy {
723 animation: fade-in-xy 0.5s ease-in forwards;
724 }
725
726 /* Fade Out */
727
728 @keyframes fade-out {
729 0% {
730 opacity: 1;
731 }
732 100% {
733 opacity: 0;
734 }
735 }
736
737 .fade-out {
738 animation: fade-out 0.5s ease-in forwards;
739 }
740
741 @keyframes fade-out-x {
742 0% {
743 opacity: 1;
744 transform: scaleX(1);
745 }
746 100% {
747 opacity: 0;
748 transform: scaleX(0);
749 }
750 }
751
752 .fade-out-x {
753 animation: fade-out-x 0.5s ease-in forwards;
754 }
755
756 @keyframes fade-out-y {
757 0% {
758 opacity: 1;
759 transform: scaleY(1);
760 }
761 100% {
762 opacity: 0;
763 transform: scaleY(0);
764 }
765 }
766
767 .fade-out-y {
768 animation: fade-out-y 0.5s ease-in forwards;
769 }
770
771 @keyframes fade-out-xy {
772 0% {
773 opacity: 1;
774 transform: scale(1);
775 }
776 100% {
777 opacity: 0;
778 transform: scale(0);
779 }
780 }
781
782 .fade-out-xy {
783 animation: fade-out-xy 0.5s ease-in forwards;
784 }
785
786 /* Slide In */
787 @keyframes slide-in {
788 0% {
789 transform: translateY(100%);
790 opacity: 0;
791 }
792 100% {
793 transform: translateY(0);
794 opacity: 1;
795 }
796 }
797
798 .slide-in {
799 animation: slide-in 0.5s ease-in-out forwards;
800 }
801
802 .animation-reverse {
803 animation-direction: reverse;
804 }
805
806 /***************
807 * third party *
808 **************/
809
810 emoji-picker {
811 width: 100%;
812 /* height: 30rem; */
813 }