/* Экраны входа, регистрации и установки: одна карточка по центру. */ .auth-page { display: grid; place-items: center; min-height: 100dvh; padding: var(--s-5); } .auth-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s-8) var(--s-6) var(--s-6); } .auth-logo { display: grid; justify-items: center; gap: var(--s-1); margin-bottom: var(--s-6); } .auth-logo-icon { width: 72px; height: 72px; border-radius: 18px; } /* * Логотип следует за темой, как и всё остальное. * * В разметке стоит светлый вариант, тёмная тема подменяет его здесь. Тема * выставляется в до первой отрисовки, поэтому подмена происходит до * того, как страница показана, — мигания светлым логотипом нет. Раньше на * всех страницах входа стоял тёмный логотип независимо от темы: на светлой * теме — тёмная плитка, и она же «вторая картинка» после светлого сплеша. */ [data-theme="dark"] .auth-logo-icon, [data-theme="dark"] .boot-logo { content: url("/icons/logo-dark-256.png"); } .boot-logo { border-radius: 16px; } .auth-logo-title { font: var(--t-display); letter-spacing: var(--track-tight); } .auth-logo-sub { font: var(--t-small); color: var(--ink-3); } .auth-form { display: grid; gap: var(--s-4); } .form-group { display: grid; gap: var(--s-1); } .form-group label { font: var(--t-section); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); } .form-group input { width: 100%; height: 40px; padding: 0 var(--s-3); background: var(--surface); color: var(--ink); border: 1px solid var(--hairline-firm); border-radius: var(--r-md); } .form-group input:focus { border-color: var(--c-day); outline: none; } .form-error { padding: var(--s-3); border-radius: var(--r-md); background: var(--c-danger-soft); color: var(--c-danger); font: var(--t-small); } .auth-footer { margin-top: var(--s-5); text-align: center; font: var(--t-small); color: var(--ink-3); } .auth-footer + .auth-footer { margin-top: var(--s-2); }