Первоначальная версия VidConf

2026-07-23 01:04:01 +03:00
commit 896455381a
335 changed files with 61527 additions and 0 deletions
--- a/frontend/src/styles/select.css
+++ b/frontend/src/styles/select.css
@@ -0,0 +1,126 @@
+/*
+ * VidConf — кастомный селект (DESIGN_SYSTEM.md §4.16).
+ * Триггер повторяет геометрию инпута (§4.4), дроплист — паттерн `.menu`
+ * (design/mockups/lobby.html). Все правила на var()-токенах — тёмная тема
+ * переключается сама через каскад tokens.css, отдельных патчей не требуется
+ * (см. §4.16 «Обе темы»).
+ */
+
+.vc-select {
+  position: relative;
+}
+
+.vc-select-trigger {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  font: var(--text-body-lg);
+  color: var(--color-ink-900);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-family: var(--font-body);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.vc-select-trigger:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+}
+.vc-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-focus-ring);
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
+}
+.vc-select-trigger[aria-expanded='true'] {
+  border-color: var(--color-focus-ring);
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
+}
+.vc-select-trigger:disabled {
+  background: var(--color-bg-alt);
+  color: var(--color-ink-300);
+  cursor: not-allowed;
+}
+.vc-select-trigger.has-error {
+  border-width: 2px;
+  border-color: var(--color-danger);
+}
+
+.vc-select-value,
+.vc-select-placeholder {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vc-select-placeholder {
+  color: var(--color-ink-300);
+}
+.vc-select-error-icon {
+  color: var(--color-danger);
+  flex-shrink: 0;
+}
+.vc-select-chevron {
+  color: var(--color-ink-500);
+  flex-shrink: 0;
+  transition: transform var(--transition-fast);
+}
+.vc-select-chevron.is-open {
+  transform: rotate(180deg);
+}
+.vc-select-trigger:disabled .vc-select-chevron {
+  color: var(--color-ink-300);
+}
+
+.vc-select-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  width: 100%;
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--space-2);
+  list-style: none;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  z-index: 30;
+}
+
+.vc-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  font: var(--text-body-lg);
+  font-weight: 400;
+  color: var(--color-ink-900);
+  cursor: pointer;
+}
+.vc-select-option.is-active {
+  background: var(--color-bg-alt);
+  color: var(--color-ink-700);
+}
+.vc-select-option.is-selected {
+  font-weight: 600;
+}
+.vc-select-option.is-selected svg {
+  color: var(--color-ink-700);
+  flex-shrink: 0;
+}
+.vc-select-option.is-disabled {
+  color: var(--color-ink-300);
+  cursor: not-allowed;
+}
+.vc-select-option.is-disabled.is-active {
+  background: transparent;
+  color: var(--color-ink-300);
+}