63 lines
4.6 KiB
CSS
63 lines
4.6 KiB
CSS
body { font-family: system-ui, sans-serif; margin: 0; color: #17212b; }
|
|
header { display: flex; align-items: center; gap: 2rem; padding: 1rem 2rem; border-bottom: 1px solid #d6dee4; }
|
|
nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
|
|
nav a { color: #145a86; }
|
|
main { max-width: 72rem; margin: 2rem auto; padding: 0 2rem; }
|
|
#newer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 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; }
|
|
.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; }
|
|
.episode-action { padding: 0 .8rem .8rem; }
|
|
.subscription-action { padding: 0 .8rem .8rem; }
|
|
.subscription-action button, .subscription-item button { font: inherit; padding: .35rem .7rem; }
|
|
.subscription-item { border: 1px solid #d6dee4; border-radius: .5rem; margin: .75rem 0; padding: .8rem 1rem; }
|
|
.subscription-item form { display: inline-block; margin-right: .5rem; }
|
|
.subscription-url-entry { border: 1px solid #d6dee4; border-radius: .5rem; margin-bottom: 1.5rem; padding: .8rem 1rem; }
|
|
.subscription-url-entry input[type="url"] { font: inherit; min-width: min(32rem, 70vw); padding: .35rem .5rem; }
|
|
.subscription-url-entry button { font: inherit; padding: .35rem .7rem; }
|
|
.episode-action form { display: inline; }
|
|
.episode-action button, .queue-job button { font: inherit; padding: .35rem .7rem; }
|
|
.queue-job { border: 1px solid #d6dee4; border-radius: .5rem; margin: .75rem 0; padding: .8rem 1rem; }
|
|
.queue-job h3 { margin: 0 0 .4rem; }
|
|
.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-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; }
|
|
}
|