You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.7 KiB
87 lines
1.7 KiB
.sidebar-shadow { |
|
opacity: 0; |
|
background-color: black; |
|
pointer-events: none; |
|
transition: opacity 150ms ease-out; |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
height: 100%; |
|
width: 100%; |
|
z-index: 20; |
|
} |
|
.sidebar-on .sidebar-shadow { |
|
opacity: .3; |
|
pointer-events: initial; |
|
} |
|
|
|
.sidebar { |
|
user-select: text; |
|
position: fixed; |
|
top: 0; |
|
height: 100%; |
|
background-color: rgba(255,255,255,.7); |
|
overflow-y: auto; |
|
padding-top: 2em; |
|
padding-bottom: 1em; |
|
} |
|
|
|
.sidebar, .sidebar-title { |
|
left: 100%; |
|
transition: left 150ms ease-out; |
|
z-index: 21; |
|
width: calc(100% - 700px); |
|
} |
|
.sidebar-on .sidebar, .sidebar-on .sidebar-title { |
|
left: 700px; |
|
} |
|
|
|
.sidebar-title { |
|
text-shadow: 0 0 3px white; |
|
font-weight: bold; |
|
position: fixed; |
|
width: 100%; |
|
top: 0; |
|
line-height: 3em; |
|
padding-left: .5em; |
|
padding-bottom: .5em; |
|
margin-bottom: -.5em; |
|
background-image: linear-gradient(top,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%); |
|
pointer-events: none; |
|
} |
|
.sidebar-title a { |
|
pointer-events: initial; |
|
} |
|
|
|
.sidebar, .sidebar-title { |
|
padding-left: 1em; |
|
padding-right: 1em; |
|
} |
|
|
|
@media screen and (max-width: 1300px) { |
|
.sidebar, .sidebar-title { |
|
width: 550px; |
|
} |
|
.sidebar, .sidebar-title { |
|
padding-left: .5em; |
|
padding-right: .5em; |
|
} |
|
.sidebar-on .sidebar, .sidebar-on .sidebar-title { |
|
left: calc(100% - 550px); |
|
} |
|
} |
|
@media screen and (max-width: 570px) { |
|
.sidebar, .sidebar-title { |
|
width: calc(100% - 20px); |
|
} |
|
.sidebar-on .sidebar, .sidebar-on .sidebar-title { |
|
left: 20px; |
|
} |
|
} |
|
|
|
.sidebar-flow-item { |
|
display: block; |
|
} |
|
.sidebar-flow-item .box { |
|
width: 100%; |
|
} |