mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-20 13:34:37 +01:00
Add and update theme colors
This commit is contained in:
parent
8ca0be5a4d
commit
35f47bdfb7
2 changed files with 54 additions and 29 deletions
|
@ -3,30 +3,9 @@
|
|||
/* Dark theme overrides */
|
||||
:root {
|
||||
--btcpay-color-neutral-950: #222222;
|
||||
--btcpay-color-primary-text: var(--btcpay-color-white);
|
||||
--btcpay-color-primary-backdrop: #389725;
|
||||
|
||||
--btcpay-bg-dark: var(--btcpay-color-neutral-950);
|
||||
--btcpay-header-bg: var(--btcpay-bg-dark);
|
||||
--btcpay-header-color-link-active: var(--btcpay-color-primary);
|
||||
|
||||
--btcpay-body-bg: var(--btcpay-color-neutral-900);
|
||||
--btcpay-body-color: var(--btcpay-color-white);
|
||||
|
||||
--btcpay-wizard-bg: var(--btcpay-body-bg);
|
||||
--btcpay-wizard-color: var(--btcpay-body-color);
|
||||
|
||||
--btcpay-footer-bg: var(--btcpay-bg-dark);
|
||||
--btcpay-footer-color: var(--btcpay-color-neutral-600);
|
||||
|
||||
--btcpay-nav-color-link: var(--btcpay-color-neutral-500);
|
||||
--btcpay-nav-color-link-accent: var(--btcpay-color-neutral-300);
|
||||
--btcpay-nav-color-link-active: var(--btcpay-color-white);
|
||||
|
||||
--btcpay-bg-tile: var(--btcpay-bg-dark);
|
||||
|
||||
--btcpay-border-color-light: var(--btcpay-color-neutral-600);
|
||||
--btcpay-border-color-medium: var(--btcpay-color-neutral-700);
|
||||
|
||||
--btcpay-color-secondary-accent: var(--btcpay-color-neutral-300);
|
||||
--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);
|
||||
|
@ -35,6 +14,39 @@
|
|||
--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-bg-dark: var(--btcpay-color-neutral-950);
|
||||
--btcpay-bg-tile: var(--btcpay-bg-dark);
|
||||
|
||||
--btcpay-body-bg: var(--btcpay-color-neutral-900);
|
||||
--btcpay-body-color: var(--btcpay-color-white);
|
||||
--btcpay-body-color-link: var(--btcpay-color-primary);
|
||||
--btcpay-body-color-link-accent: var(--btcpay-color-primary);
|
||||
|
||||
--btcpay-header-bg: var(--btcpay-bg-dark);
|
||||
--btcpay-header-color: var(--btcpay-body-color);
|
||||
--btcpay-header-color-link: var(--btcpay-header-color);
|
||||
--btcpay-header-color-link-accent: var(--btcpay-header-color);
|
||||
--btcpay-header-color-link-active: var(--btcpay-color-primary);
|
||||
|
||||
--btcpay-wizard-bg: var(--btcpay-body-bg);
|
||||
--btcpay-wizard-color: var(--btcpay-body-color);
|
||||
|
||||
--btcpay-nav-color-link: var(--btcpay-color-neutral-500);
|
||||
--btcpay-nav-color-link-accent: var(--btcpay-color-neutral-300);
|
||||
--btcpay-nav-color-link-active: var(--btcpay-color-white);
|
||||
|
||||
--btcpay-footer-bg: var(--btcpay-bg-dark);
|
||||
--btcpay-footer-color: var(--btcpay-color-neutral-600);
|
||||
--btcpay-footer-color-link: var(--btcpay-color-neutral-600);
|
||||
--btcpay-footer-color-link-accent: var(--btcpay-color-neutral-300);
|
||||
|
||||
--btcpay-code-bg: var(--btcpay-bg-dark);
|
||||
|
||||
--btcpay-bg-color-light: var(--btcpay-color-neutral-800);
|
||||
--btcpay-bg-color-medium: var(--btcpay-color-neutral-700);
|
||||
--btcpay-border-color-light: var(--btcpay-color-neutral-600);
|
||||
--btcpay-border-color-medium: var(--btcpay-color-neutral-700);
|
||||
}
|
||||
|
||||
.social-logo {
|
||||
|
|
|
@ -53,13 +53,10 @@
|
|||
--btcpay-color-dark-text: var(--btcpay-color-neutral-200);
|
||||
|
||||
/* Color definitions for specific sections - try to reuse colors defined above */
|
||||
--btcpay-bg-dark: var(--btcpay-brand-dark);
|
||||
--btcpay-bg-tile: var(--btcpay-color-white);
|
||||
--btcpay-bg-dark: var(--btcpay-brand-dark);
|
||||
--btcpay-bg-cta: var(--btcpay-brand-dark);
|
||||
|
||||
--btcpay-border-color-light: var(--btcpay-color-neutral-200);
|
||||
--btcpay-border-color-medium: var(--btcpay-color-neutral-300);
|
||||
|
||||
--btcpay-body-bg: var(--btcpay-color-neutral-100);
|
||||
--btcpay-body-color: var(--btcpay-color-neutral-900);
|
||||
--btcpay-body-color-link: var(--btcpay-color-primary);
|
||||
|
@ -67,15 +64,31 @@
|
|||
|
||||
--btcpay-header-bg: var(--btcpay-color-white);
|
||||
--btcpay-header-color: var(--btcpay-body-color);
|
||||
--btcpay-header-color-link: var(--btcpay-body-color);
|
||||
--btcpay-header-color-link-accent: var(--btcpay-color-primary);
|
||||
--btcpay-header-color-link: var(--btcpay-header-color);
|
||||
--btcpay-header-color-link-accent: var(--btcpay-header-color);
|
||||
--btcpay-header-color-link-active: var(--btcpay-color-primary-accent);
|
||||
|
||||
--btcpay-nav-color-link: var(--btcpay-color-neutral-600);
|
||||
--btcpay-nav-color-link-accent: var(--btcpay-color-neutral-700);
|
||||
--btcpay-nav-color-link-active: var(--btcpay-color-neutral-900);
|
||||
|
||||
--btcpay-wizard-bg: var(--btcpay-color-white);
|
||||
--btcpay-wizard-color: var(--btcpay-body-color);
|
||||
|
||||
--btcpay-footer-bg: var(--btcpay-brand-dark);
|
||||
--btcpay-footer-color: var(--btcpay-color-neutral-400);
|
||||
--btcpay-footer-color-link: var(--btcpay-color-neutral-400);
|
||||
--btcpay-footer-color-link-accent: var(--btcpay-color-neutral-100);
|
||||
|
||||
--btcpay-code-color: var(--btcpay-body-color);
|
||||
--btcpay-code-bg: var(--btcpay-color-neutral-200);
|
||||
--btcpay-pre-color: var(--btcpay-color-white);
|
||||
--btcpay-pre-bg: var(--btcpay-color-neutral-950);
|
||||
|
||||
--btcpay-bg-color-light: var(--btcpay-color-white);
|
||||
--btcpay-bg-color-medium: var(--btcpay-color-neutral-300);
|
||||
--btcpay-border-color-light: var(--btcpay-color-neutral-200);
|
||||
--btcpay-border-color-medium: var(--btcpay-color-neutral-300);
|
||||
|
||||
--btcpay-font-size-base: 14px;
|
||||
--btcpay-font-family-head: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
|
|
Loading…
Add table
Reference in a new issue