:root { --fg: #1c222b; --muted: #667085; --border: #d8dee7; --border-strong: #c3cad4; --bg-page: #f4f6f9; --bg-card: #fff; --bg-inset: #f8f9fb; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-active: #1e40af; --ok: #0a7a2f; --ok-bg: #eaf7ee; --bad: #b3261e; --bad-bg: #fdecea; --warn: #9a6a00; --warn-bg: #fdf3dd; --tok-bg: #e3e9ff; --tok-fg: #3345a0; --tok-ok-bg: #dcf3e3; --tok-ok-fg: #0a7a2f; --tok-off-bg: #fdeac6; --tok-off-fg: #8a5d00; /* Підкладка редактора малює ТІЛЬКИ фон (текст — сама textarea, звичайним кольором), тож там ті самі стани мусять бути помітно насиченіші. */ --tok-ok-bd-bg: #a9e6be; --tok-off-bd-bg: #f7cf8a; --nl-fg: #9aa4b2; --btn-hover-bg: #f3f5f8; --btn-hover-border: #aeb7c2; --btn-active-bg: #e9edf2; --game-text-fg: #3a4351; --game-text-released-border: #cbe7d3; --pagination-hover-bg: #e8eefc; --radius: 8px; --shadow-card: 0 1px 2px rgba(16, 24, 40, .05); } /* Dark theme: same variable set, different values -- every rule below reads colors through var(...), so this one block reskins the whole site. Toggled via [data-theme] on , set by themeInitScript()/ siteFooter() in app/bootstrap.php (anti-FOUC: runs before first paint). */ :root[data-theme="dark"] { --fg: #e6e9ef; --muted: #93a0b4; --border: #2b3444; --border-strong: #3a4557; --bg-page: #10141c; --bg-card: #171d29; --bg-inset: #1e2530; --accent: #5b8def; --accent-hover: #7aa3f2; --accent-active: #3f6fd1; --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .12); --bad: #f87171; --bad-bg: rgba(248, 113, 113, .14); --warn: #f0b429; --warn-bg: rgba(240, 180, 41, .12); --tok-bg: rgba(91, 141, 239, .18); --tok-fg: #a9c2f7; --tok-ok-bg: rgba(74, 222, 128, .16); --tok-ok-fg: #86e0a6; --tok-off-bg: rgba(240, 180, 41, .20); --tok-off-fg: #f3c563; --tok-ok-bd-bg: rgba(74, 222, 128, .42); --tok-off-bd-bg: rgba(240, 180, 41, .48); --nl-fg: #6b7688; --btn-hover-bg: #202838; --btn-hover-border: #47536a; --btn-active-bg: #2b3444; --game-text-fg: #c7cedb; --game-text-released-border: #2b5b3f; --pagination-hover-bg: rgba(91, 141, 239, .18); --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); } /* me */ a:link, a:visited, a:hover, a:active { color: inherit; } textarea { min-height: 60px; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; } select, input { color: var(--fg); opacity: 1; } .footer_text { opacity: 0.3; width: 100%; text-align: center; font-size: 14px; margin-top: 20px; } * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); margin: 0; background: var(--bg-page); line-height: 1.45; transition: background-color .15s ease, color .15s ease; } body.body-embed { background: transparent; } .page { max-width: 1600px; margin: 0 auto; padding: 1rem; } .page-narrow { max-width: 480px; margin: 3rem auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 1.75rem 1.75rem; box-shadow: var(--shadow-card); } h1 { font-size: 1.35rem; } h2 { font-size: 1.05rem; margin-top: 1.5rem; } /* ---- top bar ------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: .5rem; } .topbar-title { font-weight: 650; margin: 0; font-size: inherit; } .topbar-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .whoami { font-size: .85rem; color: var(--muted); margin: 0 .3rem; } /* ---- header dropdown (e.g. "Завантажити ROM") ---------------------------- */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: calc(100% + .3rem); right: 0; z-index: 20; min-width: 14rem; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: .3rem; } .dropdown.is-open .dropdown-menu { display: flex; } .dropdown-item { display: block; padding: .45rem .6rem; border-radius: calc(var(--radius) - 2px); color: var(--fg); text-decoration: none; font-size: .88rem; white-space: nowrap; } .dropdown-item:hover, .dropdown-item:focus-visible { background: var(--btn-hover-bg); } /* ---- buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-card); color: var(--fg); text-decoration: none; cursor: pointer; font-size: .9rem; font-family: inherit; line-height: 1.2; transition: background-color .12s ease, border-color .12s ease; } .btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); } .btn:active { background: var(--btn-active-bg); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn:disabled { opacity: .55; cursor: default; } .btn:disabled:hover { background: var(--bg-card); border-color: var(--border-strong); } /* .btn.btn-primary (doubled class) so these always outrank the generic .btn:hover/:active rules above regardless of source order -- a primary button turning white on hover was a real shipped bug. */ .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff !important; } .btn.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.btn-primary:active { background: var(--accent-active); } .btn.btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); } .btn-small { font-size: .8rem; padding: .28rem .55rem; } .btn-icon { padding: .15rem .5rem; line-height: 1; font-size: .9rem; margin-top: .3rem; } /* ---- index / login ------------------------------------------------------ */ .project-list { list-style: none; padding: 0; } .project-card { border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: .8rem; display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); box-shadow: var(--shadow-card); } .project-card-hidden { border-style: dashed; opacity: .7; } .project-hidden-badge { font-size: .75rem; font-weight: normal; color: var(--muted); margin-left: .5rem; } /* Шапка списку проєктів (public/index.php): заголовок + «ви увійшли як». */ .index-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .index-whoami { font-size: .95rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* Права частина картки: селект видимості (адмін) + кнопка входу. */ .project-card-actions { display: flex; align-items: center; gap: .5rem; flex: none; } /* Телефон: назва гри окремим рядком, під нею селект і кнопка -- у рядок «Advance Wars: Dual Strike | Всім | Перейти до перекладу» на 375px назва ламалась по слову на рядок, а кнопка вилазила за картку. */ @media (max-width: 720px) { .project-card { flex-direction: column; align-items: stretch; gap: .7rem; padding: .85rem; } .project-card .project-title { font-size: 1.05rem; font-weight: 650; } .project-card-actions { flex-wrap: wrap; } .project-card-actions .inline-form { flex: 1 1 auto; min-width: 0; } .project-card-actions .inline-form select { width: 100%; } .project-card-actions .btn { flex: 1 1 auto; white-space: nowrap; } .index-head { margin-bottom: 1.2rem; } } .login-form { display: flex; flex-direction: column; gap: .8rem; } .login-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; } .login-form input { padding: .5rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 1rem; font-family: inherit; background: var(--bg-card); color: var(--fg); } .login-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .guest-form { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); } .guest-hint { font-size: .82rem; color: var(--muted); margin: .5rem 0 0; } .notice { padding: .6rem 1rem; border-radius: var(--radius); margin: 1rem 0; font-size: .92rem; } .notice-error { background: var(--bad-bg); color: var(--bad); } .notice-ok { background: var(--ok-bg); color: var(--ok); } /* ---- toolbar / help ----------------------------------------------------- */ .toolbar { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; } /* Контролів у тулбарі побільшало (файл, фільтр, пошук, сюжет, сценарій, вичитане), і flex-wrap рвав рядок де завгодно — пошук з'їжджав під селектор файлів окремо від своєї ж кнопки. Групи не дають розриватись тому, що читається як одне ціле; переноситься лише межа МІЖ групами. */ /* Контролів у тулбарі багато (файл, позначка файлу, фільтр, пошук, сюжет, сценарій, вичитане), і flex-wrap рвав рядок де завгодно — поле пошуку з'їжджало окремо від власної кнопки. Групи не дають розриватись тому, що читається як одне ціле: переноситься лише межа МІЖ ними. */ .toolbar .tb-group { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; } /* Пошук забирає вільне місце, решта лишається своєї ширини. */ .toolbar .tb-group .search-box { flex: 1 1 12rem; min-width: 9rem; } .toolbar .tb-group .search-box input[type=search] { width: 100%; } /* Лічильник — завжди в кінці рядка, хай би скільки контролів було перед ним. */ .toolbar .toolbar-total { margin-left: auto; } /* Кнопка позначки — тієї самої висоти, що селекти й поле пошуку: .btn-small має власний дрібніший padding, і поруч із ними вона сиділа нижчою. */ .toolbar .js-check-file { align-self: stretch; padding: 0 .7rem; margin: 0; font-size: 1rem; line-height: 1; } .toolbar .js-check-file:disabled { opacity: .35; cursor: default; } .toolbar select[name=filter] { max-width: 13rem; } /* ---- селектор файлів (дерево) ------------------------------------------- Виглядає як звичайний select у тулбарі — тією ж висотою й рамкою — але розкривається в панель із хлібними крихтами, фільтром і одним рівнем дерева за раз. Чому не