From 2841cd84987c1da0bfea1aba436822690764f5b3 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Tue, 28 Apr 2020 17:48:55 +0200 Subject: [PATCH] Updates from design system (#1519) * Use variable names as defined in the design system * Use bootstrao version from design system --- .../wwwroot/main/bootstrap/bootstrap.css | 53 +++++++------ BTCPayServer/wwwroot/main/themes/casa.css | 22 +++--- BTCPayServer/wwwroot/main/themes/classic.css | 10 +-- .../wwwroot/main/themes/default-dark.css | 16 ++-- BTCPayServer/wwwroot/main/themes/default.css | 79 +++++++++---------- 5 files changed, 93 insertions(+), 87 deletions(-) diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index afc94d3b7..aecd11f10 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css @@ -1,15 +1,8 @@ -/* MODIFIED BOOTSTRAP 4 +/* MODIFIED BOOTSTRAP 4 – Custom BTCPay Server version. + * * This file overrides the bootstrap variables with CSS custom properties * that get defined in the root.scss file. Every variable we want to edit * we need to set to a `--btcpay-` custom property and set it in the root. - * - * The update_generated_bootstrap_css.js script replaces the colors in the - * resulting Bootstrap build that need to be actual color values to work - * with the modifier functions. - */ -/* - * Skip the _root import -> we generate a separate file from that, so that we can - * easily swap the variables and have separate files for separate themes. */ *, *::before, @@ -3327,60 +3320,60 @@ input[type="button"].btn-block { border-radius: 10rem; } .badge-primary { - color: var(--btcpay-color-primary-text); + color: var(--btcpay-color-white); background-color: var(--btcpay-color-primary); } a.badge-primary:hover, a.badge-primary:focus { - color: var(--btcpay-color-primary-text); + color: var(--btcpay-color-white); 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-secondary-text); + color: var(--btcpay-color-white); background-color: var(--btcpay-color-secondary); } a.badge-secondary:hover, a.badge-secondary:focus { - color: var(--btcpay-color-secondary-text); + color: var(--btcpay-color-white); 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-success-text); + color: var(--btcpay-color-white); background-color: var(--btcpay-color-success); } a.badge-success:hover, a.badge-success:focus { - color: var(--btcpay-color-success-text); + color: var(--btcpay-color-white); 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-info-text); + color: var(--btcpay-color-white); background-color: var(--btcpay-color-info); } a.badge-info:hover, a.badge-info:focus { - color: var(--btcpay-color-info-text); + color: var(--btcpay-color-white); 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-warning-text); + color: var(--btcpay-color-neutral-900); background-color: var(--btcpay-color-warning); } a.badge-warning:hover, a.badge-warning:focus { - color: var(--btcpay-color-warning-text); + color: var(--btcpay-color-neutral-900); 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-danger-text); + color: var(--btcpay-color-white); background-color: var(--btcpay-color-danger); } a.badge-danger:hover, a.badge-danger:focus { - color: var(--btcpay-color-danger-text); + color: var(--btcpay-color-white); background-color: var(--btcpay-color-danger-accent); } a.badge-danger:focus, a.badge-danger.focus { outline: 0;s @@ -3388,7 +3381,7 @@ input[type="button"].btn-block { .badge-light { color: var(--btcpay-color-light-text); - background-color: var(--btcpay-color-light-backdrop); } + background-color: var(--btcpay-color-light); } a.badge-light:hover, a.badge-light:focus { color: var(--btcpay-color-light-text); background-color: var(--btcpay-color-light-accent); } @@ -3398,7 +3391,7 @@ input[type="button"].btn-block { .badge-dark { color: var(--btcpay-color-dark-text); - background-color: var(--btcpay-color-dark-backdrop); } + background-color: var(--btcpay-color-dark); } a.badge-dark:hover, a.badge-dark:focus { color: var(--btcpay-color-dark-text); background-color: var(--btcpay-color-dark-accent); } @@ -3487,6 +3480,20 @@ input[type="button"].btn-block { .alert-danger hr { border-top-color: var(--btcpay-color-danger-accent); } +.alert-light { + color: var(--btcpay-color-light-text, var(--btcpay-color-dark)); + background-color: var(--btcpay-color-light-backdrop); + border-color: var(--btcpay-color-light-backdrop); } + .alert-light hr { + border-top-color: var(--btcpay-color-light-accent); } + +.alert-dark { + color: var(--btcpay-color-dark-text, var(--btcpay-color-light)); + background-color: var(--btcpay-color-dark-backdrop); + border-color: var(--btcpay-color-dark-backdrop); } + .alert-dark hr { + border-top-color: var(--btcpay-color-dark-accent); } + @keyframes progress-bar-stripes { from { background-position: 1rem 0; } diff --git a/BTCPayServer/wwwroot/main/themes/casa.css b/BTCPayServer/wwwroot/main/themes/casa.css index a0e74b365..d847e5de9 100644 --- a/BTCPayServer/wwwroot/main/themes/casa.css +++ b/BTCPayServer/wwwroot/main/themes/casa.css @@ -1,14 +1,14 @@ :root { /* General color definitions */ - --btcpay-brand-light: #B498FF; - --btcpay-brand-medium: #8064ef; - --btcpay-brand-dark: #321a6e; - --btcpay-brand-darker: #19154B; + --btcpay-brand-light: #B498FF; + --btcpay-brand-secondary: #8064ef; + --btcpay-brand-tertiary: #321a6e; + --btcpay-brand-dark: #19154B; --btcpay-brand-darkest: #02000C; /* Color definitions for specific purposes - map the general colors or define additional ones */ - --btcpay-color-white: #fff; - --btcpay-color-black: #000; + --btcpay-color-white: #fff; + --btcpay-color-black: #000; --btcpay-color-neutral-100: #F3F1FF; --btcpay-color-neutral-200: #DCD7FC; @@ -20,7 +20,7 @@ --btcpay-color-neutral-800: #181334; --btcpay-color-neutral-900: #100d20; - --btcpay-color-primary: var(--btcpay-brand-medium); + --btcpay-color-primary: var(--btcpay-brand-secondary); --btcpay-color-primary-backdrop: #baa4fd; --btcpay-color-primary-accent: #4b3bc0; --btcpay-color-primary-text: #4b3bc0; @@ -55,9 +55,9 @@ /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-body-bg: var(--btcpay-brand-darkest); - --btcpay-bg-dark: var(--btcpay-brand-darker); - --btcpay-bg-tile: var(--btcpay-brand-dark); - --btcpay-bg-cta: var(--btcpay-brand-dark); + --btcpay-bg-dark: var(--btcpay-brand-dark); + --btcpay-bg-tile: var(--btcpay-brand-tertiary); + --btcpay-bg-cta: var(--btcpay-brand-tertiary); --btcpay-body-color: var(--btcpay-color-neutral-100); --btcpay-body-color-link: var(--btcpay-color-primary); @@ -65,7 +65,7 @@ --btcpay-nav-color-link-accent: var(--btcpay-color-neutral-100); - --btcpay-header-bg: var(--btcpay-brand-darker); + --btcpay-header-bg: var(--btcpay-brand-dark); --btcpay-footer-bg: var(--btcpay-brand-darkest); --btcpay-footer-color: var(--btcpay-color-neutral-600); diff --git a/BTCPayServer/wwwroot/main/themes/classic.css b/BTCPayServer/wwwroot/main/themes/classic.css index 7d02356e4..c8a6ff71b 100644 --- a/BTCPayServer/wwwroot/main/themes/classic.css +++ b/BTCPayServer/wwwroot/main/themes/classic.css @@ -1,9 +1,9 @@ :root { /* General color definitions */ - --btcpay-brand-light: #CEDC21; - --btcpay-brand-medium: #51B13E; - --btcpay-brand-dark: #137547; - --btcpay-brand-darker: #0F3B21; + --btcpay-brand-light: #CEDC21; + --btcpay-brand-secondary: #51B13E; + --btcpay-brand-tertiary: #137547; + --btcpay-brand-dark: #0F3B21; --btcpay-brand-darkest: #05120a; /* Color definitions for specific purposes - map the general colors or define additional ones */ @@ -55,7 +55,7 @@ /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-body-bg: var(--btcpay-color-neutral-100); - --btcpay-bg-dark: var(--btcpay-brand-darker); + --btcpay-bg-dark: var(--btcpay-brand-dark); --btcpay-bg-tile: var(--btcpay-color-white); --btcpay-bg-cta: var(--btcpay-bg-dark); diff --git a/BTCPayServer/wwwroot/main/themes/default-dark.css b/BTCPayServer/wwwroot/main/themes/default-dark.css index 844a427ea..c56ca8ebd 100644 --- a/BTCPayServer/wwwroot/main/themes/default-dark.css +++ b/BTCPayServer/wwwroot/main/themes/default-dark.css @@ -21,14 +21,14 @@ --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); + --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 7aaeccce6..f12fd581a 100644 --- a/BTCPayServer/wwwroot/main/themes/default.css +++ b/BTCPayServer/wwwroot/main/themes/default.css @@ -1,9 +1,9 @@ :root { /* General color definitions */ - --btcpay-brand-light: #CEDC21; - --btcpay-brand-medium: #51B13E; - --btcpay-brand-dark: #1E7A44; - --btcpay-brand-darker: #0F3B21; + --btcpay-brand-primary: #51b13e; + --btcpay-brand-secondary: #CEDC21; + --btcpay-brand-tertiary: #1e7a44; + --btcpay-brand-dark: #0F3B21; /* Color definitions for specific purposes - map the general colors or define additional ones */ --btcpay-color-white: #fff; @@ -19,45 +19,44 @@ --btcpay-color-neutral-800: #343a40; --btcpay-color-neutral-900: #292929; - --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-500); - --btcpay-color-secondary-backdrop: #C5CACC; - --btcpay-color-secondary-accent: var(--btcpay-color-neutral-700); - --btcpay-color-secondary-text: var(--btcpay-color-neutral-700); - - --btcpay-color-success: #247e12; - --btcpay-color-success-backdrop: #389725; - --btcpay-color-success-accent: var(--btcpay-brand-dark); - --btcpay-color-success-text: var(--btcpay-color-white); - --btcpay-color-info: #17a2b8; - --btcpay-color-info-backdrop: #C8E7ED; - --btcpay-color-info-accent: #117a8b; - --btcpay-color-info-text: #117a8b; - --btcpay-color-warning: #ffc107; - --btcpay-color-warning-backdrop: #ffc107; - --btcpay-color-warning-accent: #d39e00; - --btcpay-color-warning-text: var(--btcpay-color-neutral-900); - --btcpay-color-danger: #c12c1a; - --btcpay-color-danger-backdrop: #E85442; - --btcpay-color-danger-accent: #a71705; - --btcpay-color-danger-text: var(--btcpay-color-white); - --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-400); - --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-black); - --btcpay-color-dark-text: var(--btcpay-color-neutral-200); + --btcpay-color-primary: var(--btcpay-brand-primary); + --btcpay-color-primary-accent: var(--btcpay-brand-tertiary); + --btcpay-color-primary-backdrop: #D2E5CF; + --btcpay-color-primary-text: var(--btcpay-color-neutral-900); + --btcpay-color-secondary: var(--btcpay-color-neutral-500); + --btcpay-color-secondary-accent: var(--btcpay-color-neutral-700); + --btcpay-color-secondary-backdrop: var(--btcpay-color-neutral-400); + --btcpay-color-secondary-text: var(--btcpay-color-neutral-700); + --btcpay-color-success: #247e12; + --btcpay-color-success-accent: var(--btcpay-brand-tertiary); + --btcpay-color-success-backdrop: #389725; + --btcpay-color-success-text: var(--btcpay-color-white); + --btcpay-color-info: #17a2b8; + --btcpay-color-info-accent: #117a8b; + --btcpay-color-info-backdrop: #C8E7ED; + --btcpay-color-info-text: var(--btcpay-color-info-accent); + --btcpay-color-warning: #ffc107; + --btcpay-color-warning-accent: #d39e00; + --btcpay-color-warning-backdrop: #ffc107; + --btcpay-color-warning-text: var(--btcpay-color-neutral-900); + --btcpay-color-danger: #c12c1a; + --btcpay-color-danger-accent: #a71705; + --btcpay-color-danger-backdrop: #E85442; + --btcpay-color-danger-text: var(--btcpay-color-white); + --btcpay-color-light: var(--btcpay-color-neutral-200); + --btcpay-color-light-accent: var(--btcpay-color-neutral-400); + --btcpay-color-light-backdrop: var(--btcpay-color-neutral-200); + --btcpay-color-light-text: var(--btcpay-color-neutral-800); + --btcpay-color-dark: var(--btcpay-color-neutral-800); + --btcpay-color-dark-accent: var(--btcpay-color-black); + --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-800); + --btcpay-color-dark-text: var(--btcpay-color-neutral-200); /* Color definitions for specific sections - try to reuse colors defined above */ --btcpay-body-bg: var(--btcpay-color-neutral-100); - --btcpay-bg-dark: var(--btcpay-brand-darker); + --btcpay-bg-dark: var(--btcpay-brand-dark); --btcpay-bg-tile: var(--btcpay-color-white); - --btcpay-bg-cta: var(--btcpay-brand-darker); + --btcpay-bg-cta: var(--btcpay-brand-dark); --btcpay-body-color: var(--btcpay-color-neutral-900); --btcpay-body-color-link: var(--btcpay-color-primary); @@ -68,7 +67,7 @@ --btcpay-header-color-link: var(--btcpay-body-color); --btcpay-header-color-link-accent: var(--btcpay-body-color); - --btcpay-footer-bg: var(--btcpay-brand-darker); + --btcpay-footer-bg: var(--btcpay-brand-dark); --btcpay-footer-color: var(--btcpay-color-neutral-400); --btcpay-font-size-base: 14px;