From e44db30ddb0070708cce940299700d9e42a8852d Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 8 Nov 2019 16:59:07 +0100 Subject: [PATCH] Finetune color settings fix --- BTCPayServer/wwwroot/css/bootstrap.css | 189 ++++++-------------- BTCPayServer/wwwroot/css/themes/casa.css | 54 +++--- BTCPayServer/wwwroot/css/themes/classic.css | 41 +++-- 3 files changed, 106 insertions(+), 178 deletions(-) diff --git a/BTCPayServer/wwwroot/css/bootstrap.css b/BTCPayServer/wwwroot/css/bootstrap.css index 28d5ec01e..9c9c55871 100644 --- a/BTCPayServer/wwwroot/css/bootstrap.css +++ b/BTCPayServer/wwwroot/css/bootstrap.css @@ -1050,174 +1050,98 @@ pre { .table-primary, .table-primary > th, .table-primary > td { + color: var(--btcpay-color-primary); background-color: var(--btcpay-color-primary-backdrop); } .table-primary th, .table-primary td, .table-primary thead th, .table-primary tbody + tbody { - border-color: #7ab1eb; } - -.table-hover .table-primary:hover { - background-color: var(--btcpay-color-primary-backdrop); } - .table-hover .table-primary:hover > td, - .table-hover .table-primary:hover > th { - background-color: var(--btcpay-color-primary-backdrop); } + border-color: var(--btcpay-color-primary); } .table-secondary, .table-secondary > th, .table-secondary > td { + color: var(--btcpay-color-secondary); background-color: var(--btcpay-color-secondary-backdrop); } .table-secondary th, .table-secondary td, .table-secondary thead th, .table-secondary tbody + tbody { - border-color: #b3b7bb; } - -.table-hover .table-secondary:hover { - background-color: var(--btcpay-color-secondary-backdrop); } - .table-hover .table-secondary:hover > td, - .table-hover .table-secondary:hover > th { - background-color: var(--btcpay-color-secondary-backdrop); } + border-color: var(--btcpay-color-secondary); } .table-success, .table-success > th, .table-success > td { + color: var(--btcpay-color-success); background-color: var(--btcpay-color-success-backdrop); } .table-success th, .table-success td, .table-success thead th, .table-success tbody + tbody { - border-color: #8fd19e; } - -.table-hover .table-success:hover { - background-color: var(--btcpay-color-success-backdrop); } - .table-hover .table-success:hover > td, - .table-hover .table-success:hover > th { - background-color: var(--btcpay-color-success-backdrop); } + border-color: var(--btcpay-color-success); } .table-info, .table-info > th, .table-info > td { + color: var(--btcpay-color-info); background-color: var(--btcpay-color-info-backdrop); } .table-info th, .table-info td, .table-info thead th, .table-info tbody + tbody { - border-color: #86cfda; } - -.table-hover .table-info:hover { - background-color: var(--btcpay-color-info-backdrop); } - .table-hover .table-info:hover > td, - .table-hover .table-info:hover > th { - background-color: var(--btcpay-color-info-backdrop); } + border-color: var(--btcpay-color-info); } .table-warning, .table-warning > th, .table-warning > td { + color: var(--btcpay-color-warning); background-color: var(--btcpay-color-warning-backdrop); } .table-warning th, .table-warning td, .table-warning thead th, .table-warning tbody + tbody { - border-color: #ffdf7e; } - -.table-hover .table-warning:hover { - background-color: var(--btcpay-color-warning-backdrop); } - .table-hover .table-warning:hover > td, - .table-hover .table-warning:hover > th { - background-color: var(--btcpay-color-warning-backdrop); } + border-color: var(--btcpay-color-warning); } .table-danger, .table-danger > th, .table-danger > td { + color: var(--btcpay-color-danger); background-color: var(--btcpay-color-danger-backdrop); } .table-danger th, .table-danger td, .table-danger thead th, .table-danger tbody + tbody { - border-color: #ed969e; } - -.table-hover .table-danger:hover { - background-color: var(--btcpay-color-danger-backdrop); } - .table-hover .table-danger:hover > td, - .table-hover .table-danger:hover > th { - background-color: var(--btcpay-color-danger-backdrop); } + border-color: var(--btcpay-color-danger); } .table-light, .table-light > th, .table-light > td { + color: var(--btcpay-color-light); background-color: var(--btcpay-color-light-backdrop); } .table-light th, .table-light td, .table-light thead th, .table-light tbody + tbody { - border-color: #fbfcfc; } - -.table-hover .table-light:hover { - background-color: var(--btcpay-color-light-backdrop); } - .table-hover .table-light:hover > td, - .table-hover .table-light:hover > th { - background-color: var(--btcpay-color-light-backdrop); } + border-color: var(--btcpay-color-light); } .table-dark, .table-dark > th, .table-dark > td { + color: var(--btcpay-color-dark); background-color: var(--btcpay-color-dark-backdrop); } .table-dark th, .table-dark td, .table-dark thead th, .table-dark tbody + tbody { - border-color: #95999c; } - -.table-hover .table-dark:hover { - background-color: var(--btcpay-color-dark-backdrop); } - .table-hover .table-dark:hover > td, - .table-hover .table-dark:hover > th { - background-color: var(--btcpay-color-dark-backdrop); } - -.table-active, -.table-active > th, -.table-active > td { - background-color: rgba(0, 0, 0, 0.075); } - -.table-hover .table-active:hover { - background-color: rgba(0, 0, 0, 0.075); } - .table-hover .table-active:hover > td, - .table-hover .table-active:hover > th { - background-color: rgba(0, 0, 0, 0.075); } - -.table .thead-dark th { - color: var(--btcpay-color-white); - background-color: var(--btcpay-color-neutral-800); - border-color: var(--btcpay-color-neutral-700); } - -.table .thead-light th { - color: var(--btcpay-color-neutral-700); - background-color: var(--btcpay-color-neutral-200); - border-color: var(--btcpay-color-neutral-300); } - -.table-dark { - color: var(--btcpay-color-white); - background-color: var(--btcpay-color-neutral-800); } - .table-dark th, - .table-dark td, - .table-dark thead th { - border-color: var(--btcpay-color-neutral-700); } - .table-dark.table-bordered { - border: 0; } - .table-dark.table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(255, 255, 255, 0.05); } - .table-dark.table-hover tbody tr:hover { - color: var(--btcpay-color-white); - background-color: rgba(255, 255, 255, 0.075); } + border-color: var(--btcpay-color-dark); } @media (max-width: 575.98px) { .table-responsive-sm { @@ -1810,9 +1734,9 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); } .btn-light { - color: var(--btcpay-color-neutral-900); - background-color: var(--btcpay-color-light); - border-color: var(--btcpay-color-light); } + color: var(--btcpay-color-light); + background-color: var(--btcpay-color-light-backdrop); + border-color: var(--btcpay-color-light-backdrop); } .btn-light:hover { color: var(--btcpay-color-neutral-900); background-color: var(--btcpay-color-light-accent); @@ -1820,9 +1744,9 @@ fieldset:disabled a.btn { .btn-light:focus, .btn-light.focus { box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); } .btn-light.disabled, .btn-light:disabled { - color: var(--btcpay-color-neutral-900); - background-color: var(--btcpay-color-light); - border-color: var(--btcpay-color-light); } + color: var(--btcpay-color-neutral-400); + background-color: var(--btcpay-color-light-backdrop); + 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); @@ -1833,9 +1757,9 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); } .btn-dark { - color: var(--btcpay-color-white); - background-color: var(--btcpay-color-dark); - border-color: var(--btcpay-color-dark); } + color: var(--btcpay-color-dark); + background-color: var(--btcpay-color-dark-backdrop); + border-color: var(--btcpay-color-dark-backdrop); } .btn-dark:hover { color: var(--btcpay-color-white); background-color: var(--btcpay-color-dark-accent); @@ -1843,9 +1767,9 @@ fieldset:disabled a.btn { .btn-dark:focus, .btn-dark.focus { box-shadow: 0 0 0 0.2rem var(--btcpay-color-dark-backdrop); } .btn-dark.disabled, .btn-dark:disabled { - color: var(--btcpay-color-white); - background-color: var(--btcpay-color-dark); - border-color: var(--btcpay-color-dark); } + color: var(--btcpay-color-neutral-600); + background-color: var(--btcpay-color-dark-backdrop); + 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); @@ -2006,7 +1930,7 @@ fieldset:disabled a.btn { color: var(--btcpay-color-dark); border-color: var(--btcpay-color-dark); } .btn-outline-dark:hover { - color: var(--btcpay-color-white); + color: var(--btcpay-color-neutral-100); background-color: var(--btcpay-color-dark); border-color: var(--btcpay-color-dark); } .btn-outline-dark:focus, .btn-outline-dark.focus { @@ -2869,9 +2793,9 @@ input[type="button"].btn-block { border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { - color: var(--btcpay-color-neutral-700); - background-color: var(--btcpay-bg-body); - border-color: var(--btcpay-color-neutral-300) var(--btcpay-color-neutral-300) var(--btcpay-bg-body); } + color: var(--btcpay-color-primary); + background-color: var(--btcpay-color-primary-backdrop); + border-color: var(--btcpay-color-neutral-300) var(--btcpay-color-neutral-300) var(--btcpay-color-primary-backdrop); } .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; @@ -3517,21 +3441,19 @@ input[type="button"].btn-block { box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); } .badge-light { - color: var(--btcpay-color-neutral-900); - background-color: var(--btcpay-color-light); } + color: var(--btcpay-color-light); + background-color: var(--btcpay-color-light-backdrop); } a.badge-light:hover, a.badge-light:focus { - color: var(--btcpay-color-neutral-900); - background-color: var(--btcpay-color-light-accent); } + color: var(--btcpay-color-light-accent); } a.badge-light:focus, a.badge-light.focus { outline: 0; box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); } .badge-dark { - color: var(--btcpay-color-white); - background-color: var(--btcpay-color-dark); } + color: var(--btcpay-color-dark); + background-color: var(--btcpay-color-dark-backdrop); } a.badge-dark:hover, a.badge-dark:focus { - color: var(--btcpay-color-white); - background-color: var(--btcpay-color-dark-accent); } + color: var(--btcpay-color-dark-accent); } a.badge-dark:focus, a.badge-dark.focus { outline: 0; box-shadow: 0 0 0 0.2rem var(--btcpay-color-dark-backdrop); } @@ -3539,7 +3461,7 @@ input[type="button"].btn-block { .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; - background-color: var(--btcpay-color-neutral-200); + background-color: var(--btcpay-bg-tile); border-radius: 0.3rem; } @media (min-width: 576px) { .jumbotron { @@ -3575,72 +3497,72 @@ input[type="button"].btn-block { .alert-primary { color: var(--btcpay-color-primary-accent); background-color: var(--btcpay-color-primary-backdrop); - border-color: var(--btcpay-color-primary-backdrop); } + border-color: var(--btcpay-color-primary-accent); } .alert-primary hr { - border-top-color: var(--btcpay-color-primary-backdrop); } + border-top-color: var(--btcpay-color-primary-accent); } .alert-primary .alert-link { color: var(--btcpay-color-primary-accent); } .alert-secondary { color: var(--btcpay-color-secondary-accent); background-color: var(--btcpay-color-secondary-backdrop); - border-color: var(--btcpay-color-secondary-backdrop); } + border-color: var(--btcpay-color-secondary-accent); } .alert-secondary hr { - border-top-color: var(--btcpay-color-secondary-backdrop); } + border-top-color: var(--btcpay-color-secondary-accent); } .alert-secondary .alert-link { color: var(--btcpay-color-secondary-accent); } .alert-success { color: var(--btcpay-color-success-accent); background-color: var(--btcpay-color-success-backdrop); - border-color: var(--btcpay-color-success-backdrop); } + border-color: var(--btcpay-color-success-accent); } .alert-success hr { - border-top-color: var(--btcpay-color-success-backdrop); } + border-top-color: var(--btcpay-color-success-accent); } .alert-success .alert-link { color: var(--btcpay-color-success-accent); } .alert-info { color: var(--btcpay-color-info-accent); background-color: var(--btcpay-color-info-backdrop); - border-color: var(--btcpay-color-info-backdrop); } + border-color: var(--btcpay-color-info-accent); } .alert-info hr { - border-top-color: var(--btcpay-color-info-backdrop); } + border-top-color: var(--btcpay-color-info-accent); } .alert-info .alert-link { color: var(--btcpay-color-info-accent); } .alert-warning { color: var(--btcpay-color-warning-accent); background-color: var(--btcpay-color-warning-backdrop); - border-color: var(--btcpay-color-warning-backdrop); } + border-color: var(--btcpay-color-warning-accent); } .alert-warning hr { - border-top-color: var(--btcpay-color-warning-backdrop); } + border-top-color: var(--btcpay-color-warning-accent); } .alert-warning .alert-link { color: var(--btcpay-color-warning-accent); } .alert-danger { color: var(--btcpay-color-danger-accent); background-color: var(--btcpay-color-danger-backdrop); - border-color: var(--btcpay-color-danger-backdrop); } + border-color: var(--btcpay-color-danger-accent); } .alert-danger hr { - border-top-color: var(--btcpay-color-danger-backdrop); } + border-top-color: var(--btcpay-color-danger-accent); } .alert-danger .alert-link { color: var(--btcpay-color-danger-accent); } .alert-light { color: var(--btcpay-color-light-accent); background-color: var(--btcpay-color-light-backdrop); - border-color: var(--btcpay-color-light-backdrop); } + border-color: var(--btcpay-color-light-accent); } .alert-light hr { - border-top-color: var(--btcpay-color-light-backdrop); } + border-top-color: var(--btcpay-color-light-accent); } .alert-light .alert-link { color: var(--btcpay-color-light-accent); } .alert-dark { color: var(--btcpay-color-dark-accent); background-color: var(--btcpay-color-dark-backdrop); - border-color: var(--btcpay-color-dark-backdrop); } + border-color: var(--btcpay-color-dark-accent); } .alert-dark hr { - border-top-color: var(--btcpay-color-dark-backdrop); } + border-top-color: var(--btcpay-color-dark-accent); } .alert-dark .alert-link { color: var(--btcpay-color-dark-accent); } @@ -3712,7 +3634,6 @@ input[type="button"].btn-block { display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; - background-color: var(--btcpay-color-white); border: 1px solid rgba(0, 0, 0, 0.125); } .list-group-item:first-child { border-top-left-radius: 0.25rem; diff --git a/BTCPayServer/wwwroot/css/themes/casa.css b/BTCPayServer/wwwroot/css/themes/casa.css index 9df735551..07b7d604c 100644 --- a/BTCPayServer/wwwroot/css/themes/casa.css +++ b/BTCPayServer/wwwroot/css/themes/casa.css @@ -1,6 +1,7 @@ :root { + /* General color definitions */ --btcpay-brand-light: #B498FF; - --btcpay-brand-medium: #885df8; + --btcpay-brand-medium: #8064ef; --btcpay-brand-dark: #321a6e; --btcpay-brand-darker: #19154B; --btcpay-brand-darkest: #02000C; @@ -12,40 +13,42 @@ --btcpay-color-neutral-200: #DCD7FC; --btcpay-color-neutral-300: #CDC6F3; --btcpay-color-neutral-400: #AEA7D7; - --btcpay-color-neutral-500: #8a85a8; + --btcpay-color-neutral-500: #7a72a0; --btcpay-color-neutral-600: #8880ad; --btcpay-color-neutral-700: #49308b; --btcpay-color-neutral-800: #181334; --btcpay-color-neutral-900: #100d20; - --btcpay-color-primary: var(--btcpay-brand-medium); - --btcpay-color-primary-accent: var(--btcpay-brand-light); - --btcpay-color-primary-backdrop: rgba(73, 48, 139, .25); + /* Color definitions for specific purposes - map the general colors or define additional ones */ + --btcpay-color-primary: var(--btcpay-brand-medium); /* Usage: Text color */ + --btcpay-color-primary-backdrop: #baa4fd; /* Usage: Backgrounds, borders, shadows */ + --btcpay-color-primary-accent: #4b3bc0; /* Usage: Background on Focus/Hover */ --btcpay-color-secondary: var(--btcpay-color-neutral-600); - --btcpay-color-secondary-accent: var(--btcpay-color-neutral-800); - --btcpay-color-secondary-backdrop: #c3c5cb; - --btcpay-color-success: #60C8CE; - --btcpay-color-success-accent: #147073; - --btcpay-color-success-backdrop: #8EF7FF; - --btcpay-color-info: #17a2b8; - --btcpay-color-info-accent: #117a8b; - --btcpay-color-info-backdrop: rgba(58, 176, 195, 0.25); - --btcpay-color-warning: #ffc107; - --btcpay-color-warning-accent: #d39e00; - --btcpay-color-warning-backdrop: rgba(222, 170, 12, 0.25); - --btcpay-color-danger: #dc3545; - --btcpay-color-danger-accent: #bd2130; + --btcpay-color-secondary-backdrop: var(--btcpay-color-neutral-100); + --btcpay-color-secondary-accent: var(--btcpay-color-neutral-500); + --btcpay-color-success: #25933d; + --btcpay-color-success-backdrop: #c3e6cb; + --btcpay-color-success-accent: #137929; + --btcpay-color-info: #0698c9; + --btcpay-color-info-backdrop: #c0eefe; + --btcpay-color-info-accent: #0698c9; + --btcpay-color-warning: #e5ac00; + --btcpay-color-warning-backdrop: #ffeeba; + --btcpay-color-warning-accent: #e5ac00; + --btcpay-color-danger: #bd2130; --btcpay-color-danger-backdrop: #EDA1B0; - --btcpay-color-light: var(--btcpay-color-neutral-100); - --btcpay-color-light-accent: #dae0e5; - --btcpay-color-light-backdrop: rgba(216, 217, 219, 0.25); - --btcpay-color-dark: var(--btcpay-color-neutral-900); - --btcpay-color-dark-accent: #060217; - --btcpay-color-dark-backdrop: rgba(82, 88, 93, 0.85); + --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); + /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-bg-body: var(--btcpay-brand-darkest); --btcpay-bg-dark: var(--btcpay-brand-darker); - --btcpay-bg-tile: var(--btcpay-color-primary-backdrop); + --btcpay-bg-tile: var(--btcpay-brand-dark); --btcpay-bg-cta: var(--btcpay-brand-dark); --btcpay-body-color: var(--btcpay-color-neutral-100); @@ -55,7 +58,6 @@ --btcpay-section-heading-text-align: left; --btcpay-nav-color-link-accent: var(--btcpay-color-neutral-100); - --btcpay-nav-color-link-active: var(--btcpay-color-white); --btcpay-header-bg: var(--btcpay-brand-darker); --btcpay-footer-bg: var(--btcpay-brand-darkest); diff --git a/BTCPayServer/wwwroot/css/themes/classic.css b/BTCPayServer/wwwroot/css/themes/classic.css index 86d72e0d7..7db5c4cb3 100644 --- a/BTCPayServer/wwwroot/css/themes/classic.css +++ b/BTCPayServer/wwwroot/css/themes/classic.css @@ -1,10 +1,13 @@ :root { - --btcpay-brand-light: #CEDC21; - --btcpay-brand-medium: #51B13E; - --btcpay-brand-dark: #137547; + /* General color definitions */ + --btcpay-brand-light: #CEDC21; + --btcpay-brand-medium: #51B13E; + --btcpay-brand-dark: #137547; + --btcpay-brand-darker: #0F3B21; + --btcpay-brand-darkest: #05120a; - --btcpay-color-white: #fff; - --btcpay-color-black: #000; + --btcpay-color-white: #fff; + --btcpay-color-black: #000; --btcpay-color-neutral-100: #f8f9fa; --btcpay-color-neutral-200: #e9ecef; @@ -16,33 +19,35 @@ --btcpay-color-neutral-800: #343a40; --btcpay-color-neutral-900: #212529; + /* Color definitions for specific purposes - map the general colors or define additional ones */ --btcpay-color-primary: #329f80; - --btcpay-color-primary-accent: #267861; --btcpay-color-primary-backdrop: rgba(81, 173, 147, 0.25); + --btcpay-color-primary-accent: #267861; --btcpay-color-secondary: var(--btcpay-color-neutral-600); - --btcpay-color-secondary-accent: var(--btcpay-color-neutral-800); --btcpay-color-secondary-backdrop: rgba(130, 138, 145, 0.25); + --btcpay-color-secondary-accent: var(--btcpay-color-neutral-800); --btcpay-color-success: #329f80; - --btcpay-color-success-accent: #1e7e34; --btcpay-color-success-backdrop: rgba(72, 180, 97, 0.25); + --btcpay-color-success-accent: #1e7e34; --btcpay-color-info: #17a2b8; - --btcpay-color-info-accent: #117a8b; --btcpay-color-info-backdrop: rgba(58, 176, 195, 0.25); + --btcpay-color-info-accent: #117a8b; --btcpay-color-warning: #ffc107; + --btcpay-color-warning-backdrop: #fff3cd; --btcpay-color-warning-accent: #d39e00; - --btcpay-color-warning-backdrop: rgba(2 22, 170, 12, 0.25); --btcpay-color-danger: #dc3545; - --btcpay-color-danger-accent: #bd2130; --btcpay-color-danger-backdrop: rgba(225, 83, 97, 0.25); - --btcpay-color-light: var(--btcpay-color-neutral-100); - --btcpay-color-light-accent: #dae0e5; - --btcpay-color-light-backdrop: rgba(216, 217, 219, 0.25); - --btcpay-color-dark: #0F3B21; - --btcpay-color-dark-accent: #05120a; - --btcpay-color-dark-backdrop: rgba(51, 88, 66, 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); + /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-bg-body: var(--btcpay-color-neutral-100); - --btcpay-bg-dark: var(--btcpay-color-dark); + --btcpay-bg-dark: var(--btcpay-brand-darker); --btcpay-bg-tile: var(--btcpay-color-white); --btcpay-bg-cta: var(--btcpay-bg-dark);