2025-11-12 01:39:45 -08:00

58 lines
1.8 KiB
Sass

// components/_ui.sass
@use '../abstracts' as *
@use '../base' as *
// Code blocks: Monospace lock-in with darker green tint
code
font-family: 'VT323', $mono-font // Prioritize Matrix font
font-size: 0.875rem // Smaller for inline; reset has base
background-color: color('bg-darker') // Deeper green-black
color: $text-light // Lighter green text
padding: space('xs') space('sm')
border-radius: 4px
border: 1px solid color('border-light')
box-shadow: 0 0 2px rgba($accent-light, 0.1) // Subtle glow
// Utility: Small text (if still needed; consider rem-based)
.small
font-size: 0.625rem // 10px equiv; use sparingly
// Error/notice divs: Centered alerts with theme colors
div.error, div.notice, div#debug
margin: space('xl') auto // Top/bottom spacing from map
width: 900px // Fixed width; add media query for mobile later
padding: space('lg') // Generous padding
border-radius: 6px
border: 1px solid
div.error
background-color: rgba(color('accent-error'), 0.1) // Subtle red tint
color: color('accent-error') // Darker red text
border-color: color('accent-error')
div.notice
background-color: rgba(color('accent-success'), 0.1) // Green tint
color: color('accent-success') // Heavier green text
border-color: color('accent-success')
div#debug
background-color: color('bg-darker') // Deeper bg for debug
color: $text-muted // Muted green
border-color: color('border-light')
margin-top: space('2xl')
margin-bottom: space('2xl')
// Tables: Simplified; reset handles collapse/padding
.pages-table
width: 100%
border: 1px solid color('border-light') // Green border
th, td
border: 1px solid color('border-light')
text-align: left
th
background-color: rgba($accent-light, 0.05) // Subtle accent bg
color: $text-lighter // Header green
font-weight: 600 // Semi-bold; no bold in monospace