/* ========================================================================== Traffic News - Dark Mode (Desktop) v2 Activated via [data-theme="dark"] on . Loaded AFTER style.css to override. ========================================================================== */ :root { --tn-bg: #ffffff; --tn-surface: #f5f5f5; --tn-surface-2: #ffffff; --tn-text: #333447; --tn-text-strong: #111111; --tn-text-muted: #555555; --tn-border: #e8e8e8; --tn-accent: #304587; --tn-accent-2: #112a5d; --tn-link: #304587; --tn-heading: #112a5d; --tn-header-bg: rgba(255, 255, 255, .97); --tn-footer-bg: #112a5d; } html[data-theme="dark"] { --tn-bg: #12141a; --tn-surface: #1c1f28; --tn-surface-2: #232735; --tn-text: #D6D6D6; --tn-text-strong: #D6D6D6; --tn-text-muted: #9ca3af; --tn-border: #2d3340; --tn-accent: #5b7cd6; --tn-accent-2: #6e8ee0; --tn-link: #7ea3f0; --tn-heading: #D6D6D6; --tn-header-bg: rgba(18, 20, 26, .96); --tn-footer-bg: #0c1424; color-scheme: dark; } /* ========================================================================== 0. Header layout tweaks ========================================================================== */ .search-trigger.header-icon.right { border-right: 1px solid var(--tn-border); padding-right: 14px; margin-right: 6px; } html[data-theme="dark"] .header-icon { border-left-color: var(--tn-border) !important; border-right-color: var(--tn-border) !important; } /* Logo – light / dark swap (tn-logo-white.svg in dark mode) */ .site-logo-dark { display: none; } html[data-theme="dark"] .site-logo-light { display: none !important; } html[data-theme="dark"] .site-logo-dark { display: inline-block !important; } html[data-theme="dark"] .logo .site-logo-dark.left { float: left; } /* ========================================================================== 1. Theme toggle (Font Awesome icons) ========================================================================== */ .theme-toggle { cursor: pointer; background: transparent; border: 0; padding: 0; /* width: 40px; */ height: 40px; line-height: 40px; margin: 6px 4px 0; border-radius: 50%; transition: background-color .2s ease; vertical-align: top; outline: none; color: #0e1317; font-size: 22px; text-align: center; } .theme-toggle i { line-height: 40px; vertical-align: middle; pointer-events: none; } .theme-toggle .icon-sun { display: none; font-size: 22px; } .theme-toggle .icon-moon { display: inline-block; font-size: 25px; } html[data-theme="dark"] .theme-toggle { color: #e4e6eb; } html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ========================================================================== 2. Global background & text ========================================================================== */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--tn-bg); color: var(--tn-text); } html[data-theme="dark"] * { color: var(--tn-text); } html[data-theme="dark"] a { color: var(--tn-link); } html[data-theme="dark"] a:hover { color: var(--tn-accent-2); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .title { color: var(--tn-text-strong); } /* Blue titles / profile headings */ html[data-theme="dark"] .blue-title, html[data-theme="dark"] .blue-bg-title, html[data-theme="dark"] .profile_page_h1 { color: var(--tn-heading) !important; } /* Article & section titles -> white */ html[data-theme="dark"] .new-title, html[data-theme="dark"] .new-title a, html[data-theme="dark"] .section-title, html[data-theme="dark"] a.section-title { color: #ffffff !important; } html[data-theme="dark"] .section-title, html[data-theme="dark"] .profile_page_h1 { border-top-color: rgba(255, 255, 255, .15) !important; border-bottom-color: rgba(255, 255, 255, .15) !important; } /* Leading block titles – no top rule when first in column */ html[data-theme="dark"] .articles.horizontal.center > .section-title:first-child, html[data-theme="dark"] .articles.horizontal.center > h1.section-title:first-child, html[data-theme="dark"] .articles.horizontal.center > h2.section-title:first-child, html[data-theme="dark"] .articles-type1.last_news > .section-title:first-child, html[data-theme="dark"] .articles-type1.last_news > a.section-title:first-child, html[data-theme="dark"] .profile_page_h1:first-child, html[data-theme="dark"] .section-title--lead, html[data-theme="dark"] #category.page-search .col-9 .section-title, html[data-theme="dark"] .page-search .col-9 .section-title { border-top: none !important; } html[data-theme="dark"] .page-search #sidebar .last_news > a.section-title { border-top: none !important; } /* Search page – no bottom rule on main title (avoids double line under heading) */ html[data-theme="dark"] #category.page-search .col-9 .section-title.section-title--lead { border-bottom: none !important; } html[data-theme="dark"] a.section-title:hover { color: var(--tn-link) !important; } html[data-theme="dark"] .section-title:after, html[data-theme="dark"] .section-title::after, html[data-theme="dark"] a.section-title:after, html[data-theme="dark"] a.section-title::after { color: var(--tn-text) !important; } /* Meta/date labels */ html[data-theme="dark"] .post-data.calc.right .gray, html[data-theme="dark"] .simple-list-holder .gray { color: var(--tn-heading) !important; } /* Date/time on cards (on image or in meta strip) */ html[data-theme="dark"] .post-data, html[data-theme="dark"] .post-data .date, html[data-theme="dark"] .post-data .time, html[data-theme="dark"] .post-data .gray, html[data-theme="dark"] .icons-gray .time, html[data-theme="dark"] .icons-gray .date, html[data-theme="dark"] .icons-gray > span:not(.seens) { color: var(--tn-text-muted) !important; } /* Views counter – muted gray everywhere (overrides white .seens i, link blue on a.scroolTo) */ html[data-theme="dark"] .seens, html[data-theme="dark"] span.seens, html[data-theme="dark"] .seens a, html[data-theme="dark"] .seens span, html[data-theme="dark"] .seens i, html[data-theme="dark"] .seens .scroolTo, html[data-theme="dark"] a.scroolTo, html[data-theme="dark"] span.scroolTo, html[data-theme="dark"] .icons-gray .seens, html[data-theme="dark"] .icons-gray .seens i, html[data-theme="dark"] .gray.slider-attr .seens, html[data-theme="dark"] .post-data .seens { color: var(--tn-text-muted) !important; } /* "Traffic News topics" / horizontal small slider cards (plain bars only) */ html[data-theme="dark"] #temite article .right-part:not(.post_shadow), html[data-theme="dark"] .slider-top_news-small article .right-part:not(.post_shadow), html[data-theme="dark"] .articles.horizontal article .right-part:not(.post_shadow), html[data-theme="dark"] .articles.horizontal.center.with-bg, html[data-theme="dark"] .articles.horizontal.center.with-bg .right-part.right.w-100:not(.post_shadow) { background: transparent !important; color: var(--tn-text) !important; } /* Image overlay cards – keep bottom gradient for readable text */ html[data-theme="dark"] .post_shadow, html[data-theme="dark"] .right-part.post_shadow, html[data-theme="dark"] #temite article .post_shadow, html[data-theme="dark"] #temite article .right-part.post_shadow, html[data-theme="dark"] .single-article.col-9 #temite article .post_shadow, html[data-theme="dark"] .gray_box .right-part.post_shadow, html[data-theme="dark"] .akcents .post_shadow { background: linear-gradient(180deg, rgba(18, 20, 26, 0) 0%, rgba(18, 20, 26, .9) 100%) !important; } html[data-theme="dark"] #temite article .post_shadow h3 a, html[data-theme="dark"] #temite article .right-part.post_shadow h3 a, html[data-theme="dark"] #temite article .right-part.post_shadow .title a { color: #ffffff !important; } html[data-theme="dark"] #temite article h3 a, html[data-theme="dark"] #temite article .title a, html[data-theme="dark"] #temite article > a, html[data-theme="dark"] .slider-top_news-small article h3 a, html[data-theme="dark"] .slider-top_news-small article .title a, html[data-theme="dark"] .slider-top_news-small article > a, html[data-theme="dark"] .articles.horizontal article .right-part h3, html[data-theme="dark"] .articles.horizontal article .right-part h3 a, html[data-theme="dark"] .articles.horizontal article .right-part .title a, html[data-theme="dark"] .articles.horizontal article .post_shadow h3 a, html[data-theme="dark"] .articles.horizontal article .post_shadow .title a, html[data-theme="dark"] .articles.horizontal article > a, html[data-theme="dark"] .articles.horizontal article a.left-part, html[data-theme="dark"] .articles.horizontal.center.with-bg .title a { color: var(--tn-heading) !important; } html[data-theme="dark"] #temite article .single-infos a, html[data-theme="dark"] #temite article .single-infos a.scroolTo, html[data-theme="dark"] .slider-top_news-small article .single-infos a, html[data-theme="dark"] .articles.horizontal article .single-infos a, html[data-theme="dark"] .articles.horizontal article .right-part .single-infos a, html[data-theme="dark"] .articles.horizontal article .post_shadow .single-infos a { color: var(--tn-text-muted) !important; text-decoration: none; } html[data-theme="dark"] #temite article h3 a:hover, html[data-theme="dark"] #temite article .title a:hover, html[data-theme="dark"] .slider-top_news-small article h3 a:hover, html[data-theme="dark"] .articles.horizontal article .right-part h3 a:hover, html[data-theme="dark"] .articles.horizontal article .post_shadow h3 a:hover, html[data-theme="dark"] .articles.horizontal.center.with-bg .title a:hover { color: var(--tn-link) !important; } /* ========================================================================== 3. Header ========================================================================== */ html[data-theme="dark"] .header { background: var(--tn-header-bg); border-color: var(--tn-border); border-bottom: 1px solid var(--tn-border); } html[data-theme="dark"] .header .nav .menu > li > a, html[data-theme="dark"] #main-menu > li > a { color: var(--tn-text); } html[data-theme="dark"] #main-menu > li.active > a, html[data-theme="dark"] #main-menu > li:hover > a { color: var(--tn-link); } html[data-theme="dark"] .header-icon svg path, html[data-theme="dark"] .header-icon svg circle { fill: var(--tn-text); } html[data-theme="dark"] .header-icon:hover svg path { fill: var(--tn-link); } html[data-theme="dark"] #search_form_header .row, html[data-theme="dark"] .header-icon.search-trigger.open, html[data-theme="dark"] .header-icon.search-trigger.open i, html[data-theme="dark"] .header-icon.user-trigger.open, html[data-theme="dark"] .header-icon.user-trigger.open i { background: transparent !important; color: var(--tn-text); } html[data-theme="dark"] .header-icon.search-trigger.open svg path, html[data-theme="dark"] .header-icon.user-trigger.open svg path { fill: var(--tn-text); } html[data-theme="dark"] #search_form_header { background: var(--tn-surface); border-top: 1px solid var(--tn-border); } html[data-theme="dark"] #search_form_header input, html[data-theme="dark"] #search_query { background-color: var(--tn-surface-2); color: var(--tn-text); border: 1px solid var(--tn-border); } html[data-theme="dark"] #search_form_header input::placeholder { color: var(--tn-text-muted); } html[data-theme="dark"] #search_form_header button { background-color: var(--tn-link) !important; color: #ffffff !important; } html[data-theme="dark"] #search_form_header button:hover { background-color: var(--tn-accent) !important; } html[data-theme="dark"] #search_form_header button i { color: #ffffff !important; } html[data-theme="dark"] .menu-holder, html[data-theme="dark"] #main-menu .sub-menu, html[data-theme="dark"] #main-menu li.submenu .sub-menu, html[data-theme="dark"] #main-menu .else_cat .sub-menu > li, html[data-theme="dark"] .sub-menu .row, html[data-theme="dark"] #main-menu .gray-menu-area { background: var(--tn-surface) !important; border-top-color: var(--tn-border) !important; border-bottom-color: var(--tn-accent) !important; } html[data-theme="dark"] .menu-holder li, html[data-theme="dark"] #main-menu .else_cat .row li { border-color: var(--tn-border); } html[data-theme="dark"] .menu-holder a, html[data-theme="dark"] #main-menu .sub-menu a, html[data-theme="dark"] #main-menu .gray-menu-area a { color: var(--tn-text); background-color: transparent; } html[data-theme="dark"] .menu-holder a:hover, html[data-theme="dark"] #main-menu .else_cat .row li a:hover, html[data-theme="dark"] #main-menu .else_cat .row li a:active, html[data-theme="dark"] #main-menu .else_cat .row li a.active, html[data-theme="dark"] #main-menu .gray-menu-area a.active, html[data-theme="dark"] #main-menu .gray-menu-area a:hover, html[data-theme="dark"] #main-menu > li:hover > a { background: var(--tn-surface-2) !important; color: var(--tn-link) !important; } html[data-theme="dark"] .more-subcats-menu li a svg path { fill: var(--tn-link); stroke: var(--tn-link); } html[data-theme="dark"] .user-menu-holder { background: var(--tn-surface); border: 1px solid var(--tn-border); } html[data-theme="dark"] .new-news { color: var(--tn-text-muted); } html[data-theme="dark"] .header .header-regions .new-news, html[data-theme="dark"] .new-news b, html[data-theme="dark"] .new-news i { color: var(--tn-link); } /* ========================================================================== 4. Article cards / containers (broad sweep) ========================================================================== */ html[data-theme="dark"] main { background: var(--tn-bg); } html[data-theme="dark"] article, html[data-theme="dark"] .gray_box, html[data-theme="dark"] .post, html[data-theme="dark"] .vertical article, html[data-theme="dark"] .vertical .gray_box, html[data-theme="dark"] .lslide.col-6, html[data-theme="dark"] .bordered_container, html[data-theme="dark"] .editors_choice article { /* background-color: var(--tn-surface) !important; */ color: var(--tn-text); } html[data-theme="dark"] .akcents, html[data-theme="dark"] #gray-layout, html[data-theme="dark"] .more-news-theme, html[data-theme="dark"] .articles { background: transparent; } /* Borders */ html[data-theme="dark"] .gray_box .right-part, html[data-theme="dark"] .articles, html[data-theme="dark"] .single-infos, html[data-theme="dark"] #comments, html[data-theme="dark"] .extra-news li, html[data-theme="dark"] .pagination, html[data-theme="dark"] .pagination ul li, html[data-theme="dark"] hr { border-color: var(--tn-border) !important; } html[data-theme="dark"] .pagination { border-top: 1px solid var(--tn-border) !important; } /* Horizontal list article with white #fff post_shadow */ html[data-theme="dark"] .col-9 .articles.horizontal article .post_shadow { background: transparent !important; } html[data-theme="dark"] .col-9 .articles.horizontal article .post_shadow h3 a { color: var(--tn-text-strong) !important; } /* ========================================================================== 5. Buttons ("See more", btn-blue, btn-send, etc.) ========================================================================== */ html[data-theme="dark"] .btn, html[data-theme="dark"] a.btn, html[data-theme="dark"] #see_more_news, html[data-theme="dark"] .horizontal .btn, html[data-theme="dark"] .btn-send { background-color: var(--tn-link) !important; color: #ffffff !important; border: 1px solid var(--tn-link); } html[data-theme="dark"] .btn:hover, html[data-theme="dark"] a.btn:hover, html[data-theme="dark"] #see_more_news:hover, html[data-theme="dark"] .btn-send:hover { background-color: var(--tn-accent) !important; color: #ffffff !important; border-color: var(--tn-accent); } html[data-theme="dark"] .btn i, html[data-theme="dark"] a.btn i, html[data-theme="dark"] #see_more_news i, html[data-theme="dark"] .btn-send i { color: #ffffff !important; } html[data-theme="dark"] #see_more_news svg, html[data-theme="dark"] #see_more_news svg path, html[data-theme="dark"] #see_more_news svg polygon, html[data-theme="dark"] #see_more_news svg circle, html[data-theme="dark"] #see_more_news svg rect, html[data-theme="dark"] .btn svg, html[data-theme="dark"] .btn svg path, html[data-theme="dark"] .btn svg polygon, html[data-theme="dark"] .btn svg circle, html[data-theme="dark"] .btn svg rect, html[data-theme="dark"] a.btn svg, html[data-theme="dark"] a.btn svg path, html[data-theme="dark"] .btn-holder .btn svg, html[data-theme="dark"] .btn-holder .btn svg path, html[data-theme="dark"] .horizontal .btn svg, html[data-theme="dark"] .horizontal .btn svg path, html[data-theme="dark"] .btn-send svg, html[data-theme="dark"] .btn-send svg path { fill: #ffffff !important; stroke: #ffffff !important; } html[data-theme="dark"] .btn-blue { background-color: var(--tn-accent) !important; color: var(--tn-text) !important; border: 0; } html[data-theme="dark"] .btn-blue:hover { background-color: var(--tn-accent-2) !important; } /* ========================================================================== 6. Single article page ========================================================================== */ html[data-theme="dark"] .single-article h1, html[data-theme="dark"] .single-article h1 + h2, html[data-theme="dark"] .single-content h1, html[data-theme="dark"] .single-content h2, html[data-theme="dark"] .single-content h3, html[data-theme="dark"] .single-content h4, html[data-theme="dark"] .single-content .subtitle { color: var(--tn-text-strong) !important; } html[data-theme="dark"] .single-content p, html[data-theme="dark"] .single-content li, html[data-theme="dark"] .article-text, html[data-theme="dark"] .article-text p, html[data-theme="dark"] .article-text li, html[data-theme="dark"] .signal-page p, html[data-theme="dark"] .signal-page li, html[data-theme="dark"] .simple-page .text p, html[data-theme="dark"] .simple-page .text li, html[data-theme="dark"] .simple-page .text { color: var(--tn-text) !important; } html[data-theme="dark"] .single-article .article-text a, html[data-theme="dark"] .article-text a, html[data-theme="dark"] .single-content a { color: var(--tn-link); } html[data-theme="dark"] .single-article .article-text a:hover, html[data-theme="dark"] .article-text a:hover { color: var(--tn-accent-2); } html[data-theme="dark"] .single-article .author[style], html[data-theme="dark"] [itemprop="author"][style] { color: var(--tn-text-muted) !important; } /* Article meta (date, views, comments) – soft gray, not link blue or body text */ html[data-theme="dark"] .single-infos-holder, html[data-theme="dark"] .single-infos .time, html[data-theme="dark"] .single-infos .seens, html[data-theme="dark"] .single-infos .coms, html[data-theme="dark"] .single-infos .time *, html[data-theme="dark"] .single-infos .seens *, html[data-theme="dark"] .single-infos .coms *, html[data-theme="dark"] .single-infos .scroolTo, html[data-theme="dark"] .single-infos a.scroolTo, html[data-theme="dark"] .single-infos span.scroolTo { color: var(--tn-text-muted) !important; text-decoration: none; } html[data-theme="dark"] .post_shadow .single-infos .time, html[data-theme="dark"] .post_shadow .single-infos .seens, html[data-theme="dark"] .post_shadow .single-infos .coms, html[data-theme="dark"] .post_shadow .single-infos .time *, html[data-theme="dark"] .post_shadow .single-infos .seens *, html[data-theme="dark"] .post_shadow .single-infos .coms *, html[data-theme="dark"] .post_shadow .single-infos a.scroolTo, html[data-theme="dark"] .post_shadow .single-infos span.scroolTo { color: var(--tn-text-muted) !important; text-decoration: none; } html[data-theme="dark"] .single-infos svg path, html[data-theme="dark"] .single-infos svg circle, html[data-theme="dark"] .single-infos svg [fill="gray"], html[data-theme="dark"] .post_shadow .single-infos svg path, html[data-theme="dark"] .post_shadow .single-infos svg circle, html[data-theme="dark"] .post_shadow .single-infos svg [fill="gray"] { fill: var(--tn-text-muted) !important; } html[data-theme="dark"] .single-infos .author a { color: var(--tn-link) !important; } /* Blockquote */ html[data-theme="dark"] blockquote, html[data-theme="dark"] .article-text blockquote, html[data-theme="dark"] .single-content blockquote { background: var(--tn-surface) !important; border-left: 8px solid var(--tn-accent) !important; color: var(--tn-text); } html[data-theme="dark"] blockquote::before { color: var(--tn-accent); } html[data-theme="dark"] .article-text table, html[data-theme="dark"] .single-content table { background: var(--tn-surface); border-color: var(--tn-border); } html[data-theme="dark"] .article-text table th, html[data-theme="dark"] .article-text table td { border-color: var(--tn-border); color: var(--tn-text); } /* Related news / topic sidebar */ html[data-theme="dark"] #rel-news, html[data-theme="dark"] .related_topic_in_news { background: var(--tn-surface) !important; } html[data-theme="dark"] #rel-news .section-title, html[data-theme="dark"] .related_topic_in_news .section-title { border-bottom-color: var(--tn-border) !important; color: #ffffff !important; } html[data-theme="dark"] #rel-news li strong, html[data-theme="dark"] .related_topic_in_news li strong { color: var(--tn-text); } /* Sidebar widgets – keep them transparent like in light theme */ html[data-theme="dark"] #latest_news_box li, html[data-theme="dark"] aside #latest_news_box li { border-bottom-color: var(--tn-border); } html[data-theme="dark"] #latest_news_box .time, html[data-theme="dark"] aside #latest_news_box .mh72-inner .time, html[data-theme="dark"] #most-comment .time { color: var(--tn-text-muted); } /* Tabs */ html[data-theme="dark"] .tabs-nav, html[data-theme="dark"] .tabs-stage { background: var(--tn-surface); border-color: var(--tn-border); } html[data-theme="dark"] .tabs-nav li, html[data-theme="dark"] .tabs-nav a { color: var(--tn-text-muted); border-color: var(--tn-border); } html[data-theme="dark"] .tabs-nav .active, html[data-theme="dark"] .tabs-nav .active a { color: var(--tn-text-strong); border-bottom-color: var(--tn-accent); } /* ========================================================================== 7. Polls / gray-holder / misc light boxes ========================================================================== */ html[data-theme="dark"] .poll, html[data-theme="dark"] .polls, html[data-theme="dark"] .polls-holder { background: transparent !important; color: var(--tn-text); } html[data-theme="dark"] .poll.single-poll-box, html[data-theme="dark"] .poll.single-poll-box.clone { background: var(--tn-surface) !important; } html[data-theme="dark"] .poll li { border-bottom-color: var(--tn-border) !important; color: var(--tn-text); } html[data-theme="dark"] .polls h5 { border-bottom-color: var(--tn-border) !important; color: var(--tn-text-strong); } html[data-theme="dark"] .poll .btn-send { background: var(--tn-accent) !important; color: var(--tn-text) !important; } /* Poll / form radio & checkbox indicators */ html[data-theme="dark"] .custom-control-indicator { background-color: #D6D6D6 !important; border-color: #D6D6D6 !important; } html[data-theme="dark"] .custom-radio .custom-control-indicator { background-color: #D6D6D6 !important; border-color: #D6D6D6 !important; } html[data-theme="dark"] .custom-control-input:checked + .custom-control-indicator, html[data-theme="dark"] .custom-control-input:hover + .custom-control-indicator { background-color: var(--tn-accent) !important; border-color: var(--tn-accent) !important; } html[data-theme="dark"] .gray-holder { background: var(--tn-surface) !important; } html[data-theme="dark"] .gray-holder a, html[data-theme="dark"] .gray-holder .simple-title { color: var(--tn-text) !important; } html[data-theme="dark"] .gray-holder a:hover { color: var(--tn-link) !important; } html[data-theme="dark"] .gray-holder .gray-holder-news { border-bottom-color: var(--tn-border) !important; } html[data-theme="dark"] #comments .comment:nth-of-type(odd) { background: var(--tn-surface-2); } html[data-theme="dark"] #comments .comment { background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 4px; padding: 10px; margin-bottom: 10px; } html[data-theme="dark"] .comment:nth-of-type(2n) .respons-form, html[data-theme="dark"] .respons-form { background: var(--tn-surface) !important; } html[data-theme="dark"] #comments .blue-text, html[data-theme="dark"] #comments strong { color: var(--tn-link); } html[data-theme="dark"] .author-stats, html[data-theme="dark"] .author-info, html[data-theme="dark"] .follow-line.flex, html[data-theme="dark"] .pba_nominations_text, html[data-theme="dark"] .slideControls, html[data-theme="dark"] .light-blue { background: transparent !important; } html[data-theme="dark"] .widget-socialize .soc-box { background-color: var(--tn-surface) !important; } html[data-theme="dark"] .widget-socialize .soc-box:first-of-type { border-right-color: var(--tn-border) !important; border-bottom-color: var(--tn-border) !important; } html[data-theme="dark"] .widget-socialize .soc-box:nth-of-type(2) { border-bottom-color: var(--tn-border) !important; } html[data-theme="dark"] .widget-socialize .soc-box:nth-of-type(3) { border-right-color: var(--tn-border) !important; } html[data-theme="dark"] .widget-socialize .soc-box:nth-of-type(5) { border-right-color: var(--tn-border) !important; border-top-color: var(--tn-border) !important; } html[data-theme="dark"] .widget-socialize .soc-box:nth-of-type(6) { border-top-color: var(--tn-border) !important; } /* Footer social boxes – no background (unlike main content widget) */ html[data-theme="dark"] footer .widget-socialize .soc-box, html[data-theme="dark"] .footer .widget-socialize .soc-box { background-color: transparent !important; } html[data-theme="dark"] footer .widget-socialize, html[data-theme="dark"] .footer .widget-socialize { background-color: transparent !important; background-image: none !important; } html[data-theme="dark"] .soc-card .number, html[data-theme="dark"] .soc-card .text { color: var(--tn-text) !important; } html[data-theme="dark"] .pba_nominations_text::before { background-color: var(--tn-accent); } /* Follow-line (Telegram / Instagram) */ html[data-theme="dark"] .follow-line.flex span, html[data-theme="dark"] .follow-line.flex a { color: var(--tn-heading) !important; } html[data-theme="dark"] .follow-line.flex svg path { fill: var(--tn-text-muted) !important; } /* Breadcrumbs */ html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] [itemtype*="BreadcrumbList"] { color: var(--tn-text) !important; } html[data-theme="dark"] .breadcrumb i, html[data-theme="dark"] .breadcrumb label, html[data-theme="dark"] .breadcrumb li a, html[data-theme="dark"] .breadcrumb li span, html[data-theme="dark"] [itemtype*="BreadcrumbList"] a, html[data-theme="dark"] [itemtype*="BreadcrumbList"] span, html[data-theme="dark"] [itemtype*="BreadcrumbList"] li { color: var(--tn-text) !important; } html[data-theme="dark"] .breadcrumb li:last-child a span, html[data-theme="dark"] [itemtype*="BreadcrumbList"] li:last-child a span { color: var(--tn-link) !important; } html[data-theme="dark"] .breadcrumb .fa-home, html[data-theme="dark"] [itemtype*="BreadcrumbList"] .fa-home { color: var(--tn-text) !important; } html[data-theme="dark"] .breadcrumb svg path, html[data-theme="dark"] [itemtype*="BreadcrumbList"] svg path { fill: var(--tn-text-muted) !important; } html[data-theme="dark"] .breadcrumb a:hover, html[data-theme="dark"] [itemtype*="BreadcrumbList"] a:hover { color: var(--tn-link) !important; } /* "Read more" / #relateds / bordered_container */ html[data-theme="dark"] #relateds, html[data-theme="dark"] .bordered_container { background-color: var(--tn-surface) !important; } html[data-theme="dark"] .bordered_container.other-news, html[data-theme="dark"] .single-content a.bordered_container { background: transparent !important; border-top: 0 !important; border-bottom: 1px solid var(--tn-border) !important; } html[data-theme="dark"] .bordered_container .title_news, html[data-theme="dark"] .single-content .bordered_container .title_news { color: var(--tn-text-strong) !important; } html[data-theme="dark"] .bordered_container.other-news .title_news, html[data-theme="dark"] .single-content a.bordered_container span.title_news { color: var(--tn-link) !important; } html[data-theme="dark"] .lined-title:before { background: var(--tn-accent) !important; } html[data-theme="dark"] .lined-title u { background: var(--tn-surface) !important; color: var(--tn-heading) !important; } html[data-theme="dark"] #relateds a, html[data-theme="dark"] #relateds a:hover { border-bottom-color: var(--tn-border) !important; } html[data-theme="dark"] #relateds .news_summary { color: var(--tn-text-muted) !important; } /* Login / register / forgot password / auth_page */ html[data-theme="dark"] .auth_page .auth_form_wrap { background-color: var(--tn-surface) !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .6) !important; } html[data-theme="dark"] .auth_page h1 { color: var(--tn-heading) !important; } html[data-theme="dark"] .auth_page form .field_wrap input, html[data-theme="dark"] .auth_page form .field_wrap select, html[data-theme="dark"] #login_forms form .field_wrap input, html[data-theme="dark"] #login_forms form .field_wrap select { background-color: transparent !important; color: var(--tn-text) !important; border: 0 !important; border-bottom: 1px solid var(--tn-border) !important; border-radius: 0 !important; box-shadow: none !important; } html[data-theme="dark"] .auth_page form .field_wrap input:focus, html[data-theme="dark"] .auth_page form .field_wrap select:focus, html[data-theme="dark"] #login_forms form .field_wrap input:focus, html[data-theme="dark"] #login_forms form .field_wrap select:focus { border-bottom-color: var(--tn-accent) !important; outline: none !important; } html[data-theme="dark"] .auth_page form .field_wrap input:-webkit-autofill, html[data-theme="dark"] #login_forms form .field_wrap input:-webkit-autofill { -webkit-text-fill-color: var(--tn-text) !important; -webkit-box-shadow: 0 0 0px 1000px var(--tn-surface) inset !important; transition: background-color 5000s ease-in-out 0s; } html[data-theme="dark"] .auth_page form .field_wrap input::placeholder { color: var(--tn-text-muted) !important; } html[data-theme="dark"] .auth_page form .field_wrap label { color: var(--tn-text-muted) !important; } html[data-theme="dark"] .auth_page form .f_submit { background-color: var(--tn-accent) !important; border-color: var(--tn-accent) !important; color: var(--tn-text) !important; } html[data-theme="dark"] .auth_page form .f_submit:hover { background-color: var(--tn-accent-2) !important; color: var(--tn-text) !important; } html[data-theme="dark"] .auth_page form .reg_btn { background-color: transparent !important; color: var(--tn-link) !important; border-color: var(--tn-accent) !important; } html[data-theme="dark"] .auth_page form .reg_btn:hover { background-color: var(--tn-accent) !important; color: var(--tn-text) !important; } html[data-theme="dark"] .auth_page form .pass_forg, html[data-theme="dark"] .auth_page form .pass_forg:hover { color: var(--tn-link) !important; } html[data-theme="dark"] .auth_page .soc_login_wrap strong, html[data-theme="dark"] .auth_page .soc_login_wrap span { color: var(--tn-text) !important; } /* "Joke of the day" / humor block + dotted patterns + white-bg + top-bordered titles */ html[data-theme="dark"] .white-bg, html[data-theme="dark"] .widget-socialize .white-bg { background-color: var(--tn-surface) !important; } html[data-theme="dark"] .humor .white-bg { background: transparent !important; } html[data-theme="dark"] .dotted-bg, html[data-theme="dark"] .widget-socialize { background-color: var(--tn-bg) !important; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 0) !important; } html[data-theme="dark"] .row.gray-bg.dotted-bg, html[data-theme="dark"] .gray-bg { background-color: transparent !important; } html[data-theme="dark"] .blue-title.top-bordered { color: var(--tn-heading) !important; } html[data-theme="dark"] .blue-title.top-bordered:before, html[data-theme="dark"] .widget-socialize .white-bg .blue-title:before { background: rgba(255, 255, 255, .35) !important; } html[data-theme="dark"] .humor p, html[data-theme="dark"] .humor .lightslider4 p { color: var(--tn-text) !important; } /* ========================================================================== 8. Forms / inputs ========================================================================== */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="file"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .input_text, html[data-theme="dark"] .textfield { background-color: var(--tn-surface-2) !important; color: var(--tn-text) !important; border: 1px solid var(--tn-border) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] .form-control::placeholder { color: var(--tn-text-muted) !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] .form-control:focus { border-color: var(--tn-accent) !important; outline: none; box-shadow: 0 0 0 2px rgba(91, 124, 214, .2) !important; } /* Form labels */ html[data-theme="dark"] form label, html[data-theme="dark"] .form-group label, html[data-theme="dark"] form .control-label { color: var(--tn-heading) !important; } /* File input (cross-browser) */ html[data-theme="dark"] input[type="file"] { padding: 6px 10px !important; cursor: pointer; } html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button { background: var(--tn-surface-2); color: var(--tn-text-muted); border: 1px solid var(--tn-border); padding: 6px 14px; margin-right: 12px; border-radius: 3px; font-weight: 500; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover { background: var(--tn-border); border-color: var(--tn-text-muted); color: var(--tn-text); } html[data-theme="dark"] input[type="file"]::file-selector-button { background: var(--tn-surface-2); color: var(--tn-text-muted); border: 1px solid var(--tn-border); padding: 6px 14px; margin-right: 12px; border-radius: 3px; font-weight: 500; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } html[data-theme="dark"] input[type="file"]::file-selector-button:hover { background: var(--tn-border); border-color: var(--tn-text-muted); color: var(--tn-text); } /* btn-primary (signal form submit) */ html[data-theme="dark"] .btn-primary { background-color: var(--tn-accent) !important; border-color: var(--tn-accent) !important; color: var(--tn-text) !important; } html[data-theme="dark"] .btn-primary:hover { background-color: var(--tn-accent-2) !important; border-color: var(--tn-accent-2) !important; } /* ========================================================================== 9. Popups & overlays ========================================================================== */ html[data-theme="dark"] .popup_wrap, html[data-theme="dark"] #latest_news_popup, html[data-theme="dark"] .popup_outer .popup_holder { background-color: var(--tn-bg); color: var(--tn-text); } html[data-theme="dark"] body:after { background: rgba(0, 0, 0, .6); } html[data-theme="dark"] .popup_wrap .close_btn { background-color: var(--tn-accent); } /* ========================================================================== 10. Footer ========================================================================== */ html[data-theme="dark"] footer.footer, html[data-theme="dark"] .footer { background: var(--tn-footer-bg); color: var(--tn-text); } html[data-theme="dark"] .footer a, html[data-theme="dark"] footer a { color: var(--tn-text); } html[data-theme="dark"] .footer a:hover, html[data-theme="dark"] footer a:hover { color: var(--tn-link); } html[data-theme="dark"] .footer-phone, html[data-theme="dark"] a.footer-phone, html[data-theme="dark"] footer .footer-phone, html[data-theme="dark"] footer a.footer-phone, html[data-theme="dark"] .footer a.footer-phone:hover, html[data-theme="dark"] footer a.footer-phone:hover { color: #a7acb7 !important; } html[data-theme="dark"] .top-footer-row { background: #2e538a; } /* ========================================================================== 11. Misc helpers ========================================================================== */ html[data-theme="dark"] .blue-bg-title { background: var(--tn-accent); color: var(--tn-text) !important; } html[data-theme="dark"] .bordered_container { border-color: var(--tn-border) !important; } /* Card separators in lists (e.g. "Latest" sidebar / horizontal lists) */ html[data-theme="dark"] .article-holder .other-news, html[data-theme="dark"] .last_news .article-holder .other-news, html[data-theme="dark"] .articles-type1 .article-holder .other-news, html[data-theme="dark"] .articles.horizontal .article-holder .other-news, html[data-theme="dark"] .small-figure.other-news { border-bottom-color: var(--tn-border) !important; } /* "Последни новини" sidebar – overrides style.css color: #000 */ html[data-theme="dark"] .small-figure h3.title a, html[data-theme="dark"] .small-figure .title a, html[data-theme="dark"] .last_news .small-figure h3.title a, html[data-theme="dark"] .article-holder .small-figure h3.title a { color: var(--tn-heading) !important; } html[data-theme="dark"] .small-figure h3.title a:hover, html[data-theme="dark"] .small-figure .title a:hover { color: var(--tn-link) !important; } html[data-theme="dark"] ::selection { background: var(--tn-accent); color: var(--tn-text); } /* Section separators with hardcoded #ccc / #000 borders */ html[data-theme="dark"] .link-holder, html[data-theme="dark"] .single-infos-holder, html[data-theme="dark"] .single-infos-holder.bottom, html[data-theme="dark"] .pagination { border-top: 1px solid var(--tn-border) !important; } /* Horoscope widget – dark mode asset (src swap in theme-toggle.js) */ html[data-theme="dark"] .horoscope_img { filter: none !important; }