phanpy/src/components/nav-menu.css

52 lines
1.2 KiB
CSS
Raw Normal View History

2023-05-20 11:46:58 +02:00
@media (min-width: 23em) {
.nav-menu {
display: flex;
padding: 0;
width: 22em;
2023-05-20 11:46:58 +02:00
}
.nav-menu section {
padding: 8px 0;
2023-05-21 05:52:24 +02:00
width: 50%;
2023-05-20 11:46:58 +02:00
}
2023-05-22 11:43:02 +02:00
@keyframes phanpying {
0% {
background-position: 0 0, 0 0, 3em 85%;
}
100% {
background-position: 0 0, 0 0, 2em 90%;
}
}
2023-05-20 13:35:58 +02:00
.nav-menu section:last-child {
background-color: var(--bg-faded-color);
background-image: linear-gradient(
to right,
var(--divider-color) 1px,
transparent 1px
),
2023-05-22 11:43:02 +02:00
linear-gradient(to bottom left, var(--bg-blur-color), transparent),
2023-05-21 07:24:26 +02:00
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;
2023-05-20 13:35:58 +02:00
box-shadow: inset 0 0 1px var(--bg-color);
2023-05-21 08:12:21 +02:00
position: sticky;
top: 0;
2023-05-22 11:43:02 +02:00
animation: phanpying 0.2s ease-in-out both;
2023-08-13 06:38:03 +02:00
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
2023-05-20 13:35:58 +02:00
}
2023-05-20 11:46:58 +02:00
.nav-menu section:last-child > .szh-menu__divider:first-child {
display: none;
}
2023-05-21 05:52:24 +02:00
.nav-menu .szh-menu__item span {
2023-05-20 11:46:58 +02:00
white-space: normal;
}
}
2023-05-23 04:58:33 +02:00
@media (min-width: 40em) {
.nav-menu {
width: 28em;
}
}