feat: new styles
This commit is contained in:
faynot
440
main.glts
440
main.glts
@@ -1,29 +1,18 @@
|
||||
// =============================================================================
|
||||
// Glint Design System — Master Stylesheet (main.glts)
|
||||
// Glint Design System — Core Fixed 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) ───────────────────────────────────────────────
|
||||
$bg-app = #11111b
|
||||
$bg-panel = #1e1e2e
|
||||
$bg-surface = #313244
|
||||
$bg-input = #181825
|
||||
$accent = #b4befe
|
||||
$text-main = #cdd6f4
|
||||
$text-muted = #9399b2
|
||||
$border-glow = #45475a
|
||||
|
||||
@mixin text-body {
|
||||
color: $text-main
|
||||
font-size: 15px
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
@mixin standard-card {
|
||||
@@ -33,47 +22,94 @@ $pad-window = 28px
|
||||
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
|
||||
background: transparent
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
gap: 12px
|
||||
direction: vertical
|
||||
}
|
||||
|
||||
.ui-card {
|
||||
@use standard-card
|
||||
padding: 14px
|
||||
gap: 12px
|
||||
align-items: center
|
||||
content-align: center
|
||||
}
|
||||
|
||||
// Крупные заголовки секций
|
||||
Header {
|
||||
color: $accent
|
||||
font-size: 22px
|
||||
padding: 4px
|
||||
// ── Служебные Layout-классы ──────────────────────────────────────────────────
|
||||
|
||||
.layout-viewport {
|
||||
width: fill
|
||||
padding: 16px
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
direction: horizontal
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-col {
|
||||
direction: vertical
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-clean {
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Стили атомарных компонентов ──────────────────────────────────────────────
|
||||
|
||||
Header {
|
||||
color: $accent
|
||||
font-size: 20px
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
// Обычный текст
|
||||
Text {
|
||||
@use text-body
|
||||
}
|
||||
|
||||
// Подписи, второстепенные метаданные
|
||||
Label {
|
||||
color: $text-muted
|
||||
font-size: 13px
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// Интерактивные элементы управления
|
||||
Button {
|
||||
Input {
|
||||
background-color: $bg-input
|
||||
color: $text-main
|
||||
font-size: 14px
|
||||
padding: 10px
|
||||
border-radius: 8px
|
||||
border-width: 1px
|
||||
border-color: $border-glow
|
||||
width: 240px
|
||||
}
|
||||
|
||||
Toggle {
|
||||
color: $text-main
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
Divider {
|
||||
background: $border-glow
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
Button {
|
||||
border-radius: 6px
|
||||
border-width: 1px
|
||||
padding: 8px
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
background: #000000
|
||||
}
|
||||
|
||||
Image {
|
||||
@@ -81,26 +117,316 @@ Image {
|
||||
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
|
||||
// ── Секция тестирования продвинутой геометрии Box-Model ──────────────────────
|
||||
|
||||
.geometry-box {
|
||||
@use standard-card
|
||||
background: #24253a
|
||||
border-color: #f38ba8
|
||||
border-width: 2px
|
||||
padding-top: 24px
|
||||
padding-bottom: 12px
|
||||
padding-left: 16px
|
||||
padding-right: 40px
|
||||
width: 320px
|
||||
}
|
||||
|
||||
// Переключатели
|
||||
Toggle {
|
||||
color: $text-main
|
||||
font-size: 15px
|
||||
.margin-test-item {
|
||||
background: #a6e3a1
|
||||
padding: 8px
|
||||
margin-top: 12px
|
||||
margin-bottom: 4px
|
||||
}
|
||||
|
||||
// Разделительные линии (Divider / Separator)
|
||||
Divider {
|
||||
background: $border-glow
|
||||
border-width: 1px
|
||||
// ── Секция тестирования каскадного наследования (Inheritance) ────────────────
|
||||
|
||||
.inheritance-box {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
color: #f9e2af
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.override-style {
|
||||
color: #f38ba8
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// ── Секция распределения весов Flex-Grow (Fill portions) ────────────────────
|
||||
|
||||
.flex-row-bar {
|
||||
background: $bg-surface
|
||||
direction: horizontal
|
||||
padding: 8px
|
||||
gap: 8px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.fill-10 {
|
||||
background: #f38ba8
|
||||
width: 10%
|
||||
}
|
||||
|
||||
.fixed-120 {
|
||||
background: #f9e2af
|
||||
width: 50px
|
||||
color: #11111b
|
||||
}
|
||||
|
||||
.fill-20 {
|
||||
background: #a6e3a1
|
||||
width: 20%
|
||||
color: #11111b
|
||||
}
|
||||
|
||||
// ── СТИЛИ ДЛЯ ПРОВЕРКИ POSITION: FIXED ───────────────────────────────────────
|
||||
|
||||
.fixed-toast {
|
||||
position: fixed
|
||||
top: 20px
|
||||
right: 20px
|
||||
background: #a6e3a1
|
||||
border-radius: 8px
|
||||
padding: 12px
|
||||
border-width: 1px
|
||||
border-color: #a6e3a1
|
||||
color: #000
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background: transparen
|
||||
border-width: 0px
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.scroll-test-box {
|
||||
@use standard-card
|
||||
background: #313244
|
||||
height: 150px
|
||||
width: 250px
|
||||
overflow-y: scroll
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
|
||||
// ── Стили для тестирования Sticky Эффекта ────────────────────
|
||||
|
||||
.sticky-container {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
gap: 8px
|
||||
width: fill
|
||||
height: 200px
|
||||
overflow-y: scroll
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky
|
||||
top: 0px
|
||||
background: #fab387
|
||||
padding: 10px 14px
|
||||
border-radius: 6px
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 14px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.scroll-spacer {
|
||||
gap: 100px
|
||||
padding: 10px
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Opacity ────────────────────────────
|
||||
|
||||
.opacity-fade {
|
||||
background: #f38ba8
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
.opacity-mid {
|
||||
background: #a6e3a1
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.opacity-subtle {
|
||||
background: #89b4fa
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.85
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Font-Weight ─────────────────────────
|
||||
|
||||
.fw-light {
|
||||
font-weight: 300
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-normal {
|
||||
font-weight: 400
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: 700
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-black {
|
||||
font-weight: 900
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Text-Align ──────────────────────────
|
||||
|
||||
.ta-box {
|
||||
background: #313244
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.ta-left {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.ta-center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ta-right {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Line-Height ─────────────────────────
|
||||
|
||||
.lh-box {
|
||||
background: #313244
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.lh-tight {
|
||||
line-height: 0.8
|
||||
}
|
||||
|
||||
.lh-normal {
|
||||
line-height: 1.2
|
||||
}
|
||||
|
||||
.lh-loose {
|
||||
line-height: 2.0
|
||||
}
|
||||
|
||||
// ── Стили для тестирования селекторов через запятую ────────────
|
||||
|
||||
.warning-text, .error-text {
|
||||
font-weight: bold
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #f9e2af
|
||||
background: #3d3520
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #f38ba8
|
||||
background: #3d2020
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Display: None ───────────────────────
|
||||
|
||||
.hidden-box {
|
||||
background: #f38ba8
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
display: none
|
||||
}
|
||||
|
||||
.test-section-header {
|
||||
color: $accent
|
||||
font-size: 16px
|
||||
padding: 4px 0
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
.test-row {
|
||||
direction: horizontal
|
||||
gap: 12px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
// ── Стили для тестирования POSITION: ABSOLUTE ────────────────
|
||||
|
||||
.abs-demo-container {
|
||||
position: relative
|
||||
background: #313244
|
||||
padding: 16px
|
||||
margin-top: 8px
|
||||
border-radius: 8px
|
||||
width: fill
|
||||
gap: 8px
|
||||
min-height: 60px
|
||||
}
|
||||
|
||||
.abs-demo-badge {
|
||||
position: absolute
|
||||
top: 10px
|
||||
right: 4px
|
||||
background: #f38ba8
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 10px
|
||||
padding: 4px 8px
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
// ── Полноценная демка absolute-позиционирования ──────────────
|
||||
|
||||
.absolute-demo-section {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
gap: 8px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.abs-stage {
|
||||
position: relative
|
||||
background: #24253a
|
||||
border-color: $accent
|
||||
border-width: 1px
|
||||
border-radius: 8px
|
||||
padding: 16px
|
||||
gap: 6px
|
||||
width: fill
|
||||
min-height: 80px
|
||||
}
|
||||
|
||||
.abs-overlay {
|
||||
position: absolute
|
||||
top: 10px
|
||||
right: 10px
|
||||
background: #f38ba8
|
||||
border-radius: 6px
|
||||
padding: 8px 12px
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 12px
|
||||
gap: 4px
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user