aboutsummaryrefslogtreecommitdiffstats
path: root/styles
diff options
context:
space:
mode:
Diffstat (limited to 'styles')
-rw-r--r--styles/Main.module.scss42
-rw-r--r--styles/_themes.scss57
-rw-r--r--styles/_window.scss45
-rw-r--r--styles/global.scss9
4 files changed, 104 insertions, 49 deletions
diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 082bc80..7c3f9bc 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,3 +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%);
+}
+
.icon {
text-decoration: none;
display: inline-block;
@@ -12,14 +19,12 @@
margin-top: .25em;
padding: .25em;
text-align: center;
- color: #333;
transition: .2s background;
border-radius: .5em;
}
&:focus p {
- background-color: rgba(255,255,255,.3);
- // background-color: #0cc;
+ background-color: var(--color-glass);
}
}
@@ -38,20 +43,20 @@
input[type=password] {
padding: .5em;
margin: .5em 0;
- border: 1px solid #ccc;
- border-radius: .25px;
+ border: 1px dashed var(--color-decor);
+ border-radius: .5px;
}
.error {
text-align: center;
- color: brown;
+ color: var(--color-error);
margin: 1rem 0 0;
}
}
.header {
height: 2em;
- background-color: rgba(255, 255, 255, 0.4);
- border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+ background-color: var(--color-glass);
+ border-bottom: 1px solid var(--color-window-border-bottom);
nav {
display: flex;
@@ -70,16 +75,17 @@
& > span,
& > a {
display: inline-block;
- color: #333;
+ color: var(--color-text);
text-decoration: none;
align-items: center;
padding: .25em .5em;
margin: .25em;
border-radius: .5em;
- transition: .3s background;
+ transition: .3s background, .3s color;
&:hover {
- background-color: rgba(0,0,0,.1);
+ background-color: var(--color-selected);
+ color: var(--color-text-alt);
}
}
}
@@ -103,10 +109,11 @@
padding: .25em .5em;
margin: .25em;
border-radius: .5em;
- transition: .3s background;
+ transition: .3s background, .3s color;
&:hover {
- background-color: rgba(0,0,0,.1);
+ color: var(--color-text-alt);
+ background-color: var(--color-selected);
}
}
@@ -117,8 +124,8 @@
top: 2.1em;
width: 8em;
padding: .5em;
- background-color: rgba(255, 255, 255, 0.5);
- border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ background-color: var(--color-window-content);
+ border-bottom: 1px solid var(--color-window-border-bottom);
border-radius: .5em;
& > li > span {
@@ -132,7 +139,6 @@
& > input {
padding: .75em;
- border: 1px dashed #333;
border-radius: .5em;
}
}
@@ -143,10 +149,10 @@
}
.email {
- color: blue;
+ color: var(--color-link);
// cursor: pointer;
}
.error {
- color: brown;
+ color: var(--color-error);
}
}
diff --git a/styles/_themes.scss b/styles/_themes.scss
new file mode 100644
index 0000000..fbf63cc
--- /dev/null
+++ b/styles/_themes.scss
@@ -0,0 +1,57 @@
+.light {
+ --color-bg: #50a3a2;
+ --color-bg-alt: #53e3a6;
+ --color-text: #333;
+ --color-text-alt: #111;
+ --color-decor: #ccc;
+ --color-glass: rgb(151, 215, 200, .9);
+ --color-glass-alt: rgba(255, 255, 255, 0.5);
+ --color-error: #a00;
+ --color-success: #0a0;
+ --color-link: #006dd0;
+ --color-selected: rgba(0,0,0,.1);
+ --color-window-border-top: rgba(255,255,255,.7);
+ --color-window-border-bottom: #ccc;
+ --color-window-content: #fff;
+ --color-window-buttons: #666;
+ --color-window-buttons-alt: #222;
+ --color-window-menu: #eee;
+ --color-window-menu-alt: #ddd;
+ --color-button: #9cdbb5;
+ --color-button-alt: #a4eac0;
+ --color-button-border: #8ecca6;
+ --color-popup-bg: #fff;
+ --color-popup-error-bg: #ffe1e1;
+ --color-popup-error-button: #ffbebe;
+ --color-popup-error-button-alt: #ffa1a1;
+ --color-popup-error-border: #ffb6b6;
+}
+
+.dark {
+ --color-bg: #000;
+ --color-bg-alt: #222;
+ --color-text: #eee;
+ --color-text-alt: #fff;
+ --color-decor: #ccc;
+ --color-glass: rgb(20, 20, 20, .9);
+ --color-glass-alt: rgba(255, 255, 255, 0.3);
+ --color-error: #a00;
+ --color-success: #0a0;
+ --color-link: #006dd0;
+ --color-selected: rgba(0,0,0, .5);
+ --color-window-border-top: rgba(255,255,255,.3);
+ --color-window-border-bottom: #444;
+ --color-window-content: #222;
+ --color-window-buttons: #ccc;
+ --color-window-buttons-alt: #fff;
+ --color-window-menu: #282828;
+ --color-window-menu-alt: #111;
+ --color-button: #555;
+ --color-button-alt: #444;
+ --color-button-border: #666;
+ --color-popup-bg: #666;
+ --color-popup-error-bg: #6f0b0b;
+ --color-popup-error-button: #934e4e;
+ --color-popup-error-button-alt: #a21010;
+ --color-popup-error-border: #ffd6d6;
+}
diff --git a/styles/_window.scss b/styles/_window.scss
index a365c2e..5ce6e71 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -5,6 +5,7 @@
transition-property: opacity, visibility, transform, width, height, top, left;
transition-duration: .3s;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+ color: var(--color-text);
&.moving {
transition: none
@@ -12,7 +13,7 @@
&--popup {
padding: 1em;
- background: white;
+ background: var(--color-popup-bg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -43,7 +44,7 @@
&__title {
position: absolute;
- background-color: rgb(151, 215, 200, .9);
+ background-color: var(--color-glass);
top: 0;
left: 0;
right: 0;
@@ -51,8 +52,8 @@
text-align: center;
padding: .5em;
width: 100%;
- border-bottom: 1px solid #bbb;
- border-top: 1px solid rgba(255,255,255,.7);
+ border-bottom: 1px solid var(--color-window-border-bottom);
+ border-top: 1px solid var(--color-window-border-top);
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
@@ -77,12 +78,12 @@
padding: .5em;
transition: .3s background, .3s color;
border-radius: .5em;
- color: #666;
+ color: var(--color-window-buttons);
font-size: 0.8em;
&:hover {
- background-color: rgba(0,0,0,.1);
- color: #222;
+ background-color: var(--color-selected);
+ color: var(--color-window-buttons-alt);
}
}
}
@@ -90,7 +91,7 @@
&__content {
position: absolute;
overflow: hidden;
- background-color: #fff;
+ background-color: var(--color-window-content);
top: 2em;
right: 0;
bottom: 0;
@@ -108,7 +109,7 @@
display: block;
margin: -1em -1em 1em;
height: 2em;
- background: #eee;
+ background: var(--color-window-menu);
& > div {
// cursor: pointer;
@@ -117,7 +118,7 @@
transition: .3s background;
&:hover {
- background-color: #ddd;
+ background-color: var(--color-window-menu-alt);
}
}
}
@@ -134,38 +135,34 @@
}
&__button {
- color: #333;
+ color: var(--color-text);
margin: 1em 1em 0;
font-size: 1em;
padding: .5em 1em;
- background-color: rgb(151, 215, 200, .3);
+ background-color: var(--color-button);
border-left: 0;
border-right: 0;
- border-top: 1px solid rgb(151, 215, 200, .1);
- border-bottom: 1px solid rgb(151, 215, 200, .5);
+ border-top: 1px solid var(--color-button-border);
+ border-bottom: 1px solid var(--color-button-border);
border-radius: .5em;
// cursor: pointer;
transition: .3s background-color;
&:hover {
- background-color: rgb(151, 215, 200, .5);
+ background-color: var(--color-button-alt);
}
}
&--error {
- background: #ffefef;
-
- & > .window__title {
- background: rgba(255, 131, 131, 0.9);
- }
+ background: var(--color-popup-error-bg);
.window__button {
- background: rgba(255, 131, 131, 0.3);
- border-top: 1px solid rgba(255, 131, 131, 0.1);
- border-bottom: 1px solid rgba(255, 131, 131, 0.5);
+ background-color: var(--color-popup-error-button);
+ border-top: 1px solid var(--color-popup-error-border);
+ border-bottom: 1px solid var(--color-popup-error-border);
&:hover {
- background: rgba(255, 131, 131, 0.5)
+ background-color: var(--color-popup-error-button-alt);
}
}
}
diff --git a/styles/global.scss b/styles/global.scss
index 222bc44..11d23d3 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,4 +1,5 @@
@import "reset";
+@import "themes";
@import "window";
main {
@@ -11,16 +12,9 @@ main {
body {
margin: 0;
- color: #222;
height: 100vh;
overflow: hidden;
- background: #50a3a2;
- background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
- background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
- background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
- background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@@ -37,3 +31,4 @@ textarea, input {
padding-left: 2rem;
padding-right: 2rem;
}
+
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 22:44:10 +0000