/* ОФОРМЛЕНИЕ СТРАНИЦЫ ВХОДА port-2.ru Подключается к порталу Authelia одной строкой, которую дописывает nginx. Собран 22.09.2026 из утверждённого макета logo/vhod-portal-maket.html — правки вносить там же и переносить сюда, чтобы макет не разошёлся с делом. Файл общедоступен: его читает кто угодно, не заходя в систему. Поэтому здесь нет и не должно быть путей на сервере, имён учётных записей, номеров портов и названий правил — только вёрстка. Рядом лежат три рисунка: auth-zastavka.svg, auth-znak.svg, auth-zerno.svg. Порядок разделов повторяет порядок на экране. */ /* --- 1. Палитра проекта в переменных портала ----------------------------- Имена переменных задаёт движок портала, значения — палитра проекта. Ни одного имени класса разметки: классы при обновлении меняются, переменные — нет. */ :root{ --background:#1e2226; --foreground:#e3e8ee; --card:#262b31; --card-foreground:#e3e8ee; --popover:#262b31; --popover-foreground:#e3e8ee; --muted:#2d333a; --muted-foreground:#8b95a1; --accent:#2d333a; --accent-foreground:#e3e8ee; --border:#333a42; --divider:#333a42; --input:#3a424b; --primary:#52cf92; /* зелёная гамма: рамка и текст кнопки */ --primary-foreground:#7ee0ad; --ring:#a8e8f0; --destructive:#ec6a5c; --destructive-foreground:#fdf2f0; /* текст НА красной подложке */ /* Этим цветом портал красит ссылку «Выход» на втором шаге. У Authelia он розово-красный и кричит посреди нашей палитры (поймано на приёмке 22.09.2026). Ставим «лёд» — цвет ссылок проекта. */ --secondary:#a8e8f0; --secondary-foreground:#16222b; /* текст НА ледяной подложке */ --success:#52cf92; --warning:#e8c168; --info:#a8e8f0; --info-foreground:#16222b; /* текст НА ледяной подложке */ --custom-icon:#a8e8f0; --custom-loading-bar:#52cf92; --radius:6px; --font-sans:"Noto Mono","Noto Sans Mono","DejaVu Sans Mono","Roboto Mono",ui-monospace,monospace; --default-font-family:var(--font-sans); /* свои величины, повторяют шкалу проекта */ --led:#a8e8f0; --text2:#8b95a1; --text-knop:#c3cbd4; --zel:#52cf92; --zel-svet:#7ee0ad; --zel-fon:#1c3a2b; --pole-r:#3a424b; --hod:.25s; --t-sluzh:11px; --t-vtor:12px; --t-osn:13px; --t-logo:30px; /* ЗАСТАВКА — все размеры в одном месте, потому что линия с импульсом идёт отдельным слоем и должна попасть ровно в просвет рисунка. Рисунок /auth-zastavka.svg имеет поле 560×300; линия приходится на 266-ю точку сверху, то есть на 116 px ниже середины экрана. */ --z-shirina:560px; --z-vysota:300px; --z-liniya:116px; } /* --- 2. Фон сцены: радиальный градиент, светлее к центру ------------------ */ body{ font-family:var(--font-sans); background:radial-gradient(120% 90% at 50% 38%,#272d34 0%,#1e2226 52%,#171b1f 100%); background-attachment:fixed; } /* Шрифт — на всё содержимое портала, с !important. Подмены одной переменной не хватило: часть надписей второго шага осталась в шрифте движка (поймано на приёмке 22.09.2026). Тот же приём и по той же причине применён к дашборду в ui/osnova.css. */ #root, #root *{font-family:var(--font-sans) !important} /* СТРОЧНЫЕ ВЕЗДЕ — решение владельца 22.09.2026. Движок местами переводит надписи в заглавные (класс uppercase в его таблице стилей), а местами пишет с большой буквы в самом переводе. Поэтому не «отменить заглавные», а перевести в строчные всё содержимое портала: иначе осталось бы «Выход» с большой буквы. Звёздочка обязательна: без неё правило перебивалось бы там, где движок ставит заглавные своим классом. Что это затрагивает попутно: имена собственные внутри страницы тоже становятся строчными — «при поддержке authelia», «webauthn». Логотип не затронут, это картинка. */ #root, #root *{text-transform:lowercase} /* зерно поверх фона, как на карточках дашборда. Отдельным файлом: встроенные картинки запрещены правилом default-src 'self'. */ html::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.09; background:url("/auth-zerno.svg") 0 0 repeat;background-size:120px 120px; } /* --- 3. Заставка: три слоя ------------------------------------------------ Держится 1,6 с и уходит. Целиком на CSS, без кода на странице. pointer-events:none — кто хочет печатать сразу, тому она не мешает. Гасится в щадящем режиме (раздел 11). 3а. Подложка, закрывает карточку. */ html::after{ content:"";position:fixed;inset:0;z-index:50;pointer-events:none; background:#1e2226; animation:zastavka 2150ms ease both; } /* 3б. Рисунок: маяк, логотип, подпись. Коробка с известными размерами и центровкой — так положение линии считается арифметикой, а не процентами от высоты окна. */ #root::before{ content:"";position:fixed;z-index:51;pointer-events:none; left:50%;top:50%;transform:translate(-50%,-50%); width:var(--z-shirina);height:var(--z-vysota); background:url("/auth-zastavka.svg") center/contain no-repeat; animation:zastavka 2150ms ease both; } /* 3в. Линия с бегущим импульсом. Отдельным слоем потому, что движение внутри фоновой картинки браузер не проигрывает — в файле-рисунке импульс стоял бы на месте. */ #root::after{ content:"";position:fixed;z-index:52;pointer-events:none; left:50%;transform:translateX(-50%); top:calc(50% + var(--z-liniya)); width:min(70vw,520px);height:2px;border-radius:2px;overflow:hidden; background-color:rgba(168,232,240,.16); background-image:linear-gradient(90deg,transparent,var(--led),transparent); background-repeat:no-repeat;background-size:30% 100%; animation:zastavka 2150ms ease both, begit 1.5s ease-in-out infinite; } @keyframes zastavka{ 0%,74%{opacity:1} 100% {opacity:0;visibility:hidden} } @keyframes begit{ 0% {background-position:-20% 0} 100%{background-position:120% 0} } /* --- 4. Луч: проходит слева направо, когда заставка уходит ---------------- */ body::after{ content:"";position:fixed;z-index:6;left:-20%;top:16%;width:140%;height:64%; opacity:0;pointer-events:none;transform-origin:left center; background:linear-gradient(90deg,rgba(168,232,240,.30),rgba(168,232,240,.08) 46%,transparent 78%); filter:blur(30px); animation:luch-let 900ms ease-out 1750ms both; } @keyframes luch-let{ 0% {opacity:0;transform:translateX(-34%) skewX(-11deg)} 32% {opacity:.8} 100%{opacity:0;transform:translateX(62%) skewX(-11deg)} } /* --- 5. Знак проекта в левом верхнем углу --------------------------------- Пульс свечения тот же, что у значка связи на дашборде. z-index выше заставки: в утверждённом виде знак горит и на ней. */ body::before{ content:"";position:fixed;top:26px;left:34px;z-index:60;width:44px;height:26px; background:url("/auth-znak.svg") left center/contain no-repeat; animation:znak-puls 1.5s ease-in-out infinite; } @keyframes znak-puls{ 0%,100%{filter:drop-shadow(0 0 1.5px rgba(168,232,240,.9))} 50% {filter:drop-shadow(0 0 4px rgba(168,232,240,.95))} } /* --- 6. Карточка: матовое стекло ------------------------------------------ Зацепка — постоянный признак стадии и его прямой потомок. Те же правила заданы второй стадии (ввод кода): имя взято по аналогии, проверить на живом портале. */ #first-factor-stage > div, #second-factor-stage > div{ position:relative;z-index:1; /* min(): на широком — 344 px, на узком — поля по 16 px. Своя padding отменяет отступ портала, без min() карточка упрётся в края экрана. */ margin-inline:auto;max-width:min(344px,calc(100% - 32px)); padding:26px 24px 20px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(18,22,26,.55)); box-shadow:0 26px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(20px) saturate(130%); -webkit-backdrop-filter:blur(20px) saturate(130%); animation:vsplyt 850ms cubic-bezier(.16,1,.3,1) 1900ms both; } @keyframes vsplyt{ 0% {opacity:0;transform:translateY(24px) scale(.96);filter:blur(6px)} 58% {opacity:1;transform:translateY(-3px) scale(1.01);filter:blur(0)} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} } /* --- 6б. Второй шаг: ввод кода ------------------------------------------- Разметка снята из файлов портала 22.09.2026, не угадана: #2fa-container блок с таймером и ячейками, высота ЖЁСТКО 200 px #register-link ссылка «Управление устройствами» #selection-link ссылка выбора способа — оставляем ячейки кода 40x40, поля по 4 px, рамка ЧЁРНАЯ (border-black/30) — на тёмном фоне почти не видна таймер рисунок 64x64 Опознаватель 2fa-container начинается с цифры, поэтому записан как [id="..."]: имя, начинающееся с цифры, в CSS напрямую недопустимо. Арифметика переноса: шесть ячеек занимают 6x48 = 288 px. В карточке 344 px помещалось 230 — вставало четыре; в 400 px помещалось 286 — вставало пять, не хватало ДВУХ пикселей. Отсюда же и наползание текста: при переносе содержимое не влезает в жёсткие 200 px. Даём карточке 440 px и сужаем поля ячеек с 4 до 2 px: нужно 264, есть 326. */ #second-factor-stage > div{max-width:min(440px,calc(100% - 32px))} #second-factor-stage input{ width:40px;height:40px;margin-left:2px;margin-right:2px; border:1px solid var(--pole-r);border-radius:6px; background:rgba(10,13,16,.55);color:var(--foreground); transition:border-color var(--hod),box-shadow var(--hod); } #second-factor-stage input:focus{ outline:none;border-color:var(--led);box-shadow:0 0 0 3px rgba(168,232,240,.10); } /* В этом месте портал рисует либо циферблат обратного отсчёта, либо галочку «код принят» — они сменяют друг друга. Правило ниже задаёт размер обоим и цвет галочке (она рисуется текущим цветом). */ [id="2fa-container"] svg{width:44px;height:44px;color:var(--led)} /* Циферблат текущим цветом НЕ красится: его цвета зашиты в вызов (`backgroundColor:'#000'`, `color:'#FFFFFF'`) и попадают в рисунок значениями. Поэтому ловим их по значению. Отличаем циферблат от галочки по родному размеру 64: он остаётся в разметке, даже когда правило выше уменьшает рисунок до 44 px. ПРОВЕРИТЬ на живом портале: если цвет не сменился, значит значения попали не в атрибуты, а в стиль, и ловить надо иначе. */ [id="2fa-container"] svg[width="64"] [fill="#FFFFFF"], [id="2fa-container"] svg[width="64"] [stroke="#FFFFFF"]{ fill:var(--led) !important;stroke:var(--led) !important; } [id="2fa-container"] svg[width="64"] [fill="#000"], [id="2fa-container"] svg[width="64"] [stroke="#000"]{ fill:#1a1e22 !important;stroke:#1a1e22 !important; } /* Ссылка «Управление устройствами» убрана — то же самое открывается значком учётной записи в правом верхнем углу (решение владельца 22.09.2026). Ссылка выбора способа остаётся. */ #register-link{display:none} /* Кнопка «Переключить пользователя» убрана. Она была на странице всегда, но сливалась с фоном и проявилась, когда мы заменили цвет secondary. Делает почти то же, что «Выход» (разница лишь в том, очищать ли начатый переход), а выход есть и в меню значка учётной записи — три пути в одно место лишние. Вернуть: убрать эту строку. */ #switch-user-button{display:none} /* Чёрточка, разделявшая «Выход» и «Переключить пользователя». Вторую кнопку мы убрали, и разделитель остался висеть в пустоте. У портала это отдельный элемент с признаком separator. */ #second-factor-stage [data-slot="separator"]{display:none} /* То же самое, но с привязкой к соседству с кнопкой выхода: на телефоне ряд кнопок может лежать вне стадии, и правило выше туда не достаёт. Разделители на других страницах портала при этом не трогаются. */ #logout-button + [data-slot="separator"], [data-slot="separator"]:has(+ #logout-button), [data-slot="separator"]:has(+ #switch-user-button){display:none} /* Ряд ячеек не переносить. Подстраховка к расчёту ширины: даже если на узком экране места впритык, ячейки останутся одной строкой. */ [id="2fa-container"]{white-space:nowrap} /* --- 7. Шапка карточки ---------------------------------------------------- Портал ставит логотип выше подписи, в утверждённом виде — наоборот. Меняем местами свойством order. Если разметка изменится, порядок вернётся к исходному — это не поломка, а другой порядок двух строк. order отрицательный: у остальных блоков карточки он по умолчанию 0, и при значениях 1 и 2 шапка уехала бы ВНИЗ, под форму. */ #first-factor-stage > div > div, #second-factor-stage > div > div{display:flex;flex-direction:column;align-items:stretch} #first-factor-stage > div > div > div:nth-child(1), #second-factor-stage > div > div > div:nth-child(1){order:-1;padding:0} #first-factor-stage > div > div > div:nth-child(2), #second-factor-stage > div > div > div:nth-child(2){order:-2} /* Подпись «вход в систему»: ледяная, вразрядку, с чёрточкой слева. ЛОВУШКА: заголовок и кнопка берут из переводов ОДНУ И ТУ ЖЕ строку («Sign in»), разными их через portal.json не сделать. Поэтому в переводе стоит короткое «Вход» — оно годится кнопке, — а слова «в систему» дописываются здесь и только в заголовке первого шага. */ #first-factor-stage h5::after{content:" в систему"} #first-factor-stage h5, #second-factor-stage h5{ display:flex;align-items:center;gap:8px; color:var(--led);font-size:var(--t-sluzh);font-weight:400; letter-spacing:.18em; /* Своего text-transform здесь нет: строчные приходят общим правилом выше. В утверждённом 21.09 макете эта подпись была ЗАГЛАВНЫМИ — отступление от согласованного вида сделано по прямой просьбе владельца 22.09.2026. */ } #first-factor-stage h5::before, #second-factor-stage h5::before{content:"";width:20px;height:1px;background:currentColor} /* логотип «port-2.ru» — файл logo.png через asset_path, по левому краю */ #first-factor-stage img, #second-factor-stage img{ display:block;width:auto;max-width:175px;height:auto;margin:10px 0 0; } #UserSvg{width:40px} /* запасной значок, если logo.png не подставлен */ /* пояснение под логотипом — своего элемента у портала нет, ставим своим */ #form-login::before{ content:"Введите имя пользователя и пароль."; display:block;margin:8px 0 18px; color:var(--text2);font-size:var(--t-vtor);line-height:1.6; /* портал центрирует содержимое карточки, а в утверждённом виде эта строка стоит по левому краю, как логотип и подписи полей */ text-align:left; } /* --- 8. Поля ввода -------------------------------------------------------- Портал рисует подпись поверх поля, в утверждённом виде она стоит НАД полем. Поднимаем её. Это самое хрупкое место файла: при обновлении подпись может съехать обратно внутрь поля. Лечится удалением этого раздела — остальное оформление не пострадает. !important нужен: у портала на состоянии «поле в фокусе» селектор из двух классов, он сильнее нашего. */ #form-login .grid-cols-1, #form-login > div{display:flex;flex-direction:column;gap:14px} #form-login div:has(> input){padding-top:17px} #form-login label{ position:absolute !important;top:0 !important;left:0 !important; transform:none !important; font-size:var(--t-sluzh) !important;letter-spacing:.06em; color:var(--text2) !important; } #form-login input, [data-slot="floating-input"]{ height:34px;padding:0 12px;font-size:var(--t-osn); border-radius:6px;border:1px solid var(--pole-r); background:rgba(10,13,16,.55);color:var(--foreground); transition:border-color var(--hod),box-shadow var(--hod),background var(--hod); } #form-login input:focus, [data-slot="floating-input"]:focus{ border-color:var(--led);background:rgba(16,22,26,.7); box-shadow:0 0 0 3px rgba(168,232,240,.10); } /* Кнопка показа пароля. Портал ставит её по центру ОБЁРТКИ, а обёртка у нас выросла на 17 px под поднятую подпись — из-за этого значок вставал выше поля. Привязываем к низу: поле 34 px, кнопка 28 px, значит снизу ровно 3 px. */ #form-login button[aria-pressed]{ top:auto !important;bottom:3px !important; /* ОБЕ строки обязательны. Портал сдвигает кнопку вверх не свойством transform, а отдельным свойством translate — отменять надо именно его. С одним transform:none значок оставался поднятым над полем (поймано на приёмке 22.09.2026; в местной пробе не повторялось, потому что там сдвиг был сделан через transform). */ transform:none !important;translate:none !important; } /* --- 9. Кнопка входа — как кнопки дашборда: рамка, тёмная подложка -------- Второй селектор — для кнопки второго шага: её имя мы не видели, поэтому цепляемся за «кнопка отправки внутри второй стадии». Проверить после первой заливки. */ #sign-in-button, #second-factor-stage button[type="submit"]{ height:36px;margin-top:4px; border:1px solid var(--zel);border-radius:6px; background:var(--zel-fon);color:var(--zel-svet); font-size:var(--t-vtor);letter-spacing:.08em;text-transform:none;font-weight:400; transition:transform 160ms ease,background 160ms ease; } #sign-in-button:hover, #second-factor-stage button[type="submit"]:hover{transform:translateY(-1px);background:#204634} #sign-in-button:active, #second-factor-stage button[type="submit"]:active{transform:translateY(0)} /* --- 10. Подвал карточки: подпись движка и шильдик ------------------------ */ #first-factor-stage > div > div > div:last-of-type, #second-factor-stage > div > div > div:last-of-type{margin-top:12px;opacity:.5} #first-factor-stage > div > div > div:last-of-type p, #second-factor-stage > div > div > div:last-of-type p{font-size:var(--t-sluzh)} #first-factor-stage > div::after, #second-factor-stage > div::after{ content:"port-2 · login · 1.0";display:block;text-align:center; margin-top:10px;font-size:var(--t-sluzh);color:var(--text2);letter-spacing:.06em; } #language-button{color:var(--text2);opacity:.6;transition:opacity var(--hod)} #language-button:hover{opacity:1} /* --- 11. Щадящий режим ---------------------------------------------------- Каждый элемент доводится до КОНЕЧНОГО вида, а не гасится посередине: заставки и луча нет вовсе, карточка сразу на месте, знак светится ровно. */ @media (prefers-reduced-motion:reduce){ html::after,#root::before,#root::after{display:none} body::after{display:none} body::before{animation:none;filter:drop-shadow(0 0 2.5px rgba(168,232,240,.9))} #first-factor-stage > div, #second-factor-stage > div{animation:none;opacity:1;transform:none;filter:none} *{transition:none !important} } /* --- 12. Узкий экран ------------------------------------------------------ Рисунок заставки уменьшается, и вместе с ним пересчитывается просвет под линию: 300 → 216 px по высоте, значит 266-я точка становится 192-й, а от середины экрана это 84 px. */ @media (max-width:560px){ :root{--z-shirina:403px; --z-vysota:216px; --z-liniya:84px} #root::after{width:min(78vw,340px)} body::before{top:18px;left:18px} #first-factor-stage > div, #second-factor-stage > div{padding:22px 18px 16px} /* 16 px не даёт телефону самовольно увеличивать страницу при наборе */ #form-login input, [data-slot="floating-input"]{font-size:16px;height:38px} #form-login button[aria-pressed]{bottom:5px !important} /* Второй шаг на телефоне: ширину взять неоткуда, поэтому ужимаем отступы и сами ячейки. Шесть ячеек по 38 px = 228, помещается 264. min-width:0 снимает заданные порталом 300 px — иначе на узком экране блок вылезал бы за край. */ #second-factor-stage > div{padding:22px 14px 14px} #second-factor-stage div:has(> [id="2fa-container"]){padding:18px;min-width:0} /* Ячейки ещё мельче: 6 x 34 = 204 px. На приёмке 22.09.2026 при 36 px они на телефоне всё ещё уходили на вторую строку, хотя по расчёту помещались — значит место съедает что-то, чего не видно со стороны. Берём с запасом и вдобавок запрещаем перенос выше. */ #second-factor-stage input{width:32px;height:38px;margin-left:1px;margin-right:1px;font-size:16px} [id="2fa-container"] svg{width:38px;height:38px} }