105 lines
1.8 KiB
Plaintext

const sidebar-spacing-y = 0.7rem
#sidebar
vertical
position fixed
left 0
top 0
z-index 10
width 70vw
max-width 300px
height 100%
background sidebar-opaque-background
transform translateX(-100%)
overflow-x hidden
overflow-y auto
opacity 0
pointer-events none
box-shadow 24px 0 24px rgba(0, 0, 0, 0.2)
transition opacity transition-speed ease, transform transition-speed ease
will-change opacity, transition
.user-image-container
horizontal
position relative
justify-content center
margin 0.8rem 0
flex-shrink 0
> 800px
#sidebar
opacity 1
width 180px
transform none
position static
pointer-events auto
box-shadow none
border-right ui-border
background sidebar-background
> 1400px
#sidebar
width 200px
.sidebar-visible
transform translateX(0) !important
pointer-events auto !important
opacity 1 !important
.sidebar-link
color text-color
&.active
.sidebar-button
color tab-active-color
background tab-active-background
text-shadow tab-active-text-shadow
background tab-active-background
.sidebar-button
horizontal
align-items center
padding sidebar-spacing-y 1rem
// background ui-background
.icon
font-size 1rem
margin-right 0.75rem
.badge
horizontal
justify-content center
align-items center
position absolute
top 50%
background reverse-light-color
border-radius 50%
transform translateY(-50%)
padding 0.5rem
color text-color
width 30px
height 30px
:hover
color text-color
background reverse-light-hover-color
:active
transform translateY(-50%) translateY(3px)
.left-badge
left 12%
.right-badge
right 12%
.badge-important
background badge-important-bg-color
color badge-important-text-color
font-weight bold
:hover
background badge-important-hover-bg-color
color badge-important-text-color
text-shadow none