@charset "UTF-8"; /*------------------------------------------------- Dark theme + the switch that turns it on. The class .theme-dark is put on by theme.js (and by a tiny inline script in head.inc, so the page never flashes white first). No preference stored = follow the operating system, which is why this is a class and not a bare @media block: an explicit choice has to be able to override the OS. The original design leans on light-coloured gif textures (dotted rules, arrows, gradients). On a dark surface they read as dirt, so here they are dropped and replaced with flat colours and borders. -------------------------------------------------*/ /*------------------------------------------------- The switch itself (visible in both themes) -------------------------------------------------*/ .theme-toggle { float: right; width: 32px; height: 32px; margin: 11px 4px 0 0; padding: 0; line-height: 30px; text-align: center; font-size: 16px; color: #505050; background: transparent; border: 1px solid #cfcfcf; border-radius: 16px; cursor: pointer; opacity: 0.75; } .theme-toggle:hover { opacity: 1; color: #8D3900; border-color: #8D3900; } .theme-toggle::before { content: "\263D"; /* waxing crescent: "switch to dark" */ } .theme-dark .theme-toggle { color: #c6cbd1; border-color: #3a4045; } .theme-dark .theme-toggle:hover { color: #ffcf6b; border-color: #ffcf6b; } .theme-dark .theme-toggle::before { content: "\2600"; /* sun: "switch back to light" */ } /*------------------------------------------------- Page and wrappers -------------------------------------------------*/ .theme-dark body { background: #15171a; background-image: none; color: #ccd0d5; } .theme-dark #header, .theme-dark #mainwrapper, .theme-dark #wrapper, .theme-dark #header h1 { background: #1c1f23; background-image: none; border-color: #2c3034; } .theme-dark #footer { background: #23282c; color: #c9ced3; border-color: #2c3034; border-top: 2px solid #7a6410; } .theme-dark #copyrights, .theme-dark #copyrights a:link, .theme-dark #copyrights a:visited { color: #9aa0a6; } /*------------------------------------------------- Links -------------------------------------------------*/ .theme-dark a:link, .theme-dark a:visited { color: #7fb6ff; } .theme-dark a:hover, .theme-dark a:active { color: #ffffff; } .theme-dark .contenttitle a:link, .theme-dark .contenttitle a:visited { color: #8fc4ff; } .theme-dark .contenttitle a:hover { color: #ffffff; } .theme-dark #header a:link, .theme-dark #header a:visited { color: #c6cbd1; } .theme-dark #header a:hover, .theme-dark #header a:active { color: #ffffff; } /*------------------------------------------------- Top menu -------------------------------------------------*/ .theme-dark div#menu { background: #22262a; background-image: none; border-bottom: 1px solid #2c3034; } .theme-dark div#menu span { color: #c6cbd1; background-image: none; } .theme-dark div#menu ul a:hover span { color: #ffb166; } .theme-dark div#menu li, .theme-dark div#menu li.last span, .theme-dark div#menu li div { background-image: none; } /*------------------------------------------------- Items -------------------------------------------------*/ .theme-dark .contenttitle h2 { background-image: none; border-bottom: 1px dotted #383d43; } .theme-dark .contentitemcategory, .theme-dark .contentitempostedby, .theme-dark .contentitemcomments, .theme-dark .contentitemedit, .theme-dark ul > li, .theme-dark .sidebardl dd a:link, .theme-dark .sidebardl dd a:visited { background-image: none; } .theme-dark .contentitem2, .theme-dark .contentitem3, .theme-dark .contentitem4 { background-image: none; border-left: 1px dotted #383d43; } /*------------------------------------------------- Comments -------------------------------------------------*/ .theme-dark .itemcomment { background-image: none; border-color: #1c1f23; } .theme-dark .itemcomment:hover { background: #22262a; background-image: none; border-color: #3a4045; } .theme-dark .id1, .theme-dark .id1:hover { background: #22262a; background-image: none; border-color: #4a5540; } /*------------------------------------------------- Sidebar -------------------------------------------------*/ .theme-dark .sidebar { color: #c3c8ce; } .theme-dark .sidebardl dt { background: #262b30; background-image: none; color: #e2e6ea; } .theme-dark .sidebardl dd { background: #1f2327; } .theme-dark .sidebardl dd:hover { background: #262b30; } /*------------------------------------------------- Forms -------------------------------------------------*/ .theme-dark .commentform, .theme-dark .mailform { background: #22262a; } .theme-dark .formfield, .theme-dark .formbutton { background: #101214; color: #d7dbdf; border-color: #3a4045; } .theme-dark .formbutton:hover { background: #191c1f; color: #ffffff; } .theme-dark .error { color: #ff8a80; } /*------------------------------------------------- Misc -------------------------------------------------*/ .theme-dark .highlight { background: #4a5f1d; color: #f2f7e8; } .theme-dark .wrap1, .theme-dark .wrap2, .theme-dark .wrap3 { background-image: none; } .theme-dark .wrap3 img { border-color: #2c3034; } .theme-dark .leftbox { border-right-color: #3a4045; } .theme-dark .rightbox { border-left-color: #3a4045; } .theme-dark hr { border: 0; border-top: 1px solid #2c3034; }