matrix-react-sdk/res/css/views/right_panel/_ExtensionsCard.pcss at 4b3b0272c5531d6ee2432350a92f5c1afa2bd6d1 · element-hq/matrix-react-sdk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*
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
Please see LICENSE files in the repository root for full details.
*/

.mx_ExtensionsCard {
    --cpd-separator-inset: var(--cpd-space-4x);
    --cpd-separator-spacing: var(--cpd-space-4x);

    .mx_AutoHideScrollbar {
        padding: 0 var(--cpd-space-4x);
        margin-top: var(--cpd-space-3x);
        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;
            min-width: 24px; /* prevent flexbox crushing */

            &: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: rgba(141, 151, 165, 0.1);
                }
            }

            &::before {
                content: "";
                position: absolute;
                height: 16px;
                width: 16px;
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: 16px;
                background-color: $icon-button-color;
            }
        }

        .mx_ExtensionsCard_app_pinToggle {
            right: 8px;

            &::before {
                mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
            }
        }

        .mx_ExtensionsCard_app_options {
            right: 32px; /* 24 + 8 */
            &::before {
                mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
            }
        }

        &.mx_ExtensionsCard_Button_pinned {
            &::after {
                opacity: 0.2;
            }

            .mx_ExtensionsCard_app_pinToggle::before {
                background-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: -76px;
    }
}