動画を確認画面つきで複数削除できるようにする(ステップ13)
This commit is contained in:
@@ -7,6 +7,9 @@ main { max-width: 72rem; margin: 2rem auto; padding: 0 2rem; }
|
||||
#newer-controls select, #newer-controls button { font: inherit; padding: .35rem .6rem; }
|
||||
.episode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
|
||||
.episode-card { border: 1px solid #d6dee4; border-radius: .5rem; overflow: hidden; }
|
||||
.library-selection { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; }
|
||||
.library-select-grid .episode-card { display: flex; flex-direction: column; }
|
||||
.library-select-grid .episode-card > a { flex: 1; }
|
||||
.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; }
|
||||
@@ -35,18 +38,24 @@ 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-select-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-bottom: 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-select-row .library-episode-row { border-bottom: 0; }
|
||||
.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; }
|
||||
.delete-warning { border-left: .3rem solid #b42318; background: #fff1f0; padding: .8rem 1rem; }
|
||||
.delete-group { 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-select-row { grid-template-columns: 1fr; }
|
||||
.library-episode-select-row > .library-selection { padding: .7rem 0 0; }
|
||||
.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; }
|
||||
|
||||
Reference in New Issue
Block a user