167 lines
3.2 KiB
CSS
167 lines
3.2 KiB
CSS
:root {
|
|
--body-bg-color: #2e2e2e;
|
|
--body-bg-color-accent: hsl(0, 0%, 25%);
|
|
--accent-bg-color: #d4d3d3;
|
|
--accent-color: #949494;
|
|
--grayed-text-color: #949494;
|
|
--button-accent-color: #3d3d3d;
|
|
--selected-bg-color: #2e2e2e;
|
|
--hover-bg-color: #4d4d4d;
|
|
--card-border-radius: 1em;
|
|
--button-border-radius: 0.5em;
|
|
--main-font-weight: 500;
|
|
|
|
--fonts-regular: "Noto Sans", "Liberation Sans", sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
font-weight: var(--main-font-weight);
|
|
font-family: var(--fonts-regular);
|
|
background-color: var(--body-bg-color);
|
|
color: var(--accent-bg-color);
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
background: var(--body-bg-color);
|
|
background-image: radial-gradient(var(--body-bg-color-accent) 1.4px, transparent 0);
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
/* util */
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Card */
|
|
|
|
.Keyboard,
|
|
.Card {
|
|
margin: 6px;
|
|
padding: 8px;
|
|
background: var(--accent-bg-color);
|
|
color: #000000;
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
|
|
.Keyboard,
|
|
.Card-ui-bottom {
|
|
padding: 14px;
|
|
width: 100%;
|
|
max-width: 610px;
|
|
box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40);
|
|
margin: 0;
|
|
border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.Card-centered-text {
|
|
text-align: center;
|
|
}
|
|
|
|
/* button */
|
|
|
|
.button-default {
|
|
display: block;
|
|
padding: 12px;
|
|
margin: 4px;
|
|
border: none;
|
|
background-color: var(--accent-bg-color);
|
|
border-radius: var(--button-border-radius);
|
|
color: var(--button-accent-color);
|
|
min-width: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.button-default:hover:not(.button-selected) {
|
|
color: var(--accent-bg-color);
|
|
background-color: var(--hover-bg-color);
|
|
}
|
|
|
|
.button-selected {
|
|
color: var(--accent-bg-color);
|
|
background-color: var(--selected-bg-color);
|
|
}
|
|
|
|
/* input */
|
|
|
|
.input {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: var(--button-border-radius);
|
|
margin: 4px;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* LoginPrompt */
|
|
|
|
.LoginPrompt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Touchpad */
|
|
|
|
.Touchpad {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.Touchpad-touch-indicator {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background-color: var(--accent-bg-color);
|
|
}
|
|
|
|
/* Keyboard */
|
|
|
|
.keyboard-rows {
|
|
border-radius: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.Keyboard-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.Keyboard-button {
|
|
font-family: var(--fonts-regular);
|
|
font-weight: var(--main-font-weight);
|
|
padding: 8px;
|
|
background-color: var(--accent-bg-color);
|
|
color: #000000;
|
|
flex-grow: 1;
|
|
min-height: 50px;
|
|
width: 20px;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.Keyboard-button:active {
|
|
background-color: var(--accent-color);
|
|
}
|