diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index d81f41659..afc94d3b7 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css @@ -1186,7 +1186,7 @@ pre { color: var(--btcpay-color-neutral-700); background-color: var(--btcpay-color-white); background-clip: padding-box; - border: 1px solid var(--btcpay-color-neutral-400); + border: 1px solid var(--btcpay-color-neutral-300); border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { @@ -2329,7 +2329,7 @@ input[type="button"].btn-block { text-align: center; white-space: nowrap; background-color: var(--btcpay-color-neutral-200); - border: 1px solid var(--btcpay-color-neutral-400); + border: 1px solid var(--btcpay-color-neutral-300); border-radius: 0.25rem; } .input-group-text input[type="radio"], .input-group-text input[type="checkbox"] { @@ -2507,7 +2507,7 @@ input[type="button"].btn-block { vertical-align: middle; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='var(--btcpay-color-neutral-800)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; background-color: var(--btcpay-color-white); - border: 1px solid var(--btcpay-color-neutral-400); + border: 1px solid var(--btcpay-color-neutral-300); border-radius: 0.25rem; appearance: none; } .custom-select:focus { @@ -2577,7 +2577,7 @@ input[type="button"].btn-block { line-height: 1.5; color: var(--btcpay-color-neutral-700); background-color: var(--btcpay-color-white); - border: 1px solid var(--btcpay-color-neutral-400); + border: 1px solid var(--btcpay-color-neutral-300); border-radius: 0.25rem; } .custom-file-label::after { position: absolute; @@ -3327,60 +3327,60 @@ input[type="button"].btn-block { border-radius: 10rem; } .badge-primary { - color: var(--btcpay-color-white); + color: var(--btcpay-color-primary-text); background-color: var(--btcpay-color-primary); } a.badge-primary:hover, a.badge-primary:focus { - color: var(--btcpay-color-white); + color: var(--btcpay-color-primary-text); background-color: var(--btcpay-color-primary-accent); } a.badge-primary:focus, a.badge-primary.focus { outline: 0; box-shadow: 0 0 0 0.2rem var(--btcpay-color-primary-backdrop); } .badge-secondary { - color: var(--btcpay-color-white); + color: var(--btcpay-color-secondary-text); background-color: var(--btcpay-color-secondary); } a.badge-secondary:hover, a.badge-secondary:focus { - color: var(--btcpay-color-white); + color: var(--btcpay-color-secondary-text); background-color: var(--btcpay-color-secondary-accent); } a.badge-secondary:focus, a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem var(--btcpay-color-secondary-backdrop); } .badge-success { - color: var(--btcpay-color-white); + color: var(--btcpay-color-success-text); background-color: var(--btcpay-color-success); } a.badge-success:hover, a.badge-success:focus { - color: var(--btcpay-color-white); + color: var(--btcpay-color-success-text); background-color: var(--btcpay-color-success-accent); } a.badge-success:focus, a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem var(--btcpay-color-success-backdrop); } .badge-info { - color: var(--btcpay-color-white); + color: var(--btcpay-color-info-text); background-color: var(--btcpay-color-info); } a.badge-info:hover, a.badge-info:focus { - color: var(--btcpay-color-white); + color: var(--btcpay-color-info-text); background-color: var(--btcpay-color-info-accent); } a.badge-info:focus, a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem var(--btcpay-color-info-backdrop); } .badge-warning { - color: var(--btcpay-color-neutral-900); + color: var(--btcpay-color-warning-text); background-color: var(--btcpay-color-warning); } a.badge-warning:hover, a.badge-warning:focus { - color: var(--btcpay-color-neutral-900); + color: var(--btcpay-color-warning-text); background-color: var(--btcpay-color-warning-accent); } a.badge-warning:focus, a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem var(--btcpay-color-warning-backdrop); } .badge-danger { - color: var(--btcpay-color-white); + color: var(--btcpay-color-danger-text); background-color: var(--btcpay-color-danger); } a.badge-danger:hover, a.badge-danger:focus { - color: var(--btcpay-color-white); + color: var(--btcpay-color-danger-text); background-color: var(--btcpay-color-danger-accent); } a.badge-danger:focus, a.badge-danger.focus { outline: 0;s @@ -6738,7 +6738,7 @@ a.text-dark:hover, a.text-dark:focus { color: var(--btcpay-body-color) !important; } .text-muted { - color: var(--btcpay-color-neutral-600) !important; } + color: var(--btcpay-color-secondary) !important; } .text-black-50 { color: rgba(0, 0, 0, 0.5) !important; } diff --git a/BTCPayServer/wwwroot/main/themes/casa.css b/BTCPayServer/wwwroot/main/themes/casa.css index c6e0e0c1a..a0e74b365 100644 --- a/BTCPayServer/wwwroot/main/themes/casa.css +++ b/BTCPayServer/wwwroot/main/themes/casa.css @@ -27,7 +27,7 @@ --btcpay-color-secondary: var(--btcpay-color-neutral-600); --btcpay-color-secondary-backdrop: var(--btcpay-color-neutral-100); --btcpay-color-secondary-accent: var(--btcpay-color-neutral-500); - --btcpay-color-secondary-text: var(--btcpay-color-neutral-500); + --btcpay-color-secondary-text: var(--btcpay-color-neutral-400); --btcpay-color-success: #25933d; --btcpay-color-success-backdrop: #c3e6cb; --btcpay-color-success-accent: #137929; @@ -44,14 +44,14 @@ --btcpay-color-danger-backdrop: #EDA1B0; --btcpay-color-danger-accent: #bd2130; --btcpay-color-danger-text: #bd2130; - --btcpay-color-light: var(--btcpay-color-neutral-200); - --btcpay-color-light-backdrop: var(--btcpay-color-neutral-200); - --btcpay-color-light-accent: var(--btcpay-color-neutral-100); - --btcpay-color-light-text: var(--btcpay-color-neutral-800); - --btcpay-color-dark: var(--btcpay-color-neutral-800); - --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-800); - --btcpay-color-dark-accent: var(--btcpay-color-neutral-900); - --btcpay-color-dark-text: var(--btcpay-color-neutral-200); + --btcpay-color-light: var(--btcpay-color-neutral-700); + --btcpay-color-light-backdrop: var(--btcpay-color-neutral-700); + --btcpay-color-light-accent: var(--btcpay-color-neutral-500); + --btcpay-color-light-text: var(--btcpay-color-neutral-200); + --btcpay-color-dark: var(--btcpay-color-neutral-200); + --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-200); + --btcpay-color-dark-accent: var(--btcpay-color-neutral-400); + --btcpay-color-dark-text: var(--btcpay-color-neutral-800); /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-body-bg: var(--btcpay-brand-darkest); diff --git a/BTCPayServer/wwwroot/main/themes/default-dark.css b/BTCPayServer/wwwroot/main/themes/default-dark.css index 1ea92b931..844a427ea 100644 --- a/BTCPayServer/wwwroot/main/themes/default-dark.css +++ b/BTCPayServer/wwwroot/main/themes/default-dark.css @@ -2,6 +2,7 @@ /* Dark theme overrides */ :root { + --btcpay-color-neutral-950: #222222; --btcpay-color-primary-backdrop: #389725; --btcpay-bg-dark: var(--btcpay-color-neutral-950); @@ -19,6 +20,15 @@ --btcpay-border-color-light: var(--btcpay-color-neutral-600); --btcpay-border-color-medium: var(--btcpay-color-neutral-700); + + --btcpay-color-light: var(--btcpay-color-neutral-800); + --btcpay-color-light-backdrop: var(--btcpay-color-neutral-800); + --btcpay-color-light-accent: var(--btcpay-color-black); + --btcpay-color-light-text: var(--btcpay-color-neutral-200); + --btcpay-color-dark: var(--btcpay-color-neutral-200); + --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-200); + --btcpay-color-dark-accent: var(--btcpay-color-neutral-400); + --btcpay-color-dark-text: var(--btcpay-color-neutral-800); } .social-logo { diff --git a/BTCPayServer/wwwroot/main/themes/default.css b/BTCPayServer/wwwroot/main/themes/default.css index 8c206a93c..7aaeccce6 100644 --- a/BTCPayServer/wwwroot/main/themes/default.css +++ b/BTCPayServer/wwwroot/main/themes/default.css @@ -13,18 +13,17 @@ --btcpay-color-neutral-200: #e9ecef; --btcpay-color-neutral-300: #dee2e6; --btcpay-color-neutral-400: #ced4da; - --btcpay-color-neutral-500: #8d8d8f; + --btcpay-color-neutral-500: #8f979e; --btcpay-color-neutral-600: #6c757d; --btcpay-color-neutral-700: #495057; --btcpay-color-neutral-800: #343a40; --btcpay-color-neutral-900: #292929; - --btcpay-color-neutral-950: #222222; --btcpay-color-primary: var(--btcpay-brand-medium); --btcpay-color-primary-backdrop: #D2E5CF; --btcpay-color-primary-accent: var(--btcpay-brand-dark); --btcpay-color-primary-text: var(--btcpay-color-neutral-900); - --btcpay-color-secondary: var(--btcpay-color-neutral-600); + --btcpay-color-secondary: var(--btcpay-color-neutral-500); --btcpay-color-secondary-backdrop: #C5CACC; --btcpay-color-secondary-accent: var(--btcpay-color-neutral-700); --btcpay-color-secondary-text: var(--btcpay-color-neutral-700); @@ -40,7 +39,7 @@ --btcpay-color-warning: #ffc107; --btcpay-color-warning-backdrop: #ffc107; --btcpay-color-warning-accent: #d39e00; - --btcpay-color-warning-text: var(--btcpay-color-neutral-700); + --btcpay-color-warning-text: var(--btcpay-color-neutral-900); --btcpay-color-danger: #c12c1a; --btcpay-color-danger-backdrop: #E85442; --btcpay-color-danger-accent: #a71705;