Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/styles.css @ 371:a5a80d761e3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): update template to integrate call features: previously, call template was a minimum UI for testing implementation. This commit introduce a usable UI with search interface, mute and full screen button, animations, and other UI/UX improvments. rel 423
author Goffi <goffi@goffi.org>
date Wed, 09 Aug 2023 00:11:39 +0200
parents 281d1c958d56
children 387c8c5a3bee
comparison
equal deleted inserted replaced
370:281d1c958d56 371:a5a80d761e3e
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 height: 100vh; 16 height: 100vh;
17 width: 100vw; 17 width: 100vw;
18 overflow: hidden; 18 overflow: hidden;
19 }
20
21 .is-full-below-menu {
22 /* full viewport minus top menu height */
23 position:relative;
24 height: calc(100vh - 52px);
19 } 25 }
20 26
21 .has-whitespace-pre-wrap { 27 .has-whitespace-pre-wrap {
22 white-space: pre-wrap; 28 white-space: pre-wrap;
23 } 29 }
611 617
612 100% { 618 100% {
613 transform: rotate(359deg); 619 transform: rotate(359deg);
614 } 620 }
615 } 621 }
622
623
624 /**************
625 * animations *
626 *************/
627
628 /* Fade In */
629
630 @keyframes fade-in {
631 0% {
632 opacity: 0;
633 }
634 100% {
635 opacity: 1;
636 }
637 }
638
639 .fade-in {
640 animation: fade-in 0.5s ease-in forwards;
641 }
642
643 @keyframes fade-in-x {
644 0% {
645 opacity: 0;
646 transform: scaleX(0);
647 }
648 100% {
649 opacity: 1;
650 transform: scaleX(1);
651 }
652 }
653
654 .fade-in-x {
655 animation: fade-in-x 0.5s ease-in forwards;
656 }
657
658 @keyframes fade-in-y {
659 0% {
660 opacity: 0;
661 transform: scaleY(0);
662 }
663 100% {
664 opacity: 1;
665 transform: scaleY(1);
666 }
667 }
668
669 .fade-in-y {
670 animation: fade-in-y 0.5s ease-in forwards;
671 }
672
673 @keyframes fade-in-xy {
674 0% {
675 opacity: 0;
676 transform: scale(0);
677 }
678 100% {
679 opacity: 1;
680 transform: scale(1);
681 }
682 }
683
684 .fade-in-xy {
685 animation: fade-in-xy 0.5s ease-in forwards;
686 }
687
688 /* Fade Out */
689
690 @keyframes fade-out {
691 0% {
692 opacity: 1;
693 }
694 100% {
695 opacity: 0;
696 }
697 }
698
699 .fade-out {
700 animation: fade-out 0.5s ease-in forwards;
701 }
702
703 @keyframes fade-out-x {
704 0% {
705 opacity: 1;
706 transform: scaleX(1);
707 }
708 100% {
709 opacity: 0;
710 transform: scaleX(0);
711 }
712 }
713
714 .fade-out-x {
715 animation: fade-out-x 0.5s ease-in forwards;
716 }
717
718 @keyframes fade-out-y {
719 0% {
720 opacity: 1;
721 transform: scaleY(1);
722 }
723 100% {
724 opacity: 0;
725 transform: scaleY(0);
726 }
727 }
728
729 .fade-out-y {
730 animation: fade-out-y 0.5s ease-in forwards;
731 }
732
733 @keyframes fade-out-xy {
734 0% {
735 opacity: 1;
736 transform: scale(1);
737 }
738 100% {
739 opacity: 0;
740 transform: scale(0);
741 }
742 }
743
744 .fade-out-xy {
745 animation: fade-out-xy 0.5s ease-in forwards;
746 }
747
748 /* Slide In */
749 @keyframes slide-in {
750 0% {
751 transform: translateY(100%);
752 opacity: 0;
753 }
754 100% {
755 transform: translateY(0);
756 opacity: 1;
757 }
758 }
759
760 .slide-in {
761 animation: slide-in 0.5s ease-in-out forwards;
762 }
763
764 .animation-reverse {
765 animation-direction: reverse;
766 }