141 lines
2.3 KiB
SCSS
141 lines
2.3 KiB
SCSS
@use "variables";
|
|
@use "mixins";
|
|
@use "utilities";
|
|
@use "components/sidebar";
|
|
@use "components/tickets";
|
|
@use "components/diagnostics";
|
|
@use "components/frontpage";
|
|
@use "components/home";
|
|
@use "components/icon";
|
|
|
|
:root {
|
|
--color-bg: #ffffff;
|
|
--color-container: #ffffff;
|
|
--color-text: #111827;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-bg: #121212;
|
|
--color-container: #333333;
|
|
--color-text: #e2e2e2;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--color-bg);
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
|
color: #111827;
|
|
margin: 0;
|
|
}
|
|
|
|
.admin { display: flex; }
|
|
|
|
.layout {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 260px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: var(--spacing-md);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: -260px;
|
|
transition: left .3s ease-in-out;
|
|
z-index: 1000;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.sidebar.open { left: 0; }
|
|
.content { margin-left: 0; padding: var(--spacing-md); box-sizing: border-box; }
|
|
}
|
|
|
|
.rundbg {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
max-width: 60%;
|
|
margin: 0 auto;
|
|
background-color: var(--rundbgbackgroundcolor);
|
|
padding-bottom: 96px;
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-top: 96px;
|
|
border-radius: 20px;
|
|
gap: 8px;
|
|
border-color: #000000;
|
|
border-style: double;
|
|
box-shadow: 20px 20px 10px rgb(43, 43, 43);
|
|
font-size: 26px;
|
|
|
|
label {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input, select, button, a {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
font-size: 1.8rem;
|
|
background-color: #f0f0f0;
|
|
box-shadow: #6d6d6d;
|
|
box-shadow: 6px 6px 8px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: auto;
|
|
}
|
|
|
|
button {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
a {
|
|
color: var (--color);
|
|
text-align: center;
|
|
border-style: dashed;
|
|
}
|
|
|
|
&.login {
|
|
margin-top: 96px;
|
|
max-width: 40%;
|
|
}
|
|
|
|
&.home {
|
|
padding-top: 16px;
|
|
}
|
|
}
|
|
|
|
.setup-form input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|