107 lines
3.2 KiB
Plaintext
107 lines
3.2 KiB
Plaintext
// =============================================================================
|
|
// Glint Design System — Master Stylesheet (main.glts)
|
|
// =============================================================================
|
|
|
|
// ── 1. Цветовая палитра и константы (Variables) ──────────────────────────────
|
|
$bg-app = #11111b // Глубокий темный фон для всего окна
|
|
$bg-panel = #1e1e2e // Базовый цвет для контейнеров и панелей
|
|
$bg-surface = #313244 // Цвет для карточек и выделенных блоков
|
|
$bg-field = #181825 // Внутренний фон для полей ввода (Input)
|
|
|
|
$text-main = #cdd6f4 // Мягкий белый основной текст
|
|
$text-muted = #9399b2 // Серый приглушенный текст для описаний
|
|
$accent = #b4befe // Лавандовый акцентный цвет для кнопок и заголовков
|
|
$border-glow = #45475a // Цвет аккуратных рамок и разделителей
|
|
|
|
// Сетка отступов (Размеры автоматически очищаются от "px" парсером Glint)
|
|
$pad-dense = 6px
|
|
$pad-normal = 12px
|
|
$pad-roomy = 20px
|
|
$pad-window = 28px
|
|
|
|
// ── 2. Шаблоны стилей (Mixins) ───────────────────────────────────────────────
|
|
|
|
@mixin text-body {
|
|
color: $text-main
|
|
font-size: 15px
|
|
}
|
|
|
|
@mixin standard-card {
|
|
background: $bg-panel
|
|
border-color: $border-glow
|
|
border-width: 1px
|
|
border-radius: 12px
|
|
}
|
|
|
|
// ── 3. Правила для UI-компонентов (Element Rules) ────────────────────────────
|
|
|
|
// Главное окно приложения
|
|
Window {
|
|
background: $bg-app
|
|
padding: $pad-window
|
|
spacing: $pad-roomy
|
|
}
|
|
|
|
// Универсальный контейнер ( viewport, карточки, обертки списков )
|
|
Panel {
|
|
@use standard-card
|
|
padding: $pad-normal
|
|
gap: 14px
|
|
direction: vertical
|
|
align-items: center
|
|
content-align: center
|
|
}
|
|
|
|
// Крупные заголовки секций
|
|
Header {
|
|
color: $accent
|
|
font-size: 22px
|
|
padding: 4px
|
|
}
|
|
|
|
// Обычный текст
|
|
Text {
|
|
@use text-body
|
|
}
|
|
|
|
// Подписи, второстепенные метаданные
|
|
Label {
|
|
color: $text-muted
|
|
font-size: 13px
|
|
}
|
|
|
|
// Интерактивные элементы управления
|
|
Button {
|
|
border-radius: 8px
|
|
border-width: 1px
|
|
}
|
|
|
|
Image {
|
|
border-radius: 8px
|
|
border-width: 1px
|
|
}
|
|
|
|
// Текстовые поля ввода
|
|
Input {
|
|
background-color: $bg-field
|
|
color: $text-main
|
|
font-size: 14px
|
|
padding: 12px
|
|
border-radius: 16px
|
|
border-width: 1px
|
|
border-color: $border-glow
|
|
width: 320px
|
|
}
|
|
|
|
// Переключатели
|
|
Toggle {
|
|
color: $text-main
|
|
font-size: 15px
|
|
}
|
|
|
|
// Разделительные линии (Divider / Separator)
|
|
Divider {
|
|
background: $border-glow
|
|
border-width: 1px
|
|
}
|