You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
585 lines
9.6 KiB
585 lines
9.6 KiB
:root { |
|
|
|
--bg0: #282A36; |
|
--bg1: #44475A; |
|
--bg2: #585C74; |
|
--bg3: #666e99; |
|
|
|
--alt0: #6272A4; |
|
--alt1: #7A88B3; |
|
|
|
--fg0: #F8F8F2; |
|
--fg1: #EAEAE0; |
|
--fg2: #DEDED2; |
|
|
|
--cyan: #8BE9fD; |
|
--green: #50FA7B; |
|
--orange: #FFb86C; |
|
--pink: #FF79C6; |
|
--purple: #BD93F9; |
|
--red: #FF5555; |
|
--yellow: #F1FA8C; |
|
|
|
--animation-duration: 300ms; |
|
|
|
--base-font-size: 16px; |
|
} |
|
|
|
/* High DPI */ |
|
|
|
@media screen and (min-width: 3000px) and (min-height: 1200px) { |
|
#screen { |
|
zoom: 2.0; |
|
} |
|
} |
|
|
|
/* Basic */ |
|
|
|
html { |
|
color: var(--fg0); |
|
background-color: black; |
|
font-family: system-ui; |
|
|
|
min-height: 100%; |
|
position: relative; |
|
|
|
font-size: var(--base-font-size); |
|
text-rendering: optimizeSpeed; |
|
/*image-rendering: pixelated;*/ |
|
} |
|
html * { |
|
font-family: system-ui; |
|
font-size: inherit; |
|
transition: var(--animation-duration); |
|
color: var(--fg0); |
|
} |
|
|
|
body { |
|
display: flex; |
|
min-height: 100vh; |
|
margin: 0; |
|
overflow-x: hidden; |
|
background-color: var(--bg0); |
|
} |
|
|
|
.hide { |
|
opacity: 0; |
|
visibility: hidden; |
|
} |
|
|
|
/* Scrollbar */ |
|
|
|
::-webkit-scrollbar { |
|
width: 6px; |
|
} |
|
::-webkit-scrollbar-thumb { |
|
background-color: var(--fg2); |
|
} |
|
::-webkit-scrollbar-thumb:hover { |
|
background-color: var(--fg0); |
|
} |
|
|
|
/* Background */ |
|
|
|
#background { |
|
height: 100vh; |
|
width: 100vw; |
|
position: absolute; |
|
|
|
background-color: var(--bg0); |
|
} |
|
|
|
#background img { |
|
width: inherit; |
|
height: inherit; |
|
object-fit: cover; |
|
object-position: center; |
|
} |
|
|
|
#bg-cover { |
|
backdrop-filter: blur(4px); |
|
position: absolute; |
|
height: inherit; |
|
width: inherit; |
|
} |
|
|
|
#screen { |
|
width: 100%; |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
#cover { |
|
height: 100vh; |
|
width: 100vw; |
|
position: absolute; |
|
z-index: 10; |
|
transition: var(--animation-duration); |
|
|
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
background-color: #282A36aa; |
|
backdrop-filter: blur(5px); |
|
} |
|
#cover > #message { |
|
font-size: 4em; |
|
font-weight: bold; |
|
cursor: default; |
|
} |
|
|
|
/* Login form */ |
|
|
|
#login-wrapper { |
|
position: relative; |
|
background: var(--bg1); |
|
border-radius: 2px; |
|
max-height: 90vh; |
|
width: 30em; |
|
box-sizing: border-box; |
|
transition: var(--animation-duration); |
|
} |
|
/*#login-wrapper:hover, #login-wrapper:focus, #login-wrapper:focus-within {*/ |
|
/*filter: drop-shadow(2px 4px 6px black);*/ |
|
/*}*/ |
|
body.success #login-wrapper { |
|
background-color: #79d28f; |
|
} |
|
body.failed #login-wrapper { |
|
background-color: #dd7878; |
|
} |
|
|
|
#login-wrapper-box { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
padding: 1.8em 3em; |
|
height: 8em; |
|
} |
|
|
|
#login-form { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-around; |
|
flex-direction: column; |
|
height: 10em; |
|
max-width: fit-content; |
|
} |
|
|
|
input { |
|
background-color: var(--bg2); |
|
color: var(--fg0); |
|
border: 0; |
|
border-radius: 2px; |
|
padding: 1em; |
|
margin: 0.5em; |
|
font-size: inherit; |
|
font-family: inherit; |
|
} |
|
input:focus, input:focus-visible { |
|
border: 0; |
|
outline: auto var(--fg0); |
|
} |
|
:focus { |
|
outline: auto var(--fg0) !important; |
|
} |
|
|
|
#pass-form.hide { |
|
visibility: hidden; |
|
max-height: initial; |
|
max-width: initial; |
|
display: flex; |
|
} |
|
|
|
#input-password { |
|
box-shadow: 0 2px var(--cyan); |
|
box-sizing: border-box; |
|
margin: 0; |
|
} |
|
|
|
#input-username { |
|
box-sizing: border-box; |
|
width: 100%; |
|
margin: 0; |
|
box-shadow: 0 2px var(--orange); |
|
} |
|
|
|
::placeholder { |
|
color: var(--fg2); |
|
} |
|
|
|
#pass-wrapper { |
|
display: flex; |
|
width: 100%; |
|
flex-direction: row; |
|
} |
|
|
|
#user-wrapper { |
|
display: flex; |
|
width: 100%; |
|
flex-direction: row; |
|
position: relative; |
|
} |
|
|
|
#submit-button { |
|
background-color: #72bece; |
|
} |
|
#submit-button:hover, #submit-button:focus { |
|
background-color: var(--purple); |
|
} |
|
|
|
#users-button-wrapper { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
#users-button { |
|
background-color: var(--orange); |
|
height: 100%; |
|
} |
|
#users-button:hover, #users-button:focus { |
|
background-color: var(--red); |
|
} |
|
|
|
#users-dropdown { |
|
height: 0; |
|
} |
|
|
|
#users-dropdown .dropdown { |
|
background-color: var(--bg2); |
|
right: 0; |
|
z-index: 2; |
|
} |
|
#users-dropdown .dropdown button:hover, #users-dropdown .dropdown button:focus { |
|
background-color: var(--orange); |
|
} |
|
|
|
/* Time and date */ |
|
|
|
#time-date { |
|
position: absolute; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
background-color: transparent; |
|
transition: var(--animation-duration); |
|
overflow: hidden; |
|
cursor: pointer; |
|
} |
|
|
|
#time-date:hover, #time-date:focus { |
|
filter: drop-shadow(2px 2px 6px black); |
|
/*animation-name: shake;*/ |
|
animation-duration: 1s; |
|
animation-direction: normal; |
|
animation-iteration-count: 1; |
|
animation-timing-function: ease-in-out; |
|
} |
|
#time-date:hover *, #time-date:focus * { |
|
/*color: var(--cyan);*/ |
|
} |
|
#time-date.hide { |
|
display: flex; |
|
max-height: initial; |
|
max-width: initial; |
|
opacity: 0; |
|
} |
|
|
|
#time-label { |
|
font-size: 4em; |
|
margin: 0; |
|
} |
|
|
|
/* Buttons */ |
|
button { |
|
/*color: var(--fg0);*/ |
|
border: 0; |
|
/*font-size: inherit;*/ |
|
/*font-family: inherit;*/ |
|
} |
|
|
|
.button { |
|
background: var(--purple); |
|
border: 0; |
|
padding: 0.5em; |
|
font-size: inherit; |
|
cursor: pointer; |
|
border-radius: 2px; |
|
transition: var(--animation-duration); |
|
} |
|
|
|
.button-group { |
|
background: var(--purple); |
|
border: 0; |
|
padding: 0; |
|
font-size: inherit; |
|
border-radius: 2px; |
|
transition: var(--animation-duration); |
|
} |
|
.button-group > * { |
|
background-color: transparent; |
|
cursor: pointer; |
|
padding: 0.5em 0.8em; |
|
transition: inherit; |
|
} |
|
.button-group > *:hover, .button-group > *:focus { |
|
background-color: var(--orange); |
|
} |
|
|
|
/* Auth message */ |
|
|
|
#auth-message { |
|
position: absolute; |
|
font-size: 4em; |
|
font-weight: bold; |
|
} |
|
#auth-message.hide { |
|
display: block; |
|
max-width: initial; |
|
max-height: initial; |
|
} |
|
|
|
/* Bottom bar */ |
|
#bottom-bar { |
|
background-color: #585c7480; |
|
backdrop-filter: blur(10px); |
|
width: -webkit-fill-available; |
|
min-height: 2em; |
|
|
|
display: flex; |
|
align-items: stretch; |
|
padding: 0.5em; |
|
} |
|
#bottom-bar * { |
|
font-weight: bold; |
|
} |
|
|
|
#bottom-bar .button { |
|
display: flex; |
|
align-items: center; |
|
padding: 0.5em 0.75em; |
|
} |
|
|
|
#sessions-button { |
|
background-color: var(--bg3); |
|
} |
|
#sessions-button > span { |
|
margin-left: 0.3em; |
|
} |
|
|
|
#sessions-button:hover, #sessions-button:focus { |
|
background-color: var(--purple); |
|
} |
|
|
|
#sessions-dropdown { |
|
max-height: 25vh; |
|
} |
|
|
|
#bottom-right { |
|
background-color: var(--bg3); |
|
margin-left: auto; |
|
display: flex; |
|
} |
|
|
|
/* Top bar */ |
|
#top-bar { |
|
background-color: transparent; |
|
width: -webkit-fill-available; |
|
min-height: 2em; |
|
padding: 1em; |
|
padding-bottom: 0; |
|
font-weight: bold; |
|
|
|
transition: var(--animation-duration); |
|
|
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
#bottom-bar.hide, #top-bar.hide { |
|
min-height: 0; |
|
max-height: 0; |
|
max-width: initial; |
|
display: flex; |
|
overflow: hidden; |
|
padding: 0; |
|
margin: 0; |
|
opacity: 0; |
|
} |
|
|
|
/* Panel */ |
|
|
|
#panel-button { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
margin: 1em; |
|
|
|
background-color: var(--bg1); |
|
} |
|
#panel-button:hover, #panel-button:focus { |
|
background-color: var(--green); |
|
} |
|
|
|
.panel { |
|
position: fixed; |
|
width: 350px; |
|
height: -webkit-fill-available; |
|
background: var(--bg2); |
|
right: 0; |
|
|
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
align-content: flex-start; |
|
padding: 1.5em; |
|
|
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
} |
|
|
|
.panel.hide { |
|
transform: translateX(100%); |
|
display: flex; |
|
visibility: hidden; |
|
opacity: 100%; |
|
max-width: 100vw; |
|
max-height: 100vh; |
|
} |
|
|
|
#background-selector { |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
width: -webkit-fill-available; |
|
height: auto; |
|
} |
|
|
|
#background-selector .image { |
|
display: flex; |
|
flex-direction: column; |
|
width: 48%; |
|
max-height: 100px; |
|
background-color: transparent; |
|
margin-top: 1em; |
|
padding: 0; |
|
cursor: pointer; |
|
border-color: var(--fg0); |
|
border-width: 1px; |
|
border-style: solid; |
|
border-radius: 0; |
|
} |
|
|
|
#background-selector .image > img { |
|
background-color: var(--alt1); |
|
width: -webkit-fill-available; |
|
height: 100%; |
|
object-fit: cover; |
|
filter: brightness(0.8); |
|
} |
|
#background-selector .image:hover, #background-selector .image:focus { |
|
filter: drop-shadow(2px 2px 6px black); |
|
} |
|
#background-selector .image:hover > img, #background-selector .image:focus > img { |
|
filter: brightness(1); |
|
} |
|
|
|
.panel h3 { |
|
width: 80%; |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
font-size: 1.2em; |
|
align-self: center; |
|
} |
|
|
|
#close-panel-button { |
|
background-color: var(--alt1); |
|
height: fit-content; |
|
align-self: center; |
|
} |
|
#close-panel-button:hover, #close-panel-button:focus { |
|
background-color: var(--red); |
|
} |
|
|
|
/* Dropdown */ |
|
.dropdown { |
|
position: absolute; |
|
background-color: var(--bg2); |
|
min-width: 8em; |
|
max-height: 60vh; |
|
overflow-y: auto; |
|
margin: 0; |
|
padding: 0; |
|
transition: var(--animation-duration); |
|
} |
|
.dropdown button { |
|
background-color: transparent; |
|
color: var(--fg0); |
|
padding: 0.8em; |
|
width: -webkit-fill-available; |
|
cursor: pointer; |
|
} |
|
.dropdown button:hover, .dropdown button:focus { |
|
background-color: var(--purple); |
|
} |
|
|
|
.dropdown li { |
|
text-decoration: none; |
|
display: block; |
|
} |
|
|
|
.dropdown.hide { |
|
visibility: hidden; |
|
opacity: 100%; |
|
display: block; |
|
max-height: 0 !important; |
|
overflow-y: hidden; |
|
} |
|
|
|
/* system-bar */ |
|
#system-bar { |
|
display: flex; |
|
position: fixed; |
|
bottom: 0; |
|
width: -webkit-fill-available; |
|
height: 1.5em; |
|
padding: 5px; |
|
|
|
justify-content: flex-end; |
|
align-items: center; |
|
|
|
background-color: transparent; |
|
} |
|
#system-bar > * { |
|
font-weight: bold; |
|
margin: 2px; |
|
padding: 5px; |
|
cursor: default; |
|
backdrop-filter: blur(20px); |
|
border-radius: 2px; |
|
} |
|
#system-bar > *:hover { |
|
background-color: #2828280e; |
|
} |
|
|
|
/* Animations */ |
|
|
|
@keyframes shake { |
|
0% { |
|
transform: rotateZ(0deg); |
|
} |
|
25% { |
|
transform: rotateZ(10deg); |
|
} |
|
75% { |
|
transform: rotateZ(-10deg); |
|
} |
|
100% { |
|
transform: rotateZ(0deg); |
|
} |
|
}
|
|
|