/* japegames — themeable. Light is the base (:root). Dark applies in two cases: 1. @media (prefers-color-scheme: dark) — for users with NO explicit choice (guests, or members who haven't picked), following their OS. 2. [data-theme="dark"] — an explicit member choice, set on . An explicit [data-theme="light"] re-asserts light so it beats a dark OS. Resolution order (last wins): OS dark < explicit choice. */ :root { /* LIGHT palette (base / default) */ --bg: #f4f2ec; --panel: #ffffff; --line: #d8d3c4; --ink: #23211c; --muted: #7a7568; --goldenrod: #c99a1e; --goldenrod-deep: #a67e12; --crimson: #b31432; --cyan: #005F5F; --cyan-hover:#00807f; --c-red: #b31432; --c-green: #3f7d34; --c-blue: #1f5fa8; --c-yellow: #9a7d10; --c-purple: #6b3fa0; --c-orange: #b5641c; } /* DARK palette, factored out so both selectors below reuse it. */ :root[data-theme="dark"] { --bg: #16150f; --panel: #1e1d15; --line: #302e22; --ink: #e6e2d3; --muted: #8f8a76; --goldenrod: #d9b03a; --goldenrod-deep: #c99a1e; --crimson: #d16b5a; --cyan: #4fb0af; --cyan-hover:#6fd0cf; --c-red: #d16b5a; --c-green: #7faf6b; --c-blue: #6b9fd1; --c-yellow: #d1bd6b; --c-purple: #a98bc9; --c-orange: #d1935a; } /* Unset users (no data-theme) follow the OS. Same dark values as above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #16150f; --panel: #1e1d15; --line: #302e22; --ink: #e6e2d3; --muted: #8f8a76; --goldenrod: #d9b03a; --goldenrod-deep: #c99a1e; --crimson: #d16b5a; --cyan: #4fb0af; --cyan-hover:#6fd0cf; --c-red: #d16b5a; --c-green: #7faf6b; --c-blue: #6b9fd1; --c-yellow: #d1bd6b; --c-purple: #a98bc9; --c-orange: #d1935a; } } /* An explicit light choice re-asserts light even if the OS is dark. :root already holds light values, but this makes the intent explicit and guards against any future @media override. */ :root[data-theme="light"] { --bg: #f4f2ec; --panel: #ffffff; --line: #d8d3c4; --ink: #23211c; --muted: #7a7568; --goldenrod: #c99a1e; --goldenrod-deep: #a67e12; --crimson: #b31432; --cyan: #005F5F; --cyan-hover: #00807f; --c-red: #b31432; --c-green: #3f7d34; --c-blue: #1f5fa8; --c-yellow: #9a7d10; --c-purple: #6b3fa0; --c-orange: #b5641c; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } a { color: var(--cyan); text-decoration: none; } a:hover { color: var(--cyan-hover); text-decoration: underline; } .wrap { max-width: 900px; margin: 0 auto; padding: 1.25rem 1rem 4rem; } .topbar { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto; padding: .6rem 1rem; border-bottom: 2px solid var(--goldenrod); } .brand { color: var(--goldenrod-deep); font-weight: 800; letter-spacing: .02em; font-size: 1.05rem; } .topbar nav { display: flex; gap: 1rem; align-items: center; } .linkbtn { background: none; border: none; color: var(--cyan); font: inherit; cursor: pointer; padding: 0; } .linkbtn:hover { text-decoration: underline; } .pagetitle { font-size: 1.2rem; margin: .3rem 0 1rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .4rem; } .crumbs { color: var(--muted); font-size: .85rem; margin-bottom: .5rem; } .crumbs a { color: var(--cyan); } .muted { color: var(--muted); } .notice { border: 1px solid var(--line); border-left: 3px solid var(--goldenrod); background: var(--panel); padding: .6rem .8rem; border-radius: 2px; font-size: .9rem; margin: .5rem 0 1rem; } .boardlist, .threadlist { list-style: none; padding: 0; margin: 0; } .boarditem, .threaditem { padding: .6rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; } .boardname, .threadtitle { color: var(--cyan); font-weight: 600; } .boardname:hover, .threadtitle:hover { color: var(--cyan-hover); } .boarddesc { color: var(--muted); font-size: .85rem; } .meta { color: var(--muted); font-size: .8rem; margin-left: auto; } .badge { font-size: .68rem; padding: .1rem .45rem; border-radius: 2px; border: 1px solid var(--line); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .badge.lvl1 { color: var(--goldenrod-deep); border-color: var(--goldenrod); } .badge.lvl2 { color: var(--crimson); border-color: var(--crimson); } .posts { margin: 1rem 0; } .post { border: 1px solid var(--line); background: var(--panel); border-radius: 2px; padding: .7rem .9rem; margin-bottom: .7rem; } .posthead { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; } .author { font-weight: 700; color: var(--crimson); } .avatar { width: 28px; height: 28px; border-radius: 3px; object-fit: cover; } .noavatar { background: var(--line); display: inline-block; } .postbody p { margin: .4rem 0; } .postbody code { background: var(--bg); padding: .05rem .3rem; border-radius: 2px; border: 1px solid var(--line); font-family: ui-monospace, Menlo, Consolas, monospace; } .postbody img { max-width: 100%; border-radius: 2px; margin: .4rem 0; } .c-red { color: var(--c-red); } .c-green { color: var(--c-green); } .c-blue { color: var(--c-blue); } .c-yellow { color: var(--c-yellow); } .c-purple { color: var(--c-purple); } .c-orange { color: var(--c-orange); } .postform { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; } .postform input, .postform textarea { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 2px; padding: .45rem .6rem; font: inherit; resize: vertical; } .postform input:focus, .postform textarea:focus { outline: 2px solid var(--goldenrod); outline-offset: -1px; border-color: var(--goldenrod); } .postform button, .dlbtn { align-self: flex-start; background: var(--goldenrod); color: #23211c; border: none; border-radius: 2px; padding: .4rem 1rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; } .postform button:hover, .dlbtn:hover { background: var(--goldenrod-deep); text-decoration: none; color: #fff; } .postform label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); } .formrow { display: flex; gap: 1rem; align-items: center; } .newthread summary, .fileupload summary { cursor: pointer; color: var(--cyan); margin: .8rem 0 .4rem; } .reply { border-top: 1px solid var(--line); padding-top: 1rem; } .keyline code { font-size: .75rem; color: var(--muted); word-break: break-all; } .filelabel { display: inline-flex; align-items: center; gap: .4rem; color: var(--cyan); cursor: pointer; font-size: .85rem; border: 1px solid var(--line); border-radius: 2px; padding: .35rem .7rem; } .filelabel:hover { border-color: var(--cyan); } .filelabel input[type="file"] { width: 0.1px; height: 0.1px; opacity: 0; position: absolute; overflow: hidden; } .uploadstatus { font-size: .8rem; min-height: 1em; } .avatar-lg { width: 96px; height: 96px; border-radius: 4px; } .profile-avatar { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 1.5rem; } .avatar-form { display: flex; flex-direction: column; gap: .3rem; } .filecat { margin: 1.5rem 0; } .filecat-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; border-bottom: 2px solid var(--goldenrod); padding-bottom: .3rem; margin-bottom: .5rem; } .filecat-name { font-size: 1rem; font-weight: 700; margin: 0; color: var(--goldenrod-deep); } .filetable { width: 100%; border-collapse: collapse; font-size: .85rem; } .filetable th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: .3rem .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; } .filetable td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; } .fname { font-weight: 600; } .fdesc { display: block; font-weight: 400; font-size: .8rem; margin-top: .1rem; } .fsize { white-space: nowrap; color: var(--muted); } .fhash code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; color: var(--cyan); } .fdl { text-align: right; white-space: nowrap; } .dlbtn { padding: .25rem .7rem; font-size: .8rem; } .dllocked { color: var(--crimson); font-size: .78rem; border: 1px dashed var(--crimson); padding: .2rem .5rem; border-radius: 2px; white-space: nowrap; } .foot { max-width: 900px; margin: 2rem auto 0; padding: 1rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media (max-width: 640px) { .filetable, .filetable thead, .filetable tbody, .filetable th, .filetable td, .filetable tr { display: block; } .filetable thead { display: none; } .filetable tr { border: 1px solid var(--line); border-radius: 2px; margin-bottom: .5rem; padding: .3rem; } .filetable td { border: none; padding: .2rem .3rem; } .fdl { text-align: left; } } /* theme toggle in nav */ .themetoggle { display: inline; margin: 0; } .themetoggle .linkbtn { font-size: 1rem; line-height: 1; } /* post edit/delete affordances */ .postactions { display: flex; gap: .5rem; font-size: .78rem; } .postactions a { color: var(--muted); } .postactions a:hover { color: var(--crimson); } .dangerbtn { background: var(--crimson); color: #fff; border: none; border-radius: 2px; padding: .4rem 1rem; font: inherit; font-weight: 700; cursor: pointer; } .dangerbtn:hover { filter: brightness(0.9); }