diff --git a/BTCPayServer/wwwroot/css/bootstrap.css b/BTCPayServer/wwwroot/css/bootstrap.css index c1bf9f810..143d77df4 100644 --- a/BTCPayServer/wwwroot/css/bootstrap.css +++ b/BTCPayServer/wwwroot/css/bootstrap.css @@ -390,7 +390,7 @@ mark, code { font-size: 87.5%; - color: var(--btcpay-color-pink); + color: var(--btcpay-color-info); word-break: break-word; } a > code { color: inherit; } diff --git a/BTCPayServer/wwwroot/css/site.css b/BTCPayServer/wwwroot/css/site.css index 568af150f..0c8ffc162 100644 --- a/BTCPayServer/wwwroot/css/site.css +++ b/BTCPayServer/wwwroot/css/site.css @@ -1,4 +1,5 @@ -html { +/* General and site-wide Bootstrap modifications */ +html { position: relative; min-height: 100%; } @@ -15,89 +16,8 @@ overflow: hidden; } - -.only-for-js, .input-group-clear { - display: none; -} - -#content { - background: #fff; - border: 1px solid #DFE3E8; - padding: 16px; - border-radius: 4px; -} - -.table { - background: #fff; - border: 1px solid #DFE3E8; - border-radius: 4px; - border-collapse: separate !important; - border-spacing: 0px !important; - margin-top: 16px; - margin-bottom: 16px; -} - -.table thead > tr { - height: 36px; -} - -.table thead th { - border-bottom: none; - border-top: none; - vertical-align: middle; - padding: 4px 12px 4px 12px; -} - -.table tbody tr:hover { - background-color: #f8fafc; -} - -.table tr { - height: 36px; -} - - .table th { - display: table-cell; - padding: 4px 12px 4px 12px; - vertical-align: middle; - } - - .table td { - display: table-cell; - padding: 4px 12px 4px 12px; - text-align: left; - color: #12161B; - font-size: 0.8125rem; - font-weight: 400; - vertical-align: middle; - } - -.removetopborder tr:first-child td { - border-top: none; -} - -.removetopborder tr:first-child th { - border-top: none; -} - -a.nav-link { - color: #66788A; -} - -.nav-pills .nav-link.active { - color: var(--gray-dark); - font-weight: 500; -} - -.nav-pills .nav-link.active, -.nav-pills .show > .nav-link { - color: #66788A; - background-color: #d9f7ef; - border-left: 5px solid var(--primary); - font-weight: 500; -} - -.display-when-ledger-connected { +.only-for-js, +.input-group-clear { display: none; } @@ -115,11 +35,6 @@ a.nav-link { } } -.invoice-details a{ - /* Prevent layout from breaking on hyperlinks with very long URLs as the visible text */ - word-break: break-word; -} - .smMaxWidth { max-width: 150px; } @@ -129,3 +44,32 @@ a.nav-link { max-width: 300px; } } + +a.nav-link { + color: var(--btcpay-color-nav-link, var(--btcpay-color-neutral-600)); + background: var(--btcpay-bg-nav-link, transparent); + transition-duration: .2s; + transition-property: background, color; +} + +a.nav-link:focus, +a.nav-link:hover { + color: var(--btcpay-color-nav-link-hover, var(--btcpay-color-neutral-700)); + background: var(--btcpay-bg-nav-link-hover, transparent); +} + +.nav-pills .nav-link.active, +.nav-pills .show > .nav-link { + color: var(--btcpay-color-nav-link-active, var(--btcpay-color-neutral-900)); + background: var(--btcpay-bg-nav-link-active, var(--btcpay-color-primary-alpha)); + font-weight: 500; +} + +.display-when-ledger-connected { + display: none; +} + +/* Prevent layout from breaking on hyperlinks with very long URLs as the visible text */ +.invoice-details a { + word-break: break-word; +} diff --git a/BTCPayServer/wwwroot/css/themes/classic.css b/BTCPayServer/wwwroot/css/themes/classic.css index a21b681c2..d53fc6a1a 100644 --- a/BTCPayServer/wwwroot/css/themes/classic.css +++ b/BTCPayServer/wwwroot/css/themes/classic.css @@ -21,33 +21,22 @@ --btcpay-color-neutral-800: #343a40; --btcpay-color-neutral-900: #212529; - --btcpay-color-blue: #0069d9; - --btcpay-color-indigo: #6610f2; - --btcpay-color-purple: #6f42c1; - --btcpay-color-pink: #e83e8c; - --btcpay-color-red: #dc3545; - --btcpay-color-orange: #ff6f27; - --btcpay-color-yellow: #ffc107; - --btcpay-color-green: #329f80; - --btcpay-color-teal: #20c997; - --btcpay-color-cyan: #17a2b8; - - --btcpay-color-primary: var(--btcpay-color-green); + --btcpay-color-primary: #329f80; --btcpay-color-primary-dark: #267861; --btcpay-color-primary-alpha: rgba(81, 173, 147, 0.25); --btcpay-color-secondary: var(--btcpay-color-gray-600); --btcpay-color-secondary-dark: var(--btcpay-color-gray-800); --btcpay-color-secondary-alpha: rgba(130, 138, 145, 0.25); - --btcpay-color-success: var(--btcpay-color-green); + --btcpay-color-success: #329f80; --btcpay-color-success-dark: #1e7e34; --btcpay-color-success-alpha: rgba(72, 180, 97, 0.25); - --btcpay-color-info: var(--btcpay-color-cyan); + --btcpay-color-info: #17a2b8; --btcpay-color-info-dark: #117a8b; --btcpay-color-info-alpha: rgba(58, 176, 195, 0.25); - --btcpay-color-warning: var(--btcpay-color-yellow); + --btcpay-color-warning: #ffc107; --btcpay-color-warning-dark: #d39e00; --btcpay-color-warning-alpha: rgba(2 22, 170, 12, 0.25); - --btcpay-color-danger: var(--btcpay-color-red); + --btcpay-color-danger: #dc3545; --btcpay-color-danger-dark: #bd2130; --btcpay-color-danger-alpha: rgba(225, 83, 97, 0.25); --btcpay-color-light: var(--btcpay-color-gray-100); @@ -71,7 +60,52 @@ /* Bootstrap modifications */ html { - font-size: var(--btcpay-font-size-base); } + font-size: var(--btcpay-font-size-base); +} .bg-dark { - background-color: var(--btcpay-bg-dark) !important; } + background-color: var(--btcpay-bg-dark) !important; +} + +.table { + margin: 16px 0; + border: 1px solid var(--btcpay-color-neutral-300); + border-radius: 4px; + border-collapse: separate !important; + border-spacing: 0px !important; +} + +.table thead > tr { + height: 36px; +} + +.table thead th { + border-bottom: none; + border-top: none; +} + +.table tbody tr:hover { + background-color: #f8fafc; +} + +.table tr { + height: 36px; +} + +.table th, +.table td { + display: table-cell; + padding: 4px 12px; + vertical-align: middle; +} + +.table td { + text-align: left; + font-size: 0.8125rem; + font-weight: 400; +} + +.removetopborder tr:first-child th, +.removetopborder tr:first-child td { + border-top: none; +} diff --git a/BTCPayServer/wwwroot/css/themes/modern.css b/BTCPayServer/wwwroot/css/themes/modern.css index 5b6f81b24..490f52fb4 100644 --- a/BTCPayServer/wwwroot/css/themes/modern.css +++ b/BTCPayServer/wwwroot/css/themes/modern.css @@ -21,33 +21,22 @@ --btcpay-color-neutral-800: #343a40; --btcpay-color-neutral-900: #202C39; - --btcpay-color-blue: #0069d9; - --btcpay-color-indigo: #6610f2; - --btcpay-color-purple: #6f42c1; - --btcpay-color-pink: #e83e8c; - --btcpay-color-red: #dc3545; - --btcpay-color-orange: #ff6f27; - --btcpay-color-yellow: #ffc107; - --btcpay-color-green: #329f80; - --btcpay-color-teal: #20c997; - --btcpay-color-cyan: #17a2b8; - - --btcpay-color-primary: var(--btcpay-color-green); + --btcpay-color-primary: #329f80; --btcpay-color-primary-dark: #267861; - --btcpay-color-primary-alpha: rgba(81, 173, 147, 0.25); + --btcpay-color-primary-alpha: rgba(81, 173, 147, 0.2); --btcpay-color-secondary: var(--btcpay-color-gray-600); --btcpay-color-secondary-dark: var(--btcpay-color-gray-800); --btcpay-color-secondary-alpha: rgba(130, 138, 145, 0.25); - --btcpay-color-success: var(--btcpay-color-green); + --btcpay-color-success: #329f80; --btcpay-color-success-dark: #1e7e34; --btcpay-color-success-alpha: rgba(72, 180, 97, 0.25); - --btcpay-color-info: var(--btcpay-color-cyan); + --btcpay-color-info: #17a2b8; --btcpay-color-info-dark: #117a8b; --btcpay-color-info-alpha: rgba(58, 176, 195, 0.25); - --btcpay-color-warning: var(--btcpay-color-yellow); + --btcpay-color-warning: #ffc107; --btcpay-color-warning-dark: #d39e00; - --btcpay-color-warning-alpha: rgba(2 22, 170, 12, 0.25); - --btcpay-color-danger: var(--btcpay-color-red); + --btcpay-color-warning-alpha: rgba(222, 170, 12, 0.25); + --btcpay-color-danger: #dc3545; --btcpay-color-danger-dark: #bd2130; --btcpay-color-danger-alpha: rgba(225, 83, 97, 0.25); --btcpay-color-light: var(--btcpay-color-gray-100); @@ -71,11 +60,21 @@ /* Bootstrap modifications */ html { - font-size: var(--btcpay-font-size-base); } + font-size: var(--btcpay-font-size-base); +} .bg-dark { - background-color: var(--btcpay-bg-dark) !important; } + background-color: var(--btcpay-bg-dark) !important; +} header.masthead::before, .service-box img { filter: hue-rotate(410deg) saturate(33%); } + +.table { + margin: 24px 0 48px; +} + +.table th { + border-top: 0; +}