skillok meeting
d93e31a829c96025e18e4ceed0cf1552df5934c8
Перейти к файлу
Код
meeting srcstylesui.css
anc Этап 0: каркас Tauri 2, разбор встречи через OpenRouter, стиль skillok.org - Ядро на Rust: расшифровка и импорт текста, схема разбора со строгой проверкой ответа модели, клиент OpenRouter (проверка ключа, разбор), настройки и ключ в хранилище паролей ОС, встречи папками на диске. - Интерфейс: экраны «Встречи», «Встреча» (расшифровка, конспект, задачи), «Настройки»; токены, шрифты и кнопки как на skillok.org. - Промпт разбора prompts/analysis.md и проверочные расшифровки. - 30 тестов ядра; клиент OpenRouter проверяется против локальной заглушки. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> d93e31a 30 сентября 2026 г.
ui.css
/* Компоненты — по образцу ui.html skillok.org: контурная кнопка, ряд вкладок
   с подчёркиванием, поля и строки списка. Квадратные углы везде. */

*, *::before, *::after { box-sizing: border-box; font-variant-ligatures: no-contextual; }

html, body { margin: 0; }
body {
  background: var(--background);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.25; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
p { margin: 0; }

code, .mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── Кнопка: одна, контурная (как «Войти» в шапке skillok.org) ── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  max-width: 100%;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 20px;
  color: var(--kv-ink);
  background: transparent;
  border: 2px solid var(--kv-ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: normal;
  text-wrap: balance;
  flex-shrink: 0;
}
.ui-btn:hover { background: var(--kv-ink); color: var(--background); }
.ui-btn:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.ui-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ui-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ui-btn[disabled]:hover { background: transparent; color: var(--kv-ink); }
.ui-btn-sm { min-height: 28px; padding: 0 10px; font-size: var(--text-xs); }

/* ── Ряд вкладок ── */
.ui-underline-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.ui-underline-nav > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--text-md);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.ui-underline-nav > a:hover { background: var(--color-bg-hover); }
.ui-underline-nav > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-accent); }
.ui-nav-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  line-height: 20px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}
.ui-underline-nav > a[aria-current="page"] .ui-nav-count { color: var(--color-text-primary); }

/* ── Поля ── */
.field { display: grid; gap: 6px; }
.field > label, .field-label { font-size: var(--text-sm); font-weight: 700; }
.field-hint { font-size: var(--text-xs); color: var(--color-text-secondary); }
.input, .textarea {
  width: 100%;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: 0;
}
.input:focus, .textarea:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: transparent; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.textarea.mono { font-size: var(--text-sm); }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-md); cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--color-accent); }

/* ── Рамка-блок и список ── */
.box { border: 1px solid var(--color-border); background: var(--color-bg-elevated); }
.box-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary);
}
.box-body { padding: 16px; display: grid; gap: 16px; }
.row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 16px; border-top: 1px solid var(--color-border);
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--color-bg-hover); }

.muted { color: var(--color-text-secondary); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.error { color: var(--color-error); font-size: var(--text-sm); }
.ok { color: var(--color-accent-text); font-size: var(--text-sm); }
.label {
  display: inline-block; padding: 0 6px; line-height: 20px;
  font-size: var(--text-xs); border: 1px solid var(--color-border-light); color: var(--color-text-secondary);
}
.label-accent { border-color: var(--color-accent); color: var(--color-accent-text); }