:root{ --bg:#ffffff; --fg:#111; --muted:#666; --border:#ddd; --panel:#f6f6f6; --panel-hover:#ececec; --surface:#ffffff; --surface-soft:#fbfbfb; --accent-soft:#e8f0ff; --link:#0645ad; --link-visited:#0b0080; --shadow:0 1px 6px rgba(0,0,0,0.08); --table-separator:#000; --topbar-h:56px; --sidebar-w:320px; --maxw:1100px; font-synthesis-weight: none; } /* Dark theme via [data-theme="dark"] on or */ [data-theme="dark"]{ --bg:#0b0b0d; --fg:#e6e6e9; --muted:#a8a8b3; --border:#1f1f23; --panel:#0f0f11; --panel-hover:#1a1a1f; --surface:#141419; --surface-soft:#121217; --accent-soft:#1b2740; --link:#66aaff; --link-visited:#5599dd; --shadow:0 1px 6px rgba(0,0,0,0.6); --table-separator:#fff; } *{ box-sizing:border-box; } body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--fg); } input, textarea, select, button{ font: inherit; color: var(--fg); } input, textarea, select{ background: var(--surface); border: 1px solid var(--border); } button{ border:1px solid var(--border); background: var(--panel); } .theme-toggle-btn{ padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; } .theme-toggle-btn:hover{ background: var(--panel-hover); } .topbar{ height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 14px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; } .brand{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .brand-logo{ width:34px; height:34px; } .brand-name{ font-weight:600; } /* Button shown on article pages to open the editor for that article */ .open-editor-btn{ margin: 10px 0 12px 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; color: var(--fg); font-weight: 600; } .open-editor-btn:hover{ background: var(--panel-hover); } /* Topbar link style to look like a traditional hyperlink */ .topbar-link{ color: var(--link); text-decoration: none; font-weight: 600; } .topbar-link:hover{ text-decoration: underline; } .open-in-editor-link{ font-weight: 500; } /* Ringus floating chat */ .ringus-toggle{ position: fixed; right: 16px; bottom: 16px; z-index: 12000; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ringus-toggle img{ width:100%; height:100%; object-fit:contain; } .ringus-panel{ position: fixed; right: 16px; bottom: 80px; width: min(360px, 90vw); max-height: 80vh; background: var(--bg); border:1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); display: none; flex-direction: column; z-index: 12000; overflow: hidden; resize: both; min-width: 280px; min-height: 260px; } .ringus-panel.open{ display: flex; } .ringus-header{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background: var(--panel); } .ringus-title{ display:flex; align-items:center; gap:8px; } .ringus-logo{ width:32px; height:32px; object-fit:contain; } .ringus-name{ font-weight:700; } .ringus-hint{ flex:1; font-size:12px; color:var(--muted); } .ringus-close{ border:0; background:transparent; font-size:18px; cursor:pointer; color:var(--muted); } .ringus-messages{ flex:1; padding:10px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; } .ringus-msg{ padding:8px 10px; border-radius:8px; line-height:1.4; white-space: pre-wrap; max-width:60%; word-wrap:break-word; } .ringus-user{ background:var(--accent-soft); align-self:flex-end; } .ringus-bot{ background:var(--panel); align-self:flex-start; } .ringus-pending{ display:flex; align-items:center; gap:8px; } .ringus-spinner{ width:14px; height:14px; border:2px solid #ccc; border-top-color:#666; border-radius:50%; animation:ringus-spin 0.9s linear infinite; flex-shrink:0; } .ringus-pending-text{ color:var(--muted); } @keyframes ringus-spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} } /* Ringus fullscreen page */ .ringus-full{ display:flex; min-height:100vh; background:var(--bg); color:var(--fg); } .ringus-full-sidebar{ width:260px; border-right:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--panel); } .ringus-side-head{ display:flex; align-items:center; gap:10px; font-weight:700; } .ringus-session-list{ font-size:13px; color:var(--muted); } .ringus-history{ display:flex; flex-direction:column; gap:6px; } .ringus-history-head{ font-weight:700; font-size:13px; color:var(--fg); } .ringus-history-list{ display:flex; flex-direction:column; gap:6px; max-height:40vh; overflow-y:auto; } .ringus-history-item{ padding:8px; border:1px solid var(--border); border-radius:8px; background: var(--surface); } .ringus-history-user{ font-weight:600; font-size:13px; color:var(--fg); } .ringus-history-assistant{ font-size:12px; color:var(--muted); margin-top:4px; } .ringus-history-empty{ font-size:12px; color:var(--muted); } .ringus-full-main{ flex:1; display:flex; flex-direction:column; } .ringus-full .ringus-header{ border-bottom:1px solid var(--border); } .ringus-full .ringus-messages{ flex:1; } .ringus-footer{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); background: var(--panel); } .ringus-input{ flex:1; min-height:44px; max-height:120px; padding:8px; border-radius:8px; border:1px solid var(--border); resize: vertical; } .ringus-send{ padding:10px 12px; border-radius:8px; border:1px solid var(--border); background: var(--link); color:#fff; cursor:pointer; } .search{ position:relative; width:420px; max-width:55vw; } .search input{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; } .search-results{ display:none; position:absolute; top:42px; left:0; right:0; border:1px solid var(--border); background:var(--bg); border-radius:10px; overflow:hidden; box-shadow: var(--shadow); } .search-results.open{ display:block; } .search-results button{ display:block; width:100%; text-align:left; padding:10px 12px; background:transparent; border:0; border-bottom:1px solid var(--border); cursor:pointer; font-size:14px; } .search-results button:last-child{ border-bottom:0; } .search-results button:hover{ background:var(--panel-hover); } .search-result-item{ display:flex !important; align-items:flex-start; gap:10px; } .search-result-thumb{ width:48px; height:48px; border-radius:6px; object-fit:cover; border:1px solid var(--border); flex:0 0 48px; } .search-result-content{ min-width:0; display:flex; flex-direction:column; gap:4px; } .search-result-name{ font-size:14px; line-height:1.2; } .search-result-excerpt{ font-size:12px; line-height:1.3; color:var(--muted); white-space:normal; } .layout{ display:flex; min-height: calc(100vh - var(--topbar-h)); } .sidebar{ width:var(--sidebar-w); border-right:1px solid var(--border); background:var(--panel); padding:12px; /* Keep the sidebar visible while the article scrolls */ position: sticky; top: var(--topbar-h); align-self: flex-start; height: calc(100vh - var(--topbar-h)); overflow: auto; z-index: 9; } /* Account/settings two-column boxes */ .account-grid{ display:flex; gap:18px; align-items:flex-start; } .account-box{ flex:1; padding:12px; border:1px solid var(--border); background:var(--panel); border-radius:8px; box-shadow: var(--shadow); } .account-box h3{ margin-top:0; } .acct-row{ display:flex; gap:12px; padding:6px 0 } .acct-key{ width:140px; color:var(--muted) } .acct-val{ flex:1 } .sidebar-title{ font-weight:600; margin:4px 0 10px 0; color:var(--fg); } #toc a{ color:var(--fg); text-decoration:none; display:block; padding:6px 6px; border-radius:8px; font-size:14px; } #toc a:hover{ background:var(--panel-hover); } #toc .toc-level-2{ padding-left:14px; } #toc .toc-level-3{ padding-left:28px; } #toc .toc-level-4{ padding-left:42px; } #toc .toc-level-5{ padding-left:56px; } #toc .toc-level-6{ padding-left:70px; } .content{ flex:1; padding:18px 18px 80px 18px; } .article{ max-width: var(--maxw); margin:0 auto; position: relative; padding-top: 12px; } .article-delete-btn{ position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border:1px solid var(--border); background: var(--panel); color: #b00000; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: transform 0.08s ease, background 0.2s ease, border-color 0.2s ease; opacity: 0.9; z-index: 2; } .article-delete-btn:hover{ background: #ffeaea; border-color: #ff8a8a; transform: scale(1.05); opacity: 1; } .article-delete-btn:active{ transform: scale(0.97); } .article-delete-btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; } .home{ display:none; min-height: calc(100vh - var(--topbar-h)); } .home.show{ display:flex; align-items:center; justify-content:center; } .home-inner{ text-align:center; width:min(720px, 92vw); } .home-logo{ width:300px; height:300px; object-fit:contain; } .home-title{ margin: 10px 0 18px 0; font-size:42px; font-weight:800; } .home-search{ position:relative; width:min(520px, 92vw); margin: 0 auto; } .home-search input{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:16px; } .home-hint{ margin-top:10px; color:var(--muted); font-size:13px; } a{ color:var(--link); } a:visited{ color:var(--link-visited); } h1,h2,h3,h4,h5,h6{ scroll-margin-top: 74px; } p{ line-height:1.6; } .create-article-cta{ display:inline-block; margin-top:8px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--fg); text-decoration:none; box-shadow: var(--shadow); } .create-article-cta:hover{ background:var(--panel-hover); } .create-article-name{ text-decoration:underline; font-weight:600; } .infobox-wrapper{ float: right; /* Force each infobox wrapper to clear previous right floats so they stack vertically */ clear: right; width: 280px; max-width: 45vw; margin-left: 16px; margin-bottom: 12px; } .infobox{ width: 100%; margin: 4px 0; border:1px solid var(--border); background:var(--surface-soft); border-radius:10px; overflow:hidden; box-shadow: var(--shadow); } .infobox-title{ padding:10px 12px; font-weight:700; border-bottom:1px solid var(--border); background:var(--panel); } .infobox-image img{ width:100%; display:block; } .infobox-caption{ padding:8px 12px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--border); } .infobox-table{ width:100%; border-collapse:collapse; font-size:13px; } .infobox-table th, .infobox-table td{ padding:8px 10px; border-top:1px solid var(--border); vertical-align:top; text-align:left; } .infobox-table th{ width:40%; color:var(--fg); } .article table.wikitable{ width:100%; margin:10px 0 14px; border-collapse:collapse; background:var(--panel); border:1px solid var(--table-separator); } .article table.wikitable caption{ caption-side:top; text-align:left; padding:8px 10px; border-bottom:1px solid var(--table-separator); font-weight:600; } .article table.wikitable th, .article table.wikitable td{ padding:8px 10px; border:1px solid var(--table-separator); vertical-align:top; text-align:left; } .article table.wikitable th{ font-weight:700; } /* Small helper used by the translator to clear floats after figures */ .wiki-clear{ clear: both; } /* modal styles for Project Aron */ .pa-modal{ display:none; position:fixed; inset:0; z-index:9999; } .pa-modal.open{ display:block; } .pa-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.35); } .pa-modal-content{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--bg); border-radius:8px; padding:16px; width:min(520px,96vw); box-shadow:var(--shadow); z-index:10000; } .pa-modal-message{ margin-bottom:12px; color:var(--fg); } .pa-modal-actions{ display:flex; gap:8px; justify-content:flex-end; } .pa-btn{ padding:8px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); cursor:pointer; } .pa-btn.primary{ background:var(--link); color:#fff; border-color:var(--link); } figure.wikifile{ margin: 6px 0 12px 0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); box-shadow: var(--shadow); width: min(520px, 100%); max-width: 100%; } figure.wikifile img{ width:100%; display:block; } figure.wikifile figcaption{ padding:8px 10px; color:var(--muted); font-size:12px; border-top:1px solid var(--border); } figure.align-right{ float:right; margin-left: 16px; } figure.align-left{ float:left; margin-right: 16px; } figure.align-center{ margin-left:auto; margin-right:auto; } /* Ensure headings that follow a floated figure start below it */ figure.wikifile + h1, figure.wikifile + h2, figure.wikifile + h3, figure.wikifile + h4, figure.wikifile + h5, figure.wikifile + h6 { clear: both; margin-top: 12px; } /* Article image preview styles - scaled down for faster loading */ .article-image{ cursor: pointer; max-width: 100%; max-height: 600px; object-fit: contain; transition: opacity 0.2s ease; } .wikifile .article-image{ max-height: none; } .article-image:hover{ opacity: 0.85; } /* Image viewer modal */ .image-viewer-modal{ display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.85); } .image-viewer-modal.open{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .image-viewer-backdrop{ position: absolute; inset: 0; cursor: pointer; } .image-viewer-container{ position: relative; z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 95vw; max-height: 95vh; } .close-btn-icon{ position: absolute; top: 16px; right: 16px; z-index: 10001; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.1s ease; font-weight: 300; } .close-btn-icon:hover{ background: rgba(0, 0, 0, 0.9); transform: scale(1.1); } .image-viewer-content{ display: flex; align-items: center; justify-content: center; overflow: auto; max-width: 95vw; max-height: 80vh; border-radius: 8px; background: var(--surface); cursor: grab; } .image-viewer-content:active{ cursor: grabbing; } .image-viewer-content img{ max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; } .image-viewer-controls{ display: flex; gap: 8px; background: rgba(0, 0, 0, 0.7); padding: 10px 14px; border-radius: 8px; flex-wrap: wrap; justify-content: center; align-items: center; } .icon-btn{ width: 40px; height: 40px; padding: 0; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer; font-size: 18px; font-weight: 400; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.1s ease; } .icon-btn:hover{ background: rgba(255, 255, 255, 0.25); transform: scale(1.05); } .icon-btn:active{ transform: scale(0.95); } .download-icon{ margin-left: 8px; } .image-viewer-size{ background: rgba(255, 255, 255, 0.1); color: #fff; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; cursor: default; font-size: 13px; min-width: 60px; text-align: center; } @media (max-width: 900px){ .sidebar{ display:none; } .search{ width: 52vw; } } @media (max-width: 900px){ .sidebar{ display:none; } .search{ width: 52vw; } }