From 0ba69e502b89ed2d8fe51b3b8b40eb8fba5830e1 Mon Sep 17 00:00:00 2001 From: sowgro Date: Fri, 21 Mar 2025 23:11:37 -0400 Subject: start making some css --- ufund-ui/src/app/app.component.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index e69de29..b2dfb87 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -0,0 +1,19 @@ +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: black solid 1px; + padding: 0 10px; + background-color: #d9d9d9; + + h1 { + padding: 0; + margin: 0; + } + + div { + display: flex; + align-items: center; + gap: 10px; + } +} -- cgit v1.2.3 From 0be2b5868bdda04146a22ec81596dbbb81922360 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sat, 22 Mar 2025 00:04:40 -0400 Subject: improve login page --- ufund-ui/src/app/app.component.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index b2dfb87..63608c0 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -1,10 +1,15 @@ +:host { + display: flex; + flex-direction: column; + height: 100%; +} + #header { display: flex; flex-direction: row; justify-content: space-between; border-bottom: black solid 1px; padding: 0 10px; - background-color: #d9d9d9; h1 { padding: 0; -- cgit v1.2.3 From 381e57d62f01056d823af74d186f6de87df9fcee Mon Sep 17 00:00:00 2001 From: sowgro Date: Sat, 22 Mar 2025 16:35:10 -0400 Subject: Dark mode! --- ufund-ui/src/app/app.component.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 63608c0..17bbed7 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -8,12 +8,14 @@ display: flex; flex-direction: row; justify-content: space-between; - border-bottom: black solid 1px; + border-bottom: light-dark(#d3d3d3, black) solid 1px; padding: 0 10px; + background-color: light-dark(#f5f5f5, #2e2e2e); h1 { padding: 0; margin: 0; + } div { @@ -21,4 +23,8 @@ align-items: center; gap: 10px; } + + a { + color: light-dark(black, white); + } } -- cgit v1.2.3 From fb4e2bc3eb66ca861eb8393ade21811e4510669a Mon Sep 17 00:00:00 2001 From: sowgro Date: Fri, 28 Mar 2025 19:09:53 -0400 Subject: Start implementation new design --- ufund-ui/src/app/app.component.css | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 17bbed7..5596cf8 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -8,23 +8,38 @@ display: flex; flex-direction: row; justify-content: space-between; - border-bottom: light-dark(#d3d3d3, black) solid 1px; - padding: 0 10px; - background-color: light-dark(#f5f5f5, #2e2e2e); + /*border-bottom: light-dark(#d3d3d3, black) solid 1px;*/ + padding: 15px 20px; + /*background-color: light-dark(#f5f5f5, #2e2e2e);*/ + z-index: 2; h1 { padding: 0; margin: 0; - + font-weight: 500; + /*text-decoration: none;*/ + text-transform: uppercase; + font-size: 16pt; + letter-spacing: .5px; } div { display: flex; align-items: center; - gap: 10px; + gap: 20px; } + /*div:has(a:hover) a {*/ + /* color: light-dark(black, rgba(255, 255, 255, 0.5));*/ + /*}*/ + a { color: light-dark(black, white); + text-decoration: none; + } + + a:hover { + /*color: light-dark(black, white)*/ + text-decoration: underline; } } -- cgit v1.2.3 From cfe40fa1e416fbf4586ef36b63a145453a4d6224 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 00:38:37 -0400 Subject: Continue working on css (1) --- ufund-ui/src/app/app.component.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 5596cf8..5af3958 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -43,3 +43,31 @@ text-decoration: underline; } } + +.toast { + transform: translateY(-90px); + transition: transform .5s; + align-self: center; + z-index: 3; + position: absolute; + top: 15px; + display: flex; + flex-direction: row; + padding: 3px 15px; + background-color: #3a3a3a; + border-radius: 100000px; + gap: 10px; + align-items: center; + + button { + aspect-ratio: 1/1; + margin-right: -11px; + padding: 8px; + display: flex; + align-items: center; + } +} + +.toast.active { + transform: translateY(0); +} -- cgit v1.2.3 From d07e7630c836711b92cffd41fe99d15c84cb025f Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Mon, 31 Mar 2025 15:09:41 -0400 Subject: Added animation to header tabs when hovering over them --- ufund-ui/src/app/app.component.css | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 5af3958..5204919 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -38,10 +38,31 @@ text-decoration: none; } - a:hover { - /*color: light-dark(black, white)*/ - text-decoration: underline; + a { + display: block; + position: relative; + padding: 0.1em 0; + } + + a::after { + content: ''; + position: absolute; + bottom: 4px; + left: 0; + width: 100%; + height: 0.03em; + background-color: white; + opacity: 0; + transition: opacity 300ms, transform 300ms; } + + a:hover::after, + a:focus::after { + opacity: 1; + transform: translate3d(0, 0.2em, 0); + } + + } .toast { -- cgit v1.2.3 From 97c9e1e0bb73c7b08c830c47548ac1c4b5bebd0b Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 17:33:04 -0400 Subject: TOASTS --- ufund-ui/src/app/app.component.css | 28 ---------------------------- 1 file changed, 28 deletions(-) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 5204919..0bcd658 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -64,31 +64,3 @@ } - -.toast { - transform: translateY(-90px); - transition: transform .5s; - align-self: center; - z-index: 3; - position: absolute; - top: 15px; - display: flex; - flex-direction: row; - padding: 3px 15px; - background-color: #3a3a3a; - border-radius: 100000px; - gap: 10px; - align-items: center; - - button { - aspect-ratio: 1/1; - margin-right: -11px; - padding: 8px; - display: flex; - align-items: center; - } -} - -.toast.active { - transform: translateY(0); -} -- cgit v1.2.3 From 61daadccf89b2b84820386558ac454c0123d4299 Mon Sep 17 00:00:00 2001 From: sowgro Date: Tue, 1 Apr 2025 01:16:49 -0400 Subject: More css cleanup --- ufund-ui/src/app/app.component.css | 44 +++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 20 deletions(-) (limited to 'ufund-ui/src/app/app.component.css') diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 0bcd658..f4ed668 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -38,29 +38,33 @@ text-decoration: none; } - a { - display: block; - position: relative; - padding: 0.1em 0; + a:hover { + text-decoration: underline; } - a::after { - content: ''; - position: absolute; - bottom: 4px; - left: 0; - width: 100%; - height: 0.03em; - background-color: white; - opacity: 0; - transition: opacity 300ms, transform 300ms; - } + /*a {*/ + /* display: block;*/ + /* position: relative;*/ + /* padding: 0.1em 0;*/ + /*}*/ - a:hover::after, - a:focus::after { - opacity: 1; - transform: translate3d(0, 0.2em, 0); - } + /*a::after {*/ + /* content: '';*/ + /* position: absolute;*/ + /* bottom: 4px;*/ + /* left: 0;*/ + /* width: 100%;*/ + /* height: 0.03em;*/ + /* background-color: white;*/ + /* opacity: 0;*/ + /* transition: opacity 300ms, transform 300ms;*/ + /*}*/ + + /*a:hover::after,*/ + /*a:focus::after {*/ + /* opacity: 1;*/ + /* transform: translate3d(0, 0.2em, 0);*/ + /*}*/ } -- cgit v1.2.3