/* ══════════════════════════════════════════════════════ dobest.vip — main stylesheet Dark theme, CSS custom properties, no external deps ══════════════════════════════════════════════════════ */ :root { --bg: #0d1117; --surface: #161b22; --surface2: #21262d; --border: #30363d; --text: #c9d1d9; --text-dim: #8b949e; --accent: #58a6ff; --accent2: #79c0ff; --green: #3fb950; --yellow: #d29922; --red: #f85149; --purple: #bc8cff; --orange: #ffa657; --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --radius: 8px; --radius-lg: 12px; --shadow: 0 4px 24px rgba(0,0,0,.4); --player-h: 80px; } /* Light theme — applied via (set by inline script and the theme switcher). Dark is the :root default above. */ [data-theme="light"] { --bg: #ffffff; --surface: #f6f8fa; --surface2: #eaeef2; --border: #d0d7de; --text: #1f2328; --text-dim: #656d76; --accent: #0969da; --accent2: #0550ae; --green: #1a7f37; --yellow: #9a6700; --red: #cf222e; --purple: #8250df; --orange: #bc4c00; --shadow: 0 4px 24px rgba(140,149,159,.25); } /* ── Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent2); text-decoration: underline; } img, video { max-width: 100%; display: block; } code, pre, kbd { font-family: var(--mono); } /* ── Loading screen ──────────────────────────────────── */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 1.5rem; } .loading-logo { font-size: 2rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; } .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Layout ──────────────────────────────────────────── */ #app { min-height: 100vh; } #page-wrap { min-height: 100vh; } /* ── Top corner header (logo + theme/lang + account) ──── */ .top-corner { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .top-corner .nav-logo { padding: 0; border: none; } .top-corner-actions { display: flex; align-items: center; gap: 1rem; } .top-corner .nav-prefs { padding: 0; } .top-corner .nav-item { padding: 0.35rem 0.6rem; border-radius: var(--radius); } .main-content { flex: 1; padding: 2rem; max-width: 1200px; min-width: 0; margin: 0 auto; } .main-content.wide { max-width: none; } /* ── Navigation ──────────────────────────────────────── */ .nav-section-title { padding: 0.25rem 1rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .nav-logo { padding: 1.25rem 1rem; font-size: 1.2rem; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); } .nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; color: var(--text-dim); font-size: 0.9rem; cursor: pointer; border-radius: 0; transition: color 0.15s, background 0.15s; user-select: none; } .nav-item:hover { background: var(--surface2); color: var(--text); } .nav-item.active { color: var(--accent); background: rgba(88,166,255,.08); } .nav-item .icon { font-size: 1rem; width: 1.2rem; text-align: center; } /* ── Top bar ─────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 2rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .topbar-title { font-weight: 600; font-size: 1rem; } .topbar-actions { display: flex; gap: 0.75rem; align-items: center; } /* ── Buttons ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, opacity 0.15s; white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #000; } .btn-primary:hover { background: var(--accent2); } .btn-secondary { background: var(--surface2); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--border); } .btn-ghost { background: transparent; color: var(--text-dim); } .btn-ghost:hover { background: var(--surface2); color: var(--text); } .btn-danger { background: transparent; color: var(--red); border-color: var(--red); } .btn-danger:hover { background: rgba(248,81,73,.1); } .btn-success { background: var(--green); color: #000; } .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; } .btn-lg { padding: 0.65rem 1.4rem; font-size: 1rem; } .btn-icon { padding: 0.45rem; aspect-ratio: 1; } /* ── Forms ───────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; } .form-label { font-size: 0.875rem; font-weight: 500; color: var(--text-dim); } .form-hint { font-size: 0.78rem; color: var(--text-dim); } .input, .select, .textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font); font-size: 0.9rem; padding: 0.55rem 0.85rem; transition: border-color 0.15s; outline: none; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.15); } .textarea { resize: vertical; min-height: 120px; } .input-mono { font-family: var(--mono); font-size: 0.85rem; } /* ── Cards ───────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .card-title { font-size: 1rem; font-weight: 600; } /* ── Grid ────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .main-content { padding: 1rem; } } /* ── Badges / Tags ───────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; background: var(--surface2); border: 1px solid var(--border); } .badge-blue { background: rgba(88,166,255,.15); border-color: rgba(88,166,255,.3); color: var(--accent); } .badge-green { background: rgba(63,185,80,.15); border-color: rgba(63,185,80,.3); color: var(--green); } .badge-red { background: rgba(248,81,73,.15); border-color: rgba(248,81,73,.3); color: var(--red); } .badge-yellow { background: rgba(210,153,34,.15); border-color: rgba(210,153,34,.3); color: var(--yellow); } /* ── Alerts ──────────────────────────────────────────── */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius); border-left: 4px solid; margin: 0.75rem 0; font-size: 0.9rem; } .alert-success { background: rgba(63,185,80,.1); border-color: var(--green); color: var(--green); } .alert-error { background: rgba(248,81,73,.1); border-color: var(--red); color: var(--red); } .alert-info { background: rgba(88,166,255,.1); border-color: var(--accent); color: var(--accent); } .alert-warn { background: rgba(210,153,34,.1); border-color: var(--yellow); color: var(--yellow); } /* ── Code blocks ─────────────────────────────────────── */ .code-block { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; } .code-inline { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.35em; font-family: var(--mono); font-size: 0.875em; } /* ── highlight.js theme (GitHub-dark palette) ───────────── */ .hljs { color: var(--text); background: transparent; } .hljs-comment, .hljs-quote { color: var(--text-dim); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: var(--red); } .hljs-string, .hljs-attribute, .hljs-meta .hljs-string { color: var(--accent2); } .hljs-number, .hljs-symbol, .hljs-bullet { color: var(--orange); } .hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--purple); } .hljs-function .hljs-title, .hljs-built_in, .hljs-builtin-name { color: var(--accent); } .hljs-attr, .hljs-variable, .hljs-template-variable { color: var(--orange); } .hljs-regexp, .hljs-link { color: var(--green); } .hljs-meta, .hljs-doctag, .hljs-tag { color: var(--text-dim); } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } /* ── Tabs ────────────────────────────────────────────── */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; gap: 0; } .tab { padding: 0.6rem 1.1rem; cursor: pointer; font-size: 0.9rem; color: var(--text-dim); border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; } /* ── Upload drop zone ────────────────────────────────── */ .dropzone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: rgba(88,166,255,.04); } .dropzone-icon { font-size: 2.5rem; margin-bottom: 0.75rem; color: var(--text-dim); } .dropzone-text { color: var(--text-dim); font-size: 0.9rem; } .dropzone-text strong { color: var(--accent); } /* ── Progress bar ────────────────────────────────────── */ .progress { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; } .progress-bar { height: 100%; background: var(--accent); transition: width 0.3s; } /* ── Home page — site map ────────────────────────────── */ .sitemap-hero { text-align: center; padding: 4rem 2rem 3rem; } .sitemap-hero h1 { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.03em; } .sitemap-hero p { color: var(--text-dim); font-size: 1.1rem; margin-top: 0.75rem; } .section-group { margin-bottom: 2.5rem; } .section-group-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.75rem; } .tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; cursor: pointer; transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s; display: flex; align-items: flex-start; gap: 0.85rem; } .tool-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .tool-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.1rem; } .tool-name { font-weight: 600; font-size: 0.95rem; } /* nav/home links are rendered as for crawlability — strip default link look */ .nav-logo, .nav-item, .tool-card { text-decoration: none; } .tool-card { color: inherit; } /* ── Theme & language switchers (sidebar) ──────────────── */ .nav-prefs { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.75rem; } .theme-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .theme-opt { background: transparent; border: none; color: var(--text-dim); padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.9rem; line-height: 1; } .theme-opt:hover { background: var(--surface2); color: var(--text); } .theme-opt.active { background: var(--accent); color: #fff; } .lang-select { flex: 1; min-width: 0; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.3rem 0.4rem; font-size: 0.85rem; cursor: pointer; } .tool-desc { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2rem; } /* ── Music section ───────────────────────────────────── */ .music-page { display: flex; flex-direction: column; } /* Full-width horizontal navigation (library + playlists). */ .music-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); } .music-nav-label { font-weight: 600; font-size: 0.85rem; color: var(--text-dim); margin-right: 0.4rem; } .music-nav .nav-item { border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.85rem; } .music-nav .nav-item.active { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,.08); } /* The track-list header bar must not stick under the global page header. */ .music-page .topbar { position: static; } /* Player controls live at the top of the section (full width, in flow). */ .music-player { width: 100%; min-height: var(--player-h); background: var(--surface); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 1rem; padding: 0.6rem 1.5rem; } .player-track-info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .player-cover { width: 48px; height: 48px; background: var(--surface2); border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .player-title { font-weight: 500; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-artist { font-size: 0.78rem; color: var(--text-dim); } .player-controls { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .player-buttons { display: flex; align-items: center; gap: 1rem; } .player-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; padding: 0.3rem; border-radius: 50%; transition: color 0.15s; display: flex; } .player-btn:hover { color: var(--text); } .player-btn.play { color: var(--text); font-size: 1.4rem; } .player-progress { display: flex; align-items: center; gap: 0.5rem; width: 100%; font-size: 0.75rem; color: var(--text-dim); } .player-range { flex: 1; -webkit-appearance: none; height: 4px; background: var(--border); border-radius: 999px; cursor: pointer; } .player-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--text); border-radius: 50%; } .player-range:hover::-webkit-slider-thumb { background: var(--accent); } .player-volume { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; } .track-head { display: grid; grid-template-columns: 2rem 1fr 1fr auto auto; gap: 1rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--text-dim); font-weight: 600; } .track-row { display: grid; grid-template-columns: 2rem 1fr 1fr auto auto; align-items: center; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); cursor: pointer; font-size: 0.875rem; } .track-row:hover { background: var(--surface2); } .track-row.playing { color: var(--accent); } .track-num { color: var(--text-dim); text-align: center; } .track-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-artist { color: var(--text-dim); } /* ── Music: mobile ───────────────────────────────────── */ @media (max-width: 768px) { .music-player { grid-template-columns: 1fr; gap: 0.6rem; padding: 0.75rem 1rem; } .player-track-info { justify-content: center; } .player-volume { justify-content: center; } .player-progress { font-size: 0.7rem; } .track-head, .track-row { grid-template-columns: 1.6rem 1fr auto auto; gap: 0.6rem; } .col-artist { display: none; } } /* ── Blog ────────────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .post-card:hover { border-color: var(--accent); transform: translateY(-2px); } .post-card-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; } .post-card-excerpt { font-size: 0.875rem; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card-meta { display: flex; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--text-dim); } .blog-post-content { max-width: 700px; margin: 0 auto; } .blog-post-content h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; } .blog-post-content h2 { font-size: 1.4rem; margin: 1.5rem 0 0.5rem; } .blog-post-content h3 { font-size: 1.2rem; margin: 1.25rem 0 0.5rem; } .blog-post-content p { margin: 0.75rem 0; } .blog-post-content ul, .blog-post-content ol { padding-left: 1.5rem; margin: 0.75rem 0; } .blog-post-content li { margin: 0.25rem 0; } .blog-post-content blockquote { border-left: 4px solid var(--border); padding: 0.5rem 1rem; margin: 1rem 0; color: var(--text-dim); } .blog-post-content pre { margin: 1rem 0; } .blog-post-content code:not(pre code) { background: var(--surface2); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; } /* ── Calculator ──────────────────────────────────────── */ .calc-wrap { max-width: 380px; margin: 0 auto; } .calc-display { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: right; margin-bottom: 0.75rem; } .calc-expr { font-size: 0.85rem; color: var(--text-dim); min-height: 1.2em; } .calc-result { font-size: 2.5rem; font-weight: 300; font-family: var(--mono); color: var(--text); word-break: break-all; } .calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; } .calc-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 1.1rem; padding: 0.85rem; cursor: pointer; transition: background 0.1s; font-family: var(--mono); } .calc-btn:hover { background: var(--border); } .calc-btn.op { color: var(--accent); } .calc-btn.eq { background: var(--accent); color: #000; grid-column: span 1; } .calc-btn.eq:hover { background: var(--accent2); } .calc-btn.wide { grid-column: span 2; } .calc-btn.clear { color: var(--red); } /* ── QR ──────────────────────────────────────────────── */ .qr-preview { max-width: 300px; margin: 1rem auto; background: #fff; padding: 1rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; } .qr-preview img { max-width: 100%; } /* ── Check / Validators ──────────────────────────────── */ .validator-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; height: 400px; } @media (max-width: 768px) { .validator-split { grid-template-columns: 1fr; height: auto; } } .validator-pane { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .pane-header { padding: 0.5rem 0.75rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.78rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .pane-body { flex: 1; overflow: auto; } .pane-body textarea { width: 100%; height: 100%; background: none; border: none; color: var(--text); font-family: var(--mono); font-size: 0.85rem; padding: 0.75rem; resize: none; outline: none; line-height: 1.5; } /* ── Encoding ────────────────────────────────────────── */ .encode-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: center; } @media (max-width: 600px) { .encode-io { grid-template-columns: 1fr; } .encode-arrow { transform: rotate(90deg); } } .encode-arrow { text-align: center; color: var(--text-dim); font-size: 1.2rem; } /* ── Calendar ────────────────────────────────────────── */ .calendar-wrap { max-width: 560px; margin: 0 auto; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .calendar-title { font-size: 1.2rem; font-weight: 600; } .calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; } .cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 0.875rem; cursor: pointer; transition: background 0.1s; } .cal-cell:hover { background: var(--surface2); } .cal-cell.today { background: rgba(88,166,255,.2); color: var(--accent); font-weight: 600; } .cal-cell.other-month { color: var(--text-dim); } .cal-cell.selected { background: var(--accent); color: #000; font-weight: 600; } .cal-dow { font-size: 0.75rem; font-weight: 600; color: var(--text-dim); text-align: center; padding: 0.25rem; } /* ── File list ───────────────────────────────────────── */ .file-list { display: flex; flex-direction: column; gap: 0.5rem; } .file-row { display: flex; align-items: center; gap: 1rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.65rem 0.9rem; } .file-icon { font-size: 1.2rem; flex-shrink: 0; } .file-name { flex: 1; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-meta { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; } .file-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } /* ── Donate ──────────────────────────────────────────── */ .donate-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem; } .donate-qr { flex-shrink: 0; } .donate-info { flex: 1; min-width: 0; } .donate-coin { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; } .donate-addr { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); word-break: break-all; } /* ── Games grid ──────────────────────────────────────── */ .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } .game-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .game-card:hover { border-color: var(--accent); transform: translateY(-2px); } .game-thumb { height: 140px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .game-info { padding: 0.85rem; } .game-title { font-weight: 600; font-size: 0.9rem; } .game-desc { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.25rem; } /* ── Scrollbar ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── Utility ─────────────────────────────────────────── */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .text-dim { color: var(--text-dim); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.78rem; } .font-mono { font-family: var(--mono); } .w-full { width: 100%; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .center { text-align: center; } .hidden { display: none !important; } /* ── Chess (/chess) ─────────────────────────────────────────────────────── */ .chess-board { display: grid; grid-template-columns: repeat(8, 1fr); width: min(92vw, 480px); border: 2px solid var(--border); border-radius: 6px; overflow: hidden; user-select: none; touch-action: manipulation; margin: 0.5rem 0; } .chess-sq { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; font-size: clamp(22px, 5.4vmin, 40px); line-height: 1; } .chess-sq.light { background: #ecd9b4; } .chess-sq.dark { background: #a97a55; } .chess-sq.last.light { background: #d9d078; } .chess-sq.last.dark { background: #b1a04c; } .chess-sq.sel { box-shadow: inset 0 0 0 3px var(--accent); } .chess-sq.check { background: #d05050 !important; } .chess-sq.target::after { content: ""; width: 28%; aspect-ratio: 1; border-radius: 50%; background: rgba(20, 20, 20, 0.28); position: absolute; } .chess-sq.capture::after { content: ""; inset: 0; position: absolute; border: 4px solid rgba(20, 20, 20, 0.30); border-radius: 50%; } /* Фигуры — SVG-картинки (cburnett): не зависят от шрифтов и эмодзи-подстановок. */ .cp { display: block; user-select: none; -webkit-user-drag: none; } .chess-sq .cp { width: 92%; height: 92%; } .cp-cap .cp { width: 1.35em; height: 1.35em; display: inline-block; vertical-align: -0.35em; } .cp-promo .cp { width: 2rem; height: 2rem; } .chess-chat-who .cp { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; } .chess-coord { position: absolute; font-size: 0.55rem; font-weight: 600; color: rgba(30, 20, 10, 0.6); pointer-events: none; } .chess-coord.rank { top: 2px; left: 3px; } .chess-coord.file { bottom: 1px; right: 3px; } .chess-moves { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius, 6px); padding: 0.5rem 0.75rem; font-family: var(--mono); font-size: 0.85rem; } .chess-move-row { display: grid; grid-template-columns: 2.2rem 1fr 1fr; gap: 0.25rem; padding: 0.1rem 0; } .chess-promo { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--accent); border-radius: var(--radius, 6px); background: var(--surface, rgba(88,166,255,.06)); } /* Chess: часы и чат */ .chess-board-row { width: min(92vw, 480px); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-height: 1.6rem; } .chess-clock { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; padding: 0.1rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius, 6px); color: var(--text-dim); } .chess-clock.active { color: var(--text); border-color: var(--accent); } .chess-clock.low.active { color: var(--red); border-color: var(--red); } .chess-chat { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius, 6px); padding: 0.5rem 0.75rem; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; } .chess-chat-msg { word-break: break-word; } .chess-chat-msg.mine { color: var(--accent); } .chess-chat-who { opacity: 0.7; margin-right: 0.4rem; } /* SEO-блок под инструментом (серверный #seo-shell на странице приземления) */ .seo-block { max-width: 760px; margin: 2.5rem auto 2rem; padding: 1.5rem 2rem 0; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; } .seo-block h2 { color: var(--text); font-size: 1.05rem; margin: 1.4rem 0 0.5rem; } .seo-block h3 { color: var(--text); font-size: 0.95rem; margin: 1rem 0 0.25rem; } .seo-block ol { padding-left: 1.3rem; margin: 0.25rem 0; } .seo-block li { margin-bottom: 0.3rem; } .seo-block p { margin: 0.25rem 0 0.5rem; }