chore: regenerate Panda CSS styles and update settings
- Regenerate CSS files reflecting component scaling changes - Add transform scale utilities for abacus components - Update Claude settings to allow memory quiz navigation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
parent
fea7826bd8
commit
b2c53065cb
|
|
@ -100,7 +100,8 @@
|
|||
"Read(//Users/antialias/**)",
|
||||
"Bash(turbo run:*)",
|
||||
"Bash(npx turbo run:*)",
|
||||
"Bash(open http://localhost:3003/guide)"
|
||||
"Bash(open http://localhost:3003/guide)",
|
||||
"Bash(open http://localhost:3000/games/memory-quiz)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
|
|
|||
|
|
@ -1,5 +1,25 @@
|
|||
@layer utilities {
|
||||
|
||||
.\[\&_svg\]\:w_100\% svg {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:h_100\% svg {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:max-w_100\% svg {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:max-h_100\% svg {
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.max-w_600px {
|
||||
max-width: 600px
|
||||
}
|
||||
|
|
@ -139,21 +159,10 @@
|
|||
.transition_transform_0\.3s_ease {
|
||||
transition: transform 0.3s ease
|
||||
}
|
||||
.\[\&_svg\]\:w_100\% svg {
|
||||
width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:h_100\% svg {
|
||||
height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:max-w_100\% svg {
|
||||
max-width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:max-h_100\% svg {
|
||||
max-height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.transform_scale\(1\.5\) {
|
||||
transform: scale(1.5)
|
||||
}
|
||||
|
||||
.p_16px {
|
||||
padding: 16px
|
||||
|
|
@ -260,6 +269,14 @@
|
|||
width: 100%
|
||||
}
|
||||
|
||||
.transform_scale\(2\.2\) {
|
||||
transform: scale(2.2)
|
||||
}
|
||||
|
||||
.origin_center {
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.bg_red\.500 {
|
||||
background: var(--colors-red-500)
|
||||
}
|
||||
|
|
@ -814,6 +831,14 @@
|
|||
height: 500pt
|
||||
}
|
||||
|
||||
.w_240pt {
|
||||
width: 240pt
|
||||
}
|
||||
|
||||
.h_320pt {
|
||||
height: 320pt
|
||||
}
|
||||
|
||||
.w_120pt {
|
||||
width: 120pt
|
||||
}
|
||||
|
|
@ -855,6 +880,18 @@
|
|||
}
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.\[\@media_\(max-width\:_768px\)\]\:gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.\[\@media_\(max-width\:_480px\)\]\:gap_8px {
|
||||
gap: 8px
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.\[\@media_\(max-width\:_768px\)\]\:h_130px {
|
||||
height: 130px
|
||||
}
|
||||
|
|
@ -887,6 +924,18 @@
|
|||
min-width: 90px
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.\[\@media_\(max-width\:_768px\)\]\:fs_40px {
|
||||
font-size: 40px
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.\[\@media_\(max-width\:_480px\)\]\:fs_32px {
|
||||
font-size: 32px
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.md\:px_4 {
|
||||
|
|
@ -909,9 +958,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.\[\@media_\(max-width\:_768px\)\]\:gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
.\[\@media_\(max-width\:_768px\)\]\:h_130px {
|
||||
height: 130px
|
||||
}
|
||||
|
|
@ -919,9 +965,6 @@
|
|||
.\[\@media_\(max-width\:_768px\)\]\:min-w_100px {
|
||||
min-width: 100px
|
||||
}
|
||||
.\[\@media_\(max-width\:_768px\)\]\:fs_40px {
|
||||
font-size: 40px
|
||||
}
|
||||
|
||||
.\[\@media_\(max-width\:_768px\)\]\:gap_10px {
|
||||
gap: 10px
|
||||
|
|
@ -941,9 +984,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.\[\@media_\(max-width\:_480px\)\]\:gap_8px {
|
||||
gap: 8px
|
||||
}
|
||||
.\[\@media_\(max-width\:_480px\)\]\:h_120px {
|
||||
height: 120px
|
||||
}
|
||||
|
|
@ -951,9 +991,6 @@
|
|||
.\[\@media_\(max-width\:_480px\)\]\:min-w_90px {
|
||||
min-width: 90px
|
||||
}
|
||||
.\[\@media_\(max-width\:_480px\)\]\:fs_32px {
|
||||
font-size: 32px
|
||||
}
|
||||
|
||||
.\[\@media_\(max-width\:_480px\)\]\:gap_8px {
|
||||
gap: 8px
|
||||
|
|
|
|||
|
|
@ -1,91 +1,41 @@
|
|||
@layer utilities {
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.min-w_120px {
|
||||
min-width: 120px
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.min-w_140px {
|
||||
min-width: 140px
|
||||
}
|
||||
|
||||
.w_80px {
|
||||
width: 80px
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.text_transparent {
|
||||
color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.fs_1\.5rem {
|
||||
font-size: 1.5rem
|
||||
}
|
||||
|
||||
.fs_1\.875rem {
|
||||
font-size: 1.875rem
|
||||
}
|
||||
|
||||
.top_0 {
|
||||
top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.left_0 {
|
||||
left: var(--spacing-0)
|
||||
}
|
||||
|
||||
.border_none {
|
||||
border: var(--borders-none)
|
||||
}
|
||||
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.text_\#2563eb {
|
||||
color: #2563eb
|
||||
}
|
||||
|
||||
.appearance_textfield {
|
||||
appearance: textfield;
|
||||
-webkit-appearance: textfield
|
||||
}
|
||||
|
||||
.font_inherit {
|
||||
font-family: inherit
|
||||
}
|
||||
|
||||
.\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none
|
||||
.\[\&_svg\]\:w_100\% svg {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-inner-spin-button {
|
||||
margin: var(--spacing-0)
|
||||
.\[\&_svg\]\:h_100\% svg {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:max-w_100\% svg {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:max-h_100\% svg {
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.w_240 {
|
||||
width: 240px
|
||||
}
|
||||
|
||||
.w_300 {
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.h_320 {
|
||||
height: 320px
|
||||
}
|
||||
|
||||
.h_400 {
|
||||
height: 400px
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
|
@ -94,14 +44,6 @@
|
|||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.w_240px {
|
||||
width: 240px
|
||||
}
|
||||
|
||||
.w_300px {
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.h_320px {
|
||||
height: 320px
|
||||
}
|
||||
|
|
@ -150,6 +92,18 @@
|
|||
height: 100%
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.transform_scale\(2\.2\) {
|
||||
transform: scale(2.2)
|
||||
}
|
||||
|
||||
.origin_center {
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.transition_all_0\.3s_ease {
|
||||
transition: all 0.3s ease
|
||||
}
|
||||
|
|
@ -160,12 +114,28 @@
|
|||
transition: all 0.2s ease
|
||||
}
|
||||
|
||||
.bottom_-50px {
|
||||
bottom: -50px
|
||||
.bottom_-45px {
|
||||
bottom: -45px
|
||||
}
|
||||
|
||||
.bottom_-60px {
|
||||
bottom: -60px
|
||||
.bottom_-55px {
|
||||
bottom: -55px
|
||||
}
|
||||
|
||||
.w_240px {
|
||||
width: 240px
|
||||
}
|
||||
|
||||
.w_300px {
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
|
|
@ -188,22 +158,10 @@
|
|||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15)
|
||||
}
|
||||
|
||||
.min-w_160px {
|
||||
min-width: 160px
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.ring_none {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
|
@ -236,36 +194,12 @@
|
|||
background: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.animation_pulse_1s_infinite {
|
||||
animation: pulse 1s infinite
|
||||
}
|
||||
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.text_blue\.600 {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.w_6 {
|
||||
width: var(--sizes-6)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.shrink_0 {
|
||||
flex-shrink: 0
|
||||
.animation_pulse_1s_infinite {
|
||||
animation: pulse 1s infinite
|
||||
}
|
||||
|
||||
.flex-wrap_nowrap {
|
||||
|
|
@ -448,30 +382,6 @@
|
|||
height: 240pt
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:text_blue\.600:focus {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:bg_blue\.50:focus {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:rounded_md:focus {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:ring_none:focus {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:border_none:focus {
|
||||
border: var(--borders-none)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.100:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.hover\:shadow_0_12px_32px_rgba\(0\,_0\,_0\,_0\.15\):is(:hover, [data-hover]) {
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -137,6 +137,10 @@
|
|||
transition: transform 0.3s ease
|
||||
}
|
||||
|
||||
.transform_scale\(1\.5\) {
|
||||
transform: scale(1.5)
|
||||
}
|
||||
|
||||
.max-h_60vh {
|
||||
max-height: 60vh
|
||||
}
|
||||
|
|
@ -415,6 +419,10 @@
|
|||
min-height: var(--sizes-0)
|
||||
}
|
||||
|
||||
.left_0 {
|
||||
left: var(--spacing-0)
|
||||
}
|
||||
|
||||
.w_100vw {
|
||||
width: 100vw
|
||||
}
|
||||
|
|
@ -563,6 +571,10 @@
|
|||
height: 100vh
|
||||
}
|
||||
|
||||
.shrink_0 {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.d_inline-flex {
|
||||
display: inline-flex
|
||||
}
|
||||
|
|
@ -583,6 +595,14 @@
|
|||
height: 500pt
|
||||
}
|
||||
|
||||
.w_240pt {
|
||||
width: 240pt
|
||||
}
|
||||
|
||||
.h_320pt {
|
||||
height: 320pt
|
||||
}
|
||||
|
||||
.from_blue\.50 {
|
||||
--gradient-from: var(--colors-blue-50)
|
||||
}
|
||||
|
|
@ -723,10 +743,6 @@
|
|||
max-width: 120px
|
||||
}
|
||||
|
||||
.transform_scale\(2\.2\) {
|
||||
transform: scale(2.2)
|
||||
}
|
||||
|
||||
.fs_2xs {
|
||||
font-size: var(--font-sizes-2xs)
|
||||
}
|
||||
|
|
@ -1037,6 +1053,10 @@
|
|||
position: sticky
|
||||
}
|
||||
|
||||
.top_0 {
|
||||
top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.z_30 {
|
||||
z-index: 30
|
||||
}
|
||||
|
|
@ -1153,6 +1173,10 @@
|
|||
opacity: 1
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.bg_green\.600 {
|
||||
background: var(--colors-green-600)
|
||||
}
|
||||
|
|
@ -1177,6 +1201,10 @@
|
|||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
|
@ -1322,80 +1350,22 @@
|
|||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.min-w_120px {
|
||||
min-width: 120px
|
||||
}
|
||||
|
||||
.min-w_140px {
|
||||
min-width: 140px
|
||||
}
|
||||
|
||||
.w_80px {
|
||||
width: 80px
|
||||
}
|
||||
|
||||
.text_transparent {
|
||||
color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.fs_1\.5rem {
|
||||
font-size: 1.5rem
|
||||
}
|
||||
|
||||
.fs_1\.875rem {
|
||||
font-size: 1.875rem
|
||||
}
|
||||
|
||||
.top_0 {
|
||||
top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.left_0 {
|
||||
left: var(--spacing-0)
|
||||
}
|
||||
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.text_\#2563eb {
|
||||
color: #2563eb
|
||||
}
|
||||
|
||||
.appearance_textfield {
|
||||
appearance: textfield;
|
||||
-webkit-appearance: textfield
|
||||
}
|
||||
|
||||
.font_inherit {
|
||||
font-family: inherit
|
||||
}
|
||||
|
||||
.\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:appearance_none::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
.\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-outer-spin-button, .\[\&\:\:-webkit-outer-spin-button\,_\&\:\:-webkit-inner-spin-button\]\:m_0::-webkit-inner-spin-button {
|
||||
margin: var(--spacing-0)
|
||||
}
|
||||
|
||||
.w_240px {
|
||||
.w_240 {
|
||||
width: 240px
|
||||
}
|
||||
|
||||
.w_300px {
|
||||
.w_300 {
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.h_320 {
|
||||
height: 320px
|
||||
}
|
||||
|
||||
.h_400 {
|
||||
height: 400px
|
||||
}
|
||||
|
||||
.h_320px {
|
||||
height: 320px
|
||||
}
|
||||
|
|
@ -1444,6 +1414,10 @@
|
|||
height: 100%
|
||||
}
|
||||
|
||||
.transform_scale\(2\.2\) {
|
||||
transform: scale(2.2)
|
||||
}
|
||||
|
||||
.transition_all_0\.3s_ease {
|
||||
transition: all 0.3s ease
|
||||
}
|
||||
|
|
@ -1456,26 +1430,34 @@
|
|||
transition: all 0.2s ease
|
||||
}
|
||||
|
||||
.bottom_-50px {
|
||||
bottom: -50px
|
||||
.bottom_-45px {
|
||||
bottom: -45px
|
||||
}
|
||||
|
||||
.bottom_-60px {
|
||||
bottom: -60px
|
||||
.bottom_-55px {
|
||||
bottom: -55px
|
||||
}
|
||||
|
||||
.shadow_0_4px_12px_rgba\(59\,_130\,_246\,_0\.15\) {
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15)
|
||||
.w_240px {
|
||||
width: 240px
|
||||
}
|
||||
|
||||
.min-w_160px {
|
||||
min-width: 160px
|
||||
.w_300px {
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.shadow_0_4px_12px_rgba\(59\,_130\,_246\,_0\.15\) {
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15)
|
||||
}
|
||||
|
||||
.ring_none {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
|
@ -1508,10 +1490,6 @@
|
|||
animation: pulse 1s infinite
|
||||
}
|
||||
|
||||
.shrink_0 {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.flex-wrap_nowrap {
|
||||
flex-wrap: nowrap
|
||||
}
|
||||
|
|
@ -2138,26 +2116,6 @@
|
|||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:text_blue\.600:focus {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:bg_blue\.50:focus {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:rounded_md:focus {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:ring_none:focus {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.\[\&\:focus\]\:border_none:focus {
|
||||
border: var(--borders-none)
|
||||
}
|
||||
|
||||
.hover\:bg_red\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
|
@ -2258,10 +2216,6 @@
|
|||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.100:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.hover\:shadow_0_12px_32px_rgba\(0\,_0\,_0\,_0\.15\):is(:hover, [data-hover]) {
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue