aboutsummaryrefslogtreecommitdiffstats
path: root/styles/main
diff options
context:
space:
mode:
Diffstat (limited to 'styles/main')
-rw-r--r--styles/main/_fixed.scss7
-rw-r--r--styles/main/_header.scss39
-rw-r--r--styles/main/_headerOverlay.scss8
-rw-r--r--styles/main/_icon.scss22
-rw-r--r--styles/main/_layout.scss7
-rw-r--r--styles/main/_splash.scss34
-rw-r--r--styles/main/_submenu.scss28
-rw-r--r--styles/main/_user.scss14
-rw-r--r--styles/main/_userForm.scss104
-rw-r--r--styles/main/_verify.scss23
10 files changed, 286 insertions, 0 deletions
diff --git a/styles/main/_fixed.scss b/styles/main/_fixed.scss
new file mode 100644
index 0000000..16cfbd8
--- /dev/null
+++ b/styles/main/_fixed.scss
@@ -0,0 +1,7 @@
+.fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
diff --git a/styles/main/_header.scss b/styles/main/_header.scss
new file mode 100644
index 0000000..9fab16b
--- /dev/null
+++ b/styles/main/_header.scss
@@ -0,0 +1,39 @@
+.header {
+ height: 2em;
+ background-color: var(--color-glass);
+ border-bottom: 1px solid var(--color-window-border-bottom);
+
+ nav {
+ display: flex;
+
+ & > ul:first-of-type {
+ flex-grow: 1;
+ overflow: auto;
+ }
+
+ & > ul {
+ display: block;
+
+ & > li {
+ display: inline-block;
+
+ & > span,
+ & > a {
+ display: inline-block;
+ color: var(--color-text);
+ text-decoration: none;
+ align-items: center;
+ padding: .25em .5em;
+ margin: .25em;
+ border-radius: .5em;
+ transition: .3s background, .3s color;
+
+ &:hover {
+ background-color: var(--color-selected);
+ color: var(--color-text-alt);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/styles/main/_headerOverlay.scss b/styles/main/_headerOverlay.scss
new file mode 100644
index 0000000..b11897a
--- /dev/null
+++ b/styles/main/_headerOverlay.scss
@@ -0,0 +1,8 @@
+.headerOverlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ cursor: auto;
+}
diff --git a/styles/main/_icon.scss b/styles/main/_icon.scss
new file mode 100644
index 0000000..a7c16ed
--- /dev/null
+++ b/styles/main/_icon.scss
@@ -0,0 +1,22 @@
+.icon {
+ text-decoration: none;
+ display: inline-block;
+ padding: .5em;
+ text-align: center;
+ outline: none;
+
+ img {
+ width: 3em;
+ }
+
+ p {
+ margin-top: .25em;
+ padding: .25em;
+ transition: .2s background;
+ border-radius: .5em;
+ }
+
+ &:focus p {
+ background-color: var(--color-selected);
+ }
+}
diff --git a/styles/main/_layout.scss b/styles/main/_layout.scss
new file mode 100644
index 0000000..48374a5
--- /dev/null
+++ b/styles/main/_layout.scss
@@ -0,0 +1,7 @@
+.layout {
+ color: var(--color-text);
+ height: 100vh;
+ background: var(--color-bg);
+ background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%);
+ position: relative;
+}
diff --git a/styles/main/_splash.scss b/styles/main/_splash.scss
new file mode 100644
index 0000000..3db973f
--- /dev/null
+++ b/styles/main/_splash.scss
@@ -0,0 +1,34 @@
+.loader,
+.connection {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ flex-direction: column;
+
+ @keyframes rotating {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ svg {
+ font-size: 600%;
+ color: #ccc;
+ }
+
+ p {
+ padding-top: 1em;
+ color: #ccc;
+ font-weight: 600;
+ }
+}
+
+.loader {
+ svg {
+ animation: rotating 1s linear infinite;
+ }
+}
diff --git a/styles/main/_submenu.scss b/styles/main/_submenu.scss
new file mode 100644
index 0000000..92bac7c
--- /dev/null
+++ b/styles/main/_submenu.scss
@@ -0,0 +1,28 @@
+.submenu {
+ position: absolute;
+ right: 4px;
+ top: 2.1em;
+ padding: .75em;
+ background-color: var(--color-window-content);
+ border-bottom: 1px solid var(--color-window-border-bottom);
+ border-radius: .5em;
+ display: flex;
+ flex-direction: column;
+
+ & > li > span,
+ & > li > a {
+ display: block;
+ color: var(--color-text);
+ padding: .5em;
+ margin: .25em;
+ white-space: nowrap;
+ text-decoration: none;
+ transition: .3s background, .3s color;
+ border-radius: .5em;
+
+ &:hover {
+ color: var(--color-text-alt);
+ background-color: var(--color-selected);
+ }
+ }
+}
diff --git a/styles/main/_user.scss b/styles/main/_user.scss
new file mode 100644
index 0000000..07e5c28
--- /dev/null
+++ b/styles/main/_user.scss
@@ -0,0 +1,14 @@
+.user {
+ font-weight: 600;
+ // cursor: pointer;
+ position: relative;
+ padding: .25em .5em;
+ margin: .25em;
+ border-radius: .5em;
+ transition: .3s background, .3s color;
+
+ &:hover {
+ color: var(--color-text-alt);
+ background-color: var(--color-selected);
+ }
+}
diff --git a/styles/main/_userForm.scss b/styles/main/_userForm.scss
new file mode 100644
index 0000000..5cf0653
--- /dev/null
+++ b/styles/main/_userForm.scss
@@ -0,0 +1,104 @@
+.userForm {
+ padding: 2em;
+
+ label,
+ & {
+ display: flex;
+ flex-flow: column;
+ }
+
+ label > span {
+ font-weight: 600;
+ }
+
+ input[type=email],
+ input[type=password] {
+ color: var(--color-text-alt);
+ background: var(--color-window-content);
+ padding: .5em;
+ margin: .5em 0;
+ border: 1px dashed var(--color-decor);
+ border-radius: .5px;
+ }
+
+
+ input[type=password]:nth-of-type(2) {
+ margin-top: 1em;
+ }
+
+ p {
+ text-align: center;
+ color: var(--color-error);
+ margin: 1rem 0 0;
+ }
+
+ legend {
+ font-size: .8em;
+ padding: 2em 0 1.5em;
+ }
+
+ & > fieldset:nth-of-type(1) {
+ fieldset {
+ display: inline-block;
+ }
+
+ input {
+ display: none;
+ }
+
+ label {
+ padding: 0 .75em;
+ transition: .3s color;
+ display: inline-block;
+ color: var(--color-decor);
+ margin-bottom: .5em;
+
+ &:hover {
+ color: #666;
+ }
+ }
+
+ input:checked + label {
+ font-weight: 600;
+ color: var(--color-text);
+ }
+ }
+
+ & > fieldset:nth-of-type(2) {
+ fieldset {
+ display: inline-block;
+ }
+
+ input {
+ display: none;
+ }
+
+ label {
+ width: 2em;
+ height: 2em;
+ display: inline-block;
+ margin: 0 1em 1em;
+ outline-offset: 4px;
+ }
+
+ fieldset:nth-of-type(1) label {
+ background-color: #53e3a6;
+ }
+
+ fieldset:nth-of-type(2) label {
+ background-color: #2986b3;
+ }
+
+ fieldset:nth-of-type(3) label {
+ background-color: #000;
+ }
+
+ input:checked + label {
+ outline: 3px solid var(--color-window-buttons);
+ }
+ }
+
+ input[type=submit] {
+ margin-top: 1.5em;
+ }
+}
diff --git a/styles/main/_verify.scss b/styles/main/_verify.scss
new file mode 100644
index 0000000..d962916
--- /dev/null
+++ b/styles/main/_verify.scss
@@ -0,0 +1,23 @@
+.verify {
+ & > form {
+ padding: .5em 0;
+
+ & > input {
+ padding: .75em;
+ border-radius: .5em;
+ }
+ }
+
+ p {
+ line-height: 1.33;
+ padding: .5em 0;
+ }
+
+ .email {
+ color: var(--color-link);
+ // cursor: pointer;
+ }
+ .error {
+ color: var(--color-error);
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 19:45:25 +0000