From 771892b0f222057b8a1fb0e891cf969c656ca974 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 9 Mar 2024 17:30:05 +0900 Subject: [PATCH 1/7] style: dark mode background match pitchdeck --- static/index.html | 2 ++ static/styles/rewards/background.css | 31 +++++++++++++++++++++++++-- static/styles/rewards/claim-table.css | 5 +++-- static/styles/rewards/light-mode.css | 4 ++-- static/styles/rewards/pay.css | 5 ----- 5 files changed, 36 insertions(+), 11 deletions(-) diff --git a/static/index.html b/static/index.html index 54b2380d..a8c7c582 100644 --- a/static/index.html +++ b/static/index.html @@ -31,6 +31,8 @@ +
+
diff --git a/static/styles/rewards/background.css b/static/styles/rewards/background.css index 7125a189..714e0f35 100644 --- a/static/styles/rewards/background.css +++ b/static/styles/rewards/background.css @@ -12,10 +12,37 @@ background { } background #grid { - -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); - mask-image: radial-gradient(#00000020 0, #00000080 100%); + /* -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); */ + /* mask-image: radial-gradient(#00000020 0, #00000080 100%); */ /* opacity: 1; */ pointer-events: none; + opacity: 0.5; + /* background-image: url(../../media/grid-1.png); */ /* background-repeat: repeat; */ } + +canvas { + width: 100vw; + height: 100vh; +} + +.gradient { + width: 200vw; + height: 200vh; + position: absolute; + background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); + /* display: none; */ + opacity: 0.125; +} + +background > :nth-child(1) { + /* display: unset; */ + transform: translateX(-100vw); +} +background > :nth-child(2) { + /* display: unset; */ + transform: translateY(-50vh); +} +background > canvas { +} diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css index 186e89ec..34784f70 100644 --- a/static/styles/rewards/claim-table.css +++ b/static/styles/rewards/claim-table.css @@ -27,8 +27,9 @@ table { border-collapse: collapse; width: 100vw; max-width: 640px; - background-color: var(--background-color-default); + background-color: #000; border: 1px solid var(--border-color); + box-shadow: inset 0 0 96px #00bfff18; } table tr { /* width: 100%; */ @@ -192,7 +193,7 @@ table[data-claim-rendered] tr { } table[data-claim-rendered] tr#additional-details-border { /* background-color: #80808010; */ - background-color: var(--background-color-light); + /* background-color: var(--background-color-light); */ /* -webkit-backdrop-filter: blur(4px); */ /* backdrop-filter: blur(4px); */ /* border: 1px solid #80808020; */ diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css index c148ed78..8966d28f 100644 --- a/static/styles/rewards/light-mode.css +++ b/static/styles/rewards/light-mode.css @@ -72,10 +72,10 @@ } table[data-claim-rendered] tr#additional-details-border { - background-color: var(--light-mode-background-color-dark); + /* background-color: var(--light-mode-background-color-dark); */ } table[data-details-visible="true"] #additional-details-border ~ tr { - background-color: var(--light-mode-background-color-dark); + /* background-color: var(--light-mode-background-color-dark); */ } .notifications .toast { border: 1px solid var(--light-mode-border-color); diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css index 76cf477b..e57909e7 100644 --- a/static/styles/rewards/pay.css +++ b/static/styles/rewards/pay.css @@ -140,8 +140,3 @@ footer { /* width: 100%; */ /* padding-bottom: env(safe-area-inset-bottom); */ } - -canvas { - width: 100vw; - height: 100vh; -} From 423698b1a1700e05a6946645eff68496dcad2765 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 9 Mar 2024 17:58:06 +0900 Subject: [PATCH 2/7] style: light mode fixes --- static/styles/rewards/claim-table.css | 2 +- static/styles/rewards/light-mode.css | 16 ++++++++++++---- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css index 34784f70..eada254a 100644 --- a/static/styles/rewards/claim-table.css +++ b/static/styles/rewards/claim-table.css @@ -3,7 +3,7 @@ --background-color-default-brightness: 3%; --background-color-light-brightness: 6%; - --border-brightness: 9%; + --border-brightness: 5%; --background-color-default: hsl(225 50% var(--background-color-default-brightness) / 1); --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1); diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css index 8966d28f..6defb1d0 100644 --- a/static/styles/rewards/light-mode.css +++ b/static/styles/rewards/light-mode.css @@ -40,7 +40,9 @@ table[data-claim-rendered] button:hover > div { color: #000; } - + table[data-claim-rendered] button:hover{ + background-color: #80808018; + } table a:hover, table a:hover > div { color: #000; @@ -62,13 +64,16 @@ html { background-color: #fff; } - #grid { - opacity: 0.25; + background #grid { + opacity: 0.33; + filter: invert(1); } table { - background-color: var(--light-mode-background-color-default); + /* background-color: var(--light-mode-background-color-default); */ + background-color: #fff; border: 1px solid var(--light-mode-border-color); + box-shadow: inset 0 0 96px #00000010; } table[data-claim-rendered] tr#additional-details-border { @@ -81,4 +86,7 @@ border: 1px solid var(--light-mode-border-color); background-color: var(--light-mode-background-color-default); } + .gradient { + opacity: 0; + } } From d773131673bfbbf96f52d1118b3540eca070b474 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 9 Mar 2024 18:01:05 +0900 Subject: [PATCH 3/7] style: dark mode table refinement --- static/styles/rewards/claim-table.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css index eada254a..ff5abb25 100644 --- a/static/styles/rewards/claim-table.css +++ b/static/styles/rewards/claim-table.css @@ -27,9 +27,9 @@ table { border-collapse: collapse; width: 100vw; max-width: 640px; - background-color: #000; + background-color: #020202; border: 1px solid var(--border-color); - box-shadow: inset 0 0 96px #00bfff18; + box-shadow: inset 0 0 96px #00bfff10; } table tr { /* width: 100%; */ From 41f49f1229133f09fdf533d50d32acbb1ae10f89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 9 Mar 2024 18:03:18 +0900 Subject: [PATCH 4/7] style: fix background gradient brightness on page load --- static/styles/rewards/background.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/static/styles/rewards/background.css b/static/styles/rewards/background.css index 714e0f35..caba619a 100644 --- a/static/styles/rewards/background.css +++ b/static/styles/rewards/background.css @@ -32,17 +32,19 @@ canvas { height: 200vh; position: absolute; background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); - /* display: none; */ - opacity: 0.125; + opacity: 0; + animation: fadeIn 2s ease-in-out forwards; } background > :nth-child(1) { - /* display: unset; */ transform: translateX(-100vw); } background > :nth-child(2) { - /* display: unset; */ transform: translateY(-50vh); } -background > canvas { + +@keyframes fadeIn { + to { + opacity: 0.125; + } } From 603f3ee76d5d41c81397ac0804a9d73dc06a1177 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 9 Mar 2024 18:04:28 +0900 Subject: [PATCH 5/7] style: fix background gradient on light mode --- static/styles/rewards/light-mode.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css index 6defb1d0..450d1f45 100644 --- a/static/styles/rewards/light-mode.css +++ b/static/styles/rewards/light-mode.css @@ -87,6 +87,7 @@ background-color: var(--light-mode-background-color-default); } .gradient { - opacity: 0; + opacity: 0 !important; + animation: none; } } From 04af1791746fe55999adcc1f813b6e73be994581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 9 Mar 2024 18:13:29 +0900 Subject: [PATCH 6/7] style: table brightness --- static/styles/rewards/claim-table.css | 8 +++++--- static/styles/rewards/light-mode.css | 8 ++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css index ff5abb25..4129773f 100644 --- a/static/styles/rewards/claim-table.css +++ b/static/styles/rewards/claim-table.css @@ -1,7 +1,7 @@ :root { --left-table-column-width: 120px; - --background-color-default-brightness: 3%; + --background-color-default-brightness: 1%; --background-color-light-brightness: 6%; --border-brightness: 5%; @@ -27,9 +27,10 @@ table { border-collapse: collapse; width: 100vw; max-width: 640px; - background-color: #020202; + background-color: var(--background-color-default); border: 1px solid var(--border-color); - box-shadow: inset 0 0 96px #00bfff10; + /* box-shadow: inset 0 0 96px #00bfff10; */ + box-shadow: 0 12px 64px #00000010; } table tr { /* width: 100%; */ @@ -263,6 +264,7 @@ table thead { } table tbody { display: none; + box-shadow: inset 0 0 96px #00000008; } table[data-claim="error"] thead { display: table-row-group; diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css index 450d1f45..f04471f5 100644 --- a/static/styles/rewards/light-mode.css +++ b/static/styles/rewards/light-mode.css @@ -70,10 +70,10 @@ } table { - /* background-color: var(--light-mode-background-color-default); */ - background-color: #fff; + background-color: var(--light-mode-background-color-default); + /* background-color: #fff; */ border: 1px solid var(--light-mode-border-color); - box-shadow: inset 0 0 96px #00000010; + /* box-shadow: inset 0 0 96px #00000010; */ } table[data-claim-rendered] tr#additional-details-border { @@ -87,7 +87,7 @@ background-color: var(--light-mode-background-color-default); } .gradient { - opacity: 0 !important; + opacity: 0; animation: none; } } From 10fa05a4c094e8300dfb41c5f21723b6d1d32d07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 9 Mar 2024 18:41:32 +0900 Subject: [PATCH 7/7] style: dark mode table inset shadow fix --- static/styles/rewards/claim-table.css | 3 ++- static/styles/rewards/light-mode.css | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css index 4129773f..eccbe346 100644 --- a/static/styles/rewards/claim-table.css +++ b/static/styles/rewards/claim-table.css @@ -264,7 +264,8 @@ table thead { } table tbody { display: none; - box-shadow: inset 0 0 96px #00000008; + /* box-shadow: inset 0 0 96px #00000008; */ + box-shadow: inset 0 0 96px #00bfff10; } table[data-claim="error"] thead { display: table-row-group; diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css index f04471f5..f357c435 100644 --- a/static/styles/rewards/light-mode.css +++ b/static/styles/rewards/light-mode.css @@ -76,6 +76,10 @@ /* box-shadow: inset 0 0 96px #00000010; */ } + table tbody{ + box-shadow: inset 0 0 96px #00000008; + } + table[data-claim-rendered] tr#additional-details-border { /* background-color: var(--light-mode-background-color-dark); */ }