From cb849ab23e0cf42930a40a69229896bfc8377a7a Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 15 Nov 2019 13:05:00 +0100 Subject: [PATCH] Light/dark color fixes fix --- .../wwwroot/main/bootstrap/bootstrap.css | 56 ++++++++----------- BTCPayServer/wwwroot/main/themes/casa.css | 12 ++-- BTCPayServer/wwwroot/main/themes/classic.css | 12 ++-- 3 files changed, 34 insertions(+), 46 deletions(-) diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index 930ce1a0a..b540aa0b1 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css @@ -1122,27 +1122,15 @@ pre { .table-light, .table-light > th, .table-light > td { - color: var(--btcpay-color-light); + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-light-backdrop); } -.table-light th, -.table-light td, -.table-light thead th, -.table-light tbody + tbody { - border-color: var(--btcpay-color-light); } - .table-dark, .table-dark > th, .table-dark > td { - color: var(--btcpay-color-dark); + color: var(--btcpay-color-light); background-color: var(--btcpay-color-dark-backdrop); } -.table-dark th, -.table-dark td, -.table-dark thead th, -.table-dark tbody + tbody { - border-color: var(--btcpay-color-dark); } - @media (max-width: 575.98px) { .table-responsive-sm { display: block; @@ -1734,11 +1722,11 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); } .btn-light { - color: var(--btcpay-color-light); - background-color: var(--btcpay-color-light-backdrop); - border-color: var(--btcpay-color-light-backdrop); } + color: var(--btcpay-color-dark); + background-color: var(--btcpay-color-light); + border-color: var(--btcpay-color-light); } .btn-light:hover { - color: var(--btcpay-color-neutral-900); + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-light-accent); border-color: var(--btcpay-color-light-accent); } .btn-light:focus, .btn-light.focus { @@ -1749,7 +1737,7 @@ fieldset:disabled a.btn { border-color: var(--btcpay-color-light-backdrop); } .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { - color: var(--btcpay-color-neutral-900); + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-light-accent); border-color: var(--btcpay-color-light-accent); } .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, @@ -1757,11 +1745,11 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); } .btn-dark { - color: var(--btcpay-color-dark); - background-color: var(--btcpay-color-dark-backdrop); - border-color: var(--btcpay-color-dark-backdrop); } + color: var(--btcpay-color-light); + background-color: var(--btcpay-color-dark); + border-color: var(--btcpay-color-dark); } .btn-dark:hover { - color: var(--btcpay-color-white); + color: var(--btcpay-color-light); background-color: var(--btcpay-color-dark-accent); border-color: var(--btcpay-color-dark-accent); } .btn-dark:focus, .btn-dark.focus { @@ -1772,7 +1760,7 @@ fieldset:disabled a.btn { border-color: var(--btcpay-color-dark-backdrop); } .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { - color: var(--btcpay-color-white); + color: var(--btcpay-color-light); background-color: var(--btcpay-color-dark-accent); border-color: var(--btcpay-color-dark-accent); } .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, @@ -3441,7 +3429,7 @@ input[type="button"].btn-block { box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); } .badge-light { - color: var(--btcpay-color-light); + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-light-backdrop); } a.badge-light:hover, a.badge-light:focus { color: var(--btcpay-color-light-accent); } @@ -3450,7 +3438,7 @@ input[type="button"].btn-block { box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); } .badge-dark { - color: var(--btcpay-color-dark); + color: var(--btcpay-color-light); background-color: var(--btcpay-color-dark-backdrop); } a.badge-dark:hover, a.badge-dark:focus { color: var(--btcpay-color-dark-accent); } @@ -3812,24 +3800,24 @@ input[type="button"].btn-block { border-color: var(--btcpay-color-danger-accent); } .list-group-item-light { - color: var(--btcpay-color-light-accent); + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-light-backdrop); } .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { - color: var(--btcpay-color-light-accent); + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-light-backdrop); } .list-group-item-light.list-group-item-action.active { - color: var(--btcpay-color-white); + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-light-accent); border-color: var(--btcpay-color-light-accent); } .list-group-item-dark { - color: var(--btcpay-color-dark-accent); + color: var(--btcpay-color-light); background-color: var(--btcpay-color-dark-backdrop); } .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { - color: var(--btcpay-color-dark-accent); + color: var(--btcpay-color-light); background-color: var(--btcpay-color-dark-backdrop); } .list-group-item-dark.list-group-item-action.active { - color: var(--btcpay-color-white); + color: var(--btcpay-color-light); background-color: var(--btcpay-color-dark-accent); border-color: var(--btcpay-color-dark-accent); } @@ -4500,7 +4488,7 @@ button.bg-danger:focus { background-color: var(--btcpay-color-danger-accent) !important; } .bg-light { - background-color: var(--btcpay-color-light) !important; } + background-color: var(--btcpay-color-light-backdrop) !important; } a.bg-light:hover, a.bg-light:focus, button.bg-light:hover, @@ -4508,7 +4496,7 @@ button.bg-light:focus { background-color: var(--btcpay-color-light-accent) !important; } .bg-dark { - background-color: var(--btcpay-color-dark) !important; } + background-color: var(--btcpay-color-dark-backdrop) !important; } a.bg-dark:hover, a.bg-dark:focus, button.bg-dark:hover, diff --git a/BTCPayServer/wwwroot/main/themes/casa.css b/BTCPayServer/wwwroot/main/themes/casa.css index 07b7d604c..7d08d43d5 100644 --- a/BTCPayServer/wwwroot/main/themes/casa.css +++ b/BTCPayServer/wwwroot/main/themes/casa.css @@ -38,12 +38,12 @@ --btcpay-color-danger: #bd2130; --btcpay-color-danger-backdrop: #EDA1B0; --btcpay-color-danger-accent: #bd2130; - --btcpay-color-light: var(--btcpay-color-neutral-600); - --btcpay-color-light-backdrop: var(--btcpay-color-neutral-100); - --btcpay-color-light-accent: var(--btcpay-color-neutral-500); - --btcpay-color-dark: var(--btcpay-color-neutral-400); - --btcpay-color-dark-backdrop: var(--btcpay-brand-darker); - --btcpay-color-dark-accent: var(--btcpay-color-neutral-400); + --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-dark: var(--btcpay-color-neutral-800); + --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-800); + --btcpay-color-dark-accent: var(--btcpay-color-neutral-900); /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-bg-body: var(--btcpay-brand-darkest); diff --git a/BTCPayServer/wwwroot/main/themes/classic.css b/BTCPayServer/wwwroot/main/themes/classic.css index 342ede1d8..182dcc297 100644 --- a/BTCPayServer/wwwroot/main/themes/classic.css +++ b/BTCPayServer/wwwroot/main/themes/classic.css @@ -38,12 +38,12 @@ --btcpay-color-danger: #dc3545; --btcpay-color-danger-backdrop: rgba(225, 83, 97, 0.25); --btcpay-color-danger-accent: #bd2130; - --btcpay-color-light: var(--btcpay-color-neutral-600); - --btcpay-color-light-backdrop: var(--btcpay-color-neutral-100); - --btcpay-color-light-accent: var(--btcpay-color-neutral-500); - --btcpay-color-dark: var(--btcpay-color-neutral-400); - --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-700); - --btcpay-color-dark-accent: var(--btcpay-color-neutral-400); + --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-dark: var(--btcpay-color-neutral-800); + --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-800); + --btcpay-color-dark-accent: var(--btcpay-color-neutral-900); /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-bg-body: var(--btcpay-color-neutral-100);