snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

css/_toolbars.scss

@@ -0,0 +1,204 @@
+/**
+ * Round badge.
+ */
+.badge-round {
+    background-color: var(--toolbar-badge-background, #165ECC);
+    border-radius: 50%;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    // Do not inherit the font-family from the toolbar button, because it's an
+    // icon style.
+    font-family: $baseFontFamily;
+    font-size: 0.5rem;
+    font-weight: 700;
+    line-height: 0.75rem;
+    min-width: 13px;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+/**
+ * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
+ */
+.new-toolbox {
+    bottom: calc((#{$newToolbarSize} * 2) * -1);
+    left: 0;
+    position: absolute;
+    right: 0;
+    transition: bottom .3s ease-in;
+    width: 100%;
+    pointer-events: none;
+    z-index: $toolbarZ + 2;
+
+    &.shift-up {
+        bottom: calc(((#{$newToolbarSize} + 30px) * 2) * -1);
+
+        .toolbox-content {
+            margin-bottom: 46px;
+        }
+    }
+
+    &.visible {
+        bottom: 0;
+    }
+
+    &.no-buttons {
+        display: none;
+    }
+}
+
+.toolbox-content {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    margin-bottom: 16px;
+    position: relative;
+    z-index: $toolbarZ;
+    pointer-events: none;
+
+    .toolbox-button-wth-dialog {
+        display: inline-block;
+    }
+}
+
+.toolbar-button-with-badge {
+    display: inline-block;
+    position: relative;
+
+    .badge-round {
+        bottom: -5px;
+        font-size: 0.75rem;
+        line-height: 1.25rem;
+        min-width: 20px;
+        pointer-events: none;
+        position: absolute;
+        right: -5px;
+    }
+}
+
+.toolbox-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 100%;
+    pointer-events: all;
+    border-radius: 6px;
+
+    .toolbox-content-items {
+        @include ltr;
+    }
+}
+
+.toolbox-content-wrapper::after {
+    content: '';
+    background: var(--toolbox-background-color, $newToolbarBackgroundColor);
+    padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.overflow-menu-hr {
+    border-top: 1px solid #4C4D50;
+    border-bottom: 0;
+    margin: 8px 0;
+}
+
+div.hangup-button {
+    background-color: #CB2233;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: #E04757;
+        }
+
+        &:active {
+            background-color: #A21B29;
+        }
+    }
+
+    svg {
+        fill: #fff;
+    }
+}
+
+div.hangup-menu-button {
+    background-color: #CB2233;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: #E04757;
+        }
+
+        &:active {
+            background-color: #A21B29;
+        }
+    }
+
+    svg {
+        fill: #fff;
+    }
+}
+
+.profile-button-avatar {
+    align-items: center;
+}
+
+/**
+ * START of fade in animation for main toolbar
+ */
+.fadeIn {
+    opacity: 1;
+
+    @include transition(all .3s ease-in);
+}
+
+.fadeOut {
+    opacity: 0;
+
+    @include transition(all .3s ease-out);
+}
+
+/**
+ * Audio and video buttons do not have toggled state.
+ */
+.audio-preview,
+.video-preview {
+    .toolbox-icon.toggled {
+        background: none;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+}
+
+/**
+ * On small mobile devices make the toolbar full width and pad the invite prompt.
+ */
+.toolbox-content-mobile {
+    @media (max-width: 500px) {
+        margin-bottom: 0;
+
+        .toolbox-content-wrapper {
+            width: 100%;
+        }
+
+        .toolbox-content-items {
+            @include ltr;
+            border-radius: 0;
+            display: flex;
+            justify-content: space-evenly;
+            padding: 8px 0;
+            width: 100%;
+        }
+
+        .invite-more-container {
+            margin: 0 16px 8px;
+        }
+
+        .invite-more-container.elevated {
+            margin-bottom: 52px;
+        }
+    }
+}