devs/PCv5
devs
/
PCv5
7
10
Fork 4
Code Issues 25 Pull Requests Releases Wiki Activity

Menu latéral élargit

This commit is contained in:
Darks 2019-11-29 22:11:55 +01:00
parent 9ef8ae26d0
commit f7e9715572
Signed by: Darks
GPG Key ID: F61F10FA138E797C
2 changed files with 13 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/static/css/container.css
View File

@ -1,5 +1,5 @@
.container {
margin-left: 60px;
margin-left: 140px;
}
section {

55
app/static/css/navbar.css
View File

@ -14,7 +14,7 @@ nav a:focus {
#light-menu {
position: fixed; z-index: 10;
list-style: none;
width: 60px;
width: 140px;
height: 100%; overflow-y: auto;
margin: 0; padding: 0;
text-indent: 0;
@ -32,9 +32,8 @@ nav a:focus {
transition: .15s ease;
}
#logo img {
width: 100%;
margin: 0; padding: 0;
margin-bottom: -4.5px;
width: 40%;
margin: 0 0 -4.5px 7px; padding: 0;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
transition: filter .15s ease;
}
@ -49,73 +48,43 @@ nav a:focus {
#light-menu li {
width: 100%; height: 45px;
text-align: center;
color: #ffffff;
}
#light-menu li > a {
display: flex; flex-direction: column; flex-grow: 1;
align-items: center; justify-content: center;
display: flex; flex-direction: row; flex-grow: 0;
align-items: center; justify-content: flex-start;
width: 100%; height: 100%;
transition: opacity .15s ease; /* because Chrome sucks */
}
#light-menu li > a > svg {
display: block; width: 35%; flex-shrink: 0;
margin: 0 auto 5px auto;
display: block; width: 25px; flex-shrink: 0; flex-grow: 0;
margin: 0 7px;
}
#light-menu li div {
display: none;
flex-grow: 1;
}
#light-menu li > a::after {
content: attr(label);
position: fixed; display: none;
padding: 4px 8px; left: 63px;
font-family: NotoSans; border-radius: 3px;
background: rgba(0, 0, 0, 0.9);
}
#light-menu li:not(.opened) > a:hover::after,
#light-menu li:not(.opened) > a:focus::after {
display: block;
}
/*nav li span[notifications]:not([notifications="0"])::before {
content: attr(notifications);
display: inline-block; margin-right: 6px;
vertical-align: middle;
padding: 0 5px 0 4px; border-radius: 5px;
font-family: NotoSans;
background: #ffffff; color: #000000;
}*/
/* Overlay */
#menu {
position: fixed; z-index: 5;
left: -240px; width: 300px; /* left-to-right animation */
/*left: 60px; width: 0;*/ /* scroll animation */
left: -160px; width: 300px; /* default: left-to-right animation */
height: 100%; overflow-x: hidden; overflow-y: auto;
background: #1c2124; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition: .15s ease;
}
#menu.opened {
left: 60px; /* left-to-right animation */
/*width: 300px;*/ /* scroll animation */
left: 140px;
}
/* Just apply class="scroll-animation" to menu to change to scroll animation */
#menu.scroll-animation {
left: 60px; width: 0;
left: 140px; width: 0;
}
#menu.scroll-animation.opened {
width: 300px;
}
#menu.left-to-right-animation {
left: -240px; width: 300px;
}
#menu.left-to-right-animation.opened {
left: 60px;
}
#menu > div {