aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2026-01-10 01:24:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updates from design system (#1519)

Browse Source 
* Use variable names as defined in the design system

* Use bootstrao version from design system
This commit is contained in:
Dennis Reimann
2020-04-28 17:48:55 +02:00
committed by GitHub
parent 519f4af867
commit 2841cd8498
5 changed files with 93 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
BTCPayServer/wwwroot/main/bootstrap/bootstrap.css vendored
View File

@@ -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; }

22
BTCPayServer/wwwroot/main/themes/casa.css
View File

@@ -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);

10
BTCPayServer/wwwroot/main/themes/classic.css
View File

@@ -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);

16
BTCPayServer/wwwroot/main/themes/default-dark.css
View File

@@ -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 {

79
BTCPayServer/wwwroot/main/themes/default.css
View File

@@ -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;