:root { /* General color definitions */ --btcpay-brand-light: #CEDC21; --btcpay-brand-medium: #51B13E; --btcpay-brand-dark: #137547; --btcpay-brand-darker: #0F3B21; /* Color definitions for specific purposes - map the general colors or define additional ones */ --btcpay-color-white: #fff; --btcpay-color-black: #000; --btcpay-color-neutral-100: #f8f9fa; --btcpay-color-neutral-200: #e9ecef; --btcpay-color-neutral-300: #dee2e6; --btcpay-color-neutral-400: #ced4da; --btcpay-color-neutral-500: #8d8d8f; --btcpay-color-neutral-600: #6c757d; --btcpay-color-neutral-700: #495057; --btcpay-color-neutral-800: #343a40; --btcpay-color-neutral-900: #292929; --btcpay-color-neutral-950: #222222; --btcpay-color-primary: var(--btcpay-brand-medium); --btcpay-color-primary-backdrop: #D2E5CF; --btcpay-color-primary-accent: #1E7A44; --btcpay-color-primary-text: var(--btcpay-color-neutral-900); --btcpay-color-secondary: var(--btcpay-color-neutral-600); --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: #1E7A44; --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-700); --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); /* 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-tile: var(--btcpay-color-white); --btcpay-bg-cta: var(--btcpay-brand-darker); --btcpay-body-color: var(--btcpay-color-neutral-900); --btcpay-body-color-link: var(--btcpay-color-primary); --btcpay-body-color-link-accent: var(--btcpay-color-primary); --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-body-color); --btcpay-footer-bg: var(--btcpay-brand-dark); --btcpay-footer-color: var(--btcpay-color-neutral-400); --btcpay-font-size-base: 14px; --btcpay-font-family-head: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; --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; } /* Bootstrap modifications */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; } .bg-dark { background-color: var(--btcpay-bg-dark) !important; } .onion { filter: invert(); } .table-sm { width: calc(100% + 1rem); margin: 1.5rem -.5rem; border-radius: 4px; border-collapse: separate !important; border-spacing: 0px !important; } .table-sm thead > tr { height: 40px; } .table-sm thead th { border-bottom: none; border-top: none; font-size: 1.0rem; } .table-sm th, .table-sm td { padding: .5rem; } .table-sm tbody tr:hover { background-color: var(--btcpay-color-neutral-100); } .removetopborder tr:first-child th, .removetopborder tr:first-child td { border-top: none; } #mainNav .navbar-nav > li.nav-item > a.nav-link:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link:hover { border-bottom-color: var(--btcpay-header-color-link-accent); } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --btcpay-color-primary-backdrop: #389725; --btcpay-bg-dark: var(--btcpay-color-neutral-950); --btcpay-header-bg: var(--btcpay-bg-dark); --btcpay-footer-bg: var(--btcpay-bg-dark); --btcpay-footer-color: var(--btcpay-color-neutral-600); --btcpay-body-bg: var(--btcpay-color-neutral-900); --btcpay-body-color: var(--btcpay-color-white); --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); } .social-logo { filter: contrast(0) brightness(200%); } .onion { filter: none; } header.masthead::before, .service-box img { filter: grayscale() opacity(90%); } .table-sm tbody tr:hover { background-color: var(--btcpay-color-neutral-950); } }