Stupid-Cat
/
c.stupid.cat
mirror of https://git.gay/doughmination/c.stupid.cat.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix css

This commit is contained in:
Clove 2026-06-15 02:42:22 +01:00
parent bcc915d379
commit 201831345f
1 changed files with 377 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

478
css/main.css
View File

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