From a39082e565f0b1394e6c99109c06f1f153dd4550 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Sat, 15 Jan 2022 19:54:40 +0100 Subject: [PATCH 1/4] Add scrollbar styles --- .../wwwroot/main/bootstrap/bootstrap.css | 24 +++++++++++++++++++ BTCPayServer/wwwroot/main/layout.css | 1 + 2 files changed, 25 insertions(+) diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index d776b1104..d270748bc 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css @@ -9806,6 +9806,29 @@ fieldset:disabled .btn { display: none !important; } } +/* Scrollbar - first works on Firefox, rest on WebKit-based browsers */ +* { + --btcpay-scrollbar-width: .375rem; + --btcpay-scrollbar-color: var(--btcpay-neutral-500); + --btcpay-scrollbar-bg: transparent; + scrollbar-width: var(--btcpay-scrollbar-width); + scrollbar-color: var(--btcpay-scrollbar-color) var(--btcpay-scrollbar-bg); +} + +*::-webkit-scrollbar { + width: var(--btcpay-scrollbar-width); +} + +*::-webkit-scrollbar-track { + background: var(--btcpay-scrollbar-bg); +} + +*::-webkit-scrollbar-thumb { + background-color: var(--btcpay-scrollbar-color); + border-radius: 1rem; + border: 1rem solid var(--btcpay-scrollbar-bg); +} + html { position: relative; min-height: 100%; @@ -10288,6 +10311,7 @@ label + input.btcpay-toggle { filter: none; opacity: 0.5; } + /* Bootstrap Responsive Helper */ html[data-devenv]:before { display: inline-block; diff --git a/BTCPayServer/wwwroot/main/layout.css b/BTCPayServer/wwwroot/main/layout.css index ad3d47007..8e9c0f582 100644 --- a/BTCPayServer/wwwroot/main/layout.css +++ b/BTCPayServer/wwwroot/main/layout.css @@ -37,6 +37,7 @@ } #mainNav { + --btcpay-scrollbar-color: var(--btcpay-neutral-400); height: calc(100vh - var(--mobile-header-height)); overflow-y: auto; padding-top: var(--btcpay-space-m); From 2d05464b172a0d20a91d49241659c628d16847ec Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Sat, 15 Jan 2022 19:56:38 +0100 Subject: [PATCH 2/4] Light theme: Use off-white bg for content --- BTCPayServer/wwwroot/main/themes/default.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/BTCPayServer/wwwroot/main/themes/default.css b/BTCPayServer/wwwroot/main/themes/default.css index ff6fb5b49..39c3d31a0 100644 --- a/BTCPayServer/wwwroot/main/themes/default.css +++ b/BTCPayServer/wwwroot/main/themes/default.css @@ -148,10 +148,10 @@ --btcpay-neutral-800: var(--btcpay-neutral-light-800); --btcpay-neutral-900: var(--btcpay-neutral-light-900); --btcpay-font-size-base: var(--btcpay-font-size-m); - --btcpay-bg-tile: var(--btcpay-neutral-100); + --btcpay-bg-tile: var(--btcpay-white); --btcpay-bg-dark: var(--btcpay-brand-dark); - --btcpay-body-bg: var(--btcpay-white); - --btcpay-body-bg-light: var(--btcpay-neutral-100); + --btcpay-body-bg: var(--btcpay-neutral-100); + --btcpay-body-bg-light: var(--btcpay-white); --btcpay-body-bg-medium: var(--btcpay-neutral-200); --btcpay-body-bg-striped: var(--btcpay-neutral-200); --btcpay-body-bg-hover: var(--btcpay-white); @@ -170,7 +170,7 @@ --btcpay-body-shadow: rgba(25, 135, 84, 0.33); --btcpay-wizard-bg: var(--btcpay-body-bg); --btcpay-wizard-text: var(--btcpay-body-text); - --btcpay-header-bg: var(--btcpay-neutral-100); + --btcpay-header-bg: var(--btcpay-white); --btcpay-header-text: var(--btcpay-body-text); --btcpay-header-link: var(--btcpay-header-text); --btcpay-header-link-accent: var(--btcpay-primary); From a67f989ddae4e3194e0c291ec96d6fec25efa4ba Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Sat, 15 Jan 2022 20:20:52 +0100 Subject: [PATCH 3/4] Theme variable value updates --- .../wwwroot/main/themes/default-dark.css | 2 -- BTCPayServer/wwwroot/main/themes/default.css | 30 +++++++++---------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/BTCPayServer/wwwroot/main/themes/default-dark.css b/BTCPayServer/wwwroot/main/themes/default-dark.css index dd97dc552..6451bbed5 100644 --- a/BTCPayServer/wwwroot/main/themes/default-dark.css +++ b/BTCPayServer/wwwroot/main/themes/default-dark.css @@ -16,7 +16,6 @@ --btcpay-body-bg-medium: var(--btcpay-neutral-800); --btcpay-body-bg-striped: var(--btcpay-neutral-800); --btcpay-body-bg-hover: var(--btcpay-neutral-950); - --btcpay-body-bg-active: var(--btcpay-neutral-700); --btcpay-body-bg-rgb: 41, 41, 41; --btcpay-body-border-light: var(--btcpay-neutral-800); --btcpay-body-border-medium: var(--btcpay-neutral-700); @@ -24,7 +23,6 @@ --btcpay-body-text-rgb: 255, 255, 255; --btcpay-form-text-label: var(--btcpay-neutral-300); --btcpay-header-bg: var(--btcpay-bg-dark); - --btcpay-header-link-active: var(--btcpay-primary); --btcpay-nav-link: var(--btcpay-neutral-500); --btcpay-nav-link-accent: var(--btcpay-neutral-300); --btcpay-nav-link-active: var(--btcpay-white); diff --git a/BTCPayServer/wwwroot/main/themes/default.css b/BTCPayServer/wwwroot/main/themes/default.css index 39c3d31a0..1ddf9b360 100644 --- a/BTCPayServer/wwwroot/main/themes/default.css +++ b/BTCPayServer/wwwroot/main/themes/default.css @@ -8,9 +8,9 @@ --btcpay-brand-tertiary: #1e7a44; --btcpay-brand-dark: #0F3B21; --btcpay-white: #ffffff; - --btcpay-white-rgb: 255 , 255 , 255; + --btcpay-white-rgb: 255, 255, 255; --btcpay-black: #000000; - --btcpay-black-rgb: 0 , 0 , 0; + --btcpay-black-rgb: 0, 0, 0; --btcpay-neutral-light-100: #f8f9fa; --btcpay-neutral-light-200: #e9ecef; --btcpay-neutral-light-300: #dee2e6; @@ -20,7 +20,7 @@ --btcpay-neutral-light-700: #495057; --btcpay-neutral-light-800: #343a40; --btcpay-neutral-light-900: #292929; - --btcpay-neutral-light-rgb: 143 , 151 , 158; + --btcpay-neutral-light-rgb: 143,151,158; --btcpay-neutral-dark-100: #F0F6FC; --btcpay-neutral-dark-200: #C9D1D9; --btcpay-neutral-dark-300: #B1BAC4; @@ -30,7 +30,7 @@ --btcpay-neutral-dark-700: #30363D; --btcpay-neutral-dark-800: #21262D; --btcpay-neutral-dark-900: #161B22; - --btcpay-neutral-dark-rgb: 110 , 118 , 129; + --btcpay-neutral-dark-rgb: 110,118,129; --btcpay-primary-100: #c7e6c1; --btcpay-primary-200: #b5dead; --btcpay-primary-300: #9dd392; @@ -40,7 +40,7 @@ --btcpay-primary-700: #2e8a1b; --btcpay-primary-800: #247d12; --btcpay-primary-900: #1c710b; - --btcpay-primary-rgb: 68 , 164 , 49; + --btcpay-primary-rgb: 68,164,49; --btcpay-green-100: #EEFAEB; --btcpay-green-200: #C7E8C0; --btcpay-green-300: #A0D695; @@ -50,7 +50,7 @@ --btcpay-green-700: #307630; --btcpay-green-800: #205928; --btcpay-green-900: #0F3B21; - --btcpay-green-rgb: 81 , 177 , 62; + --btcpay-green-rgb: 81,177,62; --btcpay-blue-100: #b5e1e8; --btcpay-blue-200: #9dd7e1; --btcpay-blue-300: #7ccad7; @@ -60,7 +60,7 @@ --btcpay-blue-700: #007d91; --btcpay-blue-800: #007284; --btcpay-blue-900: #006778; - --btcpay-blue-rgb: 23 , 162 , 184; + --btcpay-blue-rgb: 23,162,184; --btcpay-yellow-100: #FFFAF0; --btcpay-yellow-200: #FFF2D9; --btcpay-yellow-300: #FFE3AC; @@ -70,7 +70,7 @@ --btcpay-yellow-700: #997328; --btcpay-yellow-800: #674D1B; --btcpay-yellow-900: #543D10; - --btcpay-yellow-rgb: 255 , 192 , 67; + --btcpay-yellow-rgb: 255,192,67; --btcpay-red-100: #FFEFED; --btcpay-red-200: #FED7D2; --btcpay-red-300: #F1998E; @@ -80,7 +80,7 @@ --btcpay-red-700: #870F00; --btcpay-red-800: #5A0A00; --btcpay-red-900: #420105; - --btcpay-red-rgb: 225 , 25 , 0; + --btcpay-red-rgb: 225,25,0; --btcpay-purple-100: #F4F1FA; --btcpay-purple-200: #E3DDF2; --btcpay-purple-300: #C1B5E3; @@ -90,7 +90,7 @@ --btcpay-purple-700: #453473; --btcpay-purple-800: #2E224C; --btcpay-purple-900: #1A1033; - --btcpay-purple-rgb: 115 , 86 , 191; + --btcpay-purple-rgb: 115,86,191; --btcpay-orange-100: #FFF3EF; --btcpay-orange-200: #FFE1D6; --btcpay-orange-300: #FABDA5; @@ -100,7 +100,7 @@ --btcpay-orange-700: #9A3F21; --btcpay-orange-800: #672A16; --btcpay-orange-900: #3D1300; - --btcpay-orange-rgb: 255 , 105 , 55; + --btcpay-orange-rgb: 255,105,55; --btcpay-brown-100: #F6F0EA; --btcpay-brown-200: #EBE0DB; --btcpay-brown-300: #D2BBB0; @@ -110,7 +110,7 @@ --btcpay-brown-700: #5C3C2E; --btcpay-brown-800: #3D281E; --btcpay-brown-900: #241914; - --btcpay-brown-rgb: 153 , 100 , 76; + --btcpay-brown-rgb: 153,100,76; --btcpay-pink-100: #FFEDF9; --btcpay-pink-200: #FFCEE5; --btcpay-pink-300: #FFACD6; @@ -120,15 +120,15 @@ --btcpay-pink-700: #7D2457; --btcpay-pink-800: #5E103E; --btcpay-pink-900: #4A042E; - --btcpay-pink-rgb: 241 , 98 , 175; + --btcpay-pink-rgb: 241,98,175; --btcpay-space-xs: 4px; --btcpay-space-s: 8px; --btcpay-space-m: 16px; --btcpay-space-l: 32px; --btcpay-space-xl: 64px; --btcpay-space-xxl: 80px; - --btcpay-font-family-base: "Open Sans" , "Helvetica Neue" , Arial , sans-serif; - --btcpay-font-family-monospace: SFMono-Regular , Menlo , Monaco , Consolas , "Liberation Mono" , "Courier New" , monospace; + --btcpay-font-family-base: "Open Sans", "Helvetica Neue", Arial, sans-serif; + --btcpay-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --btcpay-font-size-xs: 10px; --btcpay-font-size-s: 12px; --btcpay-font-size-m: 14px; From 3266cc8e3bf5598f70a513fafb11574589a77a21 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Sat, 15 Jan 2022 20:23:08 +0100 Subject: [PATCH 4/4] Improve Lightning node toggle colors --- .../Views/UIStores/SetupLightningNode.cshtml | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/BTCPayServer/Views/UIStores/SetupLightningNode.cshtml b/BTCPayServer/Views/UIStores/SetupLightningNode.cshtml index 18c2df024..225d3f131 100644 --- a/BTCPayServer/Views/UIStores/SetupLightningNode.cshtml +++ b/BTCPayServer/Views/UIStores/SetupLightningNode.cshtml @@ -28,36 +28,32 @@ #save { min-width: 7rem; } #LightningNodeTypeTablist input { display: none; } #LightningNodeTypeTablist input:checked + label { - color: var(--btcpay-white); - background: var(--btcpay-primary); + color: var(--btcpay-body-text-active); + background: var(--btcpay-body-bg-active); + border-color: var(--btcpay-body-bg-active); } #LightningNodeTypeTablist label { display: inline-block; padding: .75rem 2rem; - color: var(--btcpay-primary); + color: var(--btcpay-body-link); font-weight: var(--btcpay-font-weight-semibold); border-radius: 1.5rem; border: 1px solid var(--btcpay-secondary-border); cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - #LightningNodeTypeTablist label:hover { + #LightningNodeTypeTablist input:not(:checked):not([disabled]) + label:hover { border-color: var(--btcpay-secondary-border-hover); } - #LightningNodeTypeTablist input[disabled]:checked + label { - background: var(--btcpay-secondary); - color: var(--btcpay-white); - opacity: .5; - } #LightningNodeTypeTablist input[disabled] + label { - color: var(--btcpay-secondary); + color: var(--btcpay-body-text-muted); + border-color: var(--btcpay-secondary-border); + background: transparent; opacity: .5; } - #LightningNodeTypeTablist label + input + label { margin-left: var(--btcpay-space-m); } - #LightningNodeTypeTabs ul { list-style: none; padding-left: 0;