element-web/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css at 125ce9e8c708b1eae52b57e9145881e6cce8e368 · element-hq/element-web · 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
/*
 * Copyright 2026 Element Creations Ltd.
 *
 * 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.
 */

button.preview {
    background: #fff;
}

.preview {
    display: flex;
    position: relative;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border: none;
    padding: 0;
    > img {
        width: 100%;
        object-fit: cover;
    }
    .playButton[data-kind="primary"] {
        padding: 0;
        width: 50px;
        height: 50px;
        margin: auto;
        background: var(--cpd-color-text-on-solid-primary);
        > svg {
            margin: auto;
            border-radius: 50px;
            color: var(--cpd-color-icon-primary);
        }
    }
}

.container {
    max-width: 478px;
    display: flex;
    border: 1px solid var(--cpd-color-bg-subtle-secondary);
    border-radius: 12px; /* Get radius from cpd */
    flex-direction: column;
    color: var(--cpd-color-gray-900);
    overflow: clip;

    background: var(--cpd-color-bg-subtle-secondary);

    &.inline {
        flex-direction: row;
        gap: var(--cpd-space-4x);
        padding: var(--cpd-space-3x) var(--cpd-space-4x);

        .title {
            margin: 0;
        }

        .siteAvatar {
            margin: auto 0;
        }

        .siteName {
            margin: 0;
        }
    }

    .textContent {
        padding: var(--cpd-space-3x) var(--cpd-space-4x);
        &.inline {
            padding: 0;
        }
        display: flex;
        flex-direction: column;
        gap: var(--cpd-space-1x);
    }

    .caption {
        display: inline-flex;
        flex-direction: column;
        min-width: 0; /* Prevent blowout */
    }
    .caption {
        flex: 1;
        overflow: hidden; /* cause it to wrap rather than clip */
    }

    .title,
    .description {
        display: inline-block;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
    }

    .title {
        display: inline-block;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        color: var(--cpd-color-text-primary);
        text-decoration-line: none;
    }

    .description {
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .siteName {
        margin-top: var(--cpd-space-1x);
        vertical-align: middle;
        display: flex;
        gap: var(--cpd-space-1-5x);
        > * {
            /* Center everything */
            margin: auto 0;
        }
    }
}