150 lines
2.6 KiB
Sass
150 lines
2.6 KiB
Sass
:host
|
|
display: block
|
|
height: 100vh
|
|
|
|
.app
|
|
display: grid
|
|
grid-template-columns: var(--sidebar-w) 1fr
|
|
height: 100vh
|
|
overflow: hidden
|
|
|
|
.main
|
|
display: flex
|
|
flex-direction: column
|
|
overflow: hidden
|
|
position: relative
|
|
min-width: 0
|
|
|
|
.content
|
|
flex: 1
|
|
min-height: 0
|
|
overflow: hidden
|
|
padding: 18px 22px 20px
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 22px
|
|
|
|
// Activity drawer
|
|
.scrim
|
|
position: fixed
|
|
inset: 0
|
|
background: oklch(25% 0.02 240 / 0.35)
|
|
z-index: 40
|
|
|
|
.activity
|
|
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)
|
|
|
|
.activity-head
|
|
display: flex
|
|
align-items: center
|
|
padding: 16px 18px
|
|
border-bottom: 1px solid var(--border)
|
|
flex: none
|
|
|
|
.activity-title
|
|
font-size: 15px
|
|
font-weight: 600
|
|
color: var(--fg)
|
|
|
|
.icon-btn
|
|
margin-left: auto
|
|
|
|
.activity-body
|
|
flex: 1
|
|
overflow-y: auto
|
|
padding: 14px 18px
|
|
|
|
.activity-empty
|
|
text-align: center
|
|
color: var(--muted)
|
|
font-size: 13px
|
|
padding: 40px 0
|
|
|
|
.activity-item
|
|
padding: 10px 0
|
|
border-bottom: 1px solid var(--border)
|
|
|
|
.activity-msg
|
|
font-size: 13px
|
|
color: var(--fg)
|
|
margin-bottom: 3px
|
|
|
|
.activity-url
|
|
font-size: 11.5px
|
|
color: var(--muted)
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
font-family: var(--font-mono)
|
|
|
|
.activity-time
|
|
font-size: 11px
|
|
color: var(--muted)
|
|
margin-top: 4px
|
|
|
|
.activity-clear
|
|
margin-top: 14px
|
|
width: 100%
|
|
justify-content: center
|
|
|
|
.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)
|
|
|
|
.ghost-btn
|
|
display: inline-flex
|
|
align-items: center
|
|
gap: 7px
|
|
padding: 7px 10px
|
|
border: 1px solid var(--border)
|
|
background: var(--surface)
|
|
border-radius: 6px
|
|
font-size: 12.5px
|
|
color: var(--fg)
|
|
transition: background 0.12s ease, border-color 0.12s ease
|
|
|
|
&:hover
|
|
background: var(--bg)
|
|
border-color: oklch(82% 0.01 240)
|
|
|
|
.batch-status
|
|
font-size: 0.9rem
|
|
color: var(--muted)
|
|
|
|
.modal.fade.show
|
|
background-color: rgba(0, 0, 0, 0.5)
|
|
|
|
@media (max-width: 900px)
|
|
.app
|
|
grid-template-columns: 1fr
|
|
|
|
.content
|
|
padding: 14px 14px 16px
|