/* DaazMarkets PRO — Dark Mode Enhanced CSS Builds on top of the FREE plugin's CSS variables. Selector: [data-gmp-theme="dark"] (set on by theme-toggle.js) */ /* ── OS preference auto-apply (before JS loads) ─────────────────── */ @media (prefers-color-scheme: dark) { html:not([data-gmp-theme="light"]) { --gmp-bg-primary: #111827; --gmp-bg-secondary: #1f2937; --gmp-bg-tertiary: #374151; --gmp-text-primary: #f9fafb; --gmp-text-secondary:#d1d5db; --gmp-text-tertiary: #9ca3af; --gmp-border: #374151; --gmp-shadow: rgba(0,0,0,.3); } } /* ── Toggle button styles ────────────────────────────────────────── */ .daaz-pro-toggle-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--gmp-bg-tertiary, #f3f4f6); color: var(--gmp-text-primary, #111827); border: 1px solid var(--gmp-border, #e5e7eb); border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; transition: background .2s, color .2s, border-color .2s; line-height: 1; } .daaz-pro-toggle-button:hover { background: var(--gmp-primary, #f7931a); color: #fff; border-color: transparent; } /* Show only the relevant label */ .daaz-pro-toggle-button .daaz-pro-toggle-label-dark { display: none; } [data-gmp-theme="dark"] .daaz-pro-toggle-button .daaz-pro-toggle-label-light { display: none; } [data-gmp-theme="dark"] .daaz-pro-toggle-button .daaz-pro-toggle-label-dark { display: inline; } /* ── iOS-style switch ────────────────────────────────────────────── */ .daaz-pro-toggle-wrap { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; } .daaz-pro-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } .daaz-pro-switch-input { opacity: 0; width: 0; height: 0; position: absolute; } .daaz-pro-switch-track { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; transition: background .25s; } .daaz-pro-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .daaz-pro-switch-input:checked ~ .daaz-pro-switch-track { background: var(--gmp-primary, #f7931a); } .daaz-pro-switch-input:checked ~ .daaz-pro-switch-track::after { transform: translateX(20px); } .daaz-pro-toggle-label { font-size: 13px; color: var(--gmp-text-secondary, #6b7280); } /* ── Minimal icon-only button ────────────────────────────────────── */ .daaz-pro-toggle-minimal { background: none; border: none; cursor: pointer; font-size: 20px; padding: 4px; line-height: 1; } .daaz-pro-toggle-minimal .daaz-pro-toggle-icon-dark { display: none; } [data-gmp-theme="dark"] .daaz-pro-toggle-minimal .daaz-pro-toggle-icon-light { display: none; } [data-gmp-theme="dark"] .daaz-pro-toggle-minimal .daaz-pro-toggle-icon-dark { display: inline; } /* ── Dark section shortcode ──────────────────────────────────────── */ .daaz-pro-dark-section { background: var(--gmp-bg-secondary, #1f2937); border-radius: 8px; padding: 20px; margin: 12px 0; } /* ── PRO widget dark-mode polish ─────────────────────────────────── */ /* Cards */ [data-gmp-theme="dark"] .gmp-card { background: #1f2937; border-color: #374151; box-shadow: 0 2px 8px rgba(0,0,0,.4); } [data-gmp-theme="dark"] .gmp-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); } /* Tables */ [data-gmp-theme="dark"] .daaz_gmp_table thead tr { background: #374151; } [data-gmp-theme="dark"] .daaz_gmp_table tbody tr:nth-child(even) { background: #1f2937; } [data-gmp-theme="dark"] .daaz_gmp_table tbody tr:hover { background: #374151; } /* Stale notice */ [data-gmp-theme="dark"] .daaz-gmp-stale-notice { color: #9ca3af; } /* Error / info banners */ [data-gmp-theme="dark"] .daaz-gmp-error, [data-gmp-theme="dark"] .daaz_gmp_error { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #fca5a5; } [data-gmp-theme="dark"] .daaz-gmp-rate-limited { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #fcd34d; } /* Treasuries page */ [data-gmp-theme="dark"] .daaz-treasuries-table tbody tr:hover { background: #374151; } /* ETF tabs */ [data-gmp-theme="dark"] .daaz-gmp-tab-btn { background: #374151; color: #d1d5db; border-color: #4b5563; } [data-gmp-theme="dark"] .daaz-gmp-tab-btn.active, [data-gmp-theme="dark"] .daaz-gmp-tab-btn:hover { background: var(--gmp-primary, #f7931a); color: #fff; border-color: transparent; }