/* Dark mode dla motywu gramGrubo. Plik ladowany po style.css - nadpisuje wybrane kolory, gdy ma atrybut data-theme="dark". */ :root { --color-bg: #fdfaf2; --color-text: #000000; --color-surface: #f4f4f4; --color-surface-strong: #ebebeb; --color-card-bg: #ffffff; --shadow-color: rgba(0, 0, 0, 0.1); } [data-theme="dark"] { --color-bg: #151515; --color-text: #f4f4f4; --color-surface: #1f1f1f; --color-surface-strong: #262626; --color-card-bg: #1c1c1c; --shadow-color: rgba(0, 0, 0, 0.5); } [data-theme="dark"] body { background-color: var(--color-bg); color: var(--color-text); } /* Jasnoszare sekcje/tla (np. okruszki, komentarze, tabele w artykulach, boxy eksperta) */ [data-theme="dark"] .breadcrumbs, [data-theme="dark"] .comments-area .comment, [data-theme="dark"] .bet__content table tbody tr, [data-theme="dark"] .news__content table tbody tr, [data-theme="dark"] .bookmaker__expert-box, [data-theme="dark"] .user__info--bg, [data-theme="dark"] .cta { background-color: var(--color-surface); color: var(--color-text); } /* Ciemniejsze szare sekcje/tla (np. naglowek tabeli typow, wiersze naprzemienne) */ [data-theme="dark"] .bet__body, [data-theme="dark"] .bet__content table tbody tr:not(:first-child):nth-child(even), [data-theme="dark"] .news__content table tbody tr:not(:first-child):nth-child(even) { background-color: var(--color-surface-strong); color: var(--color-text); } /* Biale karty (kafelki artykulow, box bukmacherow, ranking, spis tresci, kupon dnia) */ [data-theme="dark"] .news__featureimage, [data-theme="dark"] .news__item, [data-theme="dark"] .news__info, [data-theme="dark"] .tablecontents__list, [data-theme="dark"] .bookmaker-container, [data-theme="dark"] .latest-posts__list, [data-theme="dark"] .editors-box, [data-theme="dark"] .promotions__container, [data-theme="dark"] .promotions--shortcode, [data-theme="dark"] .coupon-of-day { background-color: var(--color-card-bg); color: var(--color-text); } /* Przycisk przelacznika motywu w headerze (header jest ciemny w obu trybach, wiec styl jest wspolny) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; } .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.2); } .theme-toggle svg { width: 1.8rem; height: 1.8rem; } .theme-toggle .theme-toggle__icon-dark { display: none; } [data-theme="dark"] .theme-toggle .theme-toggle__icon-light { display: none; } [data-theme="dark"] .theme-toggle .theme-toggle__icon-dark { display: inline-block; } @media (min-width: 992px) { .header__box.header__box--1 { position: relative; padding-right: 7rem; } .theme-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } } @media (max-width: 991px) { .theme-toggle { margin-top: -4px; margin-left: 12px } } [data-theme="dark"] .bookmaker__list-rankingcnt { background-color: var(--color-surface-strong); color: var(--color-text); } [data-theme="dark"] .bookmaker__list-row:nth-child(odd) { background-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .bookmaker__list-text { background-color: #ffcf03; color: #151515; }