203 lines
3.5 KiB
Sass
203 lines
3.5 KiB
Sass
:host
|
|
display: block
|
|
|
|
.scrim
|
|
position: fixed
|
|
inset: 0
|
|
background: oklch(25% 0.02 240 / 0.35)
|
|
opacity: 0
|
|
pointer-events: none
|
|
transition: opacity 0.18s ease
|
|
z-index: 40
|
|
|
|
&.show
|
|
opacity: 1
|
|
pointer-events: auto
|
|
|
|
.slideover
|
|
position: fixed
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
width: 340px
|
|
max-width: 100vw
|
|
background: var(--surface)
|
|
border-left: 1px solid var(--border)
|
|
box-shadow: -12px 0 40px oklch(30% 0.02 240 / 0.15)
|
|
transform: translateX(100%)
|
|
transition: transform 0.22s ease
|
|
z-index: 50
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
&.show
|
|
transform: translateX(0)
|
|
|
|
.so-head
|
|
display: flex
|
|
align-items: center
|
|
padding: 16px 18px
|
|
border-bottom: 1px solid var(--border)
|
|
flex: none
|
|
|
|
.so-title
|
|
font-size: 15px
|
|
font-weight: 600
|
|
letter-spacing: -0.01em
|
|
color: var(--fg)
|
|
|
|
.so-body
|
|
padding: 18px
|
|
overflow-y: auto
|
|
flex: 1
|
|
|
|
.so-group
|
|
margin-bottom: 24px
|
|
|
|
.so-label
|
|
font-size: 11px
|
|
font-weight: 600
|
|
letter-spacing: 0.06em
|
|
color: var(--muted)
|
|
margin-bottom: 10px
|
|
|
|
.so-hint
|
|
font-size: 12px
|
|
color: var(--muted)
|
|
margin-bottom: 10px
|
|
|
|
.so-row
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
gap: 12px
|
|
padding: 9px 0
|
|
font-size: 13.5px
|
|
color: var(--fg)
|
|
|
|
.sub
|
|
font-size: 11.5px
|
|
color: var(--muted)
|
|
margin-top: 2px
|
|
|
|
&.flat
|
|
padding: 6px 0
|
|
font-size: 12.5px
|
|
|
|
.num
|
|
font-size: 12px
|
|
color: var(--fg)
|
|
|
|
.switch
|
|
width: 36px
|
|
height: 21px
|
|
border-radius: 20px
|
|
border: none
|
|
background: oklch(85% 0.01 240)
|
|
position: relative
|
|
transition: background 0.15s ease
|
|
flex: none
|
|
|
|
&::after
|
|
content: ""
|
|
position: absolute
|
|
top: 2.5px
|
|
left: 3px
|
|
width: 16px
|
|
height: 16px
|
|
border-radius: 50%
|
|
background: var(--surface)
|
|
box-shadow: 0 1px 3px oklch(20% 0.02 240 / 0.3)
|
|
transition: transform 0.15s ease
|
|
|
|
&.on
|
|
background: var(--accent)
|
|
|
|
&::after
|
|
transform: translateX(14px)
|
|
|
|
.so-input
|
|
width: 72px
|
|
height: 30px
|
|
border: 1px solid var(--border)
|
|
border-radius: 6px
|
|
padding: 0 8px
|
|
font-size: 13px
|
|
font-family: var(--font-mono)
|
|
color: var(--fg)
|
|
text-align: right
|
|
background: var(--surface)
|
|
|
|
&.text
|
|
width: 140px
|
|
text-align: left
|
|
font-family: var(--font-body)
|
|
|
|
&.wide
|
|
width: 100%
|
|
text-align: left
|
|
font-family: var(--font-body)
|
|
margin-bottom: 8px
|
|
|
|
.so-textarea
|
|
width: 100%
|
|
border: 1px solid var(--border)
|
|
border-radius: 6px
|
|
padding: 8px 10px
|
|
font-size: 12px
|
|
font-family: var(--font-mono)
|
|
color: var(--fg)
|
|
background: var(--surface)
|
|
resize: vertical
|
|
margin-bottom: 8px
|
|
|
|
.so-btn
|
|
width: 100%
|
|
padding: 8px 12px
|
|
border: 1px solid var(--border)
|
|
background: var(--surface)
|
|
border-radius: 6px
|
|
font-size: 13px
|
|
color: var(--fg)
|
|
text-align: left
|
|
display: flex
|
|
align-items: center
|
|
gap: 8px
|
|
margin-bottom: 6px
|
|
transition: background 0.12s ease
|
|
|
|
&:hover:not(:disabled)
|
|
background: var(--bg)
|
|
|
|
&:disabled
|
|
opacity: 0.5
|
|
cursor: default
|
|
|
|
svg
|
|
color: var(--muted)
|
|
flex: none
|
|
|
|
&.primary
|
|
background: var(--accent-tint)
|
|
border-color: oklch(85% 0.05 145)
|
|
color: var(--accent-strong)
|
|
font-weight: 550
|
|
|
|
&:hover:not(:disabled)
|
|
background: var(--accent-tint)
|
|
|
|
.icon-btn
|
|
width: 32px
|
|
height: 32px
|
|
display: grid
|
|
place-items: center
|
|
border: 1px solid transparent
|
|
background: none
|
|
border-radius: 6px
|
|
color: var(--muted)
|
|
transition: background 0.12s ease, color 0.12s ease
|
|
|
|
&.neutral:hover
|
|
background: var(--bg)
|
|
color: var(--fg)
|