kazu634/tver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ライブラリを番組一覧・番組ページ・再生の3段にする（ステップ12）

Browse Source
This commit is contained in:
kazu634
2026-10-10 12:18:58 +09:00
parent 511365f0d4
commit 6586d7edd2
12 changed files with 766 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+23
View File
@@ -10,6 +10,10 @@ main { max-width: 72rem; margin: 2rem auto; padding: 0 2rem; }
.episode-card a { color: inherit; text-decoration: none; }
.episode-card a:hover h2 { text-decoration: underline; }
.episode-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e5ebef; }
.library-card-image { position: relative; }
.episode-count-badge, .subscription-badge { display: inline-block; border-radius: 999px; padding: .15rem .5rem; font-size: .8rem; line-height: 1.2; }
.episode-count-badge { position: absolute; right: .5rem; bottom: .5rem; color: #fff; background: rgba(23, 33, 43, .85); }
.subscription-badge { color: #145a86; background: #e1f1fb; vertical-align: middle; }
.episode-copy { padding: .8rem 1rem; }
.episode-copy h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.episode-copy p { margin: .3rem 0; }
@@ -28,3 +32,22 @@ main { max-width: 72rem; margin: 2rem auto; padding: 0 2rem; }
.queue-job p { margin: .4rem 0; }
.queue-job pre { white-space: pre-wrap; overflow-wrap: anywhere; }
video { display: block; width: 100%; max-height: 75vh; background: #000; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
.library-sort { margin: 1rem 0; }
.library-episode-list { border-top: 1px solid #d6dee4; }
.library-episode-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto auto auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid #d6dee4; color: inherit; text-decoration: none; }
.library-episode-row:hover .library-episode-title { text-decoration: underline; }
.library-episode-row img { display: block; width: 8rem; aspect-ratio: 16 / 9; object-fit: cover; background: #e5ebef; }
.library-episode-title { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.episode-navigation { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.episode-navigation a, .episode-navigation span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) {
header { align-items: flex-start; flex-direction: column; gap: .75rem; padding: 1rem; }
main { margin: 1.25rem auto; padding: 0 1rem; }
.episode-grid { grid-template-columns: minmax(0, 1fr); }
.library-episode-row { grid-template-columns: 6rem minmax(0, 1fr); gap: .35rem .7rem; }
.library-episode-row img { grid-row: 1 / span 4; width: 6rem; }
.library-episode-row > span:not(.library-episode-title) { grid-column: 2; font-size: .9rem; }
.episode-navigation { flex-direction: column; }
}