mirror of https://github.com/cheeaun/phanpy
95 lines
2.0 KiB
CSS
95 lines
2.0 KiB
CSS
.nav-menu section:last-child {
|
|
background-color: var(--bg-faded-color);
|
|
margin-bottom: -8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
@media (min-width: 23em) {
|
|
.nav-menu {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-areas:
|
|
'top top'
|
|
'left right';
|
|
padding: 0;
|
|
width: 22em;
|
|
max-width: calc(100vw - 16px);
|
|
}
|
|
.nav-menu .top-menu {
|
|
grid-area: top;
|
|
padding-top: 8px;
|
|
margin-bottom: -8px;
|
|
}
|
|
.nav-menu section {
|
|
padding: 8px 0;
|
|
/* width: 50%; */
|
|
}
|
|
@keyframes phanpying {
|
|
0% {
|
|
background-position: 0 0, 0 0, 3em 85%;
|
|
}
|
|
100% {
|
|
background-position: 0 0, 0 0, 2em 90%;
|
|
}
|
|
}
|
|
.nav-menu section:last-child {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
var(--divider-color) 1px,
|
|
transparent 1px
|
|
),
|
|
linear-gradient(to bottom left, var(--bg-blur-color), transparent),
|
|
url(../assets/phanpy-bg.svg);
|
|
background-repeat: no-repeat;
|
|
/* background-size: auto, auto, 200%; */
|
|
background-position: 0 0, 0 0, 2em 90%;
|
|
background-blend-mode: normal, normal, overlay;
|
|
box-shadow: inset 0 0 1px var(--bg-color);
|
|
position: sticky;
|
|
top: 0;
|
|
animation: phanpying 0.2s ease-in-out both;
|
|
border-top-right-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.divider-grow {
|
|
flex-grow: 1;
|
|
height: auto;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
.nav-menu section:last-child > .szh-menu__divider:first-child {
|
|
display: none;
|
|
}
|
|
.nav-menu .szh-menu__item span {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 40em) {
|
|
.nav-menu {
|
|
width: 28em;
|
|
}
|
|
}
|
|
|
|
@keyframes sparkle-icon {
|
|
0% {
|
|
transform: scale(1);
|
|
color: var(--red-color);
|
|
}
|
|
100% {
|
|
transform: scale(1.2);
|
|
color: var(--orange-color);
|
|
}
|
|
}
|
|
.sparkle-icon {
|
|
animation: sparkle-icon 0.3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.nav-submenu {
|
|
max-width: 14em;
|
|
}
|