From b4a9cd9d540d42a61bee9045d41ada392305a8d5 Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Fri, 4 Apr 2025 14:53:32 -0400 Subject: add light/dark mode toggle, only homepage is fully functional. -ak --- ufund-ui/src/styles.css | 45 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 11 deletions(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 75d6b36..a1902fd 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -1,17 +1,38 @@ /* You can add global styles to this file, and also import other style files */ :root { - color-scheme: /*light*/ dark; + color-scheme: dark; } * { box-sizing: border-box; + color: var(--foreground-color); + transition: all ease-in-out .3s; +} + +[theme="light"] { + --background-color: #e6e4df; + --foreground-color: #000000; + --highlight-color: #cf9451; + --hover-color: #d8cdc0; + --opacity-cr: 1; + --opacity-jf: 0; +} + +[theme="dark"] { + --background-color: #000715; + --foreground-color: #ffffff; + --highlight-color: #6091e8; + --hover-color: #394559; + --opacity-cr: 0; + --opacity-jf: 1; } html, body { margin: 0; height: 100%; - background-color: light-dark(white, #000715); + background-color: var(--background-color); + color: var(--foreground-color); } body { @@ -25,37 +46,39 @@ input { border-radius: 5px; border-style: solid; border-width: 1px; - background-color: light-dark(#ebebeb, #3a3a3a); + background-color: var(--background-color); &:hover { - background-color: light-dark(#e1e1e1, #444444); + background-color: var(--hover-color); } } button, input[type=button], input[type=reset], input[type=submit], .button { - font-size: 14pt; + font-size: 12pt; padding: 6px 16px; border-radius: 9999px; border-style: none; - background-color: light-dark(#ebebeb, #3a3a3a); + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: var(--background-color); display: flex; gap: 5px; text-align: center; justify-content: center; &:hover { - background-color: light-dark(#e1e1e1, #444444); + background-color: var(--hover-color); } } .button2 { - text-transform: uppercase; - border: 1px solid #5cdbff; + /* text-transform: uppercase; */ + border: 3px solid var(--highlight-color); padding: 10px 25px; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12pt; - font-weight: 600; + font-weight: 700; background-color: transparent; - text-shadow: #5cdbff 0 0 50px; + text-shadow: var(--highlight-color) 0 0 50px; } .icon { -- cgit v1.2.3 From ac6fa949a754778f268fb91f0b32464c153191ef Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Fri, 4 Apr 2025 20:49:15 -0400 Subject: refactor login-page and need-list to support light/dark mode --- ufund-ui/src/styles.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index a1902fd..9fce47d 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -1,8 +1,8 @@ /* You can add global styles to this file, and also import other style files */ -:root { +/* :root { color-scheme: dark; -} +} */ * { box-sizing: border-box; @@ -12,8 +12,11 @@ [theme="light"] { --background-color: #e6e4df; + --secondary-color: #e0dcd4; + --tertiary-color: #cac6be; --foreground-color: #000000; --highlight-color: #cf9451; + --dark-highlight-clor: #582f00; --hover-color: #d8cdc0; --opacity-cr: 1; --opacity-jf: 0; @@ -21,8 +24,11 @@ [theme="dark"] { --background-color: #000715; + --secondary-color: #444444; + --tertiary-color: #3a3a3a; --foreground-color: #ffffff; --highlight-color: #6091e8; + --dark-highlight-clor: #002846; --hover-color: #394559; --opacity-cr: 0; --opacity-jf: 1; -- cgit v1.2.3 From 1ac878b4aaa19ab889c7a98b7dab6acd57c778b3 Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Sat, 5 Apr 2025 22:00:00 -0400 Subject: finish styling basket and list; add persistent theme via localStorage. -ak --- ufund-ui/src/styles.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 9fce47d..09e354c 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -65,7 +65,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button { border-radius: 9999px; border-style: none; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: var(--background-color); + background-color: var(--tertiary-color); display: flex; gap: 5px; text-align: center; @@ -91,6 +91,14 @@ button, input[type=button], input[type=reset], input[type=submit], .button { font-family: 'Material Symbols Outlined' } +.sort-scheme { + background-color: var(--background-color); + border-style: solid; + border-color: var(--tertiary-color); + border-radius: 5px; + border-width: 1px; +} + h1 { font-size: 40px; } -- cgit v1.2.3 From 6b4c2952e52ee2b8b23067688055011e393f8e4b Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 16:04:30 -0400 Subject: Increase animation speed --- ufund-ui/src/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 44f6107..876c6f6 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -7,7 +7,7 @@ * { box-sizing: border-box; color: var(--foreground-color); - transition: all ease-in-out .3s; + transition: color, background-color ease-in-out .1s; } [theme="light"] { -- cgit v1.2.3 From e89bcbad67886174463d8e36ce16d02012881779 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 19:32:00 -0400 Subject: fix dashboard, make buttons use secondary color by default --- ufund-ui/src/styles.css | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 876c6f6..f3491e1 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -1,9 +1,5 @@ /* You can add global styles to this file, and also import other style files */ -/* :root { - color-scheme: dark; -} */ - * { box-sizing: border-box; color: var(--foreground-color); @@ -11,6 +7,7 @@ } [theme="light"] { + color-scheme: light; --background-color: #e6e4df; --secondary-color: #e0dcd4; --tertiary-color: #cac6be; @@ -23,6 +20,7 @@ } [theme="dark"] { + color-scheme: dark; --background-color: #000715; --secondary-color: #444444; --tertiary-color: #3a3a3a; @@ -66,8 +64,8 @@ button, input[type=button], input[type=reset], input[type=submit], .button { padding: 6px 16px; border-radius: 9999px; border-style: none; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: var(--tertiary-color); + /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/ + background-color: var(--secondary-color); display: flex; gap: 5px; text-align: center; @@ -83,7 +81,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button { /* text-transform: uppercase; */ border: 3px solid var(--highlight-color); padding: 10px 25px; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/ font-size: 12pt; font-weight: 700; background-color: transparent; -- cgit v1.2.3 From 88865595e2735784537e076a5b8d6edbf6fb6138 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 19:52:12 -0400 Subject: Improve sort-scheme --- ufund-ui/src/styles.css | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index f3491e1..7f3f973 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -44,7 +44,7 @@ body { font-optical-sizing: auto; } -input, textarea { +input, textarea, select { resize: none; font-family: Inter, sans-serif; font-size: 14pt; @@ -52,11 +52,16 @@ input, textarea { border-radius: 5px; border-style: solid; border-width: 1px; - background-color: var(--background-color); + background-color: var(--secondary-color); &:hover { background-color: var(--hover-color); } + + &.sort-scheme { + background-color: transparent; + border-color: var(--secondary-color); + } } button, input[type=button], input[type=reset], input[type=submit], .button { @@ -75,6 +80,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button { &:hover { background-color: var(--hover-color); } + + &.sort-scheme { + background-color: transparent; + } } .button2 { @@ -92,14 +101,6 @@ button, input[type=button], input[type=reset], input[type=submit], .button { font-family: 'Material Symbols Outlined' } -.sort-scheme { - background-color: var(--background-color); - border-style: solid; - border-color: var(--tertiary-color); - border-radius: 5px; - border-width: 1px; -} - h1 { font-size: 40px; } -- cgit v1.2.3 From 1a70784c75ba26713e040bb44e9fbc6867079010 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 20:06:59 -0400 Subject: Remove color from * and fix toasts in light mode --- ufund-ui/src/styles.css | 1 - 1 file changed, 1 deletion(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 7f3f973..eae5b50 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -2,7 +2,6 @@ * { box-sizing: border-box; - color: var(--foreground-color); transition: color, background-color ease-in-out .1s; } -- cgit v1.2.3 From bc7a0069afac85617fa7724628aac6b3da0d0d2c Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 20:16:39 -0400 Subject: Tweak light theme for improved contrast --- ufund-ui/src/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index eae5b50..c4034ad 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -8,8 +8,8 @@ [theme="light"] { color-scheme: light; --background-color: #e6e4df; - --secondary-color: #e0dcd4; - --tertiary-color: #cac6be; + --secondary-color: #d7d1c7; + --tertiary-color: #e0dcd4; --foreground-color: #000000; --highlight-color: #cf9451; --dark-highlight-clor: #582f00; -- cgit v1.2.3 From d06ed8ce0a08896e16c353d8b165c9161095228a Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 20:43:34 -0400 Subject: Add better hover color for sort-scheme --- ufund-ui/src/styles.css | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index c4034ad..82db502 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -21,16 +21,20 @@ [theme="dark"] { color-scheme: dark; --background-color: #000715; - --secondary-color: #444444; - --tertiary-color: #3a3a3a; - --foreground-color: #ffffff; - --highlight-color: #6091e8; - --dark-highlight-clor: #002846; - --hover-color: #394559; + --secondary-color: #444444; /* color of cards and buttons*/ + --tertiary-color: #3a3a3a; /* color of dark cards */ + --foreground-color: #ffffff; /* used on text */ + --highlight-color: #6091e8; /* accent color */ + --dark-highlight-clor: #002846; /* not used currently */ + --hover-color: #394559; /* hover color for cards and buttons*/ --opacity-cr: 0; --opacity-jf: 1; } +:root { + --background-hover: color-mix(in oklch, var(--background-color) 60%, var(--hover-color) 40%); +} + html, body { margin: 0; height: 100%; @@ -60,6 +64,10 @@ input, textarea, select { &.sort-scheme { background-color: transparent; border-color: var(--secondary-color); + + &:hover { + background-color: var(--background-hover); + } } } @@ -82,6 +90,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button { &.sort-scheme { background-color: transparent; + + &:hover { + background-color: var(--background-hover); + } } } @@ -94,6 +106,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button { font-weight: 700; background-color: transparent; text-shadow: var(--highlight-color) 0 0 50px; + + &:hover { + background-color: var(--background-hover) !important; + } } .icon { -- cgit v1.2.3 From 660d1df5b67bcedb2abc9cb9abc555e9b78ff510 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 20:50:26 -0400 Subject: Make links follow the highlight color --- ufund-ui/src/styles.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 82db502..3e923b1 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -123,3 +123,7 @@ h1 { progress { min-width: 100%; } + +a { + color: var(--highlight-color); +} -- cgit v1.2.3 From a8aee88cdf95eea5aaeb450b0474aa85dc556cc2 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 7 Apr 2025 00:54:03 -0400 Subject: Other tweaks --- ufund-ui/src/styles.css | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 3e923b1..98e13de 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -21,14 +21,23 @@ [theme="dark"] { color-scheme: dark; --background-color: #000715; - --secondary-color: #444444; /* color of cards and buttons*/ - --tertiary-color: #3a3a3a; /* color of dark cards */ + --secondary-color: #3a3a3a; /* color of cards and buttons*/ + --tertiary-color: #2e2e2e; /* color of dark cards */ --foreground-color: #ffffff; /* used on text */ --highlight-color: #6091e8; /* accent color */ --dark-highlight-clor: #002846; /* not used currently */ - --hover-color: #394559; /* hover color for cards and buttons*/ + --hover-color: #323c4e; /* hover color for cards and buttons*/ --opacity-cr: 0; --opacity-jf: 1; + + /* Experimental blue dark theme: + --secondary-color: #19212e; + --tertiary-color: #121722; + --foreground-color: #ffffff; + --highlight-color: #6091e8; + --dark-highlight-clor: #002846; + --hover-color: #192940; + */ } :root { @@ -72,7 +81,7 @@ input, textarea, select { } button, input[type=button], input[type=reset], input[type=submit], .button { - font-size: 12pt; + font-size: 14pt; padding: 6px 16px; border-radius: 9999px; border-style: none; @@ -83,6 +92,11 @@ button, input[type=button], input[type=reset], input[type=submit], .button { text-align: center; justify-content: center; align-items: center; + cursor: pointer; + + &:disabled { + pointer-events: none; + } &:hover { background-color: var(--hover-color); @@ -98,8 +112,8 @@ button, input[type=button], input[type=reset], input[type=submit], .button { } .button2 { - /* text-transform: uppercase; */ - border: 3px solid var(--highlight-color); + text-transform: uppercase; + border: 1px solid var(--highlight-color); padding: 10px 25px; /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/ font-size: 12pt; -- cgit v1.2.3 From 84a8918451ccccaaf97a6baff5f50e12001d3d4d Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Mon, 7 Apr 2025 16:16:53 -0400 Subject: Updated styling --- ufund-ui/src/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 98e13de..6bb6970 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -24,7 +24,7 @@ --secondary-color: #3a3a3a; /* color of cards and buttons*/ --tertiary-color: #2e2e2e; /* color of dark cards */ --foreground-color: #ffffff; /* used on text */ - --highlight-color: #6091e8; /* accent color */ + --highlight-color: #60a9f3; /* accent color */ --dark-highlight-clor: #002846; /* not used currently */ --hover-color: #323c4e; /* hover color for cards and buttons*/ --opacity-cr: 0; -- cgit v1.2.3 From 7617db08a43d873a65abd47b02e23ad8cb4cb5cd Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 7 Apr 2025 20:56:03 -0400 Subject: Tweak spacing in ul --- ufund-ui/src/styles.css | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'ufund-ui/src/styles.css') diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 6bb6970..c3e2c99 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -141,3 +141,10 @@ progress { a { color: var(--highlight-color); } + +ul { + display: flex; + flex-direction: column; + gap: 5px; + margin: 0; +} -- cgit v1.2.3