/* ForcaWiki stylesheet. Source lives in assets/; build.py copies it to site/. */ /* Each color is a light/dark pair. By default color-scheme is "light dark", so light-dark() follows the operating system. The toggle button forces color-scheme to light or dark via a data-theme attribute on , which flips every one of these at once. */ :root { color-scheme: light dark; --bg: light-dark(#f6f6f6, #000000); --content-bg: light-dark(#ffffff, #0a0a0a); --text: light-dark(#202122, #e8e8e8); --muted: light-dark(#54595d, #9e9e9e); --border: light-dark(#a2a9b1, #2e2e2e); --border-soft: light-dark(#c8ccd1, #1c1c1c); --link: light-dark(#0645ad, #6f9dff); --link-visited: light-dark(#0b0080, #b393e6); --link-new: light-dark(#ba0000, #ff8080); --box-bg: light-dark(#f8f9fa, #141414); --box-head: light-dark(#eaecf0, #1e1e1e); --highlight: light-dark(#eaf3ff, #1b1b1b); --shadow: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7)); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .page { display: flex; min-height: 100vh; max-width: 1100px; margin: 0 auto; } /* Sidebar */ .sidebar { width: 190px; flex: none; padding: 20px 14px; font-size: 13px; } .logo { display: block; color: var(--text); text-decoration: none; margin-bottom: 18px; } .logo-mark { display: block; margin-bottom: 6px; opacity: 0.85; } .logo-name { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.2; } .logo-tag { display: block; color: var(--muted); font-size: 11px; } .sidebar nav .nav-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border-soft); padding-bottom: 3px; margin: 18px 0 6px; } .sidebar nav a { display: block; color: var(--link); text-decoration: none; padding: 2px 0; } .sidebar nav a:hover { text-decoration: underline; } .sidebar-note { color: var(--muted); margin: 4px 0 0; } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 5px 11px; font: inherit; font-size: 12.5px; color: var(--link); background: var(--box-bg); border: 1px solid var(--border-soft); border-radius: 4px; cursor: pointer; } .theme-toggle:hover { background: var(--box-head); } .theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; } .theme-toggle .ic { line-height: 0; } .theme-toggle svg { display: block; } /* Show the moon + "Dark mode" in light contexts and the sun + "Light mode" in dark contexts. CSS alone picks the right pair on first paint, whether the theme comes from the operating system or the data-theme attribute. These single-class defaults must not carry more specificity than the theme rules below, so display is not set on the shared .ic selector. */ .ic-moon { display: inline-flex; } .ic-sun { display: none; } .tt-dark { display: inline; } .tt-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic-moon, :root:not([data-theme="light"]) .tt-dark { display: none; } :root:not([data-theme="light"]) .ic-sun { display: inline-flex; } :root:not([data-theme="light"]) .tt-light { display: inline; } } :root[data-theme="dark"] .ic-moon, :root[data-theme="dark"] .tt-dark { display: none; } :root[data-theme="dark"] .ic-sun { display: inline-flex; } :root[data-theme="dark"] .tt-light { display: inline; } :root[data-theme="light"] .ic-moon { display: inline-flex; } :root[data-theme="light"] .tt-dark { display: inline; } :root[data-theme="light"] .ic-sun, :root[data-theme="light"] .tt-light { display: none; } /* Content column */ .content { flex: 1; min-width: 0; background: var(--content-bg); border-left: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); padding: 22px 32px 40px; } /* Search */ .searchbar { position: relative; max-width: 380px; margin: 0 0 18px auto; } .searchbar input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--content-bg); color: var(--text); font-size: 14px; } .searchbar input:focus { outline: 2px solid var(--link); outline-offset: -1px; } .search-results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--content-bg); border: 1px solid var(--border); border-radius: 3px; box-shadow: 0 2px 8px var(--shadow); max-height: 320px; overflow-y: auto; z-index: 10; display: none; } .search-results.open { display: block; } .search-results a { display: block; padding: 7px 10px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border-soft); } .search-results a:last-child { border-bottom: none; } .search-results a:hover, .search-results a:focus { background: var(--highlight); } .search-results .r-title { font-weight: 600; } .search-results .r-sum { color: var(--muted); font-size: 12px; } .search-results .r-none { padding: 7px 10px; color: var(--muted); } /* Article */ article h1 { font-family: Georgia, "Times New Roman", serif; font-weight: normal; font-size: 30px; margin: 0 0 2px; border-bottom: 1px solid var(--border); padding-bottom: 4px; } .site-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; } article h2 { font-family: Georgia, "Times New Roman", serif; font-weight: normal; font-size: 23px; border-bottom: 1px solid var(--border-soft); margin: 26px 0 10px; padding-bottom: 3px; } article h3 { font-size: 17px; margin: 20px 0 8px; } article h4 { font-size: 15px; margin: 16px 0 6px; } article p { margin: 0 0 12px; } article ul, article ol { margin: 0 0 12px; padding-left: 26px; } article li { margin: 3px 0; } a { color: var(--link); } article a:visited { color: var(--link-visited); } a.new { color: var(--link-new); cursor: help; text-decoration: none; border-bottom: 1px dotted var(--link-new); } blockquote { margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid var(--border-soft); color: var(--muted); } code { background: var(--box-bg); border: 1px solid var(--border-soft); border-radius: 2px; padding: 1px 4px; font-size: 13px; } hr { border: 0; border-top: 1px solid var(--border-soft); margin: 18px 0; } img { max-width: 100%; height: auto; } article footer { margin-top: 34px; border-top: 1px solid var(--border-soft); padding-top: 10px; color: var(--muted); font-size: 12px; } /* Infobox */ .infobox { float: right; width: 250px; margin: 0 0 14px 20px; background: var(--box-bg); border: 1px solid var(--border); border-collapse: collapse; font-size: 12.5px; } .infobox caption { background: var(--box-head); border: 1px solid var(--border); border-bottom: none; font-weight: 600; padding: 5px 8px; } .infobox th { text-align: left; vertical-align: top; padding: 5px 8px; width: 92px; } .infobox td { padding: 5px 8px; } .infobox tr + tr { border-top: 1px solid var(--border-soft); } /* Main page */ .welcome { background: var(--highlight); border: 1px solid var(--border-soft); border-radius: 4px; padding: 18px 22px; margin-bottom: 22px; text-align: center; } .welcome-art { display: block; margin: 4px auto 12px; max-width: 340px; border-radius: 4px; } .welcome h1 { border: none; margin: 0 0 6px; } .welcome p { margin: 0 0 6px; } .welcome .count { color: var(--muted); margin: 0; } .topic-list { list-style: none; padding: 0; } .topic-list li { margin: 6px 0; } .topic-sum { color: var(--muted); } /* Small screens */ @media (max-width: 720px) { .page { flex-direction: column; } .sidebar { width: 100%; padding: 14px 18px 8px; } .sidebar nav .nav-head { margin-top: 10px; } .content { border-left: none; border-right: none; border-top: 1px solid var(--border-soft); padding: 18px 18px 32px; } .searchbar { max-width: none; margin-left: 0; } .infobox { float: none; width: 100%; margin: 0 0 14px; } }