diff options
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/global.css | 92 | ||||
| -rw-r--r-- | styles/index.module.css | 7 | ||||
| -rw-r--r-- | styles/navbar.css | 11 | ||||
| -rw-r--r-- | styles/ui.css | 9 | ||||
| -rw-r--r-- | styles/utility.css | 27 |
5 files changed, 128 insertions, 18 deletions
diff --git a/styles/global.css b/styles/global.css index 1e87524..350a2a7 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,17 +1,73 @@ -html { - --text: #FCFFFD; - --page-background: var(--text); - - --background: #5D737E; - --text-alt: var(--background); - --background-alt: #81949E; - - --disk-a: #E16D82; - --disk-a-text: #FDC0C4; - --disk-b: #71D9CC; - --disk-b-text: #C0FDEB; +:root { + --background: #E3E6EE; + --foreground: var(--gray-100); + + --accent: #7E3AA6; + + --error: #A63A4D; + --disk-b-alt: #582D35; + + --confirm: #3AA699; + --disk-a-alt: #244743; + + /* shade */ + --gray-100: #141619; + --gray-200: #1F242D; + --gray-300: #293140; + --gray-700: #757D92; + --gray-800: #A9AFC0; + --gray-900: #CED2DC; + + /* box-shadow */ + --drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3); + --drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15); + + /* border-radius */ + --tight-corner: 6px; + --loose-corner: 8px; + + /* margin/padding */ + --spacing-small: 6px; + --spacing-medium: 12px; + --spacing-large: 24px; } +@media (prefers-color-scheme: dark) { + :root { + --background: var(--gray-900); + --foreground: #FFFFF3; + + --accent: #AD34F3; + + --error: #FF4365; + --disk-b-alt: #F49BA1; + + --confirm: #00D9C0; + --disk-a-alt: #86F3F3; + + --gray-100: #CED2DC; + --gray-200: #A9AFC0; + --gray-300: #757D92; + --gray-700: #293140; + --gray-800: #1F242D; + --gray-900: #141619; + } +} + +/* html { */ +/* --text: #FCFFFD; */ +/* --page-background: var(--text); */ + +/* --background: #5D737E; */ +/* --text-alt: var(--background); */ +/* --background-alt: #81949E; */ + +/* --disk-a: #E16D82; */ +/* --disk-a-text: #FDC0C4; */ +/* --disk-b: #71D9CC; */ +/* --disk-b-text: #C0FDEB; */ +/* } */ + /* default margin */ html, body { margin: 0; @@ -27,17 +83,17 @@ h3 { padding-bottom: 6px; } -/* global font zize */ -p, b, i, span, td, th { font-size: 15px; } - /* navbar fix */ body { padding-left: 48px; } /* font */ -html { font-family: "Inter"; } +html { font-family: "Inter", sans-serif; } -/* background color */ -html, body { background-color: var(--page-background); } +/* color */ +:root, html, body { + background-color: var(--background); + color: var(--foreground); +} /* link fix */ a { diff --git a/styles/index.module.css b/styles/index.module.css new file mode 100644 index 0000000..9b518ea --- /dev/null +++ b/styles/index.module.css @@ -0,0 +1,7 @@ +.loginOrRegisterBox { + --squareSize: 90px; + vertical-align: top; + height: calc(var(--squareSize) + 2 * var(--spacing-large)); + width: 100%; + max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2); +} diff --git a/styles/navbar.css b/styles/navbar.css new file mode 100644 index 0000000..5866b8f --- /dev/null +++ b/styles/navbar.css @@ -0,0 +1,11 @@ +.navbar .item { + margin: var(--spacing-medium); + margin-bottom: calc(var(--spacing-medium) + 4px); + display: block; +} + +.navbar .bottomArea { + position: absolute; + bottom: -4px; + left: 0; +} diff --git a/styles/ui.css b/styles/ui.css new file mode 100644 index 0000000..d665044 --- /dev/null +++ b/styles/ui.css @@ -0,0 +1,9 @@ +.vierkant { + margin: var(--spacing-small); + display: inline-block; + position: relative; + box-sizing: border-box; +} + +.fullwidth { width: calc(100% - var(--spacing-medium)); } + diff --git a/styles/utility.css b/styles/utility.css new file mode 100644 index 0000000..753b88d --- /dev/null +++ b/styles/utility.css @@ -0,0 +1,27 @@ +.drop-1 { box-shadow: var(--drop-level-1); } +.drop-2 { box-shadow: var(--drop-level-2); } + +.pad-s { padding: var(--spacing-small); } +.pad-m { padding: var(--spacing-medium); } +.pad-l { padding: var(--spacing-large); } + +.round-l { border-radius: var(--loose-corner); } +.round-t { border-radius: var(--tight-corner); } + +.bg-100 { background-color: var(--gray-100); } +.bg-200 { background-color: var(--gray-200); } +.bg-300 { background-color: var(--gray-300); } +.bg-700 { background-color: var(--gray-700); } +.bg-800 { background-color: var(--gray-800); } +.bg-900 { background-color: var(--gray-900); } + +.subtile { + color: var(--gray-300); + font-style: italic; +} + +/* no-select */ +.nosel { + user-select: none; + font-weight: 600; +} |