/* L.O.S Farms community site. Themes are selected with . */ :root, [data-theme="classic"] { --bg: #fdf6e3; --surface: #fffaf0; --surface-alt: #f7eedb; --text: #3b2a1a; --muted: #7a6650; --link: #0f6e9c; --link-strong: #0b5a80; --border: #6b3f1d; --row-border: #eadfca; --head-from: #8b5a2b; --head-to: #5c3317; --head-text: #fff8e7; --header-from: #8b5a2b; --header-to: #5a2a12; --nav-text: #fff4dc; --nav-active-bg: rgba(242, 194, 48, 0.22); --nav-active-text: #f6c343; --brand-a: #f6c343; --brand-b: #8fd0f5; --gold: #f2c230; --gold-dark: #d9a514; --gold-text: #5a2a12; --accent: #0f6e9c; --accent-text: #ffffff; --icon-from: #e8762b; --icon-to: #c4501b; --input-bg: #ffffff; --input-border: #d6c4a4; --chip-bg: #eef5f0; --chip-border: #c9dccf; --footer-from: #17365a; --footer-to: #0c2034; --footer-text: #d6e2ef; --shadow: 0 4px 14px rgba(60, 35, 15, 0.12); --online: #1f9d55; --online-bg: #e5f6ec; color-scheme: light; } [data-theme="autumn"] { --bg: #fbf1e6; --surface: #fffaf4; --surface-alt: #f8e8d6; --text: #3d2016; --muted: #85604c; --link: #b3471c; --link-strong: #8f3512; --border: #9c3f1c; --row-border: #f0dccb; --head-from: #b8531f; --head-to: #7a2c12; --header-from: #c8641e; --header-to: #8a2f14; --nav-active-bg: rgba(255, 214, 150, 0.25); --nav-active-text: #ffd27a; --brand-a: #ffd27a; --brand-b: #ffe9c7; --gold: #e3a13b; --gold-dark: #c7841f; --gold-text: #4a1b0a; --accent: #b8531f; --icon-from: #e0662a; --icon-to: #b33c16; --input-border: #e2c3a8; --chip-bg: #fbeee2; --chip-border: #efd0b5; --footer-from: #6b2a14; --footer-to: #3f170a; --footer-text: #f6dcc8; } [data-theme="moonlit"] { --bg: #131b31; --surface: #1b2644; --surface-alt: #22305a; --text: #e3e9f7; --muted: #9fb0d4; --link: #7cc4f5; --link-strong: #a7d8fa; --border: #3a4f86; --row-border: #2a3a66; --head-from: #2c3e6b; --head-to: #1b2748; --head-text: #f1f5ff; --header-from: #0e1730; --header-to: #1f2f58; --nav-text: #dbe5ff; --nav-active-bg: rgba(232, 197, 71, 0.18); --nav-active-text: #e8c547; --brand-a: #e8c547; --brand-b: #8fd0f5; --gold: #e8c547; --gold-dark: #cfae2e; --gold-text: #1b2340; --accent: #4d9ee0; --icon-from: #4d78c4; --icon-to: #2d4f96; --input-bg: #111a33; --input-border: #3a4f86; --chip-bg: #22305a; --chip-border: #3a4f86; --footer-from: #0b1226; --footer-to: #070c1a; --footer-text: #b8c6e6; --shadow: 0 4px 18px rgba(0, 0, 0, 0.45); --online: #5fd08a; --online-bg: rgba(95, 208, 138, 0.14); color-scheme: dark; } [data-theme="dark"] { --bg: #1d1f24; --surface: #272a31; --surface-alt: #30343c; --text: #e6e6e6; --muted: #a3a8b2; --link: #6cb6ea; --link-strong: #9ccff3; --border: #454a55; --row-border: #363a43; --head-from: #3b3f47; --head-to: #2a2d33; --head-text: #f2f2f2; --header-from: #2b2e35; --header-to: #1a1c20; --nav-text: #e2e2e2; --nav-active-bg: rgba(212, 176, 76, 0.18); --nav-active-text: #d4b04c; --brand-a: #d4b04c; --brand-b: #8fc6ec; --gold: #d4b04c; --gold-dark: #b8962f; --gold-text: #1d1f24; --accent: #3d8fcb; --icon-from: #5a606c; --icon-to: #40454f; --input-bg: #1d1f24; --input-border: #454a55; --chip-bg: #30343c; --chip-border: #454a55; --footer-from: #16181c; --footer-to: #0f1013; --footer-text: #b5b9c2; --shadow: 0 4px 16px rgba(0, 0, 0, 0.4); --online: #5fd08a; --online-bg: rgba(95, 208, 138, 0.14); color-scheme: dark; } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body.los-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; transition: background-color 0.3s, color 0.3s; } .los-body a { color: var(--link); text-decoration: none; } .los-body a:hover { color: var(--link-strong); text-decoration: underline; } .los-main { flex: 1; position: relative; z-index: 1; padding: 24px 16px 48px; } .los-container { max-width: 960px; margin: 0 auto; } .los-container-wide { max-width: 1180px; margin: 0 auto; } .los-muted { color: var(--muted); } .los-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------- Header ---------- */ .los-header { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, var(--header-from), var(--header-to)); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); } .los-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 0 24px; } .los-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); } .los-body .los-brand:hover { text-decoration: none; } .los-brand-a { color: var(--brand-a); } .los-brand-b { color: var(--brand-b); } .los-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .los-nav a, .los-nav button { display: inline-flex; align-items: center; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--nav-text); font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .los-body .los-nav a:hover, .los-nav button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; } .los-body .los-nav a.active { background: var(--nav-active-bg); color: var(--nav-active-text); } .los-nav form { margin: 0; } .los-nav-toggle { display: none; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--nav-text); border-radius: 8px; padding: 6px 10px; font-size: 1.2rem; cursor: pointer; } @media (max-width: 820px) { .los-header-inner { flex-wrap: wrap; padding: 10px 16px; } .los-nav-toggle { display: inline-block; } .los-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 8px; } .los-nav.open { display: flex; } } .los-impersonation { background: #f59e0b; color: #3b2303; text-align: center; padding: 8px 16px; font-weight: 600; font-size: 0.9rem; } .los-impersonation button { background: none; border: 0; text-decoration: underline; font: inherit; cursor: pointer; color: inherit; } /* ---------- Footer ---------- */ .los-footer { position: relative; z-index: 1; background: linear-gradient(180deg, var(--footer-from), var(--footer-to)); color: var(--footer-text); text-align: center; padding: 36px 16px; font-size: 0.88rem; } .los-footer-links { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .los-body .los-footer-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--gold); font-weight: 600; } .los-body .los-footer-link:hover { background: rgba(255, 255, 255, 0.14); color: var(--gold); text-decoration: none; } .los-footer-link svg { width: 18px; height: 18px; } /* ---------- Breadcrumbs, headings, flash ---------- */ .los-breadcrumb { font-size: 0.9rem; color: var(--muted); margin: 0 0 16px; } .los-breadcrumb span { margin: 0 4px; } .los-page-title { font-size: 1.6rem; font-weight: 600; margin: 0 0 6px; color: var(--text); display: flex; align-items: center; gap: 10px; } .los-page-intro { margin: 0 0 20px; color: var(--text); } .los-flash { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--online-bg); color: var(--online); border: 1px solid var(--online); font-weight: 600; } .los-errors { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: #fdecec; color: #9b1c1c; border: 1px solid #f3b5b5; } .los-errors ul { margin: 0; padding-left: 18px; } /* ---------- Cards ---------- */ .los-card { background: var(--surface); border: 2px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 24px; } .los-card-head { background: linear-gradient(180deg, var(--head-from), var(--head-to)); color: var(--head-text); padding: 12px 20px; font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .los-card-head.upper { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.92rem; } .los-card-head.center { justify-content: center; } .los-card-body { padding: 18px 20px; } .los-card-body.flush { padding: 0; } .los-card-kicker { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; } .los-card-title { font-size: 1.5rem; font-weight: 500; margin: 2px 0 0; } /* ---------- Buttons ---------- */ .los-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; line-height: 1.2; transition: transform 0.12s, filter 0.12s, background-color 0.12s; } .los-body .los-btn:hover { text-decoration: none; filter: brightness(1.05); transform: translateY(-1px); } .los-body .los-btn-gold { background: linear-gradient(180deg, #ffd65a, var(--gold)); color: var(--gold-text); box-shadow: 0 3px 0 var(--gold-dark); } .los-body .los-btn-gold:hover { color: var(--gold-text); } .los-body .los-btn-blue { background: var(--accent); color: var(--accent-text); } .los-body .los-btn-blue:hover { color: var(--accent-text); } .los-body .los-btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .los-body .los-btn-outline:hover { color: var(--text); background: var(--surface-alt); } .los-body .los-btn-danger { background: #b42318; color: #fff; } .los-body .los-btn-danger:hover { color: #fff; } .los-btn-sm { padding: 5px 12px; font-size: 0.8rem; } .los-btn-lg { padding: 14px 36px; font-size: 1.05rem; } .los-btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ---------- Forms ---------- */ .los-form { display: grid; gap: 16px; } .los-field label, .los-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; } .los-hint { font-size: 0.83rem; color: var(--muted); margin-top: 4px; } .los-input, .los-textarea, .los-select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; } .los-textarea { min-height: 160px; resize: vertical; } .los-input:focus, .los-textarea:focus, .los-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .los-check { display: flex; gap: 10px; align-items: flex-start; } .los-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); } .los-field-error { color: #c0392b; font-size: 0.85rem; margin-top: 4px; } /* ---------- Layout with sidebar ---------- */ .los-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; } @media (max-width: 900px) { .los-with-sidebar { grid-template-columns: 1fr; } } /* ---------- Forums ---------- */ .los-forum-row { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) 80px 80px minmax(0, 1.4fr); gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--row-border); } .los-forum-row:first-child { border-top: 0; } .los-forum-icon { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(180deg, var(--icon-from), var(--icon-to)); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); } .los-forum-name { font-weight: 700; font-size: 1rem; color: var(--text); } .los-body a.los-forum-name { color: var(--text); } .los-forum-desc { font-size: 0.86rem; color: var(--muted); } .los-count { text-align: center; } .los-count b { display: block; font-size: 1rem; font-weight: 600; } .los-count span { font-size: 0.78rem; color: var(--muted); } .los-latest { text-align: right; font-size: 0.86rem; color: var(--muted); min-width: 0; } .los-latest a { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } @media (max-width: 700px) { .los-forum-row { grid-template-columns: 40px 1fr 60px; } .los-forum-row .los-count:nth-of-type(2), .los-forum-row .los-latest { display: none; } } .los-stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--row-border); } .los-stat-row:last-child { border-bottom: 0; } .los-stat-row b { font-weight: 700; } .los-online-list { display: flex; flex-wrap: wrap; gap: 8px; } .los-body .los-online-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--online-bg); border: 1px solid color-mix(in srgb, var(--online) 40%, transparent); color: var(--online); font-size: 0.85rem; font-weight: 600; } .los-online-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--online); } .los-latest-post { padding: 10px 0; border-bottom: 1px solid var(--row-border); } .los-latest-post:last-child { border-bottom: 0; } .los-latest-post a { font-weight: 600; color: var(--text); } .los-latest-post div { font-size: 0.82rem; color: var(--muted); } .los-thread-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px minmax(0, 200px); gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--row-border); } .los-thread-row:first-child { border-top: 0; } .los-thread-title { font-weight: 700; font-size: 1rem; } .los-thread-meta { font-size: 0.83rem; color: var(--muted); } .los-tag { display: inline-block; padding: 1px 8px; margin-right: 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; vertical-align: 2px; } .los-tag-pin { background: var(--gold); color: var(--gold-text); } .los-tag-lock { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--row-border); } @media (max-width: 700px) { .los-thread-row { grid-template-columns: 1fr 70px; } .los-thread-row > :nth-child(3), .los-thread-row > :nth-child(4) { display: none; } } .los-post { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-top: 1px solid var(--row-border); } .los-post:first-child { border-top: 0; } .los-post-author { padding: 18px; background: var(--surface-alt); text-align: center; border-right: 1px solid var(--row-border); } .los-post-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border); background: var(--surface); } .los-post-author .name { display: block; font-weight: 700; margin-top: 8px; word-break: break-word; } .los-post-author .title { display: block; font-size: 0.8rem; color: var(--muted); } .los-post-author .badge-admin { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; } .los-post-body { padding: 18px 20px; min-width: 0; } .los-post-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .los-post-actions { display: flex; gap: 10px; align-items: center; } .los-post-actions form { margin: 0; display: inline; } .los-linkbtn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 0.82rem; cursor: pointer; } .los-linkbtn:hover { text-decoration: underline; } @media (max-width: 640px) { .los-post { grid-template-columns: 1fr; } .los-post-author { display: flex; gap: 12px; align-items: center; text-align: left; border-right: 0; border-bottom: 1px solid var(--row-border); padding: 12px 16px; } .los-post-author img { width: 44px; height: 44px; } .los-post-author .name { margin-top: 0; } } .los-empty { padding: 28px 20px; text-align: center; color: var(--muted); } /* ---------- Prose (Markdown) ---------- */ .los-prose { font-size: 1.02rem; line-height: 1.75; overflow-wrap: anywhere; } .los-prose > :first-child { margin-top: 0; } .los-prose > :last-child { margin-bottom: 0; } .los-prose p { margin: 0 0 1.1em; } .los-prose h2 { font-size: 1.3rem; margin: 1.4em 0 0.5em; } .los-prose h3 { font-size: 1.1rem; margin: 1.2em 0 0.4em; } .los-prose ul, .los-prose ol { margin: 0 0 1.1em; padding-left: 1.5em; } .los-prose ul { list-style: disc; } .los-prose ol { list-style: decimal; } .los-prose li { margin: 0.25em 0; } .los-prose blockquote { margin: 0 0 1.1em; padding: 6px 14px; border-left: 4px solid var(--gold); background: var(--surface-alt); border-radius: 0 8px 8px 0; } .los-prose code { background: var(--surface-alt); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; } .los-prose pre { background: var(--surface-alt); padding: 12px; border-radius: 8px; overflow-x: auto; } .los-prose pre code { background: none; padding: 0; } .los-prose img { max-width: 100%; border-radius: 8px; } .los-prose table { border-collapse: collapse; margin: 0 0 1.1em; } .los-prose th, .los-prose td { border: 1px solid var(--row-border); padding: 6px 10px; } .los-prose strong { font-weight: 700; } /* ---------- Wiki ---------- */ .los-wiki { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; } .los-wiki-nav h4 { margin: 18px 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); } .los-wiki-nav h4:first-child { margin-top: 0; } .los-wiki-nav a { display: block; padding: 5px 10px; border-radius: 6px; font-size: 0.92rem; } .los-body .los-wiki-nav a.active { background: var(--accent); color: var(--accent-text); font-weight: 700; text-decoration: none; } .los-wiki-top { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; } .los-wiki-footer { font-size: 0.82rem; color: var(--muted); margin-top: 16px; } @media (max-width: 800px) { .los-wiki { grid-template-columns: 1fr; } .los-wiki-nav { columns: 2; column-gap: 20px; } .los-wiki-nav h4 { break-after: avoid; } } /* ---------- Catalog ---------- */ .los-search { display: flex; gap: 8px; margin: 18px 0 14px; max-width: 460px; } .los-search .los-input { border-radius: 8px; } .los-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .los-body .los-chip { display: inline-block; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--link); font-size: 0.85rem; font-weight: 600; } .los-body .los-chip:hover { text-decoration: none; filter: brightness(0.97); } .los-body .los-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .los-table-wrap { border-radius: 10px; overflow-x: auto; box-shadow: var(--shadow); background: var(--surface); } .los-table { width: 100%; border-collapse: collapse; } .los-table thead th { background: linear-gradient(180deg, var(--head-from), var(--head-to)); color: var(--head-text); text-align: left; padding: 12px 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .los-table td { padding: 10px 14px; border-top: 1px solid var(--row-border); vertical-align: middle; } .los-table .icon-cell { width: 56px; } .los-table .icon-cell img, .los-icon-fallback { width: 40px; height: 40px; object-fit: contain; display: block; } .los-icon-fallback { border-radius: 8px; background: var(--surface-alt); } .los-table .cost { font-size: 0.9rem; line-height: 1.35; } .los-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; } .los-badge-market { background: #e3f5e9; color: #18794e; } .los-badge-limited { background: #fff3d6; color: #b7791f; } .los-badge-not_market { background: #e6f0fb; color: #1d5fa5; } .los-badge-retired { background: #fde8e8; color: #c53030; } .los-badge-unavailable { background: #ececec; color: #555; } [data-theme="moonlit"] .los-badge, [data-theme="dark"] .los-badge { filter: saturate(0.9) brightness(0.95); } .los-legend { display: grid; gap: 6px; font-size: 0.85rem; color: var(--muted); margin-top: 16px; } /* ---------- Pagination ---------- */ .los-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 18px 0 0; padding: 0; list-style: none; } .los-pagination a, .los-pagination span { display: inline-block; min-width: 34px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--chip-border); background: var(--surface); text-align: center; font-size: 0.88rem; } .los-pagination .current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; } .los-pagination .disabled { opacity: 0.45; } /* ---------- Leaderboard ---------- */ .los-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; } .los-body .los-tab { display: inline-block; padding: 9px 18px; border: 2px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; } .los-body .los-tab:hover { text-decoration: none; background: var(--surface-alt); color: var(--text); } .los-body .los-tab.active { background: linear-gradient(180deg, var(--head-from), var(--head-to)); color: var(--head-text); border-color: var(--head-to); } .los-leader-row { display: grid; grid-template-columns: 32px 48px minmax(0, 1fr) 90px 110px 80px; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--row-border); } .los-leader-row:first-child { border-top: 0; } .los-rank { text-align: center; font-weight: 800; color: var(--muted); font-size: 1.1rem; } .los-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); background: var(--surface-alt); } .los-leader-name { font-weight: 700; font-size: 1.02rem; } .los-body a.los-leader-name { color: var(--gold-dark); } [data-theme="moonlit"] .los-body a.los-leader-name, [data-theme="dark"] a.los-leader-name { color: var(--gold); } .los-leader-sub { font-size: 0.8rem; color: var(--muted); } .los-leader-stat { text-align: center; } .los-leader-stat b { display: block; font-size: 1.02rem; } .los-leader-stat span { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .los-leader-stat.hl b { color: var(--gold-dark); } @media (max-width: 640px) { .los-leader-row { grid-template-columns: 28px 40px minmax(0, 1fr) 80px; } .los-leader-row .los-leader-stat:not(.hl) { display: none; } } /* ---------- Profile (settings) ---------- */ .los-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .los-theme-card { position: relative; text-align: left; padding: 16px 18px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; } .los-theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .los-theme-card.selected { outline: 3px solid var(--icon-to); outline-offset: 3px; } .los-theme-card .check { position: absolute; top: 12px; right: 16px; font-size: 1.1rem; display: none; color: var(--text); } .los-theme-card.selected .check { display: block; } .los-theme-card strong { display: block; font-size: 1.05rem; margin: 10px 0 4px; } .los-theme-card span.desc { font-size: 0.88rem; color: var(--muted); } .los-swatches { display: flex; gap: 6px; } .los-swatches i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); display: block; } .los-kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 0.95rem; } .los-kv dt { font-weight: 600; color: var(--muted); } .los-kv dd { margin: 0; } .los-save-note { font-size: 0.85rem; color: var(--online); font-weight: 600; min-height: 1.2em; } /* ---------- Member profile ---------- */ .los-member-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .los-member-hero img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--member-accent, var(--border)); background: var(--surface-alt); } .los-member-hero h1 { margin: 0; font-size: 1.7rem; } .los-member-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 18px; } .los-member-stat { background: var(--surface-alt); border-radius: 10px; padding: 12px; text-align: center; } .los-member-stat b { display: block; font-size: 1.25rem; } .los-member-stat span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .los-socials { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- Home ---------- */ .los-home-bg { background: linear-gradient(180deg, #8fd0ee 0%, #bfe6c4 26%, #74b63d 42%, #4a8f22 100%); } [data-theme="moonlit"] .los-home-bg { background: linear-gradient(180deg, #0e1730 0%, #1f2f58 30%, #20452a 48%, #132b18 100%); } [data-theme="dark"] .los-home-bg { background: linear-gradient(180deg, #2b2e35 0%, #1d1f24 45%); } [data-theme="autumn"] .los-home-bg { background: linear-gradient(180deg, #f6c98f 0%, #f3d9b0 26%, #c8862f 42%, #9a5a1c 100%); } .los-banner { max-width: 900px; margin: -24px auto 24px; display: block; } .los-banner img { width: 100%; display: block; } .los-banner-art { position: relative; height: 220px; overflow: hidden; border-radius: 0 0 16px 16px; } .los-banner-art .title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 800; -webkit-text-stroke: 7px #5a2a12; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); } .los-home-card { max-width: 680px; margin: 0 auto 32px; } .los-news-item { padding: 14px 0; border-bottom: 1px solid var(--row-border); text-align: left; } .los-news-item:last-child { border-bottom: 0; } .los-news-item h3 { margin: 0 0 2px; font-size: 1.05rem; } .los-notice { max-width: 830px; margin: 12px auto 16px; padding: 16px 22px; border-radius: 10px; background: rgba(17, 38, 24, 0.92); color: #f3f6f1; text-align: center; font-size: 0.92rem; line-height: 1.6; } /* ---------- Chat widget ---------- */ .los-chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: 0; background: linear-gradient(180deg, #1784bd, #0b5a80); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; } .los-chat-fab svg { width: 28px; height: 28px; } .los-chat-fab .unread { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e53e3e; color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 20px; display: none; } .los-chat-fab .unread.show { display: block; } .los-chat-dock { position: fixed; right: 92px; bottom: 12px; z-index: 59; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 12px; pointer-events: none; } .los-chat-panel { pointer-events: auto; width: 320px; height: 440px; max-height: calc(100vh - 110px); background: #fff; color: #1f2933; border-radius: 12px 12px 8px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; } [data-theme="moonlit"] .los-chat-panel, [data-theme="dark"] .los-chat-panel { background: var(--surface); color: var(--text); } .los-chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; color: #fff; font-weight: 700; background: linear-gradient(180deg, var(--head-from), var(--head-to)); } .los-chat-panel-head.blue { background: linear-gradient(180deg, #1784bd, #0b5a80); } .los-chat-panel-head.staff { background: linear-gradient(180deg, #c07a2a, #8a4d14); } .los-chat-panel-head .title { display: flex; align-items: center; gap: 8px; min-width: 0; } .los-chat-panel-head .title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .los-chat-panel-head .actions { display: flex; gap: 6px; } .los-chat-iconbtn { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; } .los-chat-iconbtn:hover { background: rgba(255, 255, 255, 0.32); } .los-chat-channels { flex: 1; overflow-y: auto; } .los-chat-channel { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; } .los-chat-channel:hover { background: rgba(0, 0, 0, 0.05); } .los-chat-channel .info { min-width: 0; flex: 1; } .los-chat-channel .name { font-weight: 700; display: block; } .los-chat-channel .preview { display: block; font-size: 0.82rem; opacity: 0.65; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .los-chat-channel .count { background: #e53e3e; color: #fff; font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; } .los-chat-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; } .los-chat-avatar.public { background: #1470a0; } .los-chat-avatar.staff { background: #b8742a; } .los-chat-search { padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .los-chat-messages { flex: 1; overflow-y: auto; padding: 12px; background: #f5f5f5; display: flex; flex-direction: column; gap: 10px; } [data-theme="moonlit"] .los-chat-messages, [data-theme="dark"] .los-chat-messages { background: var(--bg); } .los-chat-msg { display: flex; gap: 8px; align-items: flex-start; } .los-chat-msg img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .los-chat-msg .bubble { background: #fff; border-radius: 12px; padding: 6px 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); max-width: 220px; overflow-wrap: anywhere; } [data-theme="moonlit"] .los-chat-msg .bubble, [data-theme="dark"] .los-chat-msg .bubble { background: var(--surface-alt); } .los-chat-msg .who { font-size: 0.75rem; font-weight: 700; opacity: 0.75; } .los-chat-msg .when { font-size: 0.68rem; opacity: 0.5; margin-left: 4px; font-weight: 400; } .los-chat-msg.mine { flex-direction: row-reverse; } .los-chat-msg.mine .bubble { background: #1478ac; color: #fff; } .los-chat-empty { margin: auto; text-align: center; opacity: 0.55; font-size: 0.9rem; } .los-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .los-chat-form input { flex: 1; min-width: 0; border: 1px solid #c9d3dc; border-radius: 999px; padding: 9px 14px; font: inherit; background: #fff; color: #1f2933; } [data-theme="moonlit"] .los-chat-form input, [data-theme="dark"] .los-chat-form input { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } .los-chat-form input:focus { outline: 2px solid #1478ac; border-color: #1478ac; } .los-chat-form button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1478ac; color: #fff; cursor: pointer; font-size: 1rem; } @media (max-width: 720px) { .los-chat-dock { right: 8px; left: 8px; bottom: 90px; flex-direction: column-reverse; align-items: stretch; } .los-chat-panel { width: auto; height: 60vh; } .los-chat-dock .los-chat-panel:not(:first-child) { display: none; } } /* ---------- Theme effects ---------- */ .los-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .los-leaf { position: absolute; top: -40px; will-change: transform; animation: los-fall linear infinite; opacity: 0.85; } @keyframes los-fall { 0% { transform: translate3d(0, -40px, 0) rotate(0deg); } 25% { transform: translate3d(40px, 25vh, 0) rotate(90deg); } 50% { transform: translate3d(-20px, 50vh, 0) rotate(180deg); } 75% { transform: translate3d(35px, 75vh, 0) rotate(270deg); } 100% { transform: translate3d(0, 105vh, 0) rotate(360deg); } } .los-star { position: absolute; border-radius: 50%; background: #fff; animation: los-twinkle ease-in-out infinite; } @keyframes los-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.95; } } @media (prefers-reduced-motion: reduce) { .los-leaf { display: none; } .los-star { animation: none; opacity: 0.6; } } /* ---------- Admin: players, stats, audit log ---------- */ .los-admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 20px; } .los-admin-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); border-top: 4px solid var(--tone, var(--accent)); } .los-admin-stat span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .los-admin-stat b { font-size: 1.9rem; line-height: 1.1; color: var(--tone, var(--text)); } .tone-blue { --tone: #0f6e9c; } .tone-green { --tone: #1f9d55; } .tone-orange { --tone: #c97a1a; } .tone-red { --tone: #b42318; } .los-admin-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .los-admin-filter .los-input { flex: 1 1 240px; } .los-admin-filter .los-select { flex: 0 0 auto; width: auto; } .los-admin-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; } @media (max-width: 860px) { .los-admin-charts { grid-template-columns: minmax(0, 1fr); } } .los-bars { display: flex; align-items: flex-end; gap: 3px; height: 200px; border-left: 1px solid var(--row-border); border-bottom: 1px solid var(--row-border); padding: 0 4px; } .los-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; } .los-bar i { display: block; width: 100%; min-height: 1px; background: var(--accent); border-radius: 3px 3px 0 0; } .los-bars-axis { display: flex; gap: 3px; padding: 4px 4px 0; font-size: 0.72rem; color: var(--muted); } .los-bars-axis span { flex: 1 1 0; white-space: nowrap; overflow: visible; } .los-donut { width: 180px; max-width: 100%; aspect-ratio: 1; margin: 6px auto 14px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); } .los-donut-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 0.85rem; color: var(--muted); } .los-donut-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .los-donut-legend b { color: var(--text); margin-left: 4px; } .los-wealth-row { display: grid; grid-template-columns: 32px minmax(90px, 180px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; } .los-wealth-bar { background: var(--surface-alt); border-radius: 999px; overflow: hidden; } .los-wealth-bar i { display: block; padding: 3px 10px; text-align: right; font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--gold-text); background: linear-gradient(90deg, #ffe08a, var(--gold)); border-radius: 999px; white-space: nowrap; min-width: fit-content; } @media (max-width: 600px) { .los-wealth-row { grid-template-columns: 28px minmax(0, 1fr) auto; } .los-wealth-bar { grid-column: 1 / -1; } } .los-badge-admin { background: #dbeafe; color: #0b4f8a; } .los-badge-banned { background: #fde2e1; color: #9b1c1c; } .los-badge-online { background: var(--online-bg); color: var(--online); } .los-badge-player { background: var(--surface-alt); color: var(--muted); } .los-badge-action { background: #fdeede; color: #8a4410; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.7rem; } .los-footer-legal { margin-top: 12px; font-size: 0.82rem; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .los-footer-legal a { color: var(--footer-text); opacity: 0.85; } .los-footer-legal a:hover { opacity: 1; } /* ---------- Auction House ---------- */ .los-auction-balance { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; } .los-auction-balance .los-chip { font-weight: 700; font-size: 0.95rem; padding: 6px 14px; } .los-auction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .los-auction-card { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .los-auction-card.sold-out { opacity: 0.6; } .los-auction-art { display: grid; place-items: center; height: 150px; background: var(--surface-alt); font-size: 3rem; } .los-auction-art img { max-width: 110px; max-height: 110px; image-rendering: auto; } .los-auction-info { padding: 0 16px; flex: 1; } .los-auction-info h2 { margin: 2px 0 6px; font-size: 1.08rem; } .los-auction-price { display: flex; gap: 12px; font-weight: 700; margin-bottom: 4px; } .los-auction-card form, .los-auction-card > .los-btn { padding: 0 16px; } .los-auction-card .los-btn { width: 100%; } .los-auction-card > .los-btn { width: auto; margin: 0 16px; } .los-auction-slot-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .los-auction-slot-form .los-input { width: 92px; padding: 5px 8px; } .los-auction-slot-form .los-input[name="item_code"] { width: 84px; } /* ---------- Forum features ---------- */ .los-thread-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .los-tag-solved { background: var(--online-bg); color: var(--online); border: 1px solid var(--online); } .los-tag-new { background: var(--accent); color: var(--accent-text); text-decoration: none; } .los-body .los-tag-new:hover { color: var(--accent-text); text-decoration: none; } .los-tag-prefix { background: var(--surface-alt); color: var(--text); border: 1px solid var(--row-border); } .prefix-question { background: #e0efff; color: #0b4f8a; border-color: #b9d6f5; } .prefix-guide { background: #e5f6ec; color: #16693a; border-color: #b8e2c7; } .prefix-bug { background: #fde2e1; color: #9b1c1c; border-color: #f3b5b5; } .prefix-suggestion { background: #f3e8ff; color: #6b21a8; border-color: #dcc3f5; } .prefix-trade { background: #fff4d6; color: #7a5200; border-color: #f0d890; } .prefix-showcase { background: #ffe8dc; color: #9a3412; border-color: #f5c6aa; } .los-thread-title.unread, .los-latest-post a.unread { font-weight: 800; } .los-solution-banner { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: var(--online-bg); border: 1px solid var(--online); color: var(--text); } .los-solution-banner blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--online); color: var(--muted); } .los-post.is-solution { box-shadow: inset 4px 0 0 var(--online); } .los-unread-divider { display: flex; align-items: center; gap: 10px; padding: 6px 18px; color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; } .los-unread-divider::before, .los-unread-divider::after { content: ""; flex: 1; border-top: 2px solid var(--accent); } .los-farm-level { display: block; font-size: 0.78rem; font-weight: 700; color: var(--online); } .los-permalink { color: inherit; } .los-post-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.82rem; } .los-post-actions form { display: inline; } .los-report { position: relative; display: inline-block; } .los-report summary { list-style: none; cursor: pointer; } .los-report summary::-webkit-details-marker { display: none; } .los-report-form { position: absolute; right: 0; z-index: 5; display: flex; gap: 6px; width: min(340px, 80vw); margin-top: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--row-border); border-radius: 8px; box-shadow: var(--shadow); } .los-report-form .los-input { flex: 1; padding: 5px 8px; } .los-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .los-reactions form { display: inline; } .los-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--row-border); background: var(--surface-alt); color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; line-height: 1.6; } .los-reaction .n { font-weight: 700; min-width: 0; } .los-reaction.empty { opacity: 0.55; } .los-reaction.empty:hover, .los-reaction.empty:focus-visible { opacity: 1; } .los-reaction.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); opacity: 1; } .los-composer { position: relative; } .los-composer-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border: 1px solid var(--input-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface-alt); } .los-composer-bar button { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; cursor: pointer; } .los-composer-bar button:hover, .los-composer-bar button:focus-visible { border-color: var(--row-border); background: var(--surface); } .los-composer-tabs { margin-left: auto; display: inline-flex; gap: 2px; } .los-composer-tabs button.active { background: var(--surface); border-color: var(--row-border); font-weight: 700; } .los-composer textarea { border-top-left-radius: 0; border-top-right-radius: 0; min-height: 170px; } .los-composer-preview { min-height: 170px; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 0 0 8px 8px; background: var(--input-bg); } .los-mention-list { position: absolute; left: 12px; z-index: 10; margin: 4px 0 0; padding: 4px; list-style: none; min-width: 200px; background: var(--surface); border: 1px solid var(--row-border); border-radius: 8px; box-shadow: var(--shadow); } .los-mention-list li { padding: 6px 10px; border-radius: 6px; cursor: pointer; } .los-mention-list li:hover, .los-mention-list li.active { background: var(--surface-alt); } .los-composer-draft { color: var(--online); } .los-search-result { padding: 12px 18px; border-bottom: 1px solid var(--row-border); } .los-search-result:last-child { border-bottom: 0; } .los-search-result p { margin: 4px 0 0; color: var(--muted); } .los-bell { position: relative; } .los-badge-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #d64545; color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center; vertical-align: 1px; } .los-notification { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--row-border); color: var(--text); } .los-body a.los-notification:hover { text-decoration: none; background: var(--surface-alt); } .los-notification.unread { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .los-notification-icon { font-size: 1.3rem; } .los-notification-excerpt { display: block; color: var(--muted); font-size: 0.88rem; margin: 2px 0; } .los-report-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--row-border); } .los-report-reason { margin: 6px 0; font-weight: 600; } .los-report-row blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--row-border); } /* ---------- Wiki features ---------- */ .los-wiki-top { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .los-wiki-top form { display: inline; } .los-wiki-search { margin: 0 0 12px; } .los-wiki-search .los-input { width: 100%; } .los-wiki-prose a.missing { color: #c0392b; border-bottom: 1px dashed currentColor; } .los-wiki-prose .los-anchor { margin-left: 6px; opacity: 0; font-size: 0.8em; text-decoration: none; } .los-wiki-prose :is(h2, h3):hover .los-anchor, .los-wiki-prose .los-anchor:focus { opacity: 0.6; } .los-wiki-prose .los-toc { float: right; max-width: 280px; margin: 0 0 16px 20px; padding: 12px 18px 12px 30px; background: var(--surface-alt); border: 1px solid var(--row-border); border-radius: 10px; font-size: 0.9rem; } .los-wiki-prose .los-toc::before { content: "Contents"; display: block; margin: 0 0 6px -12px; font-weight: 700; } @media (max-width: 700px) { .los-wiki-prose .los-toc { float: none; max-width: none; margin: 0 0 16px; } } .los-wiki-prose table, .los-item-page table { border-collapse: collapse; margin: 12px 0; } .los-wiki-prose :is(th, td), .los-item-page :is(th, td) { padding: 6px 12px; border: 1px solid var(--row-border); } .los-wiki-prose th, .los-item-page th { background: var(--surface-alt); } .los-diff { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; border: 1px solid var(--row-border); border-radius: 8px; overflow-x: auto; } .los-diff-line { display: block; padding: 1px 10px; white-space: pre-wrap; word-break: break-word; } .los-diff-line > span[aria-hidden] { display: inline-block; width: 1.4em; color: var(--muted); } .los-diff-line.add, .los-diff-legend .add { background: #e6f6ea; color: #14532d; } .los-diff-line.del, .los-diff-legend .del { background: #fdecec; color: #7f1d1d; text-decoration: line-through; text-decoration-color: rgba(127, 29, 29, 0.35); } .los-diff-line.gap { color: var(--muted); text-align: center; background: var(--surface-alt); } .los-diff-legend span { padding: 0 6px; border-radius: 4px; margin-left: 6px; } .los-item-result { display: flex; gap: 12px; align-items: center; padding: 8px 18px; border-bottom: 1px solid var(--row-border); color: var(--text); } .los-item-result img { width: 36px; height: 36px; object-fit: contain; } .los-item-page { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; padding: 24px 28px; } .los-item-page > .los-prose { grid-column: 1; grid-row: 1; } .los-infobox { grid-column: 2; grid-row: 1; align-self: start; border: 1px solid var(--row-border); border-radius: 10px; background: var(--surface-alt); overflow: hidden; } .los-infobox-art { display: grid; place-items: center; min-height: 140px; background: var(--surface); } .los-infobox-art img { max-width: 120px; max-height: 120px; } .los-infobox dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; padding: 14px 16px; font-size: 0.88rem; } .los-infobox dt { font-weight: 700; color: var(--muted); } .los-infobox dd { margin: 0; word-break: break-word; } @media (max-width: 760px) { .los-item-page { grid-template-columns: minmax(0, 1fr); padding: 18px; } .los-infobox { grid-column: 1; grid-row: 1; } .los-item-page > .los-prose { grid-row: 2; } } .los-callout { padding: 10px 14px; border-radius: 8px; background: var(--surface-alt); border-left: 4px solid var(--gold); } .los-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 18px; } .los-collectibles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; } .los-collectibles li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: var(--surface-alt); text-align: center; font-size: 0.8rem; } .los-collectibles img { width: 44px; height: 44px; object-fit: contain; } .los-collectibles small { color: var(--muted); text-transform: uppercase; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; } .los-collectibles .rarity-uncommon small { color: #1f6fb2; } .los-collectibles .rarity-rare small { color: #9a3412; } .los-quest-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; } .los-quest-body h3 { margin: 0 0 4px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .los-quest-body ul { margin: 0; padding-left: 18px; } [data-theme="sunflower"] { --bg: #fffbe6; --surface: #fffef6; --surface-alt: #fbf3cf; --text: #2f3a17; --muted: #6b7043; --link: #2f7a3c; --link-strong: #1f5c2b; --border: #5b8a2a; --row-border: #efe5b8; --head-from: #4f8f2a; --head-to: #2f6118; --head-text: #fffbe0; --header-from: #3f7d20; --header-to: #245214; --nav-text: #fff9d6; --nav-active-bg: rgba(247, 195, 37, 0.25); --nav-active-text: #ffd84a; --brand-a: #ffd84a; --brand-b: #fff3b0; --gold: #f7c325; --gold-dark: #d9a40f; --gold-text: #3a2c00; --accent: #2f8f5b; --accent-text: #ffffff; --icon-from: #f7c325; --icon-to: #d98e0b; --input-border: #e2d59a; --chip-bg: #f3f8e4; --chip-border: #d6e4b3; --footer-from: #2f5a17; --footer-to: #1a360c; --footer-text: #eef5d6; } [data-theme="blossom"] { --bg: #fff5f8; --surface: #fffafc; --surface-alt: #fde8ef; --text: #3d1f2b; --muted: #8a5a6c; --link: #b0476f; --link-strong: #8c2f55; --border: #c46a8f; --row-border: #f6d9e4; --head-from: #c8618a; --head-to: #93385e; --head-text: #fff5f9; --header-from: #d0578a; --header-to: #8c2f55; --nav-text: #fff0f6; --nav-active-bg: rgba(255, 255, 255, 0.2); --nav-active-text: #ffe0ec; --brand-a: #ffe0ec; --brand-b: #ffffff; --gold: #f4a7c3; --gold-dark: #d97fa3; --gold-text: #4a1328; --accent: #b0476f; --accent-text: #ffffff; --icon-from: #ee8fb4; --icon-to: #c8618a; --input-border: #efc3d4; --chip-bg: #fdeef4; --chip-border: #f5cfdd; --footer-from: #7a2848; --footer-to: #4d162c; --footer-text: #fbe2ec; } /* ---------- Profiles & customization ---------- */ /* Preset banners, drawn in CSS: sky, hills, and a sun or moon. */ .los-profile-banner { height: 190px; background-size: cover; background-position: center; background-color: #8fd0f5; position: relative; } .los-profile-banner.mini { display: block; height: 54px; border-radius: 8px; } .banner-meadow { background-image: radial-gradient(circle at 82% 30%, #fff6b0 0 7%, transparent 8%), radial-gradient(ellipse 60% 40% at 20% 100%, #6fbf3a 0 98%, transparent 100%), radial-gradient(ellipse 70% 45% at 80% 105%, #57a92c 0 98%, transparent 100%), linear-gradient(#8fd0f5, #cdeefc); } .banner-sunset { background-image: radial-gradient(circle at 70% 70%, #ffd36e 0 9%, transparent 10%), radial-gradient(ellipse 80% 35% at 50% 105%, #5a3a1a 0 98%, transparent 100%), linear-gradient(#ff8f5a, #ffc27a 55%, #ffe0a8); } .banner-orchard { background-image: radial-gradient(circle at 15% 60%, #d9571f 0 4%, transparent 5%), radial-gradient(circle at 35% 55%, #e3a13b 0 5%, transparent 6%), radial-gradient(circle at 60% 62%, #b8531f 0 4%, transparent 5%), radial-gradient(ellipse 90% 40% at 50% 110%, #7a5a1c 0 98%, transparent 100%), linear-gradient(#f6c98a, #fbe3bd); } .banner-night { background-image: radial-gradient(circle at 80% 28%, #f7f2d0 0 6%, transparent 7%), radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 15%, #fff, transparent), radial-gradient(1px 1px at 60% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 55%, #fff, transparent), radial-gradient(ellipse 90% 35% at 50% 108%, #0e2a1a 0 98%, transparent 100%), linear-gradient(#0e1730, #2c3e6b); } .banner-snow { background-image: radial-gradient(ellipse 70% 40% at 25% 105%, #ffffff 0 98%, transparent 100%), radial-gradient(ellipse 70% 45% at 80% 108%, #eef6fb 0 98%, transparent 100%), linear-gradient(#b9dbf0, #e8f4fb); } .banner-cove { background-image: radial-gradient(circle at 20% 30%, #fff6b0 0 6%, transparent 7%), linear-gradient(transparent 62%, #2f7fb8 62%, #1f5f94), linear-gradient(#9fd7f7, #d6f0fc); } .banner-blossom { background-image: radial-gradient(circle at 15% 25%, #f4a7c3 0 5%, transparent 6%), radial-gradient(circle at 30% 45%, #fbd9e6 0 4%, transparent 5%), radial-gradient(circle at 75% 30%, #ee8fb4 0 5%, transparent 6%), radial-gradient(circle at 88% 55%, #f7c6d9 0 4%, transparent 5%), radial-gradient(ellipse 90% 35% at 50% 110%, #7fbf5a 0 98%, transparent 100%), linear-gradient(#ffe3ee, #fff5f8); } .los-profile-card { overflow: hidden; } .los-profile-head { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; padding: 0 24px; margin-top: -48px; position: relative; } .los-profile-avatar { flex: 0 0 auto; } .los-profile-avatar img { width: 112px !important; height: 112px !important; } .los-profile-id { flex: 1 1 280px; min-width: 0; padding-top: 52px; } .los-profile-id h1 { margin: 0; font-size: 1.7rem; word-break: break-word; } .los-profile-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 0.92rem; } .los-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; } .los-profile-actions form { margin: 0; } .los-profile-card .los-member-stats { padding: 0 24px; } .los-profile-tabs { padding: 0 24px; margin-bottom: 16px; } .los-profile-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; } .los-profile-grid.even { grid-template-columns: 1fr 1fr; } @media (max-width: 820px) { .los-profile-grid, .los-profile-grid.even { grid-template-columns: minmax(0, 1fr); } .los-profile-head { padding: 0 16px; } } /* Avatar frames */ .los-avatar-framed { display: inline-block; padding: 4px; border-radius: 50%; background: var(--frame, #8b5a2b); line-height: 0; } .los-avatar-framed img { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface) !important; background: var(--surface); } .frame-wood { --frame: repeating-linear-gradient(45deg, #8b5a2b 0 6px, #a8743f 6px 12px); } .frame-hay { --frame: repeating-linear-gradient(90deg, #e8c46a 0 4px, #d9a93c 4px 7px); } .frame-gold { --frame: conic-gradient(#f6d365, #d9a514, #fff1a8, #d9a514, #f6d365); } .frame-rainbow { --frame: conic-gradient(#ff5e5e, #ffb84d, #ffe34d, #5edb6a, #4db8ff, #9b6bff, #ff5e5e); } .frame-sunflower { --frame: repeating-conic-gradient(#f7c325 0 12deg, #e89c0b 12deg 24deg); } .frame-scroll { --frame: linear-gradient(135deg, #e9d8b0, #b89968); } .frame-founder { --frame: conic-gradient(#b87333, #f0c27b, #b87333, #f0c27b, #b87333); } .frame-staff { --frame: linear-gradient(135deg, #b42318, #e05a4f); } .los-avatar-framed { background: var(--frame); } /* Group banners, ranks, badges */ .los-user-banners { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .los-user-banner { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--banner); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 1px 1px rgba(0,0,0,.25); } .los-rank { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--surface-alt); border: 1px solid var(--row-border); font-size: 0.75rem; font-weight: 700; } .los-badge-pill { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; border: 1px solid; } .los-badge-pill.small { padding: 0 6px; font-size: 0.85rem; } .los-badge-pill input { margin: 0 4px 0 0; } .tier-bronze { background: #f7e6d6; border-color: #d9a57a; color: #7a4520; } .tier-silver { background: #eef1f5; border-color: #b6c0cc; color: #45505e; } .tier-gold { background: #fff4cc; border-color: #e6c14d; color: #6b4e00; } .los-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .los-badge-grid li { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 10px; border: 1px solid; } .los-badge-grid li.locked { background: var(--surface-alt); border-color: var(--row-border); color: var(--muted); filter: grayscale(1); opacity: 0.65; } .los-badge-grid .icon { font-size: 1.8rem; } .los-badge-grid span { font-size: 0.85rem; } .los-badge-grid small { text-transform: uppercase; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; } .los-post-badges { display: block; margin: 2px 0; } /* Showcase, wall */ .los-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .los-showcase li, .los-showcase li a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 0.78rem; color: var(--text); } .los-showcase li { padding: 8px 4px; border-radius: 8px; background: var(--surface-alt); position: relative; } .los-showcase img { width: 52px; height: 52px; object-fit: contain; } .los-showcase.editable { margin-bottom: 10px; } .los-showcase.editable [data-remove] { position: absolute; top: 2px; right: 6px; } .los-wall-post { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--row-border); } .los-wall-post .los-prose p { margin: 4px 0; } /* Settings forms */ .los-fieldset { border: 1px solid var(--row-border); border-radius: 10px; padding: 12px 16px 16px; margin: 0; } .los-fieldset legend, .los-fieldset > summary { font-weight: 700; padding: 0 6px; cursor: default; } details.los-fieldset > summary { cursor: pointer; } .los-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: end; } .los-choice-grid { display: grid; gap: 10px; } .los-choice-grid.banners { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .los-choice-grid.frames { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .los-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid var(--row-border); border-radius: 10px; cursor: pointer; text-align: center; font-size: 0.85rem; } .los-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); } .los-choice input { position: absolute; opacity: 0; pointer-events: none; } .los-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .los-choice .los-profile-banner.mini { width: 100%; } .los-choice .los-avatar-framed img { width: 56px; height: 56px; } .los-choice.locked { cursor: not-allowed; opacity: 0.55; } .los-choice small { color: var(--muted); font-size: 0.72rem; } .los-banner-current { height: 70px; margin: 8px 0; border-radius: 8px; background-size: cover; background-position: center; } .los-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .los-inline-form .los-input { width: auto; flex: 1 1 160px; } .los-input.narrow { flex: 0 0 72px !important; width: 72px !important; } .los-input.wide { flex: 2 1 240px !important; } .los-card-head .los-inline-form { flex: 1; } .los-card-head:has(.los-inline-form) { display: flex; gap: 10px; align-items: center; } .los-admin-forum-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--row-border); } .los-admin-forum-row .los-input { width: auto; flex: 1 1 150px; } .los-admin-forum-row.new { background: var(--surface-alt); } .los-chips form.los-chip { display: inline-flex; gap: 6px; align-items: center; } /* Forum posts: author panel, signatures, ignored posts, compact layout, polls */ .los-post-author-info { min-width: 0; } .los-post-author .los-avatar-framed img { width: 72px; height: 72px; } .los-post-author-stats { display: grid; gap: 2px; margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); } .los-post-author-stats div { display: flex; justify-content: center; } .los-post-author-stats dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .los-post-author-stats dd { margin: 0; } .los-post-author .los-user-banners { justify-content: center; } .los-signature { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--row-border); font-size: 0.85rem; color: var(--muted); max-height: 7em; overflow: hidden; } .los-signature p { margin: 0 0 4px; } .los-post-ignored { border-top: 1px solid var(--row-border); } .los-post-ignored > summary { padding: 10px 18px; color: var(--muted); font-size: 0.88rem; cursor: pointer; } .los-posts-compact .los-post { grid-template-columns: minmax(0, 1fr); } .los-posts-compact .los-post-author { display: flex; gap: 12px; align-items: center; text-align: left; border-right: 0; border-bottom: 1px solid var(--row-border); padding: 10px 18px; } .los-posts-compact .los-post-author .los-avatar-framed img { width: 40px; height: 40px; } .los-posts-compact .los-post-author-info { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .los-posts-compact .los-post-author .name { margin: 0; } .los-posts-compact .los-post-author-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; } @media (max-width: 700px) { .los-post-author-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; } .los-post-author .los-avatar-framed img { width: 44px; height: 44px; } } .los-poll-result { margin-bottom: 10px; } .los-poll-label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.92rem; margin-bottom: 3px; } .los-poll-bar { height: 12px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; } .los-poll-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .los-poll-result.mine .los-poll-bar i { background: var(--gold); }