fix css
This commit is contained in:
parent
bcc915d379
commit
201831345f
478
css/main.css
478
css/main.css
|
|
@ -1752,11 +1752,11 @@ summary.section-title::after {
|
|||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
details.waka-section[open] > summary.section-title {
|
||||
details.waka-section[open]>summary.section-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
details.waka-section[open] > summary.section-title::after {
|
||||
details.waka-section[open]>summary.section-title::after {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
|
|
@ -2310,6 +2310,7 @@ body:has(.music-wrap) {
|
|||
min-height: 100dvh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
body:has(.music-wrap) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
|
@ -2321,7 +2322,10 @@ body:has(.music-wrap) {
|
|||
font-family: 'Comic Code', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
.music-head { margin: 0 0 1.6rem; }
|
||||
.music-head {
|
||||
margin: 0 0 1.6rem;
|
||||
}
|
||||
|
||||
.music-head h1 {
|
||||
font-size: clamp(1.7rem, 5vw, 2.4rem);
|
||||
margin: 0 0 0.2rem;
|
||||
|
|
@ -2329,7 +2333,12 @@ body:has(.music-wrap) {
|
|||
letter-spacing: -0.02em;
|
||||
transition: color 0.5s ease;
|
||||
}
|
||||
.music-head p { margin: 0; color: var(--subtext-0); font-size: 0.95rem; }
|
||||
|
||||
.music-head p {
|
||||
margin: 0;
|
||||
color: var(--subtext-0);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ---- now playing hero -------------------------------------------------- */
|
||||
.mnp {
|
||||
|
|
@ -2344,101 +2353,213 @@ body:has(.music-wrap) {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* a soft wash of the album accent behind the hero */
|
||||
.mnp::before {
|
||||
content: "";
|
||||
position: absolute; inset: 0;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(120% 140% at 0% 0%,
|
||||
rgba(var(--accent-rgb), 0.18), transparent 60%);
|
||||
opacity: 0; transition: opacity 0.6s ease;
|
||||
rgba(var(--accent-rgb), 0.18), transparent 60%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
#music.is-live .mnp::before { opacity: 1; }
|
||||
|
||||
#music.is-live .mnp::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mnp-art {
|
||||
width: 132px; height: 132px;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
background: var(--surface-0);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.mnp-art:not(.has-art) { display: grid; }
|
||||
|
||||
.mnp-art:not(.has-art) {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.mnp-art:not(.has-art)::after {
|
||||
content: "♪"; color: var(--overlay-0); font-size: 2.4rem;
|
||||
display: grid; place-items: center; height: 100%;
|
||||
content: "♪";
|
||||
color: var(--overlay-0);
|
||||
font-size: 2.4rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.mnp-meta { min-width: 0; position: relative; }
|
||||
|
||||
.mnp-meta {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mnp-state {
|
||||
display: inline-flex; align-items: center; gap: 0.4rem;
|
||||
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--subtext-0); margin-bottom: 0.35rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--subtext-0);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
#music.is-live .mnp-state { color: rgb(var(--accent-rgb)); }
|
||||
|
||||
#music.is-live .mnp-state {
|
||||
color: rgb(var(--accent-rgb));
|
||||
}
|
||||
|
||||
#music.is-live .mnp-state::before {
|
||||
content: ""; width: 7px; height: 7px; border-radius: 50%;
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: rgb(var(--accent-rgb));
|
||||
box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
|
||||
animation: np-pulse 2s infinite;
|
||||
}
|
||||
@keyframes np-pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
|
||||
}
|
||||
.mnp-title {
|
||||
display: block; font-size: 1.3rem; font-weight: 700; color: var(--text);
|
||||
margin: 0 0 0.15rem; line-height: 1.2;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.mnp-title:hover { color: rgb(var(--accent-rgb)); }
|
||||
.mnp-artist { display: block; color: var(--subtext-1); font-size: 0.95rem; }
|
||||
.mnp-album { display: block; color: var(--subtext-0); font-size: 0.82rem; margin-top: 0.1rem; }
|
||||
|
||||
.mnp-progress { margin-top: 0.8rem; display: flex; align-items: center; gap: 0.6rem; }
|
||||
@keyframes np-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
|
||||
}
|
||||
}
|
||||
|
||||
.mnp-title {
|
||||
display: block;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin: 0 0 0.15rem;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mnp-title:hover {
|
||||
color: rgb(var(--accent-rgb));
|
||||
}
|
||||
|
||||
.mnp-artist {
|
||||
display: block;
|
||||
color: var(--subtext-1);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.mnp-album {
|
||||
display: block;
|
||||
color: var(--subtext-0);
|
||||
font-size: 0.82rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.mnp-progress {
|
||||
margin-top: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.mnp-bar {
|
||||
flex: 1; height: 6px; border-radius: 999px;
|
||||
background: var(--surface-0); overflow: hidden;
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mnp-fill {
|
||||
height: 100%; width: 0%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: rgb(var(--accent-rgb));
|
||||
border-radius: 999px; transition: width 0.4s linear;
|
||||
border-radius: 999px;
|
||||
transition: width 0.4s linear;
|
||||
}
|
||||
|
||||
.mnp-time {
|
||||
font-size: 0.72rem;
|
||||
color: var(--subtext-0);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.mnp-time { font-size: 0.72rem; color: var(--subtext-0); font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ---- lyrics (the centrepiece) ------------------------------------------ */
|
||||
.sec-title {
|
||||
font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
|
||||
color: var(--subtext-0); margin: 2.4rem 0 0.7rem; font-weight: 500;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--subtext-0);
|
||||
margin: 2.4rem 0 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sec-row {
|
||||
display: flex; align-items: baseline; justify-content: space-between;
|
||||
gap: 0.8rem; margin: 2.4rem 0 0.7rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
margin: 2.4rem 0 0.7rem;
|
||||
}
|
||||
.sec-row .sec-title { margin: 0; }
|
||||
|
||||
.sec-row .sec-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ly-lock {
|
||||
font-family: inherit; font-size: 0.72rem; letter-spacing: 0.04em;
|
||||
cursor: pointer; border-radius: 999px;
|
||||
font-family: inherit;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
border-radius: 999px;
|
||||
padding: 0.28rem 0.8rem 0.28rem 0.7rem;
|
||||
background: var(--surface-0); color: var(--subtext-1);
|
||||
background: var(--surface-0);
|
||||
color: var(--subtext-1);
|
||||
border: 1px solid transparent;
|
||||
display: inline-flex; align-items: center; gap: 0.4rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.ly-lock::before {
|
||||
content: ""; width: 7px; height: 7px; border-radius: 50%;
|
||||
background: currentColor; opacity: 0.6;
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ly-lock.is-locked {
|
||||
color: rgb(var(--accent-rgb));
|
||||
border-color: rgba(var(--accent-rgb), 0.4);
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
}
|
||||
.ly-lock.is-locked::before { opacity: 1; }
|
||||
.ly-lock:not(.is-locked):hover { color: var(--text); border-color: var(--surface-1); }
|
||||
|
||||
.ly-lock.is-locked::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ly-lock:not(.is-locked):hover {
|
||||
color: var(--text);
|
||||
border-color: var(--surface-1);
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
position: relative; /* anchor offsetTop for the follow scroll */
|
||||
position: relative;
|
||||
/* anchor offsetTop for the follow scroll */
|
||||
height: 340px;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
|
@ -2453,94 +2574,248 @@ body:has(.music-wrap) {
|
|||
-webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
|
||||
mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
|
||||
}
|
||||
.lyrics::-webkit-scrollbar { width: 8px; }
|
||||
.lyrics::-webkit-scrollbar-thumb { background: var(--surface-1); border-radius: 999px; }
|
||||
|
||||
.lyrics::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.lyrics::-webkit-scrollbar-thumb {
|
||||
background: var(--surface-1);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.ly-line {
|
||||
margin: 0; padding: 0.32rem 0;
|
||||
font-size: 1.18rem; line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0.32rem 0;
|
||||
font-size: 1.18rem;
|
||||
line-height: 1.4;
|
||||
color: var(--overlay-0);
|
||||
transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
.is-synced .ly-line { opacity: 0.55; }
|
||||
|
||||
.is-synced .ly-line {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.is-synced .ly-line.is-active {
|
||||
color: rgb(var(--accent-rgb));
|
||||
opacity: 1;
|
||||
font-weight: 700;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.ly-static { color: var(--subtext-1); opacity: 1; font-size: 1.05rem; }
|
||||
|
||||
.ly-static {
|
||||
color: var(--subtext-1);
|
||||
opacity: 1;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.ly-note {
|
||||
color: var(--subtext-0); font-size: 0.95rem; text-align: center;
|
||||
margin: 0; padding-top: 1rem;
|
||||
color: var(--subtext-0);
|
||||
font-size: 0.95rem;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.lyrics.is-instrumental, .lyrics.is-empty, .lyrics.is-loading {
|
||||
display: grid; place-content: center; height: 180px;
|
||||
-webkit-mask-image: none; mask-image: none;
|
||||
|
||||
.lyrics.is-instrumental,
|
||||
.lyrics.is-empty,
|
||||
.lyrics.is-loading {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
height: 180px;
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
.lyrics.is-instrumental .ly-note {
|
||||
color: rgb(var(--accent-rgb));
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.lyrics.is-instrumental .ly-note { color: rgb(var(--accent-rgb)); font-size: 1.2rem; }
|
||||
|
||||
/* ---- recently played --------------------------------------------------- */
|
||||
.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
|
||||
.recent {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.rc-item a {
|
||||
display: grid; grid-template-columns: 44px 1fr auto; gap: 0.7rem;
|
||||
align-items: center; text-decoration: none;
|
||||
padding: 0.45rem 0.55rem; border-radius: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 44px 1fr auto;
|
||||
gap: 0.7rem;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: 12px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.rc-item a:hover { background: var(--surface-0); }
|
||||
|
||||
.rc-item a:hover {
|
||||
background: var(--surface-0);
|
||||
}
|
||||
|
||||
.rc-art {
|
||||
width: 44px; height: 44px; border-radius: 8px;
|
||||
object-fit: cover; background: var(--surface-0);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
background: var(--surface-0);
|
||||
}
|
||||
.rc-art-blank { display: grid; place-items: center; color: var(--overlay-0); font-size: 1.1rem; }
|
||||
.rc-text { min-width: 0; }
|
||||
|
||||
.rc-art-blank {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--overlay-0);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rc-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rc-name {
|
||||
display: block; color: var(--text); font-size: 0.92rem;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 0.92rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rc-artist {
|
||||
display: block; color: var(--subtext-0); font-size: 0.78rem;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
display: block;
|
||||
color: var(--subtext-0);
|
||||
font-size: 0.78rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.rc-when, .rc-now { font-size: 0.72rem; white-space: nowrap; }
|
||||
.rc-when { color: var(--subtext-0); }
|
||||
.rc-now { color: rgb(var(--accent-rgb)); font-weight: 700; }
|
||||
.is-now { background: rgba(var(--accent-rgb), 0.08); border-radius: 12px; }
|
||||
.rc-note { color: var(--subtext-0); font-size: 0.86rem; padding: 0.6rem 0.4rem; line-height: 1.5; }
|
||||
|
||||
.rc-when,
|
||||
.rc-now {
|
||||
font-size: 0.72rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rc-when {
|
||||
color: var(--subtext-0);
|
||||
}
|
||||
|
||||
.rc-now {
|
||||
color: rgb(var(--accent-rgb));
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.is-now {
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.rc-note {
|
||||
color: var(--subtext-0);
|
||||
font-size: 0.86rem;
|
||||
padding: 0.6rem 0.4rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.rc-note code {
|
||||
background: var(--surface-0); color: var(--text);
|
||||
padding: 0.1rem 0.35rem; border-radius: 6px; font-size: 0.9em;
|
||||
background: var(--surface-0);
|
||||
color: var(--text);
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* ---- top artists ------------------------------------------------------- */
|
||||
.top-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.top-chips {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.top-chip a {
|
||||
display: inline-flex; align-items: baseline; gap: 0.45rem;
|
||||
background: var(--mantle); border: 1px solid var(--surface-0);
|
||||
border-radius: 999px; padding: 0.35rem 0.8rem; text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.45rem;
|
||||
background: var(--mantle);
|
||||
border: 1px solid var(--surface-0);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.8rem;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
.top-chip a:hover { border-color: rgb(var(--accent-rgb)); }
|
||||
.top-rank { color: rgb(var(--accent-rgb)); font-weight: 700; font-size: 0.78rem; }
|
||||
.top-name { color: var(--text); font-size: 0.85rem; }
|
||||
.top-plays { color: var(--subtext-0); font-size: 0.72rem; }
|
||||
|
||||
.music-back { display: inline-block; margin-top: 2.6rem; font-size: 0.85rem; color: rgb(var(--accent-rgb)); }
|
||||
.top-chip a:hover {
|
||||
border-color: rgb(var(--accent-rgb));
|
||||
}
|
||||
|
||||
.top-rank {
|
||||
color: rgb(var(--accent-rgb));
|
||||
font-weight: 700;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.top-name {
|
||||
color: var(--text);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.top-plays {
|
||||
color: var(--subtext-0);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.music-back {
|
||||
display: inline-block;
|
||||
margin-top: 2.6rem;
|
||||
font-size: 0.85rem;
|
||||
color: rgb(var(--accent-rgb));
|
||||
}
|
||||
|
||||
/* ---- responsive -------------------------------------------------------- */
|
||||
@media (max-width: 560px) {
|
||||
.mnp { grid-template-columns: 96px 1fr; gap: 0.85rem; padding: 0.9rem; }
|
||||
.mnp-art { width: 96px; height: 96px; }
|
||||
.mnp-title { font-size: 1.1rem; }
|
||||
.lyrics { height: 300px; }
|
||||
.ly-line { font-size: 1.05rem; }
|
||||
.mnp {
|
||||
grid-template-columns: 96px 1fr;
|
||||
gap: 0.85rem;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.mnp-art {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.mnp-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.ly-line {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mnp-fill { transition: none; }
|
||||
#music.is-live .mnp-state::before { animation: none; }
|
||||
.ly-line { transition: color 0.15s ease; }
|
||||
.mnp-fill {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#music.is-live .mnp-state::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.ly-line {
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
|
|
@ -2549,7 +2824,8 @@ body:has(.music-wrap) {
|
|||
============================================================ */
|
||||
#visitor-counter {
|
||||
position: fixed;
|
||||
top: 4rem; /* clears the ~48px beta-bar + gap */
|
||||
top: 4rem;
|
||||
/* clears the ~48px beta-bar + gap */
|
||||
right: 1rem;
|
||||
z-index: 6;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue