/* ========================================================= NEWWWZ — GLOBAL THEME + TOKENS (LIGHT/DARK) Put this in: /global.css (or /public/global.css) ========================================================= */ /* ========================= THEME TOKENS ========================= */ :root{ --bg: #ffffff; --text: #000000; --border: #000000; /* surfaces */ --surface: #ffffff; /* panel/card/chip surface */ --surface-2: #ffffff; /* optional secondary surface */ /* states */ --hover-bg: #000000; --hover-text: #ffffff; --active-bg: #000000; /* selected pill/bookmark */ --active-text: #ffffff; /* muted */ --muted: rgba(0,0,0,.75); --muted-2: rgba(0,0,0,.55); /* shadows (NEWWWZ look) */ --shadow: 3px 3px 0 var(--border); /* ===== Mood (LIGHT) ===== */ --mood-worried-bg: #fff0f0; --mood-neutral-bg: #e6e6e6; /* più grigio, meno “quasi bianco” */ --mood-optimistic-bg: #f0fff2; /* Mood text colors (LIGHT) */ --mood-text: #000000; /* floating footer bg (light) */ --float-bg: rgba(255,255,255,.85); } /* ========================= DARK THEME (override tokens) Apply by: ========================= */ html[data-theme="dark"]{ --bg: #000000; --text: #ffffff; --border: #ffffff; --surface: #000000; --surface-2: #000000; --hover-bg: #ffffff; --hover-text: #000000; --active-bg: #ffffff; --active-text: #000000; --muted: rgba(255,255,255,.80); --muted-2: rgba(255,255,255,.60); --shadow: 3px 3px 0 var(--border); /* ===== Mood (DARK) ===== Qui puoi farli più “accesi” senza perdere leggibilità. NOTA: hai chiesto testo NERO dentro i box: lo gestiamo con --mood-text. */ --mood-worried-bg: #ff5a5a; /* rosso più acceso */ --mood-neutral-bg: #bdbdbd; /* grigio medio */ --mood-optimistic-bg: #34d399;/* verde più acceso */ /* testo dentro i mood box in DARK (perché sfondo chiaro) */ --mood-text: #000000; --float-bg: rgba(0,0,0,.85); } /* ========================= GLOBAL BASE APPLICATION (force hardcoded whites/blacks to follow tokens) ========================= */ html, body{ background: var(--bg) !important; color: var(--text) !important; } /* Se qualche componente ha “color: #000” fisso, almeno il body regge */ body{ background: var(--bg) !important; color: var(--text) !important; } /* ========================= COMMON OVERRIDES (these are generic & safe) ========================= */ /* Inputs / placeholders - safe */ input, textarea, select{ color: var(--text); } ::placeholder{ color: var(--muted-2); } /* Panels / cards generic (se esistono) */ .country-panel, .lang-panel, .mood-scope-panel, .past-panel, .past-country-panel, #nw-lang-panel, #nw-edition-panel, .edition-group-head, .edition-flyout, .explainer-panel, .profile-modal-content{ background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Topbar / chips / buttons generic */ .nw-topbar{ background: var(--surface) !important; border-bottom-color: var(--border) !important; } .nw-chip, #nw-clock, .icon-btn, #date-input, .nw-date-btn, .nw-date-input{ background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* News rows generic */ .news-item{ background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } .news-cell{ border-right-color: var(--border) !important; } /* Pills + bookmark generic */ .pill-button, .bookmark-btn{ background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* ACTIVE (pills/bookmark) uses tokens */ .pill-button[data-active="true"], .bookmark-btn[data-saved="true"]{ background: var(--active-bg) !important; color: var(--active-text) !important; border-color: var(--active-bg) !important; } /* ===== Mood index boxes ===== */ .mood-box{ border-color: var(--border) !important; background: var(--surface) !important; color: var(--text) !important; } .mood-box--worried{ background: var(--mood-worried-bg) !important; } .mood-box--neutral{ background: var(--mood-neutral-bg) !important; } .mood-box--optimistic{ background: var(--mood-optimistic-bg) !important; } /* Qui rendiamo il testo dentro i mood box leggibile anche in dark */ .mood-box, .mood-box *{ color: var(--mood-text) !important; } html:not([data-theme="dark"]) .mood-box, html:not([data-theme="dark"]) .mood-box *{ /* in light vogliamo testo nero, già ok ma lo ribadiamo */ color: #000000 !important; } /* Footer */ .nw-footer, .control-footer{ background: var(--bg) !important; color: var(--text) !important; border-top-color: var(--border) !important; } .nw-footer-link, .control-footer-links a{ color: var(--text) !important; } /* floating bottom-right footer */ .right-footer{ background: var(--float-bg) !important; border-color: var(--border) !important; color: var(--text) !important; } .right-footer a{ color: var(--text) !important; } /* ADS hardcoded black safety */ .news-item--ad .news-headline, .news-item--ad .news-cell{ color: var(--text) !important; } /* ADS chip outline ONLY in dark mode (come vuoi tu) */ html[data-theme="dark"] .cat-ads{ border: 1px solid #ffffff !important; } /* ========================= INVERSE HOVER (theme-aware) ========================= */ .nw-chip:hover, .icon-btn:hover, .nw-date-wrap:hover, .mood-box-link:hover, .control-link:hover, .end-of-day:hover, .past-strip:hover, .edition-flyout .country-row:hover, .edition-group:hover .edition-group-head, .nw-date-btn:hover, .nw-date-input:hover, .cookie-btn:hover, .profile-primary-btn:hover, .profile-secondary-btn:hover, .profile-tertiary-btn:hover, .bookmark-btn:hover, .pill-button:hover{ background: var(--hover-bg) !important; color: var(--hover-text) !important; border-color: var(--hover-bg) !important; } /* ========================= THEME TOGGLE (SUN/MOON + knob) (you already have markup; this is the “final” stable version) ========================= */ .nw-theme-toggle{ position: relative; width: 56px; height: 28px; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 7px; cursor: pointer; user-select: none; box-sizing: border-box; } .nw-theme-ico{ font-size: 12px; line-height: 1; color: var(--text); opacity: 1; /* IMPORTANT: sempre visibile */ display: inline-flex; align-items: center; justify-content: center; } /* “inactive” icon slightly muted but visible */ .nw-theme-ico[data-state="inactive"]{ opacity: .55; } /* knob: centrato verticalmente perfetto */ .nw-theme-knob{ position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 20px; height: 20px; background: var(--text); transition: transform .18s ease, background .18s ease; } /* in dark knob slides right */ html[data-theme="dark"] .nw-theme-knob{ transform: translate(28px, -50%); } /* hover inverse for toggle */ .nw-theme-toggle:hover{ background: var(--hover-bg); border-color: var(--hover-bg); } .nw-theme-toggle:hover .nw-theme-ico{ color: var(--hover-text); } .nw-theme-toggle:hover .nw-theme-knob{ background: var(--hover-text); } /* ========================================================= FIX #1 — SEARCH in DARK: niente riquadro bianco dentro ========================================================= */ html[data-theme="dark"] .search-box{ background: #000 !important; border-color: #fff !important; } html[data-theme="dark"] .search-input{ background: transparent !important; color: #fff !important; } html[data-theme="dark"] .search-input::placeholder{ color: rgba(255,255,255,.75) !important; } /* ========================================================= FIX #2 — THEME TOGGLE: icone sempre visibili ========================================================= */ .nw-theme-toggle .nw-theme-ico{ opacity: 1 !important; visibility: visible !important; display: inline-flex !important; } /* inversione automatica sopra knob bianco/nero */ .nw-theme-toggle .nw-theme-ico{ color: #fff !important; mix-blend-mode: difference !important; } .nw-theme-toggle:hover .nw-theme-ico{ opacity: 1 !important; } /* ========================================================= FIX #3A — "WORLD MOOD ▾" visibile in dark ========================================================= */ html[data-theme="dark"] .mood-scope-select{ background: #000 !important; color: #fff !important; border-color: #fff !important; } html[data-theme="dark"] .mood-scope-select *{ color: #fff !important; } /* ========================= MOOD DROPDOWN — EXACT EDITION LOOK (BOMBPROOF) ========================= */ #mood-scope-panel{ position: absolute; right: 0; top: calc(100% + 6px); z-index: 99999; width: 260px; padding: 8px; border: 1px solid #000; background: #fff; box-shadow: 3px 3px 0 #000; display: none; max-height: none; overflow: visible; } /* titles like edition section headers but stronger */ #mood-scope-panel .mood-section-title{ font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin: 6px 0 6px; } /* EACH ITEM = edition box row */ #mood-scope-panel .mood-row{ border: 1px solid #000; background: #fff; color: #000; padding: 8px 10px; margin: 0 0 6px 0; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; user-select: none; } /* inverse hover */ #mood-scope-panel .mood-row:hover{ background:#000; color:#fff; border-color:#000; } #mood-scope-panel .mood-row:last-child{ margin-bottom: 0; } html[data-theme="dark"] .edition-group-head { background: #000; color: #fff; border: 1px solid #fff; } html[data-theme="dark"] .edition-group-head:hover { background: #fff; color: #000; border-color: #fff; } html[data-theme="dark"] #mood-scope-panel .country-row { background: #000; color: #fff; border: 1px solid #fff; } html[data-theme="dark"] #mood-scope-panel .country-row:hover { background: #fff; color: #000; } html[data-theme="dark"] #nw-lang-panel .country-row { background: transparent; border: none; } html[data-theme="dark"] #nw-lang-panel .country-row:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; } html[data-theme="dark"] .icon-btn { border: 1px solid #fff; background: #000; color: #fff; } html[data-theme="dark"] .icon-btn:hover { background: #fff; color: #000; border-color: #fff; } /* ========================================= MOOD INDEX — DARK MODE (correct selectors) ========================================= */ /* aggancio dark mode: copre più implementazioni */ html[data-theme="dark"] #mood-scope-panel .mood-row, body.dark #mood-scope-panel .mood-row, body.dark-mode #mood-scope-panel .mood-row, html.dark #mood-scope-panel .mood-row { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } /* hover inverse */ html[data-theme="dark"] #mood-scope-panel .mood-row:hover, body.dark #mood-scope-panel .mood-row:hover, body.dark-mode #mood-scope-panel .mood-row:hover, html.dark #mood-scope-panel .mood-row:hover { background: #fff !important; color: #000 !important; } /* forza anche eventuali span dentro */ html[data-theme="dark"] #mood-scope-panel .mood-row:hover *, body.dark #mood-scope-panel .mood-row:hover *, body.dark-mode #mood-scope-panel .mood-row:hover *, html.dark #mood-scope-panel .mood-row:hover * { color: #000 !important; } /* ========================================= DARK MODE — HEADER BUTTON INVERSE HOVER ========================================= */ html[data-theme="dark"] .nw-chip, body.dark .nw-chip, body.dark-mode .nw-chip, html.dark .nw-chip, html[data-theme="dark"] .nw-date-btn, body.dark .nw-date-btn, body.dark-mode .nw-date-btn, html.dark .nw-date-btn, html[data-theme="dark"] .icon-btn, body.dark .icon-btn, body.dark-mode .icon-btn, html.dark .icon-btn, html[data-theme="dark"] #nw-theme-toggle, body.dark #nw-theme-toggle, body.dark-mode #nw-theme-toggle, html.dark #nw-theme-toggle { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; outline: none !important; transition: background .15s ease, color .15s ease; } /* ===== HOVER INVERSE ===== */ html[data-theme="dark"] .nw-chip:hover, body.dark .nw-chip:hover, body.dark-mode .nw-chip:hover, html.dark .nw-chip:hover, html[data-theme="dark"] .nw-date-btn:hover, body.dark .nw-date-btn:hover, body.dark-mode .nw-date-btn:hover, html.dark .nw-date-btn:hover, html[data-theme="dark"] .icon-btn:hover, body.dark .icon-btn:hover, body.dark-mode .icon-btn:hover, html.dark .icon-btn:hover, html[data-theme="dark"] #nw-theme-toggle:hover, body.dark #nw-theme-toggle:hover, body.dark-mode #nw-theme-toggle:hover, html.dark #nw-theme-toggle:hover { background: #fff !important; color: #000 !important; border: 1px solid #fff !important; } /* forza anche SVG a cambiare colore */ html[data-theme="dark"] .icon-btn:hover svg, body.dark .icon-btn:hover svg, body.dark-mode .icon-btn:hover svg, html.dark .icon-btn:hover svg { stroke: #000 !important; fill: #000 !important; } /* ========================= LANGUAGE PANEL — LIGHT underline black ========================= */ html[data-theme="light"] .lang-panel .country-row:hover, body:not(.dark):not(.dark-mode) .lang-panel .country-row:hover { text-decoration: underline; text-decoration-color: #000; text-underline-offset: 4px; } /* ========================= EDITION PANEL — CONTINENT hover must keep border ========================= */ html[data-theme="dark"] .edition-group-head, body.dark .edition-group-head, body.dark-mode .edition-group-head, html.dark .edition-group-head { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; box-sizing: border-box; } html[data-theme="dark"] .edition-group-head:hover, body.dark .edition-group-head:hover, body.dark-mode .edition-group-head:hover, html.dark .edition-group-head:hover { background: #fff !important; color: #000 !important; border: 1px solid #fff !important; /* non sparire MAI */ } /* ========================= EDITION FLYOUT — countries dark default black + inverse hover (no jump) ========================= */ html[data-theme="dark"] .edition-flyout .country-row, body.dark .edition-flyout .country-row, body.dark-mode .edition-flyout .country-row, html.dark .edition-flyout .country-row { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; /* sempre presente */ box-sizing: border-box; transform: none !important; /* stop “movement” */ transition: background .15s ease, color .15s ease; /* niente transform */ } html[data-theme="dark"] .edition-flyout .country-row:hover, body.dark .edition-flyout .country-row:hover, body.dark-mode .edition-flyout .country-row:hover, html.dark .edition-flyout .country-row:hover { background: #fff !important; color: #000 !important; border: 1px solid #fff !important; } :root { --row-bg: #fff; --row-fg: #000; --row-hover-bg: #000; --row-hover-fg: #fff; } [data-theme="dark"] { --row-bg: #000; --row-fg: #fff; --row-hover-bg: #fff; --row-hover-fg: #000; } /* riga news */ .news-row { background: var(--row-bg); color: var(--row-fg); } /* hover inverse */ .news-row:hover { background: var(--row-hover-bg); color: var(--row-hover-fg); } /* IMPORTANT: figli che avevi colorati/opacity devono seguire hover */ .news-row:hover * { color: var(--row-hover-fg) !important; } /* ========================================================= NEWS ITEM — INVERSE HOVER (final fix) ========================================================= */ .news-item:hover { background: var(--hover-bg) !important; color: var(--hover-text) !important; border-color: var(--hover-text) !important; } /* === NEWS ROW INVERSE (minimal, safe) === */ .news-item:hover { background: var(--hover-bg) !important; border-color: var(--hover-text) !important; } .news-item:hover > .news-cell { color: var(--hover-text) !important; } /* ========================================================= NEWS ROW — DISABLE ROW HOVER when hovering pills / bookmark (Chrome/Safari: uses :has) ========================================================= */ .news-item:hover:has(.pill-button:hover), .news-item:hover:has(.bookmark-btn:hover), .news-item:hover:has(.pill-buttons:hover) { background: var(--surface) !important; border-color: var(--border) !important; } .news-item:hover:has(.pill-button:hover) > .news-cell, .news-item:hover:has(.bookmark-btn:hover) > .news-cell, .news-item:hover:has(.pill-buttons:hover) > .news-cell { color: var(--text) !important; } /* PAST STRIP — FORCE CLICKABLE */ #past-strip{ cursor: pointer !important; user-select: none !important; pointer-events: auto !important; position: relative !important; z-index: 999999 !important; } /* === DARK: row hover inverte SOLO le celle testo (non pill/stella) === */ html[data-theme="dark"] .news-item:hover{ background: var(--hover-bg) !important; /* bianco */ border-color: var(--hover-bg) !important; } /* testo della riga (celle) diventa nero */ html[data-theme="dark"] .news-item:hover .news-cell{ color: var(--hover-text) !important; /* nero */ } /* qualunque span dentro le celle segue il nero */ html[data-theme="dark"] .news-item:hover .news-cell *{ color: var(--hover-text) !important; /* nero */ } /* pill e stella: mantieni stile base durante hover riga, MA NON quando il bottone è hoverato */ html[data-theme="dark"] .news-item:hover .pill-button:not(:hover), html[data-theme="dark"] .news-item:hover .bookmark-btn:not(:hover){ background: #000 !important; color: #fff !important; border-color: #fff !important; } html[data-theme="dark"] .news-item:hover .pill-button:not(:hover) *, html[data-theme="dark"] .news-item:hover .bookmark-btn:not(:hover) *{ color: #fff !important; } html[data-theme="dark"] .news-item:hover .bookmark-btn:not(:hover) svg{ stroke: #fff !important; fill: transparent !important; } html[data-theme="dark"] .news-item:hover .pill-button *, html[data-theme="dark"] .news-item:hover .bookmark-btn *{ color: #fff !important; } html[data-theme="dark"] .news-item:hover .bookmark-btn svg{ stroke: #fff !important; fill: transparent !important; } /* === DARK: quando passo su pill/stella, la riga NON deve invertire === */ html[data-theme="dark"] .news-item:hover:has(.pill-button:hover), html[data-theme="dark"] .news-item:hover:has(.bookmark-btn:hover), html[data-theme="dark"] .news-item:hover:has(.pill-buttons:hover){ background: var(--surface) !important; /* torna nero */ border-color: var(--border) !important; } html[data-theme="dark"] .news-item:hover:has(.pill-button:hover) .news-cell, html[data-theme="dark"] .news-item:hover:has(.bookmark-btn:hover) .news-cell, html[data-theme="dark"] .news-item:hover:has(.pill-buttons:hover) .news-cell{ color: var(--text) !important; /* torna bianco */ } html[data-theme="dark"] .news-item:hover:has(.pill-button:hover) .news-cell *, html[data-theme="dark"] .news-item:hover:has(.bookmark-btn:hover) .news-cell *, html[data-theme="dark"] .news-item:hover:has(.pill-buttons:hover) .news-cell *{ color: var(--text) !important; } /* === DARK: inverse hover SU pill e stella === */ html[data-theme="dark"] .pill-button:hover{ background:#fff !important; color:#000 !important; border-color:#fff !important; } html[data-theme="dark"] .pill-button:hover *{ color:#000 !important; } html[data-theme="dark"] .bookmark-btn:hover{ background:#fff !important; color:#000 !important; border-color:#fff !important; } html[data-theme="dark"] .bookmark-btn:hover *{ color:#000 !important; } html[data-theme="dark"] .bookmark-btn:hover svg{ stroke:#000 !important; fill:transparent !important; } /* ========================================================= FINAL FIX — DARK: hover inverse su TESTO pill + stella (text node -> serve color sul bottone, non su "*") ========================================================= */ /* PILL: inverti testo + bordo in hover */ html[data-theme="dark"] .news-item .pill-button:hover{ color:#000 !important; -webkit-text-fill-color:#000 !important; /* safety Chrome */ background:#fff !important; border-color:#fff !important; } /* se mai dentro c’è uno span, lo copriamo comunque */ html[data-theme="dark"] .news-item .pill-button:hover *{ color:#000 !important; -webkit-text-fill-color:#000 !important; } /* STAR (è testo "★" nel bottone): inverti colore in hover */ html[data-theme="dark"] .news-item .bookmark-btn:hover{ color:#000 !important; -webkit-text-fill-color:#000 !important; background:#fff !important; border-color:#fff !important; } /* se in futuro diventa svg */ html[data-theme="dark"] .news-item .bookmark-btn:hover svg{ stroke:#000 !important; fill:transparent !important; } /* se un wildcard in news-cell schiaccia tutto, ribadiamo sopra */ html[data-theme="dark"] .news-item:hover .pill-button:hover, html[data-theme="dark"] .news-item:hover .bookmark-btn:hover{ color:#000 !important; -webkit-text-fill-color:#000 !important; } @media (max-width: 520px) { html, body { overflow-x: hidden; } * { box-sizing: border-box; } } /* ========================================================= MOBILE ONLY — NEWWWZ (NO DESKTOP CHANGES) Incolla in fondo allo