mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/

mkdir apps/web/scripts mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts And a couple of gitignore tweaks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-11-03 16:10:05 +00:00 · 2026-02-24 13:12:17 +00:00
parent e7509c92a1
commit 91a3cb03c1
3408 changed files with 28 additions and 32 deletions
@@ -0,0 +1,125 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ExtensionsCard {
+    --cpd-separator-spacing: var(--cpd-space-6x);
+    --AddExtension-overlap: -76px;
+    .mx_AutoHideScrollbar {
+        padding: 0 var(--cpd-space-4x);
+        margin-top: var(--cpd-space-6x);
+        box-sizing: border-box;
+
+        /* Styling for the "Add extensions" button */
+        & > button {
+            width: 100%;
+        }
+    }
+
+    .mx_ExtensionsCard_container {
+        text-align: center;
+        margin: $spacing-20 var(--cpd-space-4x) 0;
+    }
+
+    .mx_ExtensionsCard_Button {
+        /* this button is special so we have to override some of the original styling */
+        /* as we will be applying it in its children */
+        padding: 0;
+        height: auto;
+        color: $tertiary-content;
+        position: relative;
+
+        .mx_WidgetAvatar {
+            flex-shrink: 0;
+        }
+
+        .mx_ExtensionsCard_icon_app {
+            padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+
+            p {
+                margin: 0 var(--cpd-space-3x);
+                color: $primary-content;
+            }
+        }
+
+        .mx_ExtensionsCard_app_pinToggle,
+        .mx_ExtensionsCard_app_options {
+            position: absolute;
+            top: 0;
+            height: 100%; /* to give bigger interactive zone */
+            width: 24px;
+            padding: var(--cpd-space-3x) var(--cpd-space-1x);
+            box-sizing: border-box;
+            flex-shrink: 0;
+
+            svg {
+                width: 16px;
+                height: 16px;
+                color: $icon-button-color;
+            }
+
+            &:hover {
+                &::after {
+                    content: "";
+                    position: absolute;
+                    height: 24px;
+                    width: 24px;
+                    top: var(--cpd-space-2x); /* equal to padding-top of parent */
+                    left: 0;
+                    border-radius: 12px;
+                    background-color: rgb(141, 151, 165, 0.1);
+                }
+            }
+        }
+
+        .mx_ExtensionsCard_app_pinToggle {
+            right: 8px;
+        }
+
+        .mx_ExtensionsCard_app_options {
+            right: 32px; /* 24 + 8 */
+        }
+
+        &.mx_ExtensionsCard_Button_pinned {
+            &::after {
+                opacity: 0.2;
+            }
+
+            .mx_ExtensionsCard_app_pinToggle svg {
+                color: $accent;
+            }
+        }
+
+        &::before {
+            content: unset;
+        }
+
+        &::after {
+            top: var(--cpd-space-2x); /* re-align based on the height change */
+            pointer-events: none; /* pass through to the real button */
+        }
+    }
+
+    /* Set layout for everyone button */
+    a[data-kind="primary"] {
+        margin-top: var(--cpd-space-10x);
+    }
+
+    .mx_EmptyState::before {
+        /* Overlap the Add extensions button */
+        top: var(--AddExtension-overlap);
+    }
+
+    .mx_EmptyState {
+        /* Stop empty state scrolling */
+        height: calc(100% + var(--AddExtension-overlap));
+    }
+}