/** * Dragons Portal - Dark Theme * * Applied when [data-theme="dark"] is set on * * @package Dragons_Portal */ /* ============================================ Dark Theme Variables ============================================ */ [data-theme="dark"] { --dp-white: #161616; --dp-black: #f1f1f1; --dp-gray-50: #101010; --dp-gray-100: #181818; --dp-gray-200: #242424; --dp-gray-300: #353535; --dp-gray-400: #767676; --dp-gray-500: #969696; --dp-gray-600: #b3b3b3; --dp-gray-700: #cecece; --dp-gray-800: #e2e2e2; --dp-gray-900: #f4f4f4; --dp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2); --dp-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3); --dp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); --dp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); --dp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3); color-scheme: dark; } /* ============================================ Base Overrides ============================================ */ [data-theme="dark"] body { background-color: #0b0b0b; color: #ececec; } [data-theme="dark"] a { color: #e85d75; } [data-theme="dark"] a:hover { color: #f08090; } /* ============================================ Header ============================================ */ [data-theme="dark"] .site-header { background: #111111; border-bottom-color: #2b2b2b; } [data-theme="dark"] .site-header--scrolled { background: rgba(17, 17, 17, 0.95); } [data-theme="dark"] .site-header__search-input { background: #181818; border-color: #2b2b2b; color: #ececec; } [data-theme="dark"] .site-header__search-input::placeholder { color: #8a8a8a; } /* ============================================ Primary Navigation Contrast ============================================ */ [data-theme="dark"] .site-nav { background: #121212; border-bottom-color: #2b2b2b; } [data-theme="dark"] .site-nav__toggle { color: #efefef; } [data-theme="dark"] .site-nav__menu li a { color: #e5e5e5; } [data-theme="dark"] .site-nav__menu li a:hover, [data-theme="dark"] .site-nav__menu li.current-menu-item > a, [data-theme="dark"] .site-nav__menu li.current-menu-parent > a { color: #ffffff; background: rgba(255, 255, 255, 0.14); } [data-theme="dark"] .site-nav__menu .sub-menu { background: #171717; border-color: #2f2f2f; } [data-theme="dark"] .site-nav__menu .sub-menu li a:hover { background: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .site-nav__menu { border-top-color: rgba(255, 255, 255, 0.14); } /* ============================================ Theme Toggle Button ============================================ */ .site-header__theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: inherit; border-radius: var(--dp-radius-md); transition: background 0.2s ease; cursor: pointer; padding: 0; } .site-header__theme-toggle:hover { background: rgba(255, 255, 255, 0.1); } .site-header__theme-toggle .dp-icon-sun, .site-header__theme-toggle .dp-icon-moon { display: flex; align-items: center; justify-content: center; } /* Show sun in dark mode, moon in light mode */ .site-header__theme-toggle .dp-icon-sun { display: none; } .site-header__theme-toggle .dp-icon-moon { display: flex; } [data-theme="dark"] .site-header__theme-toggle .dp-icon-sun { display: flex; } [data-theme="dark"] .site-header__theme-toggle .dp-icon-moon { display: none; } /* ============================================ Tiles & Cards ============================================ */ [data-theme="dark"] .tile { background: #181818; border-color: #2b2b2b; } [data-theme="dark"] .tile:hover { border-color: #3b3b3b; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .sidebar-card { background: #181818; border-color: #2b2b2b; } [data-theme="dark"] .sidebar-cta { box-shadow: 0 4px 12px rgba(200, 16, 46, 0.4); } /* ============================================ Footer ============================================ */ [data-theme="dark"] .site-footer { background: #080808; border-top-color: #2b2b2b; } /* ============================================ Single Post ============================================ */ [data-theme="dark"] .single__featured-image img { opacity: 0.92; } [data-theme="dark"] .nav-previous a, [data-theme="dark"] .nav-next a { background: #1e1e36; color: #e8e8e8; } [data-theme="dark"] .nav-previous a:hover, [data-theme="dark"] .nav-next a:hover { background: #2a2a44; } /* ============================================ Sidebar — Recent Posts ============================================ */ [data-theme="dark"] .sidebar-recent-post__thumb { background: #2a2a44; } [data-theme="dark"] .sidebar-recent-post__title { color: #f0f0f8; } [data-theme="dark"] .sidebar-recent-post__title:hover { color: #e85d75; } [data-theme="dark"] .sidebar-card__links li a:hover, [data-theme="dark"] .sidebar-card__categories li a:hover { background: rgba(200, 16, 46, 0.1); } [data-theme="dark"] .sidebar-card__count { background: #2a2a44; color: #8b8ba8; } /* ============================================ Archive / Blog Grid ============================================ */ [data-theme="dark"] .card, [data-theme="dark"] .post-card { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .card:hover, [data-theme="dark"] .post-card:hover { border-color: #3a3a56; } /* ============================================ WooCommerce — Shop ============================================ */ [data-theme="dark"] .woocommerce ul.products li.product { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .woocommerce ul.products li.product:hover { border-color: #3a3a56; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .woocommerce ul.products li.product a img { opacity: 0.92; } [data-theme="dark"] .woocommerce-ordering select { background: #1e1e36; border-color: #2a2a44; color: #e8e8e8; } /* ============================================ WooCommerce — Single Product ============================================ */ [data-theme="dark"] .woocommerce div.product div.images { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .woocommerce div.product form.cart .quantity .qty { background: #1e1e36; border-color: #2a2a44; color: #e8e8e8; } [data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom-color: #2a2a44; } [data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: #8b8ba8; } [data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: #f0f0f8; } [data-theme="dark"] .woocommerce div.product .woocommerce-tabs .panel { background: #1e1e36; border-color: #2a2a44; } /* ============================================ WooCommerce — Cart / Checkout ============================================ */ [data-theme="dark"] .dp-cart, [data-theme="dark"] .dp-checkout { color: #e8e8e8; } [data-theme="dark"] .dp-cart__card, [data-theme="dark"] .dp-checkout__card { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .dp-input, [data-theme="dark"] input.input-text, [data-theme="dark"] select { background: #16162a; border-color: #2a2a44; color: #e8e8e8; } [data-theme="dark"] .dp-input:focus, [data-theme="dark"] input.input-text:focus { border-color: var(--dp-accent); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15); } /* ============================================ WooCommerce — My Account ============================================ */ [data-theme="dark"] .dp-login__card { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .dp-account__header { background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%); } [data-theme="dark"] .dp-account-nav { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .dp-account-nav__link:hover { background: #16162a; } [data-theme="dark"] .dp-account-nav__item.is-active .dp-account-nav__link { background: rgba(200, 16, 46, 0.1); } [data-theme="dark"] .dp-dashboard__stat-card, [data-theme="dark"] .dp-dashboard__action-card, [data-theme="dark"] .dp-dashboard__order-card { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .dp-dashboard__action-card:hover { border-color: var(--dp-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .dp-dashboard__stat-icon { background: rgba(200, 16, 46, 0.15); } [data-theme="dark"] .dp-account__content .woocommerce-orders-table { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .dp-account__content .woocommerce-orders-table th { background: #16162a; border-bottom-color: #2a2a44; } [data-theme="dark"] .dp-account__content .woocommerce-orders-table td { border-bottom-color: #2a2a44; } [data-theme="dark"] .dp-account__content .woocommerce-Address { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .dp-account__content .woocommerce-info { background: #1e1e36; border-color: #2a2a44; } /* ============================================ WooCommerce — Pagination ============================================ */ [data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a, [data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span { background: #1e1e36; border-color: #2a2a44; color: #c0c0d4; } [data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--dp-accent); color: var(--dp-accent); } /* ============================================ Front Page Embedded Results/Table Contrast ============================================ */ [data-theme="dark"] .fp-card--results .fp-card__body, [data-theme="dark"] .fp-card--results .fp-card__body * { color: #f3f4f6; } [data-theme="dark"] .fp-card--results .fp-card__body [class*="score"], [data-theme="dark"] .fp-card--results .fp-card__body [class*="result"] { color: #f8fafc !important; } [data-theme="dark"] .fp-card--results .fp-card__body [class*="score-box"], [data-theme="dark"] .fp-card--results .fp-card__body [class*="scorebox"], [data-theme="dark"] .fp-card--results .fp-card__body [class*="score-pill"], [data-theme="dark"] .fp-card--results .fp-card__body [class*="result-box"], [data-theme="dark"] .fp-card--results .fp-card__body [class*="result-pill"] { background: #171923 !important; border-color: #374151 !important; color: #f8fafc !important; } [data-theme="dark"] .fp-card .fp-card__body table, [data-theme="dark"] .fp-card .fp-card__body [class*="league-table"], [data-theme="dark"] .fp-card .fp-card__body [class*="standings"], [data-theme="dark"] .fp-card .fp-card__body [class*="league_table"] { background: #111827; color: #f3f4f6; border-color: #374151; } [data-theme="dark"] .fp-card .fp-card__body thead th, [data-theme="dark"] .fp-card .fp-card__body th, [data-theme="dark"] .fp-card .fp-card__body [class*="league-table"] th, [data-theme="dark"] .fp-card .fp-card__body [class*="standings"] th, [data-theme="dark"] .fp-card .fp-card__body [class*="league_table"] th { background: #1f2937; color: #f9fafb; border-color: #374151; } [data-theme="dark"] .fp-card .fp-card__body td, [data-theme="dark"] .fp-card .fp-card__body [class*="league-table"] td, [data-theme="dark"] .fp-card .fp-card__body [class*="standings"] td, [data-theme="dark"] .fp-card .fp-card__body [class*="league_table"] td { color: #e5e7eb; border-color: #374151; } [data-theme="dark"] .fp-card .fp-card__body table tr:nth-child(even), [data-theme="dark"] .fp-card .fp-card__body [class*="league-table"] tr:nth-child(even), [data-theme="dark"] .fp-card .fp-card__body [class*="standings"] tr:nth-child(even), [data-theme="dark"] .fp-card .fp-card__body [class*="league_table"] tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .fp-card .fp-card__body table tr:hover, [data-theme="dark"] .fp-card .fp-card__body [class*="league-table"] tr:hover, [data-theme="dark"] .fp-card .fp-card__body [class*="standings"] tr:hover, [data-theme="dark"] .fp-card .fp-card__body [class*="league_table"] tr:hover { background: rgba(200, 16, 46, 0.12); } /* ============================================ Match Reports ============================================ */ [data-theme="dark"] .mr-card { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .mr-scoreboard { background: linear-gradient(135deg, #0a0a18 0%, #12122a 100%); } [data-theme="dark"] .mr-scorer { background: #16162a; } [data-theme="dark"] .mr-scorer:hover { background: #1e1e36; } [data-theme="dark"] .mr-scorer__time, [data-theme="dark"] .mr-scorer__period { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .mr-penalty { background: #16162a; } [data-theme="dark"] .mr-periods th { border-bottom-color: #2a2a44; } [data-theme="dark"] .mr-periods td { border-bottom-color: #2a2a44; } [data-theme="dark"] .mr-periods__total { background: #16162a; } [data-theme="dark"] .mr-info-list li { border-bottom-color: #2a2a44; } [data-theme="dark"] .mr-motm { background: linear-gradient(135deg, #3d2e0a 0%, #4a3510 100%); border-color: #6b5a1e; } [data-theme="dark"] .mr-motm__label { color: #fcd34d; } [data-theme="dark"] .mr-motm__name { color: #fef3c7; } [data-theme="dark"] .mr-archive-card { background: #1e1e36; border-color: #2a2a44; } [data-theme="dark"] .mr-archive-card:hover { border-color: #3a3a56; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .mr-share__btn--twitter { background: #2a2a44; color: #e8e8e8; } [data-theme="dark"] .mr-share__btn--twitter:hover { background: #e8e8e8; color: #1a1a1a; } [data-theme="dark"] .mr-share__btn--facebook { background: #1a2744; color: #5b9cf5; } /* ============================================ Sponsor Bar ============================================ */ [data-theme="dark"] .sponsor-bar { background: #f8fafc; border-top: 1px solid rgba(200, 16, 46, 0.2); border-bottom: 1px solid rgba(200, 16, 46, 0.2); border-color: rgba(200, 16, 46, 0.2); } [data-theme="dark"] .sponsor-bar img, [data-theme="dark"] .sponsor-bar__logo { filter: none; opacity: 0.9; } /* ============================================ Forms & Inputs (global) ============================================ */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #16162a; border-color: #2a2a44; color: #e8e8e8; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6b6b88; } /* ============================================ Scrollbar ============================================ */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0f0f1e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 5px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3a56; } /* ============================================ Transition for theme switch ============================================ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }