aboutsummaryrefslogtreecommitdiff
path: root/client-web/style/room.sass
blob: f86c6b790afacb1f5651c68b89d394d82c275d47 (plain)
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
/*
 This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
 which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
 Copyright (C) 2023 metamuffin <metamuffin.org>

.room
    overflow-y: auto
    width: 100%
    display: flex
    flex-wrap: wrap
    justify-content: space-around
    align-content: stretch
    padding: 0.5em

.user
    background-color: var(--bg)
    border: 0px solid transparent
    border-radius: 5px
    padding: 1em
    margin: 0.5em
    vertical-align: top
    min-width: 15em
    position: relative
    flex: 1 1
    display: flex
    flex-direction: column

.user .info .name
    font-weight: 400

.user.local .info .name
    text-decoration: underline

.user .info
    margin-bottom: 1em

.user .resource
    display: inline-block

.resource
    position: relative
    margin: 0.5em

.local-controls
    display: inline

.local-controls::before
    content: "|"

.transfer-status
    background-color: #00000040

.progress-bar
    z-index: -1
    padding: 0px
    margin: 0px
    height: 6px
    border-radius: 3px
    background-color: var(--ac-light)

.resource-track
    border-radius: 4px
    border: 2px solid transparent
    box-sizing: border-box
    transition: border 0.15s

.resource-track.audio-active
    border: 2px solid var(--ac-light)

.resource-track.audio-mute
    border: 2px solid rgb(255, 86, 86)

.connection-status
    font-size: small
.status-neutral
    color: var(--textgrey)
.status-good
    color: var(--green)
.status-fail
    color: var(--red)

.media-video
    border-radius: 5px
    button.center
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%,-50%)
    button.topright
        position: absolute
        top: 0px
        right: 0px
    transition: filter 0.5s
    flex: 1 1 auto
    background-color: black

.media-audio
    border-radius: 5px
    height: 5em
    width: 20em

.media-freeze
    filter: saturate(0%)


video, .preview
    position: absolute
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)

video
    max-width: 100%
    max-height: 100%
.preview
    width: 100%
    height: 100%
    object-fit: contain
    filter: blur(5px)