aboutsummaryrefslogtreecommitdiffstats
path: root/styles
diff options
context:
space:
mode:
Diffstat (limited to 'styles')
-rw-r--r--styles/Main.module.scss305
-rw-r--r--styles/global.scss6
-rwxr-xr-xstyles/global/_reset.scss (renamed from styles/_reset.scss)0
-rw-r--r--styles/global/_themes.scss (renamed from styles/_themes.scss)0
-rw-r--r--styles/global/_window.scss (renamed from styles/_window.scss)0
-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
15 files changed, 299 insertions, 298 deletions
diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 6663b15..a1f39ea 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,295 +1,10 @@
-.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;
-}
-
-.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);
- }
-}
-
-.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;
- }
-}
-
-.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);
- }
- }
- }
- }
- }
-}
-
-.headerOverlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- cursor: auto;
-}
-
-.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);
- }
-}
-
-.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);
- }
- }
-}
-
-.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);
- }
-}
-
-.fixed {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-.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;
- }
-}
+@import "main/layout";
+@import "main/icon";
+@import "main/userForm";
+@import "main/header";
+@import "main/headerOverlay";
+@import "main/user";
+@import "main/submenu";
+@import "main/verify";
+@import "main/fixed";
+@import "main/splash";
diff --git a/styles/global.scss b/styles/global.scss
index 11d23d3..0a542a9 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,6 +1,6 @@
-@import "reset";
-@import "themes";
-@import "window";
+@import "global/reset";
+@import "global/themes";
+@import "global/window";
main {
position: fixed;
diff --git a/styles/_reset.scss b/styles/global/_reset.scss
index 0dc1326..0dc1326 100755
--- a/styles/_reset.scss
+++ b/styles/global/_reset.scss
diff --git a/styles/_themes.scss b/styles/global/_themes.scss
index 9319fa5..9319fa5 100644
--- a/styles/_themes.scss
+++ b/styles/global/_themes.scss
diff --git a/styles/_window.scss b/styles/global/_window.scss
index 08ddfaf..08ddfaf 100644
--- a/styles/_window.scss
+++ b/styles/global/_window.scss
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:42:07 +0000