examples: add demo stylesheet with comprehensive style features
This commit is contained in:
Glint Dev
459
examples/demo/styles.glts
Normal file
459
examples/demo/styles.glts
Normal file
@@ -0,0 +1,459 @@
|
||||
// ============================================================================
|
||||
// Glint System Monitor — Stylesheet
|
||||
// ============================================================================
|
||||
|
||||
// ── Design Tokens ────────────────────────────────────────────────────────────
|
||||
$bg = #0f0f1a
|
||||
$surface = #1a1a2e
|
||||
$card = #222244
|
||||
$accent = #7c6ff0
|
||||
$green = #4ade80
|
||||
$red = #f87171
|
||||
$yellow = #fbbf24
|
||||
$text = #e2e8f0
|
||||
$muted = #94a3b8
|
||||
$border = #2d2d50
|
||||
|
||||
// ── Mixins ───────────────────────────────────────────────────────────────────
|
||||
@mixin card-base {
|
||||
background: $card
|
||||
border-color: $border
|
||||
border-width: 1px
|
||||
border-radius: 10px
|
||||
padding: 16px
|
||||
gap: 12px
|
||||
}
|
||||
|
||||
@mixin text-body {
|
||||
color: $text
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
// ── Globals ──────────────────────────────────────────────────────────────────
|
||||
Window {
|
||||
background: $bg
|
||||
}
|
||||
|
||||
Panel {
|
||||
background: transparent
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
gap: 12px
|
||||
direction: vertical
|
||||
}
|
||||
|
||||
// ── Header ───────────────────────────────────────────────────────────────────
|
||||
.header {
|
||||
position: sticky
|
||||
top: 0px
|
||||
background: $surface
|
||||
padding: 8px 20px
|
||||
border-bottom: 1px solid $border
|
||||
width: fill
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
direction: horizontal
|
||||
align-items: center
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
// ── Layout ───────────────────────────────────────────────────────────────────
|
||||
.body {
|
||||
direction: horizontal
|
||||
padding: 16px
|
||||
gap: 16px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.col-left {
|
||||
direction: vertical
|
||||
gap: 14px
|
||||
width: 45%
|
||||
}
|
||||
|
||||
.col-right {
|
||||
direction: vertical
|
||||
gap: 14px
|
||||
width: 55%
|
||||
}
|
||||
|
||||
// ── Card ─────────────────────────────────────────────────────────────────────
|
||||
.card {
|
||||
@use card-base
|
||||
}
|
||||
|
||||
// ── Header Component ─────────────────────────────────────────────────────────
|
||||
Header {
|
||||
color: $accent
|
||||
font-size: 18px
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
Text {
|
||||
@use text-body
|
||||
}
|
||||
|
||||
Label {
|
||||
color: $muted
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// ── Input ────────────────────────────────────────────────────────────────────
|
||||
Input {
|
||||
background-color: #16162e
|
||||
color: $text
|
||||
font-size: 14px
|
||||
padding: 10px
|
||||
border-radius: 8px
|
||||
border-width: 1px
|
||||
border-color: $border
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Toggle ───────────────────────────────────────────────────────────────────
|
||||
Toggle {
|
||||
color: $text
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
// ── Button ───────────────────────────────────────────────────────────────────
|
||||
Button {
|
||||
border-radius: 8px
|
||||
border-width: 1px
|
||||
border-color: $accent
|
||||
padding: 8px 16px
|
||||
background: $surface
|
||||
color: $text
|
||||
}
|
||||
|
||||
Button:hover {
|
||||
background: #2d2d50
|
||||
border-color: #a78bfa
|
||||
}
|
||||
|
||||
Button:active {
|
||||
background: $accent
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent
|
||||
border-color: $muted
|
||||
color: $muted
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
border-color: $text
|
||||
color: $text
|
||||
}
|
||||
|
||||
// ── ProgressBar ──────────────────────────────────────────────────────────────
|
||||
ProgressBar {
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Slider ───────────────────────────────────────────────────────────────────
|
||||
Slider {
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Gauge Component ──────────────────────────────────────────────────────────
|
||||
.gauge {
|
||||
direction: vertical
|
||||
gap: 6px
|
||||
}
|
||||
|
||||
.gauge-row {
|
||||
direction: horizontal
|
||||
gap: 8px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
font-size: 12px
|
||||
color: $muted
|
||||
}
|
||||
|
||||
// ── Tile Component ───────────────────────────────────────────────────────────
|
||||
.tile {
|
||||
@use card-base
|
||||
padding: 10px
|
||||
gap: 6px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.tile-row {
|
||||
direction: horizontal
|
||||
gap: 6px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.tag-on {
|
||||
color: $green
|
||||
font-size: 12px
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.tag-off {
|
||||
color: $muted
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// ── Status ───────────────────────────────────────────────────────────────────
|
||||
.ok {
|
||||
color: $green
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.err {
|
||||
color: $red
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
// ── Button Row ───────────────────────────────────────────────────────────────
|
||||
.btn-row {
|
||||
direction: horizontal
|
||||
gap: 8px
|
||||
}
|
||||
|
||||
// ── Demo Rows ────────────────────────────────────────────────────────────────
|
||||
.demo-row {
|
||||
direction: horizontal
|
||||
gap: 12px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.demo-col {
|
||||
direction: vertical
|
||||
gap: 6px
|
||||
}
|
||||
|
||||
// ── Font Weight ──────────────────────────────────────────────────────────────
|
||||
.fw-300 { font-weight: 300 }
|
||||
.fw-400 { font-weight: 400 }
|
||||
.fw-700 { font-weight: 700 }
|
||||
.fw-900 { font-weight: 900 }
|
||||
|
||||
// ── Text Align ───────────────────────────────────────────────────────────────
|
||||
.ta-box {
|
||||
background: #16162e
|
||||
padding: 6px 10px
|
||||
border-radius: 6px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.ta-l { text-align: left }
|
||||
.ta-c { text-align: center }
|
||||
.ta-r { text-align: right }
|
||||
|
||||
// ── Line Height ──────────────────────────────────────────────────────────────
|
||||
.lh-box {
|
||||
direction: vertical
|
||||
gap: 4px
|
||||
background: #16162e
|
||||
padding: 10px
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.lh-08 { line-height: 0.8 }
|
||||
.lh-12 { line-height: 1.2 }
|
||||
.lh-20 { line-height: 2.0 }
|
||||
|
||||
// ── Box Model ────────────────────────────────────────────────────────────────
|
||||
.box-pad {
|
||||
background: #16162e
|
||||
padding-top: 24px
|
||||
padding-bottom: 8px
|
||||
padding-left: 12px
|
||||
padding-right: 12px
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.box-margin {
|
||||
background: #16162e
|
||||
margin-top: 16px
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.box-combo {
|
||||
background: #16162e
|
||||
padding: 12px
|
||||
border-width: 2px
|
||||
border-color: $accent
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
// ── Absolute Positioning ─────────────────────────────────────────────────────
|
||||
.abs-stage {
|
||||
position: relative
|
||||
background: #16162e
|
||||
padding: 16px
|
||||
border-radius: 8px
|
||||
width: fill
|
||||
min-height: 50px
|
||||
gap: 6px
|
||||
}
|
||||
|
||||
.abs-badge {
|
||||
position: absolute
|
||||
top: -8px
|
||||
right: 8px
|
||||
}
|
||||
|
||||
.badge-inner {
|
||||
background: $red
|
||||
padding: 3px 8px
|
||||
border-radius: 4px
|
||||
color: #fff
|
||||
font-weight: bold
|
||||
font-size: 10px
|
||||
}
|
||||
|
||||
// ── Opacity ──────────────────────────────────────────────────────────────────
|
||||
.op-row {
|
||||
direction: horizontal
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.op-30 {
|
||||
background: $accent
|
||||
padding: 8px 12px
|
||||
border-radius: 6px
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
.op-60 {
|
||||
background: $accent
|
||||
padding: 8px 12px
|
||||
border-radius: 6px
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.op-85 {
|
||||
background: $accent
|
||||
padding: 8px 12px
|
||||
border-radius: 6px
|
||||
opacity: 0.85
|
||||
}
|
||||
|
||||
.op-100 {
|
||||
background: $accent
|
||||
padding: 8px 12px
|
||||
border-radius: 6px
|
||||
opacity: 1.0
|
||||
}
|
||||
|
||||
// ── Log / Scroll ─────────────────────────────────────────────────────────────
|
||||
.log {
|
||||
@use card-base
|
||||
background: #16162e
|
||||
height: 180px
|
||||
overflow-y: scroll
|
||||
padding: 8px
|
||||
gap: 4px
|
||||
}
|
||||
|
||||
.log-header {
|
||||
position: sticky
|
||||
top: 0px
|
||||
background: $surface
|
||||
padding: 6px 10px
|
||||
border-radius: 4px
|
||||
font-weight: bold
|
||||
font-size: 12px
|
||||
color: $accent
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Style Inheritance ────────────────────────────────────────────────────────
|
||||
.inherit {
|
||||
background: #16162e
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
color: $yellow
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.override {
|
||||
color: $red
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// ── Display: None ────────────────────────────────────────────────────────────
|
||||
.vis {
|
||||
background: #1e1e3a
|
||||
padding: 8px 14px
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.hid {
|
||||
background: $red
|
||||
padding: 8px 14px
|
||||
border-radius: 6px
|
||||
display: none
|
||||
}
|
||||
|
||||
// ── Flex Grow ────────────────────────────────────────────────────────────────
|
||||
.grow-bar {
|
||||
direction: horizontal
|
||||
gap: 6px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.grow-1 {
|
||||
background: $accent
|
||||
padding: 8px
|
||||
border-radius: 4px
|
||||
text-align: center
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.grow-2 {
|
||||
background: $green
|
||||
padding: 8px
|
||||
border-radius: 4px
|
||||
text-align: center
|
||||
color: #000
|
||||
flex-grow: 2
|
||||
}
|
||||
|
||||
// ── Toast ────────────────────────────────────────────────────────────────────
|
||||
.toast {
|
||||
position: fixed
|
||||
top: 16px
|
||||
right: 16px
|
||||
background: $green
|
||||
padding: 10px 16px
|
||||
border-radius: 8px
|
||||
color: #000
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.toast-row {
|
||||
direction: horizontal
|
||||
gap: 10px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.toast-x {
|
||||
background: transparent
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
color: #000
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
// ── Comma-separated selectors ────────────────────────────────────────────────
|
||||
.warn-text, .info-text {
|
||||
font-weight: bold
|
||||
padding: 6px 10px
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
// ── Hover pseudo on cards ────────────────────────────────────────────────────
|
||||
.card:hover {
|
||||
border-color: $accent
|
||||
border-width: 1px
|
||||
}
|
||||
Reference in New Issue
Block a user