5c3231c170
- Add React Context for app-wide abacus styling (localStorage persistence) - Create AbacusDisplayDropdown with style controls in nav bar - Add AppNavBar component with adaptive behavior (minimal for games) - Remove duplicate navigation headers from guide and home pages - Delete client-side SorobanSVG component - use only server-side Python/Typst - Clean up generateSorobanSVG and generateMockSorobanSVG functions - All abacus displays now use consistent global configuration - Settings persist across page reloads and browser sessions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
190 lines
3.0 KiB
CSS
190 lines
3.0 KiB
CSS
@layer utilities {
|
|
|
|
.pos_fixed {
|
|
position: fixed
|
|
}
|
|
|
|
.top_4 {
|
|
top: var(--spacing-4)
|
|
}
|
|
|
|
.right_4 {
|
|
right: var(--spacing-4)
|
|
}
|
|
|
|
.z_40 {
|
|
z-index: 40
|
|
}
|
|
|
|
.opacity_0\.8 {
|
|
opacity: 0.8
|
|
}
|
|
|
|
.transition_opacity {
|
|
transition-property: var(--transition-prop, opacity);
|
|
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
|
transition-duration: var(--transition-duration, 150ms)
|
|
}
|
|
|
|
.bg_white {
|
|
background: var(--colors-white)
|
|
}
|
|
|
|
.shadow_sm {
|
|
box-shadow: var(--shadows-sm)
|
|
}
|
|
|
|
.border-b_1px_solid {
|
|
border-bottom: 1px solid
|
|
}
|
|
|
|
.border_gray\.200 {
|
|
border-color: var(--colors-gray-200)
|
|
}
|
|
|
|
.pos_sticky {
|
|
position: sticky
|
|
}
|
|
|
|
.top_0 {
|
|
top: var(--spacing-0)
|
|
}
|
|
|
|
.z_30 {
|
|
z-index: 30
|
|
}
|
|
|
|
.fs_xl {
|
|
font-size: var(--font-sizes-xl)
|
|
}
|
|
|
|
.font_bold {
|
|
font-weight: var(--font-weights-bold)
|
|
}
|
|
|
|
.text_brand\.800 {
|
|
color: var(--colors-brand-800)
|
|
}
|
|
|
|
.text_brand\.700 {
|
|
color: var(--colors-brand-700)
|
|
}
|
|
|
|
.text_gray\.600 {
|
|
color: var(--colors-gray-600)
|
|
}
|
|
|
|
.bg_brand\.50 {
|
|
background: var(--colors-brand-50)
|
|
}
|
|
|
|
.bg_transparent {
|
|
background: var(--colors-transparent)
|
|
}
|
|
|
|
.px_3 {
|
|
padding-inline: var(--spacing-3)
|
|
}
|
|
|
|
.py_2 {
|
|
padding-block: var(--spacing-2)
|
|
}
|
|
|
|
.fs_sm {
|
|
font-size: var(--font-sizes-sm)
|
|
}
|
|
|
|
.font_medium {
|
|
font-weight: var(--font-weights-medium)
|
|
}
|
|
|
|
.rounded_lg {
|
|
border-radius: var(--radii-lg)
|
|
}
|
|
|
|
.transition_all {
|
|
transition-property: var(--transition-prop, all);
|
|
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
|
transition-duration: var(--transition-duration, 150ms)
|
|
}
|
|
|
|
.text-decor_none {
|
|
text-decoration: none
|
|
}
|
|
|
|
.gap_2 {
|
|
gap: var(--spacing-2)
|
|
}
|
|
|
|
.justify_space-between {
|
|
justify-content: space-between
|
|
}
|
|
|
|
.gap_10px {
|
|
gap: 10px
|
|
}
|
|
|
|
.gap_6 {
|
|
gap: var(--spacing-6)
|
|
}
|
|
|
|
.d_flex {
|
|
display: flex
|
|
}
|
|
|
|
.items_center {
|
|
align-items: center
|
|
}
|
|
|
|
.gap_4 {
|
|
gap: var(--spacing-4)
|
|
}
|
|
|
|
.flex_row {
|
|
flex-direction: row
|
|
}
|
|
|
|
.pos_relative {
|
|
position: relative
|
|
}
|
|
|
|
.max-w_7xl {
|
|
max-width: var(--sizes-7xl)
|
|
}
|
|
|
|
.mx_auto {
|
|
margin-inline: auto
|
|
}
|
|
|
|
.px_4 {
|
|
padding-inline: var(--spacing-4)
|
|
}
|
|
|
|
.py_3 {
|
|
padding-block: var(--spacing-3)
|
|
}
|
|
|
|
.hover\:opacity_1:is(:hover, [data-hover]) {
|
|
opacity: 1
|
|
}
|
|
|
|
.hover\:text_brand\.900:is(:hover, [data-hover]) {
|
|
color: var(--colors-brand-900)
|
|
}
|
|
|
|
.hover\:text_brand\.800:is(:hover, [data-hover]) {
|
|
color: var(--colors-brand-800)
|
|
}
|
|
|
|
.hover\:text_gray\.900:is(:hover, [data-hover]) {
|
|
color: var(--colors-gray-900)
|
|
}
|
|
|
|
.hover\:bg_brand\.100:is(:hover, [data-hover]) {
|
|
background: var(--colors-brand-100)
|
|
}
|
|
|
|
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
|
background: var(--colors-gray-50)
|
|
}
|
|
} |