btcpayserver/BTCPayServer/wwwroot/main/themes/default.css
d11n 7348a6a62f
Store Branding: Apply brand color to backend as well (#5992)
* Store Branding: Apply brand color to backend as well

Closes #5990.

* Add adjustments for different theme scenarios

* Add description text

* Make it optional to apply the brand color to the backend

* Toggle color fixes
2024-09-13 21:39:21 +09:00

440 lines
20 KiB
CSS

:root {
--btcpay-border-radius: .25rem;
--btcpay-border-radius-l: .5rem;
--btcpay-border-radius-xl: 1rem;
--btcpay-border-radius-xxl: 1.5rem;
--btcpay-transition-duration-fast: .2s;
--btcpay-transition-duration-default: .3s;
--btcpay-transition-duration-slow: .5s;
--btcpay-brand-primary: #51b13e;
--btcpay-brand-secondary: #CEDC21;
--btcpay-brand-tertiary: #1e7a44;
--btcpay-brand-dark: #0F3B21;
--btcpay-white: #ffffff;
--btcpay-white-rgb: 255, 255, 255;
--btcpay-black: #000000;
--btcpay-black-rgb: 0, 0, 0;
--btcpay-neutral-light-100: #f8f9fa;
--btcpay-neutral-light-100-rgb: 248,249,250;
--btcpay-neutral-light-200: #e9ecef;
--btcpay-neutral-light-200-rgb: 233,236,239;
--btcpay-neutral-light-300: #dee2e6;
--btcpay-neutral-light-300-rgb: 222,226,230;
--btcpay-neutral-light-400: #ced4da;
--btcpay-neutral-light-400-rgb: 206,212,218;
--btcpay-neutral-light-500: #8f979e;
--btcpay-neutral-light-500-rgb: 143,151,158;
--btcpay-neutral-light-600: #6c757d;
--btcpay-neutral-light-600-rgb: 108,117,125;
--btcpay-neutral-light-700: #495057;
--btcpay-neutral-light-700-rgb: 73,80,87;
--btcpay-neutral-light-800: #343a40;
--btcpay-neutral-light-800-rgb: 52,58,64;
--btcpay-neutral-light-900: #292929;
--btcpay-neutral-light-900-rgb: 41,41,41;
--btcpay-neutral-light-rgb: 143,151,158;
--btcpay-neutral-dark-100: #F0F6FC;
--btcpay-neutral-dark-100-rgb: 240,246,252;
--btcpay-neutral-dark-200: #C9D1D9;
--btcpay-neutral-dark-200-rgb: 201,209,217;
--btcpay-neutral-dark-300: #B1BAC4;
--btcpay-neutral-dark-300-rgb: 177,186,196;
--btcpay-neutral-dark-400: #8B949E;
--btcpay-neutral-dark-400-rgb: 139,148,158;
--btcpay-neutral-dark-500: #6E7681;
--btcpay-neutral-dark-500-rgb: 110,118,129;
--btcpay-neutral-dark-600: #484F58;
--btcpay-neutral-dark-600-rgb: 72,79,88;
--btcpay-neutral-dark-700: #30363D;
--btcpay-neutral-dark-700-rgb: 48,54,61;
--btcpay-neutral-dark-800: #21262D;
--btcpay-neutral-dark-800-rgb: 33,38,45;
--btcpay-neutral-dark-900: #161B22;
--btcpay-neutral-dark-900-rgb: 22,27,34;
--btcpay-neutral-dark-rgb: 110,118,129;
--btcpay-primary-100: #c7e6c1;
--btcpay-primary-100-rgb: 199,230,193;
--btcpay-primary-200: #b5dead;
--btcpay-primary-200-rgb: 181,222,173;
--btcpay-primary-300: #9dd392;
--btcpay-primary-300-rgb: 157,211,146;
--btcpay-primary-400: #7cc46e;
--btcpay-primary-400-rgb: 124,196,110;
--btcpay-primary-500: #44a431;
--btcpay-primary-500-rgb: 68,164,49;
--btcpay-primary-600: #389725;
--btcpay-primary-600-rgb: 56,151,37;
--btcpay-primary-700: #2e8a1b;
--btcpay-primary-700-rgb: 46,138,27;
--btcpay-primary-800: #247d12;
--btcpay-primary-800-rgb: 36,125,18;
--btcpay-primary-900: #1c710b;
--btcpay-primary-900-rgb: 28,113,11;
--btcpay-primary-rgb: 68,164,49;
--btcpay-green-100: #EEFAEB;
--btcpay-green-100-rgb: 238,250,235;
--btcpay-green-200: #C7E8C0;
--btcpay-green-200-rgb: 199,232,192;
--btcpay-green-300: #A0D695;
--btcpay-green-300-rgb: 160,214,149;
--btcpay-green-400: #78C369;
--btcpay-green-400-rgb: 120,195,105;
--btcpay-green-500: #51B13E;
--btcpay-green-500-rgb: 81,177,62;
--btcpay-green-600: #419437;
--btcpay-green-600-rgb: 65,148,55;
--btcpay-green-700: #307630;
--btcpay-green-700-rgb: 48,118,48;
--btcpay-green-800: #205928;
--btcpay-green-800-rgb: 32,89,40;
--btcpay-green-900: #0F3B21;
--btcpay-green-900-rgb: 15,59,33;
--btcpay-green-rgb: 81,177,62;
--btcpay-blue-100: #b5e1e8;
--btcpay-blue-100-rgb: 181,225,232;
--btcpay-blue-200: #9dd7e1;
--btcpay-blue-200-rgb: 157,215,225;
--btcpay-blue-300: #7ccad7;
--btcpay-blue-300-rgb: 124,202,215;
--btcpay-blue-400: #51b9c9;
--btcpay-blue-400-rgb: 81,185,201;
--btcpay-blue-500: #17a2b8;
--btcpay-blue-500-rgb: 23,162,184;
--btcpay-blue-600: #03899e;
--btcpay-blue-600-rgb: 3,137,158;
--btcpay-blue-700: #007d91;
--btcpay-blue-700-rgb: 0,125,145;
--btcpay-blue-800: #007284;
--btcpay-blue-800-rgb: 0,114,132;
--btcpay-blue-900: #006778;
--btcpay-blue-900-rgb: 0,103,120;
--btcpay-blue-rgb: 23,162,184;
--btcpay-yellow-100: #FFFAF0;
--btcpay-yellow-100-rgb: 255,250,240;
--btcpay-yellow-200: #FFF2D9;
--btcpay-yellow-200-rgb: 255,242,217;
--btcpay-yellow-300: #FFE3AC;
--btcpay-yellow-300-rgb: 255,227,172;
--btcpay-yellow-400: #FFCF70;
--btcpay-yellow-400-rgb: 255,207,112;
--btcpay-yellow-500: #FFC043;
--btcpay-yellow-500-rgb: 255,192,67;
--btcpay-yellow-600: #B57E12;
--btcpay-yellow-600-rgb: 181,126,18;
--btcpay-yellow-700: #997328;
--btcpay-yellow-700-rgb: 153,115,40;
--btcpay-yellow-800: #674D1B;
--btcpay-yellow-800-rgb: 103,77,27;
--btcpay-yellow-900: #543D10;
--btcpay-yellow-900-rgb: 84,61,16;
--btcpay-yellow-rgb: 255,192,67;
--btcpay-red-100: #FFEFED;
--btcpay-red-100-rgb: 255,239,237;
--btcpay-red-200: #FED7D2;
--btcpay-red-200-rgb: 254,215,210;
--btcpay-red-300: #F1998E;
--btcpay-red-300-rgb: 241,153,142;
--btcpay-red-400: #E85C4A;
--btcpay-red-400-rgb: 232,92,74;
--btcpay-red-500: #E11900;
--btcpay-red-500-rgb: 225,25,0;
--btcpay-red-600: #AB1300;
--btcpay-red-600-rgb: 171,19,0;
--btcpay-red-700: #870F00;
--btcpay-red-700-rgb: 135,15,0;
--btcpay-red-800: #5A0A00;
--btcpay-red-800-rgb: 90,10,0;
--btcpay-red-900: #420105;
--btcpay-red-900-rgb: 66,1,5;
--btcpay-red-rgb: 225,25,0;
--btcpay-space-xs: 4px;
--btcpay-space-s: 8px;
--btcpay-space-m: 16px;
--btcpay-space-l: 32px;
--btcpay-space-xl: 64px;
--btcpay-space-xxl: 80px;
--btcpay-font-family-base: "Open Sans", "Helvetica Neue", Arial, sans-serif;
--btcpay-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--btcpay-font-size-xs: 10px;
--btcpay-font-size-s: 12px;
--btcpay-font-size-m: 14px;
--btcpay-font-size-l: 20px;
--btcpay-font-size-xl: 28px;
--btcpay-font-size-xxl: 36px;
--btcpay-font-weight-normal: 400;
--btcpay-font-weight-semibold: 600;
--btcpay-font-weight-bold: 700;
--btcpay-neutral-100: var(--btcpay-neutral-light-100);
--btcpay-neutral-200: var(--btcpay-neutral-light-200);
--btcpay-neutral-300: var(--btcpay-neutral-light-300);
--btcpay-neutral-400: var(--btcpay-neutral-light-400);
--btcpay-neutral-500: var(--btcpay-neutral-light-500);
--btcpay-neutral-600: var(--btcpay-neutral-light-600);
--btcpay-neutral-700: var(--btcpay-neutral-light-700);
--btcpay-neutral-800: var(--btcpay-neutral-light-800);
--btcpay-neutral-900: var(--btcpay-neutral-light-900);
--btcpay-font-size-base: var(--btcpay-font-size-m);
--btcpay-bg-tile: var(--btcpay-white);
--btcpay-bg-dark: var(--btcpay-brand-dark);
--btcpay-body-bg: rgb(var(--btcpay-body-bg-rgb));
--btcpay-body-bg-light: var(--btcpay-white);
--btcpay-body-bg-medium: var(--btcpay-neutral-200);
--btcpay-body-bg-striped: var(--btcpay-neutral-200);
--btcpay-body-bg-hover: var(--btcpay-white);
--btcpay-body-bg-active: var(--btcpay-primary);
--btcpay-body-bg-rgb: 248, 249, 250;
--btcpay-body-border-light: var(--btcpay-neutral-200);
--btcpay-body-border-medium: var(--btcpay-neutral-300);
--btcpay-body-text: var(--btcpay-neutral-900);
--btcpay-body-text-striped: var(--btcpay-body-text);
--btcpay-body-text-hover: var(--btcpay-body-text);
--btcpay-body-text-active: var(--btcpay-primary-text-active);
--btcpay-body-text-muted: var(--btcpay-neutral-500);
--btcpay-body-text-warning-rgb: 181, 126, 18;
--btcpay-body-text-rgb: 41, 41, 41;
--btcpay-body-link: var(--btcpay-primary);
--btcpay-body-link-rgb: var(--btcpay-primary-rgb);
--btcpay-body-link-accent: var(--btcpay-primary-accent);
--btcpay-body-link-accent-rgb: 30, 122, 68;
--btcpay-body-shadow: rgba(25, 135, 84, 0.33);
--btcpay-wizard-bg: var(--btcpay-body-bg);
--btcpay-wizard-text: var(--btcpay-body-text);
--btcpay-header-bg: var(--btcpay-white);
--btcpay-header-text: var(--btcpay-body-text);
--btcpay-header-link: var(--btcpay-header-text);
--btcpay-header-link-accent: var(--btcpay-primary);
--btcpay-header-link-active: var(--btcpay-primary);
--btcpay-nav-link: var(--btcpay-neutral-600);
--btcpay-nav-link-accent: var(--btcpay-neutral-700);
--btcpay-nav-link-active: var(--btcpay-neutral-900);
--btcpay-nav-bg: transparent;
--btcpay-nav-bg-hover: transparent;
--btcpay-nav-bg-active: transparent;
--btcpay-nav-border: transparent;
--btcpay-nav-border-hover: transparent;
--btcpay-nav-border-active: var(--btcpay-primary);
--btcpay-form-bg: var(--btcpay-white);
--btcpay-form-bg-hover: var(--btcpay-form-bg);
--btcpay-form-bg-addon: var(--btcpay-neutral-300);
--btcpay-form-bg-disabled: var(--btcpay-neutral-200);
--btcpay-form-text: var(--btcpay-neutral-900);
--btcpay-form-text-label: var(--btcpay-neutral-700);
--btcpay-form-text-addon: var(--btcpay-neutral-700);
--btcpay-form-border: var(--btcpay-neutral-300);
--btcpay-form-border-check: var(--btcpay-neutral-400);
--btcpay-form-border-hover: var(--btcpay-primary);
--btcpay-form-border-focus: var(--btcpay-primary);
--btcpay-form-border-active: var(--btcpay-form-border);
--btcpay-form-border-disabled: var(--btcpay-form-border);
--btcpay-form-shadow-size: 2px;
--btcpay-form-shadow-focus: var(--btcpay-primary-shadow);
--btcpay-form-shadow-valid: var(--btcpay-success-shadow);
--btcpay-form-shadow-invalid: var(--btcpay-danger-shadow);
--btcpay-toggle-bg: var(--btcpay-neutral-500);
--btcpay-toggle-bg-hover: var(--btcpay-primary-bg-hover);
--btcpay-toggle-bg-active: var(--btcpay-primary);
--btcpay-toggle-bg-active-hover: var(--btcpay-primary-bg-active);
--btcpay-footer-bg: var(--btcpay-body-bg);
--btcpay-footer-text: var(--btcpay-body-text-muted);
--btcpay-footer-link: var(--btcpay-body-text-muted);
--btcpay-footer-link-accent: var(--btcpay-neutral-600);
--btcpay-code-text: var(--btcpay-body-text);
--btcpay-code-bg: transparent;
--btcpay-pre-text: var(--btcpay-white);
--btcpay-pre-bg: var(--btcpay-neutral-900);
--btcpay-primary: var(--btcpay-brand-primary);
--btcpay-primary-accent: var(--btcpay-primary-700);
--btcpay-primary-text: var(--btcpay-white);
--btcpay-primary-text-hover: var(--btcpay-white);
--btcpay-primary-text-active: var(--btcpay-white);
--btcpay-primary-bg-hover: var(--btcpay-primary-accent);
--btcpay-primary-bg-active: var(--btcpay-primary-accent);
--btcpay-primary-border: var(--btcpay-primary);
--btcpay-primary-border-hover: var(--btcpay-primary-bg-hover);
--btcpay-primary-border-active: var(--btcpay-primary-bg-active);
--btcpay-primary-dim-bg: var(--btcpay-primary-500);
--btcpay-primary-dim-bg-striped: var(--btcpay-primary-400);
--btcpay-primary-dim-bg-hover: var(--btcpay-primary-600);
--btcpay-primary-dim-bg-active: var(--btcpay-primary-700);
--btcpay-primary-dim-border: var(--btcpay-primary-dim-bg);
--btcpay-primary-dim-border-active: var(--btcpay-primary-dim-bg-active);
--btcpay-primary-dim-text: var(--btcpay-white);
--btcpay-primary-dim-text-striped: var(--btcpay-primary-dim-text);
--btcpay-primary-dim-text-hover: var(--btcpay-primary-dim-text);
--btcpay-primary-dim-text-active: var(--btcpay-primary-900);
--btcpay-primary-shadow: rgba(81, 177, 62, 0.5);
--btcpay-primary-rgb: 81, 177, 62;
--btcpay-secondary: var(--btcpay-white);
--btcpay-secondary-accent: var(--btcpay-secondary);
--btcpay-secondary-text: var(--btcpay-primary);
--btcpay-secondary-text-hover: var(--btcpay-primary);
--btcpay-secondary-text-active: var(--btcpay-brand-dark);
--btcpay-secondary-bg-hover: var(--btcpay-secondary-accent);
--btcpay-secondary-bg-active: var(--btcpay-secondary-accent);
--btcpay-secondary-border: var(--btcpay-neutral-300);
--btcpay-secondary-border-hover: var(--btcpay-primary);
--btcpay-secondary-border-active: var(--btcpay-neutral-500);
--btcpay-secondary-dim-bg: var(--btcpay-neutral-200);
--btcpay-secondary-dim-bg-striped: var(--btcpay-neutral-300);
--btcpay-secondary-dim-bg-hover: var(--btcpay-neutral-300);
--btcpay-secondary-dim-bg-active: var(--btcpay-neutral-400);
--btcpay-secondary-dim-border: var(--btcpay-secondary-dim-bg);
--btcpay-secondary-dim-border-active: var(--btcpay-secondary-dim-bg-active);
--btcpay-secondary-dim-text: var(--btcpay-neutral-800);
--btcpay-secondary-dim-text-striped: var(--btcpay-secondary-dim-text);
--btcpay-secondary-dim-text-hover: var(--btcpay-secondary-dim-text);
--btcpay-secondary-dim-text-active: var(--btcpay-neutral-900);
--btcpay-secondary-shadow: rgba(130, 138, 145, 0.33);
--btcpay-secondary-rgb: 255, 255, 255;
--btcpay-success: var(--btcpay-green-500);
--btcpay-success-accent: var(--btcpay-green-700);
--btcpay-success-text: var(--btcpay-white);
--btcpay-success-text-hover: var(--btcpay-white);
--btcpay-success-text-active: var(--btcpay-white);
--btcpay-success-bg-hover: var(--btcpay-success-accent);
--btcpay-success-bg-active: var(--btcpay-success-accent);
--btcpay-success-border: var(--btcpay-success);
--btcpay-success-border-hover: var(--btcpay-success-bg-hover);
--btcpay-success-border-active: var(--btcpay-success-bg-active);
--btcpay-success-dim-bg: var(--btcpay-green-100);
--btcpay-success-dim-bg-striped: var(--btcpay-green-200);
--btcpay-success-dim-bg-hover: var(--btcpay-green-200);
--btcpay-success-dim-bg-active: var(--btcpay-green-300);
--btcpay-success-dim-border: var(--btcpay-success-dim-bg);
--btcpay-success-dim-border-active: var(--btcpay-success-dim-bg-active);
--btcpay-success-dim-text: var(--btcpay-green-800);
--btcpay-success-dim-text-striped: var(--btcpay-success-dim-text);
--btcpay-success-dim-text-hover: var(--btcpay-success-dim-text);
--btcpay-success-dim-text-active: var(--btcpay-green-900);
--btcpay-success-shadow: rgba(60, 153, 110, 0.33);
--btcpay-success-rgb: var(--btcpay-green-rgb);
--btcpay-info: var(--btcpay-blue-500);
--btcpay-info-accent: var(--btcpay-blue-700);
--btcpay-info-text: var(--btcpay-white);
--btcpay-info-text-hover: var(--btcpay-white);
--btcpay-info-text-active: var(--btcpay-white);
--btcpay-info-bg-hover: var(--btcpay-info-accent);
--btcpay-info-bg-active: var(--btcpay-info-accent);
--btcpay-info-border: var(--btcpay-info);
--btcpay-info-border-hover: var(--btcpay-info-bg-hover);
--btcpay-info-border-active: var(--btcpay-info-bg-active);
--btcpay-info-dim-bg: var(--btcpay-blue-100);
--btcpay-info-dim-bg-striped: var(--btcpay-blue-200);
--btcpay-info-dim-bg-hover: var(--btcpay-blue-200);
--btcpay-info-dim-bg-active: var(--btcpay-blue-300);
--btcpay-info-dim-border: var(--btcpay-info-dim-bg);
--btcpay-info-dim-border-active: var(--btcpay-info-dim-bg-active);
--btcpay-info-dim-text: var(--btcpay-blue-800);
--btcpay-info-dim-text-striped: var(--btcpay-info-dim-text);
--btcpay-info-dim-text-hover: var(--btcpay-info-dim-text);
--btcpay-info-dim-text-active: var(--btcpay-blue-900);
--btcpay-info-shadow: rgba(11, 172, 204, 0.33);
--btcpay-info-rgb: var(--btcpay-blue-rgb);
--btcpay-warning: var(--btcpay-yellow-500);
--btcpay-warning-accent: var(--btcpay-yellow-700);
--btcpay-warning-text: var(--btcpay-neutral-900);
--btcpay-warning-text-hover: var(--btcpay-neutral-900);
--btcpay-warning-text-active: var(--btcpay-neutral-900);
--btcpay-warning-bg-hover: var(--btcpay-warning-accent);
--btcpay-warning-bg-active: var(--btcpay-warning-accent);
--btcpay-warning-border: var(--btcpay-warning);
--btcpay-warning-border-hover: var(--btcpay-warning-bg-hover);
--btcpay-warning-border-active: var(--btcpay-warning-bg-active);
--btcpay-warning-dim-bg: var(--btcpay-yellow-100);
--btcpay-warning-dim-bg-striped: var(--btcpay-yellow-200);
--btcpay-warning-dim-bg-hover: var(--btcpay-yellow-200);
--btcpay-warning-dim-bg-active: var(--btcpay-yellow-300);
--btcpay-warning-dim-border: var(--btcpay-warning-dim-bg);
--btcpay-warning-dim-border-active: var(--btcpay-warning-dim-bg-active);
--btcpay-warning-dim-text: var(--btcpay-warning-800);
--btcpay-warning-dim-text-striped: var(--btcpay-warning-dim-text);
--btcpay-warning-dim-text-hover: var(--btcpay-warning-dim-text);
--btcpay-warning-dim-text-active: var(--btcpay-yellow-900);
--btcpay-warning-shadow: rgba(217, 164, 6, 0.33);
--btcpay-warning-rgb: var(--btcpay-yellow-rgb);
--btcpay-danger: var(--btcpay-red-500);
--btcpay-danger-accent: var(--btcpay-red-700);
--btcpay-danger-text: var(--btcpay-white);
--btcpay-danger-text-hover: var(--btcpay-white);
--btcpay-danger-text-active: var(--btcpay-white);
--btcpay-danger-bg-hover: var(--btcpay-danger-accent);
--btcpay-danger-bg-active: var(--btcpay-danger-accent);
--btcpay-danger-border: var(--btcpay-danger);
--btcpay-danger-border-hover: var(--btcpay-danger-bg-hover);
--btcpay-danger-border-active: var(--btcpay-danger-bg-active);
--btcpay-danger-dim-bg: var(--btcpay-red-100);
--btcpay-danger-dim-bg-striped: var(--btcpay-red-200);
--btcpay-danger-dim-bg-hover: var(--btcpay-red-200);
--btcpay-danger-dim-bg-active: var(--btcpay-red-300);
--btcpay-danger-dim-border: var(--btcpay-danger-dim-bg);
--btcpay-danger-dim-border-active: var(--btcpay-danger-dim-bg-active);
--btcpay-danger-dim-text: var(--btcpay-red-800);
--btcpay-danger-dim-text-striped: var(--btcpay-danger-dim-text);
--btcpay-danger-dim-text-hover: var(--btcpay-danger-dim-text);
--btcpay-danger-dim-text-active: var(--btcpay-red-900);
--btcpay-danger-shadow: rgba(225, 83, 97, 0.33);
--btcpay-danger-rgb: var(--btcpay-red-rgb);
--btcpay-light: var(--btcpay-neutral-200);
--btcpay-light-accent: var(--btcpay-neutral-400);
--btcpay-light-text: var(--btcpay-neutral-800);
--btcpay-light-text-hover: var(--btcpay-neutral-800);
--btcpay-light-text-active: var(--btcpay-neutral-800);
--btcpay-light-bg-hover: var(--btcpay-light-accent);
--btcpay-light-bg-active: var(--btcpay-light-accent);
--btcpay-light-border: var(--btcpay-light);
--btcpay-light-border-hover: var(--btcpay-light-bg-hover);
--btcpay-light-border-active: var(--btcpay-light-bg-active);
--btcpay-light-dim-bg: var(--btcpay-white);
--btcpay-light-dim-bg-striped: var(--btcpay-neutral-200);
--btcpay-light-dim-bg-hover: var(--btcpay-neutral-200);
--btcpay-light-dim-bg-active: var(--btcpay-neutral-300);
--btcpay-light-dim-border: var(--btcpay-light-dim-bg);
--btcpay-light-dim-border-active: var(--btcpay-light-dim-bg-active);
--btcpay-light-dim-text: var(--btcpay-neutral-800);
--btcpay-light-dim-text-striped: var(--btcpay-light-dim-text);
--btcpay-light-dim-text-hover: var(--btcpay-light-dim-text);
--btcpay-light-dim-text-active: var(--btcpay-neutral-900);
--btcpay-light-shadow: rgba(211, 212, 213, 0.33);
--btcpay-light-rgb: 233, 236, 239;
--btcpay-dark: var(--btcpay-neutral-800);
--btcpay-dark-accent: var(--btcpay-neutral-900);
--btcpay-dark-text: var(--btcpay-neutral-200);
--btcpay-dark-text-hover: var(--btcpay-neutral-200);
--btcpay-dark-text-active: var(--btcpay-neutral-200);
--btcpay-dark-bg-hover: var(--btcpay-dark-accent);
--btcpay-dark-bg-active: var(--btcpay-dark-accent);
--btcpay-dark-border: var(--btcpay-dark);
--btcpay-dark-border-hover: var(--btcpay-dark-bg-hover);
--btcpay-dark-border-active: var(--btcpay-dark-bg-active);
--btcpay-dark-dim-bg: var(--btcpay-neutral-900);
--btcpay-dark-dim-bg-striped: var(--btcpay-neutral-900);
--btcpay-dark-dim-bg-hover: var(--btcpay-neutral-800);
--btcpay-dark-dim-bg-active: var(--btcpay-neutral-700);
--btcpay-dark-dim-border: var(--btcpay-dark-dim-bg);
--btcpay-dark-dim-border-active: var(--btcpay-dark-dim-bg-active);
--btcpay-dark-dim-text: var(--btcpay-neutral-200);
--btcpay-dark-dim-text-striped: var(--btcpay-dark-dim-text);
--btcpay-dark-dim-text-hover: var(--btcpay-dark-dim-text);
--btcpay-dark-dim-text-active: var(--btcpay-neutral-100);
--btcpay-dark-shadow: rgba(66, 70, 73, 0.33);
--btcpay-dark-rgb: 33, 38, 45;
}