hoelee/hoelee-blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(styles): prevent info overflow with dedicated full-width line and enlarge desktop cover to 38%
Deploy / build (push) Successful in 24s
Details

Browse Source
This commit is contained in:
hoelee committed 2026-10-26 04:22:47 +08:00
1 parent af37f7ff1b
commit 6ad1288ec7
4 files changed
+292 -284
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/content/posts/zh/generating-subtitles-for-songs-without-timestamps.md
+13 -11
View File
@@ -152,23 +152,25 @@ a.dispatchEvent(new Event('timeupdate'));
下面每个播放器都会滚动歌词、把当前句保持在中间，旁边还有 **.srt 下载** —— 想烧字进视频或在 VLC 里打开都行。
<style>
.subs-track{margin:2.4rem 0;display:flex;gap:1.5rem;align-items:flex-start;padding:1.2rem;border-radius:12px;background:var(--card,#1e2025);border:1px solid var(--border,#3a3f47);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.subs-cover{flex:0 0 33.333%;width:33.333%;max-width:280px;min-width:200px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border,#3a3f47);background:#000}
.subs-track{margin:2.4rem 0;display:flex;gap:1.6rem;align-items:flex-start;padding:1.25rem;border-radius:12px;background:var(--card,#1e2025);border:1px solid var(--border,#3a3f47);box-shadow:0 4px 16px rgba(0,0,0,.1);box-sizing:border-box;width:100%;max-width:100%;overflow:hidden}
.subs-cover{flex:0 0 38%;width:38%;max-width:325px;min-width:220px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border,#3a3f47);background:#000;box-sizing:border-box}
.subs-cover img{width:100%;height:100%;object-fit:cover;display:block}
.subs-content{flex:1 1 0;min-width:0}
.subs-content figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.35rem}
.subs-title{flex:1 1 auto;min-width:0}
.subs-meta{font-weight:400;opacity:.6;font-size:.9em;white-space:nowrap}
.subs-dl{margin-left:auto;flex:0 0 auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap}
.subs-content{flex:1 1 0;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
.subs-content figcaption{display:flex;align-items:flex-start;justify-content:space-between;gap:.35rem .6rem;margin-bottom:.55rem;width:100%;box-sizing:border-box}
.subs-title{flex:1 1 auto;min-width:0;font-size:1.08em;font-weight:700;color:var(--foreground,#f3f4f6);line-height:1.35;word-break:break-word;overflow-wrap:break-word}
.subs-meta{display:block;width:100%;font-weight:400;opacity:.75;font-size:.85em;line-height:1.45;margin-top:.2rem;white-space:normal;word-break:break-word;overflow-wrap:break-word}
.subs-dl{flex:0 0 auto;margin-left:auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.18rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap;transition:all .15s}
.subs-dl:hover{background:rgba(34,197,94,.14)}
.subs-dl::before{content:"↓ "}
.subs-content audio{width:100%}
.subs-box{position:relative;max-height:220px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6;background:rgba(0,0,0,.25)}
.subs-content audio{width:100%;margin-top:.35rem;box-sizing:border-box}
.subs-box{position:relative;max-height:220px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6;background:rgba(0,0,0,.25);box-sizing:border-box}
.subs-box p{margin:.18rem 0;opacity:.55}
.subs-box p.on{opacity:1;font-weight:600;color:var(--accent,#22c55e)}
@media(max-width:680px){
.subs-track{flex-direction:column;align-items:stretch;gap:1.2rem;padding:1rem}
.subs-cover{flex:none;width:100%;max-width:none;min-width:0;aspect-ratio:1/1;margin:0}
.subs-track{flex-direction:column;align-items:stretch;gap:1.2rem;padding:1rem;margin:1.8rem 0}
.subs-cover{flex:none;width:100%;max-width:100%;min-width:0;aspect-ratio:1/1;margin:0;border-radius:8px}
.subs-content{width:100%;min-width:0}
.subs-title{font-size:1.02em}
}
</style>