aboutsummaryrefslogtreecommitdiff
path: root/client-web/style/room.sass
blob: efb968bdaa31e891d6cefd18fc7b054721782a5d (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
/*
 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%
    height: 100%
    display: flex
    flex-wrap: wrap

.user
    background-color: var(--bg)
    border: 0px solid transparent
    border-radius: 5px
    padding: 1em
    margin: 0.5em
    vertical-align: top
    min-width: fit-content
    height: 16em
    display: inline-block
    position: relative

.user .info .name
    font-weight: 400

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

.user .info
    margin-bottom: 1em

.user .resource
    display: inline-block
    vertical-align: top

.resource
    position: relative
    margin: 0.5em
    max-height: 12em

.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
    background-color: black
    height: 12em
    width: calc(12em * 16 / 9)
    button.center
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%,-50%)
    button.topright
        position: absolute
        top: 0px
        right: 0px

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

video
    height: 12em