aboutsummaryrefslogtreecommitdiff
path: root/client-web/style/master.sass
blob: 6e8793fdfd7dee0658df0f26c423473436af379e (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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/*
 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@disroot.org>

@use 'chat'
@use 'logger'
@use 'room'
@use 'prefs'
@use 'menu'

@import url("/assets/font/include.css")
@import url("/overrides.css")

*
    font-family: "Ubuntu", sans-serif
    color: white
    margin: 0px
    padding: 0px

body.start
    background-image: linear-gradient(var(--ac-dark-transparent), black 150%),
        url("./tile-backdrop.svg");
    background-attachment: fixed
    background-size: cover, 750px
    background-color: var(--ac-dark)
    position: absolute
    inset: 0
    display: flex
    place-content: center
    align-items: center
    overflow: hidden

body
    font-weight: 300
    background-color: var(--bg-dark)

h1
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75)
    font-size: 5em
    font-weight: 700
    text-align: center
    margin-bottom: 0.1em

input[type="button"],
button,
.side-ui-control
    padding: 0.5em
    margin: 0.25em
    background-color: var(--ac)
    border: 0px solid transparent
    border-radius: 3px
    font-size: small
    font-weight: 400

input[type="button"]:hover,
button:hover,
.side-ui-control:hover
    filter: brightness(130%)

input[type="button"].active,
button.active,
.side-ui-control:active
    filter: hue-rotate(20deg)

input[type="text"],
select,
input[type="number"]
    background-color: var(--bg-dark)
    border: 1px solid var(--ac-light)

input:disabled,
button:disabled,
.side-ui-control:disabled
    filter: sepia(90%)

.side-ui-control input
    display: none

.start-box
    text-align: center
    position: absolute
    max-width: 64em

.instructions
    margin-bottom: 0.5em
    font-size: x-large
    color: #c5c5c5
    text-align: left

.start-box input[type="text"]
    margin: 2em 0 1em 0
    width: 25em
    font-weight: 500
    color: whitesmoke
    border: 0.15em solid var(--ac)
    background-color: rgba(0, 0, 0, 0.3)
    backdrop-filter: blur(5px)
    border-radius: 0.5em
    outline: none

.start-box input[type="text"]:focus
    transition: 0.1s ease-out
    background-color: rgba(0, 0, 0, 0.5)
    border-color: lightgray !important

.start-box input[type="button"]
    margin: 1em 0 1em 0
    border-radius: 0.5em
    font-size: x-large
    width: 12em
    padding: 0.5em
    font-weight: 500
    color: white
    background-color: var(--ac)
    backdrop-filter: blur(5px)
    border: 0
    cursor: pointer
    border: 0.15em solid var(--ac)

.start-box .description
    margin-bottom: 1.5em
    font-size: x-large
    font-weight: bold
    text-align: center

.main
    height: calc(100vh - 64px)
    display: flex

#room-id-input
    padding: 0.5em
    font-size: x-large

@media (max-width: 1100px)
    .start-box
        max-width: 90%

    .start-box input[type="text"]
        width: 90%

@media (max-width: 900px) and (max-height: 700px), (max-height: 550px)
    h1
        font-size: 3em
        font-weight: 700
        text-align: center

    .instructions
        font-size: large

    .start-box .description
        font-size: large

    #room-id-input
        padding: 0.5em
        font-size: large

    .start-box input[type="button"]
        font-size: large