Routing for operators, Styling for main page

This commit is contained in:
Felix Kaspar
2024-08-12 19:10:11 +02:00
parent f7f6d40eee
commit 51e35ee0ee
12 changed files with 201 additions and 363 deletions

View File

@@ -1,34 +1,34 @@
:root {
--md-sys-color-primary: rgb(162 201 255);
--md-sys-color-surface-tint: rgb(162 201 255);
--md-sys-color-on-primary: rgb(0 49 92);
--md-sys-color-primary-container: rgb(0 118 208);
--md-sys-color-on-primary-container: rgb(255 255 255);
--md-sys-color-secondary: rgb(169 201 246);
--md-sys-color-on-secondary: rgb(12 49 87);
--md-sys-color-secondary-container: rgb(29 62 100);
--md-sys-color-on-secondary-container: rgb(180 210 255);
--md-sys-color-tertiary: rgb(193 194 248);
--md-sys-color-on-tertiary: rgb(42 44 88);
--md-sys-color-tertiary-container: rgb(110 112 161);
--md-sys-color-on-tertiary-container: rgb(255 255 255);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(15 20 26);
--md-sys-color-on-background: rgb(223 226 235);
--md-sys-color-surface: rgb(15 20 26);
--md-sys-color-on-surface: rgb(223 226 235);
--md-sys-color-surface-variant: rgb(64 71 83);
--md-sys-color-on-surface-variant: rgb(192 199 213);
--md-sys-color-outline: rgb(138 145 158);
--md-sys-color-outline-variant: rgb(64 71 83);
--md-sys-color-primary: rgb(0 96 170);
--md-sys-color-surface-tint: rgb(0 96 170);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(80 163 255);
--md-sys-color-on-primary-container: rgb(0 20 43);
--md-sys-color-secondary: rgb(65 96 136);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(188 215 255);
--md-sys-color-on-secondary-container: rgb(32 65 103);
--md-sys-color-tertiary: rgb(88 90 138);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(151 153 205);
--md-sys-color-on-tertiary-container: rgb(7 9 55);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(65 0 2);
--md-sys-color-background: rgb(248 249 255);
--md-sys-color-on-background: rgb(24 28 34);
--md-sys-color-surface: rgb(248 249 255);
--md-sys-color-on-surface: rgb(24 28 34);
--md-sys-color-surface-variant: rgb(220 227 241);
--md-sys-color-on-surface-variant: rgb(64 71 83);
--md-sys-color-outline: rgb(112 119 132);
--md-sys-color-outline-variant: rgb(192 199 213);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(223 226 235);
--md-sys-color-inverse-on-surface: rgb(45 49 55);
--md-sys-color-inverse-primary: rgb(0 96 170);
--md-sys-color-inverse-surface: rgb(45 49 55);
--md-sys-color-inverse-on-surface: rgb(238 241 250);
--md-sys-color-inverse-primary: rgb(162 201 255);
--md-sys-color-primary-fixed: rgb(211 228 255);
--md-sys-color-on-primary-fixed: rgb(0 28 56);
--md-sys-color-primary-fixed-dim: rgb(162 201 255);
@@ -41,33 +41,58 @@
--md-sys-color-on-tertiary-fixed: rgb(20 22 66);
--md-sys-color-tertiary-fixed-dim: rgb(193 194 248);
--md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112);
--md-sys-color-surface-dim: rgb(15 20 26);
--md-sys-color-surface-bright: rgb(53 57 64);
--md-sys-color-surface-container-lowest: rgb(10 14 20);
--md-sys-color-surface-container-low: rgb(24 28 34);
--md-sys-color-surface-container: rgb(28 32 38);
--md-sys-color-surface-container-high: rgb(38 42 49);
--md-sys-color-surface-container-highest: rgb(49 53 60);
--md-sys-color-surface-dim: rgb(215 218 227);
--md-sys-color-surface-bright: rgb(248 249 255);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(241 243 253);
--md-sys-color-surface-container: rgb(235 238 247);
--md-sys-color-surface-container-high: rgb(229 232 241);
--md-sys-color-surface-container-highest: rgb(223 226 235);
--md-nav-section-color-opacity: 1;
--md-nav-on-section-color-opacity: 1;
--md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-sign: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-sign: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-organize: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-convert: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-security: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-other: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-other: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-advance: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-advance: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-image: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-image: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-word: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-word: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity));
--md-nav-on-section-color-ppt: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
--md-nav-on-section-color-ppt: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
:where(html, .light-theme, .dark-theme), .tokens, :host {
@@ -100,8 +125,10 @@ body, select, textarea {
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
}
body {
margin: 0;
margin: 10px auto;
padding: 0 20px;
font-family: var(--bs-font-sans-serif);
font-size: 1rem;
font-weight: 400;
@@ -110,4 +137,11 @@ body {
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
max-width: 90%;
}
a {
text-decoration: inherit;
color: inherit;
}