@charset "utf-8"; /* r18over_dark_scoped.css ------------------------------------------------------------ Night/Dark mode stylesheet (SCOPED). Activate by toggling: Load AFTER: 1) r18over.css 2) r18over_resp_w.css */ /* ===== Dark tokens (only when .theme-dark) ===== */ body.theme-dark{ --bg: #0b0c0f; /* page background */ --bg2:#12141a; /* wrapper / panels */ --surface:#171a21; /* cards */ --surface2:#1d2130; /* hover/active */ --text:#e8eaf0; /* primary text */ --muted:#aeb4c3; /* secondary text */ --muted2:#7d8596; /* tertiary text */ --border: rgba(255,255,255,.12); --border2: rgba(255,255,255,.08); --shadow: 0 18px 40px rgba(0,0,0,.45); --accent:#FF6600; --accent2: rgb(240, 111, 31); --focus: rgba(255,102,0,.35); } body.theme-dark #themeToggle{ background: #2a2f3a; color: #fff; border: 1px solid rgba(255,255,255,.18); } /* ===== Base background / text ===== */ body.theme-dark{ background: var(--bg); color: var(--text); } body.theme-dark::before{ background-color: var(--bg); } body.theme-dark #wrapper{ background-color: var(--bg); } /* Common text containers */ body.theme-dark .introduction, body.theme-dark .profilebox, body.theme-dark .videoTitle, body.theme-dark .videoActor, body.theme-dark .videoProfile, body.theme-dark .videoTags, body.theme-dark .videoProvider{ color: var(--text); } /* Links */ body.theme-dark a, body.theme-dark a:link, body.theme-dark a:visited{ color: var(--text); } body.theme-dark a:hover, body.theme-dark a:active{ color: var(--muted); } /* ===== Header / chrome ===== */ body.theme-dark header{ background-color: var(--bg); } /* Hamburger bars */ body.theme-dark #nav_open span, body.theme-dark #nav_open span:before, body.theme-dark #nav_open span:after, body.theme-dark #aside_open span, body.theme-dark #aside_open span:before, body.theme-dark #aside_open span:after{ background: var(--text); } /* Nav/Aside panels + overlays */ body.theme-dark nav, body.theme-dark aside{ background-color: var(--bg2); border-right: 1px solid var(--border2); border-left: 1px solid var(--border2); } body.theme-dark #nav_close, body.theme-dark #aside_close{ color: var(--text); } body.theme-dark #nav_wrap, body.theme-dark #aside_wrap{ background: rgba(0,0,0,0.65); } /* Menu titles / portlets */ body.theme-dark .portlet_title, body.theme-dark .menu_title{ background-color: var(--surface); color: var(--text); border-bottom: 1px dashed var(--accent); box-shadow: none; } /* Menu blocks / content cards */ body.theme-dark .menu3, body.theme-dark .con2, body.theme-dark .com_block{ background-color: var(--surface); color: var(--text); border: 1px solid var(--border2); box-shadow: var(--shadow); } body.theme-dark .con2 blockquote{ color: var(--muted); border: 1px solid var(--border2); } /* Nav hover */ body.theme-dark nav li a:hover, body.theme-dark aside li a:hover{ color: var(--text); background: var(--surface2); } /* ===== Footer ===== */ body.theme-dark #_copyright, body.theme-dark #_footmenu{ color: var(--muted2); background: var(--bg2); } body.theme-dark #copyright, body.theme-dark #footmenu{ color: var(--text); background: #000; } body.theme-dark #footmenu a{ color: var(--muted); } body.theme-dark #footmenu a:hover{ color: var(--text); } /* ===== Buttons / tabs ===== */ body.theme-dark .button, body.theme-dark .def_button{ background-color: #2a2f3a; color: var(--text); } body.theme-dark .cur_button{ background-color: var(--text); color: #000; } body.theme-dark .disabled_button{ color: var(--muted2); } /* SideMenu / CalendarMenu / ServiceMenu */ body.theme-dark .sideMenu .menu{ color: var(--text); border: solid 1px var(--border2); } body.theme-dark .sideMenu .cur{ background-color: var(--surface2); color: var(--text); } body.theme-dark .calendarMenu .menu, body.theme-dark .addVideoMenu .menu{ background-color: #2a2f3a; color: var(--text); border: solid 1px var(--border2); } body.theme-dark .calendarMenu .disable{ background-color: #2a2f3a; color: var(--muted2); } body.theme-dark .calendarMenu .cur, body.theme-dark .addVideoMenu .cur{ background-color: var(--surface2); color: var(--text); } body.theme-dark .serviceMenu .menu{ color: var(--muted); border: solid 1px solid var(--border2); border: solid 1px var(--border2); } body.theme-dark .serviceMenu .cur{ background-color: var(--text); color: #000; } /* Cloud search tags */ body.theme-dark .cloudSearch a{ background-color: #2a2f3a; color: var(--text); } body.theme-dark .cloudSearch .def{ background-color: #242833; color: var(--text); } body.theme-dark .cloudSearch .cur{ background-color: var(--text); color: #000; } body.theme-dark .cloudSearch .base{ background-color: var(--accent2); color: #fff; } /* ===== Tables / pagination ===== */ body.theme-dark .calender caption, body.theme-dark .calender th, body.theme-dark .calender td{ border-bottom: 1px solid var(--border2); color: var(--text); } body.theme-dark .calender a:link, body.theme-dark .calender a:visited{ color: #ffb27a; /* warm highlight for date links */ } body.theme-dark #pagenavi a, body.theme-dark #pagenavi span{ background: #242833; border: 1px solid rgba(255,255,255,.16); color: var(--text); } body.theme-dark #pagenavi a:hover{ background: #2a2f3a; color: var(--text); } /* ===== Forms ===== */ body.theme-dark input[type="password"], body.theme-dark input[type="text"], body.theme-dark textarea, body.theme-dark select{ background-color: #202431; color: var(--text); border: 1px solid rgba(255,255,255,.14); } body.theme-dark input[type="submit"]{ background-color: #2a2f3a; color: var(--text); border: 1px solid rgba(255,255,255,.14); } body.theme-dark input[type="submit"]:hover{ background-color: #33384a; } /* ===== Scroll / fixed buttons ===== */ body.theme-dark #Lpagetop, body.theme-dark #Rpagetop, body.theme-dark #Lpagebottom, body.theme-dark #Rpagebottom, body.theme-dark #Lmenu, body.theme-dark #Rmenu, body.theme-dark .move-page-top, body.theme-dark .messageBox{ background: var(--accent); color: #fff; } body.theme-dark #Lpagetop:hover, body.theme-dark #Rpagetop:hover, body.theme-dark #Lpagebottom:hover, body.theme-dark #Rpagebottom:hover, body.theme-dark #Lmenu:hover, body.theme-dark #Rmenu:hover, body.theme-dark .move-page-top:hover, body.theme-dark .messageBox:hover{ background: var(--accent2); } /* ===== Video UI ===== */ body.theme-dark .videoListTitle{ background-color: rgba(0,0,0,.35); color: var(--text); opacity: 1.0; } /* Posters / video boxes already use black; keep as-is, just ensure surfaces read well */ body.theme-dark .videoImage .poster, body.theme-dark .videoListImage_ .poster{ background-color: var(--surface); } /* Drag & Drop */ body.theme-dark .dropPosterArea{ background: #1a1e28; } body.theme-dark .dropPosterArea.dragover, body.theme-dark .dropPosterArea:hover{ background: #2a2f3a; } /* ===== Novel component: "dark paper" ===== */ body.theme-dark{ --paper: #12141a; /* background of .novel */ --paper-edge: #171a21; /* blockquote bg */ --ink: #e8eaf0; /* text */ --rule: rgba(255,255,255,.14); --accent-novel: #ffb27a; /* link inside novel */ --shadow-novel: 0 18px 40px rgba(0,0,0,.55); } body.theme-dark .novel{ background: var(--paper); color: var(--ink); border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow-novel); } body.theme-dark .novel blockquote{ background: var(--paper-edge); border-left: 4px solid rgba(255,255,255,.20); } body.theme-dark .novel em{ background: linear-gradient(transparent 62%, rgba(255,178,122,.18) 0); } body.theme-dark .novel rt{ color: var(--muted); } /* Print stays light regardless of theme */ @media print{ body{ background:#fff; color:#000; } body::before{ background-color:#fff; } #wrapper{ background-color:#fff; } }