"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7307/css/_reactions-menu.scss" (30 May 2023, 3206 Bytes) of package /linux/misc/jitsi-meet-7307.tar.gz:

As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) Sass/SCSS source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "_reactions-menu.scss": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 @use 'sass:math';
    2 
    3 .reactions-menu {
    4     width: 280px;
    5     background: $menuBG;
    6     box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
    7     border-radius: 6px;
    8     padding: 16px;
    9 
   10     &.with-gif {
   11         width: 328px;
   12 
   13         .reactions-row .toolbox-button:last-of-type {
   14             top: 3px;
   15 
   16             & .toolbox-icon.toggled {
   17                 background-color: #000000;
   18             }
   19         }
   20     }
   21 
   22     &.overflow {
   23         width: 100%;
   24 
   25         .toolbox-icon {
   26             width: 48px;
   27             height: 48px;
   28 
   29             span.emoji {
   30                 width: 48px;
   31                 height: 48px;
   32             }
   33         }
   34 
   35         .reactions-row {
   36             display: flex;
   37             flex-direction: row;
   38             justify-content: space-around;
   39 
   40             .toolbox-button {
   41                 margin-right: 0;
   42             }
   43 
   44             .toolbox-button:last-of-type {
   45                 top: 0;
   46             }
   47         }
   48     }
   49 
   50     .toolbox-icon {
   51         width: 40px;
   52         height: 40px;
   53         border-radius: 6px;
   54 
   55         span.emoji {
   56             width: 40px;
   57             height: 40px;
   58             font-size: 22px;
   59             display: flex;
   60             align-items: center;
   61             justify-content: center;
   62             transition: font-size ease .1s;
   63 
   64             @for $i from 1 through 12 {
   65                 &.increase-#{$i}{
   66                     font-size: calc(20px + #{$i}px);
   67                 }
   68             }
   69         }
   70     }
   71 
   72     .reactions-row {
   73         .toolbox-button {
   74             margin-right: 8px;
   75             touch-action: manipulation;
   76             position: relative;
   77         }
   78 
   79         .toolbox-button:last-of-type {
   80             margin-right: 0;
   81         }
   82     }
   83 
   84     .raise-hand-row {
   85         margin-top: 16px;
   86 
   87         .toolbox-button {
   88             width: 100%;
   89         }
   90 
   91         .toolbox-icon {
   92             width: 100%;
   93             flex-direction: row;
   94             align-items: center;
   95 
   96             span.text {
   97                 font-style: normal;
   98                 font-weight: 600;
   99                 font-size: 14px;
  100                 line-height: 24px;
  101                 margin-left: 8px;
  102             }
  103         }
  104     }
  105 }
  106 
  107 .reactions-animations-container {
  108     position: absolute;
  109     width: 20%;
  110     bottom: 0;
  111     left: 40%;
  112     height: 0;
  113 }
  114 
  115 .reactions-menu-popup-container {
  116     display: inline-block;
  117     position: relative;
  118 }
  119 
  120 $reactionCount: 20;
  121 
  122 @function random($min, $max) {
  123   @return math.random() * ($max - $min) + $min;
  124 }
  125 
  126 .reaction-emoji {
  127     position: absolute;
  128     font-size: 24px;
  129     line-height: 32px;
  130     width: 32px;
  131     height: 32px;
  132     top: 0;
  133     left: 20px;
  134     opacity: 0;
  135     z-index: 1;
  136 
  137     &.reaction-0 {
  138         animation: flowToRight 5s forwards ease-in-out;
  139     }
  140 
  141     @for $i from 1 through $reactionCount {
  142     &.reaction-#{$i} {
  143         animation: animation-#{$i} 5s forwards ease-in-out;
  144         top: #{random(-40, 10)}px;
  145         left: #{random(0, 30)}px;
  146     }
  147 }
  148 }
  149 
  150 @keyframes flowToRight {
  151     0% {
  152         transform: translate(0px, 0px) scale(0.6);
  153         opacity: 1;
  154     }
  155 
  156     70% {
  157         transform: translate(40px, -70vh) scale(1.5);
  158         opacity: 1;
  159     }
  160 
  161     75% {
  162         transform: translate(40px, -70vh) scale(1.5);
  163         opacity: 1;
  164     }
  165 
  166     100% {
  167         transform: translate(140px, -50vh) scale(1);
  168         opacity: 0;
  169     }
  170 }
  171 
  172 @mixin animation-list {
  173     @for $i from 1 through $reactionCount {
  174         $topX: random(-100, 100);
  175         $topY: random(65, 75);
  176         $bottomX: random(150, 200);
  177         $bottomY: random(40, 50);
  178 
  179         @if $topX < 0 {
  180             $bottomX: -$bottomX;
  181         }
  182 
  183         @keyframes animation-#{$i} {
  184             0% {
  185                 transform: translate(0, 0) scale(0.6);
  186                 opacity: 1;
  187             }
  188 
  189             70% {
  190                 transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
  191                 opacity: 1;
  192             }
  193 
  194             75% {
  195                 transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
  196                 opacity: 1;
  197             }
  198 
  199             100% {
  200                 transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
  201                 opacity: 0;
  202             }
  203         }
  204     }
  205 }
  206 
  207 @include animation-list;