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-02-24 15:43:58 +00:00
parent e7509c92a1
commit 91a3cb03c1
3408 changed files with 28 additions and 32 deletions
@@ -0,0 +1,137 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2019 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_MessageActionBar {
+    --MessageActionBar-size-button: 28px;
+    --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
+    --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
+    --MessageActionBar-item-hover-borderRadius: 6px;
+    --MessageActionBar-item-hover-zIndex: 1;
+
+    position: absolute;
+    visibility: hidden;
+    cursor: pointer;
+    display: flex;
+    height: var(--MessageActionBar-size-box);
+    line-height: $font-24px;
+    border-radius: 8px;
+    background: $background;
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
+    top: -32px;
+    right: 8px;
+    user-select: none;
+    /* Ensure the action bar appears above other things like the read marker */
+    /* and sender avatar (for small screens) */
+    z-index: 10;
+
+    /* Adds a previous event safe area so that you can't accidentally hover the */
+    /* previous event while trying to mouse into the action bar or from the */
+    /* react button to its tooltip. */
+    &::before {
+        content: "";
+        position: absolute;
+        /* tooltip safe mousing area + tooltip overhang + */
+        /* action bar + action bar offset from event */
+        width: calc(10px + 48px + 100% + 8px);
+        /* safe area + action bar */
+        height: calc(20px + 100%);
+        top: -12px;
+        left: -58px;
+        z-index: -1;
+        cursor: initial;
+
+        /* stylelint-disable-next-line max-line-length */
+        .mx_GenericEventListSummary[data-layout="bubble"]
+            .mx_GenericEventListSummary_toggle
+            ~ .mx_GenericEventListSummary_unstyledList
+            .mx_EventTile_info:first-of-type
+            & {
+            /* improve clickability of "collapse" link button on bubble layout by reducing width and height values */
+            /* mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available */
+            /* mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button */
+            /* TODO: use a new class name instead */
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+
+        .mx_EventTile_info .mx_ViewSourceEvent ~ & {
+            /* improve clickability of view source event toggle button by removing vertical safe area */
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    > * {
+        white-space: nowrap;
+        display: inline-block;
+        position: relative;
+        margin: 2px;
+
+        &:hover {
+            background: var(--MessageActionBar-item-hover-background);
+            border-radius: var(--MessageActionBar-item-hover-borderRadius);
+            z-index: var(--MessageActionBar-item-hover-zIndex);
+        }
+    }
+
+    .mx_MessageActionBar_iconButton {
+        --MessageActionBar-icon-size: 18px;
+        width: var(--MessageActionBar-size-button);
+        height: var(--MessageActionBar-size-button);
+        color: var(--cpd-color-icon-secondary);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            height: var(--MessageActionBar-icon-size);
+            width: var(--MessageActionBar-icon-size);
+            flex: 0 0 var(--MessageActionBar-icon-size);
+        }
+
+        &:disabled,
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: 0.75;
+        }
+
+        &:hover {
+            color: var(--cpd-color-icon-primary);
+        }
+
+        &.mx_MessageActionBar_threadButton {
+            --MessageActionBar-icon-size: 20px;
+        }
+
+        &.mx_MessageActionBar_retryButton {
+            --MessageActionBar-icon-size: 16px;
+        }
+
+        &.mx_MessageActionBar_downloadButton {
+            --MessageActionBar-icon-size: 20px;
+
+            &.mx_MessageActionBar_downloadSpinnerButton {
+                svg {
+                    display: none; /* hide the download icon */
+                }
+            }
+        }
+
+        &.mx_MessageActionBar_expandCollapseMessageButton {
+            --MessageActionBar-icon-size: 12px;
+        }
+    }
+
+    .mx_MessageActionBar_optionsButton {
+        --MessageActionBar-icon-size: 22px;
+    }
+}