Applied new _components layout structure to Kavita. All except manga as there is an open PR that drastically changes that module. (#1666)

This commit is contained in:
Joe Milazzo 2022-11-22 07:41:30 -06:00 committed by GitHub
parent e2470cba88
commit ab9021cb32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
198 changed files with 263 additions and 270 deletions

View file

@ -1,80 +0,0 @@
.side-nav {
padding-bottom: 10px;
width: 190px;
background-color: var(--side-nav-bg-color);
height: calc((var(--vh)*100) - 85px);
position: fixed;
margin: 0;
left: 10px;
top: 73px;
border-radius: var(--side-nav-border-radius);
transition: width var(--side-nav-openclose-transition), background-color var(--side-nav-bg-color-transition), border-color var(--side-nav-border-transition);
overflow: auto;
border: var(--side-nav-border);
&.hidden {
display: none;
opacity: 0;
}
&.closed {
width: 50px;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--side-nav-closed-bg-color);
border: var(--side-nav-border-closed);
}
.side-nav-item:first {
border-top-left-radius: var(--side-nav-border-radius);
border-top-right-radius: var(--side-nav-border-radius);
}
}
@media (max-width: 576px) {
.side-nav {
padding: 10px 0;
width: 55vw;
background-color: var(--side-nav-mobile-bg-color);
height: calc((var(--vh)*100) - 56px);
position: fixed;
margin: 0;
left: 0;
top: 56px;
transition: width var(--side-nav-openclose-transition);
z-index: 999;
overflow: auto;
border: var(--side-nav-mobile-border);
&.closed {
width: 0;
overflow: hidden;
box-shadow: none;
}
.side-nav-item:first {
border-top-left-radius: var(--side-nav-border-radius);
border-top-right-radius: var(--side-nav-border-radius);
}
}
.side-nav-overlay {
background-color: var(--side-nav-overlay-color);
width: 100vw;
height: calc((var(--vh)*100) - 56px);
position: absolute;
left: 0;
z-index: 998;
&.closed {
display: none;
}
}
}
.btn-close {
margin-top: -28px;
font-size: 0.8rem;
position: absolute;
right: 16px;
}