/* ============================================================ STANDALONE-обёртка — стили (экран входа + страница). ------------------------------------------------------------ Это НЕ ядро: вход по ключу комнаты, собственная тёмная тема. В embedded-режиме (АСУ) этого файла нет — вход и тема от хоста. Палитру переменных (--bg, --txt, …) даёт coordinator.css через класс .uzel-theme-standalone-dark на (см. index.html), поэтому coordinator.css подключается ПЕРВЫМ. ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;height:100dvh} /* ---------- ТЕМЫ ЭКРАНА ВХОДА ---------- Палитра по умолчанию приходит от coordinator.css (.uzel-theme-standalone-dark). Остальные темы — СВОИ копии палитр по образцу coordinator.css: standalone.js ставит data-theme на body из uzel.settings.theme (localStorage, до авторизации — тот же принцип, что у настроек микрофона). Шрифты локальные (fonts.css). */ body.uzel-theme-standalone-dark[data-theme="corporate"]{ --bg:#f5f7f9; --panel:#ffffff; --panel-2:#eef2f7; --line:#e7ebf0; --line-soft:#eef2f7; --txt:#1c2733; --txt-dim:#5b6b7f; --txt-faint:#98a4b3; --amber:#3565e0; --amber-dim:#a9c0f5; --green:#1e9e6a; --green-bright:#1e9e6a; --red:#d64545; --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; } body.uzel-theme-standalone-dark[data-theme="soviet"]{ --bg:#101208; --panel:#15180c; --panel-2:#1b2010; --line:#2b2f1d; --line-soft:#23261a; --txt:#ece4cc; --txt-dim:#b8b394; --txt-faint:#6f7256; --amber:#c2342b; --amber-dim:#e8a020; --green:#7dff9e; --green-bright:#7dff9e; --red:#e05a4e; --mono:'Oswald',system-ui,sans-serif; --sans:'Oswald',system-ui,sans-serif; } body.uzel-theme-standalone-dark[data-theme="oldrus"]{ --bg:#3a0e14; --panel:#4a141c; --panel-2:#591a22; --line:#6e2530; --line-soft:#5a1f28; --txt:#f3e3bf; --txt-dim:#c9a86a; --txt-faint:#8a6a4a; --amber:#caa54b; --amber-dim:#8a6a2a; --green:#8fbf78; --green-bright:#8fbf78; --red:#d1654a; --mono:'PT Serif',serif; --sans:'PT Serif',serif; } body.uzel-theme-standalone-dark{ background:var(--bg);color:var(--txt); font-family:var(--sans);font-size:14px;line-height:1.45; overflow:hidden;-webkit-font-smoothing:antialiased; } ::selection{background:var(--amber);color:#0b0f0d} /* сюда монтируется ядро — занимает весь экран */ #uzel-root{height:100%} /* ---------- LOGIN ---------- */ #uzel-login{ position:fixed;inset:0;z-index:100; background:radial-gradient(120% 80% at 50% -10%, var(--panel-2) 0%, var(--bg) 60%); display:flex;align-items:center;justify-content:center; } #uzel-login .login-card{ width:340px;border:1px solid var(--line);background:var(--panel); padding:34px 30px 30px;position:relative; } #uzel-login .login-card::before{ content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--amber); } #uzel-login .brand{display:flex;align-items:baseline;gap:9px;margin-bottom:4px} #uzel-login .brand h1{ font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:.14em;color:var(--txt); } #uzel-login .brand .dot{ width:8px;height:8px;background:var(--green-bright);border-radius:50%; box-shadow:0 0 9px var(--green-bright);align-self:center; } #uzel-login .login-sub{ font-family:var(--mono);font-size:10.5px;letter-spacing:.22em; color:var(--txt-faint);text-transform:uppercase;margin-bottom:26px; } #uzel-login .field{margin-bottom:16px} #uzel-login .field label{ display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--txt-dim);margin-bottom:7px; } #uzel-login .field input{ width:100%;background:var(--bg);border:1px solid var(--line); color:var(--txt);font-family:var(--mono);font-size:14px;padding:11px 12px; letter-spacing:.05em;outline:none;transition:border-color .15s; } #uzel-login .field input:focus{border-color:var(--amber-dim)} #uzel-login .field input::placeholder{color:var(--txt-faint)} #uzel-login .enter-btn{ width:100%;margin-top:8px;background:var(--amber);color:#0b0f0d;border:none; font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;padding:13px;cursor:pointer;transition:background .15s; } #uzel-login .enter-btn:hover{background:#eec25e} #uzel-login .login-err{ font-family:var(--mono);font-size:11px;color:var(--red);margin-top:14px; min-height:15px;letter-spacing:.04em; } /* ---------- выбор комнаты (несколько комнат у пользователя) ---------- */ /* пока выбирается комната, поля логина и кнопка входа скрыты */ #uzel-login .login-card.mode-rooms .field, #uzel-login .login-card.mode-rooms .enter-btn{display:none} #uzel-login .room-pick[hidden]{display:none} #uzel-login .rp-title{ font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--txt-dim);margin-bottom:10px; } #uzel-login .rp-list{display:flex;flex-direction:column;gap:8px} #uzel-login .room-btn{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;background:var(--bg);border:1px solid var(--line); color:var(--txt);font-family:var(--mono);font-size:13px;padding:12px; letter-spacing:.05em;cursor:pointer;text-align:left; transition:border-color .15s; } #uzel-login .room-btn:hover{border-color:var(--amber-dim)} #uzel-login .room-btn .rb-admin{ font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--amber);border:1px solid var(--amber-dim);padding:2px 6px; } #uzel-login .login-foot{ margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft); font-family:var(--mono);font-size:10px;color:var(--txt-faint); letter-spacing:.05em;line-height:1.7; } /* ---------- АДМИНКА (только role=cmd) ---------- */ /* кнопка открытия — плавает под топбаром ядра, поверх него */ #uzel-admin-btn{ position:fixed;top:56px;right:12px;z-index:90; background:var(--panel);border:1px solid var(--amber-dim);color:var(--amber); font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;padding:7px 12px;cursor:pointer;transition:background .15s; } #uzel-admin-btn:hover{background:var(--panel-2)} #uzel-admin-btn[hidden]{display:none} #uzel-admin{ position:fixed;inset:0;z-index:95; background:radial-gradient(120% 80% at 50% -10%, var(--panel-2) 0%, var(--bg) 60%); display:flex;align-items:flex-start;justify-content:center; overflow-y:auto;padding:40px 16px; } #uzel-admin[hidden]{display:none} #uzel-admin .admin-card{ width:640px;max-width:100%;border:1px solid var(--line);background:var(--panel); padding:24px 26px 26px;position:relative; } #uzel-admin .admin-card::before{ content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--amber); } #uzel-admin .admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} #uzel-admin .admin-title{ font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--txt); } #uzel-admin .admin-close{ background:none;border:1px solid var(--line);color:var(--txt-dim); font-family:var(--mono);font-size:12px;padding:5px 9px;cursor:pointer; } #uzel-admin .admin-close:hover{border-color:var(--amber-dim);color:var(--txt)} #uzel-admin .admin-err{ font-family:var(--mono);font-size:11px;color:var(--red);min-height:15px; margin-bottom:10px;letter-spacing:.04em; } #uzel-admin .admin-list{border-top:1px solid var(--line-soft)} #uzel-admin .adm-row{ display:flex;align-items:center;gap:10px;padding:8px 0; border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:12px; } #uzel-admin .adm-row.off{opacity:.45} #uzel-admin .adm-row .login{color:var(--amber);min-width:90px} #uzel-admin .adm-row .cs{color:var(--txt)} #uzel-admin .adm-row .role{ color:var(--txt-faint);font-size:10px;letter-spacing:.1em;text-transform:uppercase; } #uzel-admin .adm-row .state{margin-left:auto;font-size:10px;color:var(--txt-dim);letter-spacing:.08em} #uzel-admin .adm-row button{ background:none;border:1px solid var(--line);color:var(--txt-dim); font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:4px 8px;cursor:pointer;transition:border-color .15s,color .15s; } #uzel-admin .adm-row button:hover{border-color:var(--amber-dim);color:var(--txt)} #uzel-admin .adm-row button.del:hover, #uzel-admin .adm-row button.del.confirm{border-color:var(--red);color:var(--red)} /* инлайн-редактирование учётки под строкой */ #uzel-admin .adm-edit{padding:10px 0 12px;border-bottom:1px solid var(--line-soft)} #uzel-admin .adm-edit input:disabled, #uzel-admin .adm-edit select:disabled{opacity:.5;cursor:not-allowed} #uzel-admin .adm-edit-btns{display:flex;gap:8px;align-items:center} #uzel-admin .adm-edit-btns button{ background:none;border:1px solid var(--line);color:var(--txt-dim); font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:8px 12px;cursor:pointer;transition:border-color .15s,color .15s; } #uzel-admin .adm-edit-btns button:hover{border-color:var(--amber-dim);color:var(--txt)} #uzel-admin .adm-edit-btns .ae-save{border-color:var(--amber-dim);color:var(--amber)} #uzel-admin .admin-form-title{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--txt-dim);margin:18px 0 10px; } #uzel-admin .af-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} #uzel-admin .af-grid input,#uzel-admin .af-grid select{ width:100%;background:var(--bg);border:1px solid var(--line); color:var(--txt);font-family:var(--mono);font-size:13px;padding:9px 10px; letter-spacing:.05em;outline:none;transition:border-color .15s; } #uzel-admin .af-grid input:focus,#uzel-admin .af-grid select:focus{border-color:var(--amber-dim)} #uzel-admin .af-grid input::placeholder{color:var(--txt-faint)} #uzel-admin .af-submit{ background:var(--amber);color:#0b0f0d;border:none; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;padding:10px;cursor:pointer;transition:background .15s; } #uzel-admin .af-submit:hover{background:#eec25e} /* ---------- ПАНЕЛЬ «КОМНАТЫ» (супердоступ, is_superadmin) ---------- */ /* поверх экрана входа (z>100): superadmin без членств управляет структурой прямо с логин-экрана, не входя ни в один канал */ #uzel-rooms-btn{ position:fixed;top:96px;right:12px;z-index:105; background:var(--panel);border:1px solid var(--amber-dim);color:var(--amber); font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;padding:7px 12px;cursor:pointer;transition:background .15s; } #uzel-rooms-btn:hover{background:var(--panel-2)} #uzel-rooms-btn[hidden]{display:none} #uzel-rooms{ position:fixed;inset:0;z-index:104; background:radial-gradient(120% 80% at 50% -10%, var(--panel-2) 0%, var(--bg) 60%); display:flex;align-items:flex-start;justify-content:center; overflow-y:auto;padding:40px 16px; } #uzel-rooms[hidden]{display:none} #uzel-rooms .rooms-card{width:720px} /* карточка/формы переиспользуют стили админки — селекторы дублируем на #uzel-rooms, чтобы не зависеть от вложенности #uzel-admin */ #uzel-rooms .admin-card{ max-width:100%;border:1px solid var(--line);background:var(--panel); padding:24px 26px 26px;position:relative; } #uzel-rooms .admin-card::before{ content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--amber); } #uzel-rooms .admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} #uzel-rooms .admin-title{ font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--txt); } #uzel-rooms .admin-close{ background:none;border:1px solid var(--line);color:var(--txt-dim); font-family:var(--mono);font-size:12px;padding:5px 9px;cursor:pointer; } #uzel-rooms .admin-close:hover{border-color:var(--amber-dim);color:var(--txt)} #uzel-rooms .admin-err{ font-family:var(--mono);font-size:11px;color:var(--red);min-height:15px; margin-bottom:10px;letter-spacing:.04em; } #uzel-rooms .admin-list{border-top:1px solid var(--line-soft)} #uzel-rooms .admin-form-title{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--txt-dim);margin:18px 0 10px; } #uzel-rooms .af-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} #uzel-rooms .af-grid input,#uzel-rooms .af-grid select{ width:100%;background:var(--bg);border:1px solid var(--line); color:var(--txt);font-family:var(--mono);font-size:13px;padding:9px 10px; letter-spacing:.05em;outline:none;transition:border-color .15s; } #uzel-rooms .af-grid input:focus,#uzel-rooms .af-grid select:focus{border-color:var(--amber-dim)} #uzel-rooms .af-grid input::placeholder{color:var(--txt-faint)} #uzel-rooms .af-submit{ background:var(--amber);color:#0b0f0d;border:none; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;padding:10px;cursor:pointer;transition:background .15s; } #uzel-rooms .af-submit:hover{background:#eec25e} #uzel-rooms .gu-super{ display:flex;align-items:center;gap:8px; font-family:var(--mono);font-size:11px;color:var(--txt-dim); letter-spacing:.08em;text-transform:uppercase; } /* список комнат */ #uzel-rooms .room-row{ display:flex;align-items:center;gap:10px;padding:9px 0; border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:12px; } #uzel-rooms .room-row .rname{color:var(--amber);min-width:110px} #uzel-rooms .room-row .rslug{color:var(--txt-faint);font-size:10px;letter-spacing:.08em} #uzel-rooms .room-row .rcount{margin-left:auto;font-size:10px;color:var(--txt-dim)} #uzel-rooms .room-row button, #uzel-rooms .member-row button, #uzel-rooms .g-user-row button{ background:none;border:1px solid var(--line);color:var(--txt-dim); font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:4px 8px;cursor:pointer;transition:border-color .15s,color .15s; } #uzel-rooms .room-row button:hover, #uzel-rooms .member-row button:hover, #uzel-rooms .g-user-row button:hover{border-color:var(--amber-dim);color:var(--txt)} #uzel-rooms button.del:hover,#uzel-rooms button.del.confirm{border-color:var(--red)!important;color:var(--red)!important} /* участники комнаты (раскрывающийся блок) */ #uzel-rooms .room-members{ padding:6px 0 12px 16px;border-bottom:1px solid var(--line-soft); } #uzel-rooms .member-row{ display:flex;align-items:center;gap:10px;padding:6px 0; font-family:var(--mono);font-size:12px; } #uzel-rooms .member-row .mlogin{color:var(--amber);min-width:90px} #uzel-rooms .member-row .mcs{color:var(--txt)} #uzel-rooms .member-row .madm{ font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--amber);border:1px solid var(--amber-dim);padding:2px 6px; } #uzel-rooms .member-add{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap} #uzel-rooms .member-add select{ background:var(--bg);border:1px solid var(--line);color:var(--txt); font-family:var(--mono);font-size:12px;padding:6px 8px;outline:none; } #uzel-rooms .member-add label{ display:flex;align-items:center;gap:6px; font-family:var(--mono);font-size:10px;color:var(--txt-dim); letter-spacing:.08em;text-transform:uppercase; } /* селект «Роль» (право: Администратор/Пользователь) в строках списков */ #uzel-rooms .access-select{ background:var(--bg);border:1px solid var(--line);color:var(--txt); font-family:var(--mono);font-size:11px;padding:4px 6px;outline:none; } #uzel-rooms .access-select:disabled{opacity:.5;cursor:not-allowed} /* глобальный список пользователей */ #uzel-rooms .g-user-row{ display:flex;align-items:center;gap:10px;padding:8px 0; border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:12px; } #uzel-rooms .g-user-row .login{color:var(--amber);min-width:90px} #uzel-rooms .g-user-row .cs{color:var(--txt)} #uzel-rooms .g-user-row .grooms{color:var(--txt-faint);font-size:10px;letter-spacing:.06em} #uzel-rooms .g-user-row .gsuper{ font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--red);border:1px solid var(--red);padding:2px 6px; } #uzel-rooms .g-user-row .state{margin-left:auto;font-size:10px;color:var(--txt-dim)}