Threeveta web master

css/_videolayout_default.scss

@@ -29,7 +29,8 @@
     }
 }
 #largeVideoBackgroundContainer {
-    filter: blur(40px);
+    filter: blur(20px);
+    opacity: 0.4;
 }
 
 .videocontainer {
@@ -74,18 +75,19 @@
             display: inline-block;
             float: left;
             pointer-events: all;
+            padding-left: 8px;
         }
     }
 
     &__toolbar {
-        bottom: 0;
+        top: 13px;
         height: $thumbnailToolbarHeight;
         padding: 0 5px 0 5px;
     }
 
     &__toptoolbar {
         $toolbarIconMargin: 5px;
-        top: 0;
+        top: 4px;
         padding-bottom: 0;
         /**
          * Override text-align center as icons need to be left justified.

css/filmstrip/_small_video.scss

@@ -40,7 +40,7 @@
     & > video {
         cursor: hand;
         border-radius: $borderRadius;
-        object-fit: cover;
+        object-fit: contain;
         overflow: hidden;
     }
 

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -62,6 +62,7 @@
 
     .indicator-container {
         float: none;
+        padding-left: 4px;
     }
 
     /**

css/main.scss

@@ -103,5 +103,6 @@ $flagsImagePath: "../images/";
 @import 'e2ee';
 @import 'responsive';
 @import 'connection-status';
+@import 'threeveta';
 
 /* Modules END */

css/threeveta/_bottom-controls.scss

@@ -0,0 +1,220 @@
+// Bottom controls
+$button-padding: 6px;
+
+.button-group-left,
+.button-group-right {
+    .toolbox-icon  {
+        border-radius: 50% !important;
+        background: $main-white;
+        padding: $button-padding;
+        font-size: 11px !important;
+        &.toggled,
+        &:hover {
+            background: $inactive-gray !important;
+        }
+        svg {
+            fill: none !important;
+        }
+        &.labeled {
+            flex-direction: row;
+            align-items: center;
+            border-radius: 30px !important;
+            color: $main-gray;
+            text-transform: uppercase;
+            font-weight: bold;
+            width: fit-content;
+            width: -moz-fit-content;
+            width: -webkit-fit-content;
+            padding: $button-padding ($button-padding * 3);
+            .tvt-icon-label {
+                margin-left: 1em;
+                text-transform: none;
+            }
+        }
+        @media only screen and (max-width: 700px) {
+            &.labeled {
+                padding: $button-padding;
+                .tvt-icon-label {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+.button-group-center {
+    .toolbox-icon  {
+        padding: $button-padding;
+        &:hover {
+            background: $gray-lighten4 !important;
+            border: 1px solid transparent !important;
+        }
+        &.toggled, {
+            background: $main-gray !important;
+            border: 1px solid transparent !important;
+            &:hover {
+                background: $gray-lighten !important;
+            }
+        }
+    }
+    .toolbox-button.tvt-hangup-button {
+        .toolbox-icon {
+            background-color: $error-color !important;
+            border: 1px solid $error-color !important;
+        }
+    }
+    .settings-button-small-icon {
+        &:hover {
+            background-color: $gray-lighten4;
+        }
+    }
+}
+
+// Bottom controls popup container
+$popup-radius: 5px;
+.toolbox-button-wth-dialog,
+.audio-preview,
+.video-preview {
+    div div:not(.jitsi-icon) {
+        border-radius: $popup-radius;
+        box-shadow: none;
+    }
+}
+
+
+@mixin popup {
+    background: $main-white;
+    border-radius: $popup-radius;
+    color: $main-gray !important;
+    font-size: 16px;
+}
+@mixin popup-item {
+    border-radius: 3px;
+    background: $main-white !important;
+    color: $main-gray !important;
+    &:hover {
+        background: $gray-lighten5 !important;
+    }
+}
+
+// Central bottom settings popup
+.audio-preview-content {
+    @include popup;
+    padding: 9px 20px;
+    .audio-preview-header {
+        color: $main-gray;
+        padding-left: 0px;
+        &:last-child {
+            position: relative;
+            &:before {
+                content: ' ';
+                border-top: 1px solid $main-gray;
+                width: 80%;
+                left: 10%;
+                top: 0px;
+                position: absolute;
+            }
+        }
+        & .audio-preview-header-icon {
+            svg {
+                transform: scale(0.85);
+            }
+        }
+    }
+    .audio-preview-speaker,
+    .audio-preview-microphone {
+        @include popup-item;
+        &:hover {
+            .audio-preview-entry {
+                margin-left: 48px; 
+            }
+        }
+        .audio-preview-entry {
+            background: transparent !important;
+            padding: 8px 0;
+            .audio-preview-entry-text {
+                color: $main-gray !important;
+                font-size: 14px;
+            }
+            &:last-child {
+                margin-bottom: 6px;
+            }
+            &.audio-preview-entry--selected {
+                margin-left: 21px;
+            }
+        }
+        .audio-preview-test-button {
+            border: 1px solid $accent2;
+            border-radius: 3px;
+            font-size: 9px;
+            padding: 3px 16px;
+            line-height: 16px;
+            color: $accent2;
+            text-transform: uppercase;
+            top: 8px;
+            right: 10px;
+        }
+        .audio-preview-meter-mic {
+            top: 14px;
+            right: 10px;
+            &.jitsi-icon.metr > svg {
+                fill: #E1E3EA;
+                transform: scale(1.5);
+            }
+        }
+        .audio-preview-icon--check {
+            background: transparent;
+        }
+    }
+    .audio-preview-speaker:last-child {
+        margin-bottom: 10px;
+    }
+}
+// Video preview dialog of the bottom center video settings button
+$video-previw-border-radius: 5px;
+.video-preview-container {
+    @include popup;
+    padding: 10px;
+    .video-preview {
+        border-radius: $video-previw-border-radius;
+        .video-preview-entry {
+            border-radius: $video-previw-border-radius;
+            &.video-preview-entry--selected {
+                border: 3px solid $accent2;
+            }
+            .video-preview-label {
+                border-radius: $video-previw-border-radius;
+                text-align: start;
+                bottom: 0px;
+                font-weight: bold;
+            }
+            .video-preview-overlay {
+                border-radius: 0px;
+            }
+            .video-preview-video {
+                border-radius: $video-previw-border-radius;
+            }
+        }
+    }
+}
+
+// Right side bottom popup
+.new-toolbox {
+    .toolbox-background {
+        background-image: linear-gradient(to top, rgb(0 0 0 / 81%), rgb(0 0 0 / 0%));
+        z-index: 615;
+    }
+    .toolbox-content {
+        z-index: 616;
+        .overflow-menu {
+            @include popup;
+            padding: 7px;
+            .overflow-menu-item {
+                @include popup-item;
+                padding: 7px 12px;
+                &:hover {
+                    background: $gray-lighten5 !important;
+                }
+            }
+        }
+    }
+}

css/threeveta/_connection-indicator.scss

@@ -0,0 +1,108 @@
+// Connection indicator
+.tvt-connection-indicator,
+.tvt-indicator {
+    position: relative;
+    text-align: center;
+    line-height: $thumbnailIndicatorSize;
+    padding: 0;
+    @include circle($thumbnailIndicatorSize);
+    box-sizing: border-box;
+    z-index: $zindex3;
+    color: $thumbnailPictogramColor;
+    width: 2em;
+    height: 2em;
+
+    .indicatoricon {
+        @include absoluteAligning();
+    }
+
+    .connection {
+        position: relative;
+        display: inline-block;
+        margin: 0 auto;
+        left: 0;
+        @include transform(translate(0, -50%));
+
+        &_empty,
+        &_lost {
+            color: #8b8b8b;
+            overflow: hidden;
+        }
+
+        &_full {
+            @include topLeft();
+            color: #ffffff;
+            overflow: hidden;
+        }
+
+        &_ninja {
+            font-size: 1.5em;
+        }
+    }
+
+    .icon-gsm-bars {
+        cursor: pointer;
+        font-size: 1em;
+    }
+}
+
+.videocontainer__toptoolbar {
+    .tvt-connection-indicator,
+    .tvt-indicator {
+        margin-left: 12px !important;
+        margin-top: 9px !important;
+    }
+}
+
+.tvt-connection-indicator {
+    &.status-high {
+        background: #63cc81;
+    }
+
+    &.status-med {
+        background: #e9da59;
+    }
+
+    &.status-other,
+    &.status-lost,
+    &.status-low {
+        $low-status-red: #ff4848;
+        background: $low-status-red;
+        &::after {
+            position: absolute;
+            left: 0px;
+            top: 0px;
+            content: " ";
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            @keyframes status-low-pulsate {
+                0% {
+                    opacity: 0;
+                    transition: opacity 0.5s ease-out;
+                }
+                25% {
+                    opacity: 1;
+                    transition: opacity 1s linear;
+                }
+
+                100% {
+                    opacity: 0;
+                }
+            }
+            box-shadow: 0 0 11px 3px #ff4848d4;
+            opacity: 0;
+            animation: status-low-pulsate 2s infinite;
+        }
+    }
+}
+
+.tile-view {
+    .videocontainer {
+        .videocontainer__toptoolbar {
+            .tvt-connection-indicator {
+                font-size: 12px !important;
+            }
+        }
+    }
+}

css/threeveta/_index.scss

@@ -0,0 +1,10 @@
+@import 'variables';
+@import 'pre-meeting';
+@import 'main-video-area';
+@import 'top-bar';
+@import 'connection-indicator';
+@import 'bottom-controls';
+@import 'settings-dialog';
+@import 'participants';
+@import 'notifications';
+@import 'watermark';