Добавлен экран информации о диалоге: шапка с кнопкой ⋯, окно с редактированием названия, отображением агента, даты создания/обновления, признака временности и кнопкой удаления.
This commit is contained in:
+252
-89
@@ -169,7 +169,7 @@
|
||||
</div>
|
||||
<div class="composer">
|
||||
<div class="composer-row">
|
||||
<div class="field">Сообщение агенту…</div>
|
||||
<div class="composer-input">Сообщение агенту…</div>
|
||||
<button class="mic" title="Голос">🎤</button>
|
||||
<button class="send off" title="Отправить">➤</button>
|
||||
</div>
|
||||
@@ -253,92 +253,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 5 · модалка нового диалога ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>5 · модалка нового диалога</b> выбор агента для нового диалога</div>
|
||||
<div class="win" style="position:relative">
|
||||
<section class="list">
|
||||
<div class="l-head"><h1>Диалоги</h1></div>
|
||||
<div class="chips">
|
||||
<div class="chip on">Все чаты<b>3</b></div>
|
||||
<div class="chip">Работа</div>
|
||||
<div class="chip">Дом</div>
|
||||
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
|
||||
</div>
|
||||
<div class="q">🔍 Поиск…</div>
|
||||
<div class="rows">
|
||||
<div class="row">
|
||||
<span class="strip" style="background:var(--a1)"></span>
|
||||
<div class="ava" style="background:var(--a1)">С</div>
|
||||
<div class="mid">
|
||||
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
|
||||
<div class="l2"><span class="p">Собрал отчёт, жду правок</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<main class="main">
|
||||
<div class="empty">
|
||||
<div class="big">💬</div>
|
||||
<h3>Выберите диалог слева</h3>
|
||||
<p>Или нажмите <b>＋</b> в шапке списка, чтобы создать новый.</p>
|
||||
</div>
|
||||
</main>
|
||||
<div class="scrim">
|
||||
<div class="modal">
|
||||
<h2>Новый диалог</h2>
|
||||
<div class="sub">Выберите ассистента — он отвечает на «/agentik» на своём адресе</div>
|
||||
<div class="body">
|
||||
<div class="agent on">
|
||||
<div class="sign" style="background:var(--a1)">С</div>
|
||||
<div class="mid">
|
||||
<div class="nm">Строитель</div>
|
||||
<div class="ad">http://192.168.88.135:8080/agentik</div>
|
||||
</div>
|
||||
<div class="radio"></div>
|
||||
</div>
|
||||
<div class="agent">
|
||||
<div class="sign" style="background:var(--a2)">К</div>
|
||||
<div class="mid">
|
||||
<div class="nm">Книги</div>
|
||||
<div class="ad">http://192.168.76.199:8080/agentik</div>
|
||||
</div>
|
||||
<div class="radio"></div>
|
||||
</div>
|
||||
<div class="agent">
|
||||
<div class="sign" style="background:var(--a3)">Р</div>
|
||||
<div class="mid">
|
||||
<div class="nm">Разбор логов <span class="bad">· не отвечает</span></div>
|
||||
<div class="ad">http://192.168.10.42:8080/agentik</div>
|
||||
</div>
|
||||
<div class="radio"></div>
|
||||
</div>
|
||||
<div class="agent">
|
||||
<div class="sign" style="background:var(--a4)">S</div>
|
||||
<div class="mid">
|
||||
<div class="nm">Solana-бэкенд</div>
|
||||
<div class="ad">http://192.168.88.24:8080/agentik</div>
|
||||
</div>
|
||||
<div class="radio"></div>
|
||||
</div>
|
||||
<div class="agent">
|
||||
<div class="sign" style="background:var(--a5)">Д</div>
|
||||
<div class="mid">
|
||||
<div class="nm">DevOps · деплой</div>
|
||||
<div class="ad">http://192.168.5.10:8080/agentik</div>
|
||||
</div>
|
||||
<div class="radio"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<button class="btn">Отмена</button>
|
||||
<button class="btn prim">Создать →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 6 · управление группами ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>6 · управление группами</b> модалка со списком групп + добавить</div>
|
||||
@@ -967,7 +881,7 @@
|
||||
<div class="head-name">agentik · рабочий</div>
|
||||
<div class="head-sub"><span class="dot">●</span> на связи</div>
|
||||
</div>
|
||||
<button class="icon-btn" title="Параметры диалога">⋯</button>
|
||||
<button class="icon-btn" title="Параметры диалога"><svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></button>
|
||||
</header>
|
||||
|
||||
<div class="messages">
|
||||
@@ -1040,7 +954,7 @@
|
||||
<div class="avatar pic"></div>
|
||||
<div class="ag-mid">
|
||||
<div class="ag-name">Кот-ассистент</div>
|
||||
<div class="ag-addr">http://192.168.88.24:8080/agentik</div>
|
||||
<div class="ag-addr">http://192.168.24.8080:8080/agentik</div>
|
||||
<div class="ag-state err"><span class="d"></span>не отвечает</div>
|
||||
</div>
|
||||
<div class="pick"></div>
|
||||
@@ -1051,6 +965,20 @@
|
||||
<span>Ассистент сейчас не отвечает. Диалог создать можно, но
|
||||
сообщение не уйдёт, пока он не поднимется.</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Название</label>
|
||||
<input type="text" value="" placeholder="как назвать диалог">
|
||||
<div class="note">Можно оставить пустым — диалог покажется как «Без названия». Переименуете в ⋯ в шапке чата.</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-row on">
|
||||
<div class="box"></div>
|
||||
<div class="mid">
|
||||
<div class="lbl">Временный диалог</div>
|
||||
<div class="desc">История не сохраняется на сервере. Подходит для коротких проверок и отладки.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-foot">
|
||||
<button class="btn" style="flex:1">Отмена</button>
|
||||
@@ -1422,5 +1350,240 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ вход в окно информации о диалоге ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>вход в окно информации о диалоге</b> кнопка <code>⋯</code> в шапке открытого чата с подсветкой</div>
|
||||
<div class="window">
|
||||
<aside class="sidebar">
|
||||
<div class="sb-head"><div class="sb-title"><span>Диалоги</span><button class="icon-btn" title="Новый диалог">＋</button></div></div>
|
||||
<input class="search" placeholder="Поиск диалога…" style="margin:0 16px 10px;width:calc(100% - 32px);">
|
||||
<div class="chat-list">
|
||||
<div class="chat-row active">
|
||||
<div class="avatar">АГ</div>
|
||||
<div class="chat-mid">
|
||||
<div class="chat-name"><span>Spring Boot · настройка логов</span><span class="chat-time">14:22</span></div>
|
||||
<div class="chat-prev">Логи теперь пишутся в отдельный файл…</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<header class="chat-head">
|
||||
<div class="avatar">АГ</div>
|
||||
<div class="head-meta">
|
||||
<div class="head-name">Spring Boot · настройка логов</div>
|
||||
<div class="head-sub"><span class="dot">●</span> на связи · agentik</div>
|
||||
</div>
|
||||
<button class="icon-btn hi-btn" title="Параметры диалога"><svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></button>
|
||||
</header>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 20 · параметры диалога · обычный ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>20 · параметры диалога · обычный</b> чекбокс выключен и задизейблен (<code>isTemporal=false</code>). Открывается по <code>⋯</code> в шапке чата</div>
|
||||
<div class="dialog">
|
||||
<div class="d-head">
|
||||
<h2>Spring Boot · настройка логов</h2>
|
||||
<button class="x-btn">✕</button>
|
||||
</div>
|
||||
<div class="d-body">
|
||||
<div class="field">
|
||||
<label>Название</label>
|
||||
<input type="text" value="Spring Boot · настройка логов">
|
||||
<div class="note">Пустое имя — диалог покажется как «Без названия».</div>
|
||||
</div>
|
||||
|
||||
<label style="display:block;font-size:12px;color:var(--dim);margin:0 0 6px">Агент</label>
|
||||
<div class="agent-card" style="margin-bottom:0">
|
||||
<div class="avatar" style="background:var(--accent);color:var(--on-accent)">АГ</div>
|
||||
<div class="ag-mid">
|
||||
<div class="ag-name">agentik</div>
|
||||
<div class="ag-addr">http://192.168.88.135:8080/agentik</div>
|
||||
</div>
|
||||
<div class="state"><span class="d"></span>на связи</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-row off" style="margin-top:14px">
|
||||
<div class="box"></div>
|
||||
<div class="mid">
|
||||
<div class="lbl">Временный диалог</div>
|
||||
<div class="desc">Задаётся только при создании. Изменить временность существующего диалога нельзя.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="probe-list">
|
||||
<div><span>Создан</span><b>1 окт 2026, 22:07</b></div>
|
||||
<div><span>Обновлён</span><b>5 окт 2026, 11:30</b></div>
|
||||
</div>
|
||||
|
||||
<div class="danger-zone">
|
||||
<div class="lbl">Опасное</div>
|
||||
<button class="btn dang" style="width:100%">Удалить диалог</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-foot">
|
||||
<button class="btn" style="flex:1">Закрыть</button>
|
||||
<button class="btn prim" style="flex:1">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 21 · параметры диалога · временный ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>21 · параметры диалога · временный</b> чекбокс включён и задизейблен (<code>isTemporal=true</code>)</div>
|
||||
<div class="dialog">
|
||||
<div class="d-head">
|
||||
<h2>Черновик ТЗ</h2>
|
||||
<button class="x-btn">✕</button>
|
||||
</div>
|
||||
<div class="d-body">
|
||||
<div class="field">
|
||||
<label>Название</label>
|
||||
<input type="text" value="Черновик ТЗ">
|
||||
</div>
|
||||
|
||||
<label style="display:block;font-size:12px;color:var(--dim);margin:0 0 6px">Агент</label>
|
||||
<div class="agent-card" style="margin-bottom:0">
|
||||
<div class="avatar" style="background:#C9A886;color:var(--on-accent)">КО</div>
|
||||
<div class="ag-mid">
|
||||
<div class="ag-name">coder</div>
|
||||
<div class="ag-addr">http://192.168.76.199:8080/agentik</div>
|
||||
</div>
|
||||
<div class="state"><span class="d"></span>на связи</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-row on off" style="margin-top:14px">
|
||||
<div class="box"></div>
|
||||
<div class="mid">
|
||||
<div class="lbl">Временный диалог</div>
|
||||
<div class="desc">История не сохраняется на сервере.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="probe-list">
|
||||
<div><span>Создан</span><b>только что</b></div>
|
||||
</div>
|
||||
|
||||
<div class="danger-zone">
|
||||
<div class="lbl">Опасное</div>
|
||||
<button class="btn dang" style="width:100%">Удалить диалог</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-foot">
|
||||
<button class="btn" style="flex:1">Закрыть</button>
|
||||
<button class="btn prim" style="flex:1">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 22 · параметры диалога · без названия ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>22 · параметры диалога · без названия</b> пустое имя</div>
|
||||
<div class="dialog">
|
||||
<div class="d-head">
|
||||
<h2>Без названия</h2>
|
||||
<button class="x-btn">✕</button>
|
||||
</div>
|
||||
<div class="d-body">
|
||||
<div class="field">
|
||||
<label>Название</label>
|
||||
<input type="text" value="" placeholder="как назвать диалог">
|
||||
<div class="note">Пока имя не задано, диалог показывается как «Без названия».</div>
|
||||
</div>
|
||||
|
||||
<label style="display:block;font-size:12px;color:var(--dim);margin:0 0 6px">Агент</label>
|
||||
<div class="agent-card" style="margin-bottom:0">
|
||||
<div class="avatar" style="background:#86C99A;color:var(--on-accent)">ДМ</div>
|
||||
<div class="ag-mid">
|
||||
<div class="ag-name">home-assistant</div>
|
||||
<div class="ag-addr">http://192.168.76.199:8080/agentik</div>
|
||||
</div>
|
||||
<div class="state err"><span class="d"></span>не отвечает</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-row off" style="margin-top:14px">
|
||||
<div class="box"></div>
|
||||
<div class="mid">
|
||||
<div class="lbl">Временный диалог</div>
|
||||
<div class="desc">Задаётся только при создании. Изменить временность существующего диалога нельзя.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="probe-list">
|
||||
<div><span>Создан</span><b>сегодня, 09:11</b></div>
|
||||
</div>
|
||||
|
||||
<div class="danger-zone">
|
||||
<div class="lbl">Опасное</div>
|
||||
<button class="btn dang" style="width:100%">Удалить диалог</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-foot">
|
||||
<button class="btn" style="flex:1">Закрыть</button>
|
||||
<button class="btn prim" style="flex:1">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 23 · параметры диалога · ошибка сохранения ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>23 · параметры диалога · ошибка</b> сервер не принял имя — warn + «Повторить»</div>
|
||||
<div class="dialog">
|
||||
<div class="d-head">
|
||||
<h2>Spring Boot · настройка логов</h2>
|
||||
<button class="x-btn">✕</button>
|
||||
</div>
|
||||
<div class="d-body">
|
||||
<div class="field">
|
||||
<label>Название</label>
|
||||
<input type="text" value="Spring Boot · настройка логов">
|
||||
</div>
|
||||
|
||||
<div class="warn">
|
||||
<span class="i">⚠</span>
|
||||
<span>Не удалось сохранить имя: агент не отвечает. Проверьте связь и попробуйте снова.</span>
|
||||
</div>
|
||||
|
||||
<div class="danger-zone">
|
||||
<div class="lbl">Опасное</div>
|
||||
<button class="btn dang" style="width:100%">Удалить диалог</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-foot">
|
||||
<button class="btn" style="flex:1">Закрыть</button>
|
||||
<button class="btn prim" style="flex:1">Повторить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 24 · удаление диалога · подтверждение ============ -->
|
||||
<section class="screen">
|
||||
<div class="lbl"><b>24 · удаление диалога · подтверждение</b> открывается по «Удалить диалог» из 20–23. Действие необратимо — warn + красный CTA</div>
|
||||
<div class="dialog">
|
||||
<div class="d-head">
|
||||
<h2>Удалить диалог?</h2>
|
||||
<button class="x-btn">✕</button>
|
||||
</div>
|
||||
<div class="d-body">
|
||||
<div class="warn">
|
||||
<span class="i">⚠</span>
|
||||
<span>Диалог <b>«Spring Boot · настройка логов»</b> и вся его история будут
|
||||
безвозвратно удалены с сервера. Это действие нельзя отменить.</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>ℹ</span>
|
||||
<span>Корзины нет. Если передумаете — диалог придётся создавать заново, и
|
||||
контекст будет потерян.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-foot">
|
||||
<button class="btn" style="flex:1">Отмена</button>
|
||||
<button class="btn dang solid" style="flex:1">Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+44
-17
@@ -144,12 +144,12 @@ body {
|
||||
.rec-btn.rec-send:hover { background: #82BEF5; }
|
||||
|
||||
.composer-row { display: flex; align-items: center; gap: 10px; }
|
||||
.field {
|
||||
.composer-input {
|
||||
flex: 1; min-width: 0; height: 46px; border-radius: 13px; background: var(--bg);
|
||||
border: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px;
|
||||
font-size: 13.5px; color: var(--dim);
|
||||
}
|
||||
.field.focus { border-color: var(--accent); }
|
||||
.composer-input.focus { border-color: var(--accent); }
|
||||
.mic {
|
||||
width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
|
||||
border: 2px solid var(--accent); background: var(--bg); color: var(--accent);
|
||||
@@ -359,15 +359,6 @@ body {
|
||||
.state.err { color: var(--err); } .state.err .d { background: var(--err); }
|
||||
.card-acts { display: flex; gap: 4px; flex: 0 0 auto; }
|
||||
|
||||
.field { margin-bottom: 15px; }
|
||||
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
|
||||
.field input {
|
||||
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
|
||||
background: var(--bg); color: var(--fg); font-size: 13.5px; outline: none; font-family: inherit;
|
||||
}
|
||||
.field input:focus { border-color: var(--accent); }
|
||||
.field input.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
|
||||
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; line-height: 1.5; }
|
||||
.note code, .hint-line code { background: var(--panel2); padding: 1px 4px; border-radius: 4px;
|
||||
font-size: 10.5px; }
|
||||
.addr-row { display: flex; gap: 8px; }
|
||||
@@ -441,7 +432,9 @@ body {
|
||||
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: none;
|
||||
background: transparent; color: var(--dim); cursor: pointer; display: grid; place-items: center;
|
||||
font-size: 17px; }
|
||||
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
|
||||
.icon-btn:hover { background: var(--panel2); color: var(--fg); }
|
||||
.hi-btn { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
|
||||
.search { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line);
|
||||
background: var(--bg); color: var(--fg); font-size: 13px; outline: none; font-family: inherit; }
|
||||
.search:focus { border-color: var(--accent); }
|
||||
@@ -556,6 +549,34 @@ kbd { background: var(--panel2); border: 1px solid var(--line); border-radius: 4
|
||||
margin-bottom: 8px; padding-left: 2px; }
|
||||
.asr-note .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
|
||||
|
||||
/* === чекбокс (используется в новом диалоге и в параметрах диалога) === */
|
||||
.checkbox-row {
|
||||
display: flex; align-items: center; gap: 11px;
|
||||
padding: 11px 13px; border-radius: 10px;
|
||||
background: var(--panel2); margin-bottom: 9px;
|
||||
cursor: pointer; user-select: none;
|
||||
}
|
||||
.checkbox-row:hover { background: #202C38; }
|
||||
.checkbox-row .box {
|
||||
width: 20px; height: 20px; flex: 0 0 20px; border-radius: 5px;
|
||||
border: 1.5px solid var(--line); background: var(--bg);
|
||||
display: grid; place-items: center; position: relative;
|
||||
}
|
||||
.checkbox-row.on .box { background: var(--accent); border-color: var(--accent); }
|
||||
.checkbox-row.on .box::after {
|
||||
content: ""; position: absolute; left: 5px; top: 2px;
|
||||
width: 6px; height: 11px;
|
||||
border: solid var(--on-accent); border-width: 0 2px 2px 0;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
.checkbox-row .mid { flex: 1; min-width: 0; }
|
||||
.checkbox-row .lbl { font-size: 13px; color: var(--fg); }
|
||||
.checkbox-row .desc { font-size: 11.5px; color: var(--dim); margin-top: 2px; line-height: 1.45; }
|
||||
.checkbox-row.off { cursor: default; }
|
||||
.checkbox-row.off:hover { background: var(--panel2); }
|
||||
.checkbox-row.off .lbl { color: var(--dim); }
|
||||
.checkbox-row.off .box { opacity: .55; }
|
||||
|
||||
/* === 005 · выбор ассистента (agent-opt) === */
|
||||
.d-lead { font-size: 12.5px; color: var(--dim); margin-bottom: 12px; }
|
||||
.agent-opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px;
|
||||
@@ -602,9 +623,15 @@ kbd { background: var(--panel2); border: 1px solid var(--line); border-radius: 4
|
||||
.grp.sys { background: transparent; border: 1px dashed var(--line); }
|
||||
.grp.sys .nm { color: var(--fg); }
|
||||
.grp .lock { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
|
||||
.field { margin-bottom: 15px; }
|
||||
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
|
||||
.field input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
|
||||
background: var(--bg); color: var(--fg); font-size: 13.5px; outline: none; font-family: inherit; }
|
||||
.field input:focus { border-color: var(--accent); }
|
||||
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; }
|
||||
.field { margin-bottom: 14px; }
|
||||
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
|
||||
.field input {
|
||||
width: 100%; padding: 6px 0; background: transparent; color: var(--fg);
|
||||
font-size: 14px; outline: none; font-family: inherit;
|
||||
border: 0; border-bottom: 1px solid var(--line);
|
||||
transition: border-color .12s ease;
|
||||
}
|
||||
.field input::placeholder { color: var(--dim); opacity: .55; }
|
||||
.field input:focus { border-bottom-color: var(--accent); border-bottom-width: 2px; }
|
||||
.field input.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
|
||||
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; line-height: 1.5; }
|
||||
Reference in New Issue
Block a user