| 1 | .yt-meta { color: var(--muted); font-size: 12px; } |
| 2 | |
| 3 | .yt-banner { |
| 4 | margin-bottom: 8px; |
| 5 | padding: 8px 12px; |
| 6 | border-left: 3px solid var(--warning); |
| 7 | border-radius: var(--radius); |
| 8 | background: color-mix(in srgb, var(--warning) 10%, transparent); |
| 9 | font-size: 13px; |
| 10 | } |
| 11 | |
| 12 | .youtube .list-body > .segmented { margin-bottom: 8px; } |
| 13 | |
| 14 | .yt-config { padding: 16px; } |
| 15 | .yt-config-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } |
| 16 | .yt-config-head label { display: flex; align-items: center; gap: 8px; } |
| 17 | .yt-config textarea { box-sizing: border-box; display: block; width: 100%; min-height: 60vh; padding: 12px; font: 12px/1.5 var(--mono); resize: vertical; } |
| 18 | |
| 19 | .yt-queue { border-block: 1px solid var(--line); } |
| 20 | .yt-caught-up { display: grid; gap: 4px; padding: 40px 0; } |
| 21 | .yt-caught-up strong { color: var(--text); font-size: 15px; } |
| 22 | |
| 23 | .yt-item { |
| 24 | display: grid; |
| 25 | grid-template-columns: 128px 1fr; |
| 26 | gap: 12px; |
| 27 | padding-inline: var(--gutter); |
| 28 | border-bottom: 1px solid var(--grid); |
| 29 | transition: background-color 150ms, box-shadow 150ms; |
| 30 | } |
| 31 | .yt-item.yt-item:focus-visible { outline: none; } |
| 32 | .yt-item:last-child { border-bottom: 0; } |
| 33 | .yt-item:focus-within { background: var(--hover); box-shadow: inset 3px 0 var(--accent); } |
| 34 | .yt-item.gone { display: none; } |
| 35 | |
| 36 | .yt-thumb { |
| 37 | position: relative; |
| 38 | display: grid; |
| 39 | place-items: center; |
| 40 | width: 128px; |
| 41 | aspect-ratio: 16 / 9; |
| 42 | align-self: start; |
| 43 | margin: 8px 0; |
| 44 | border-radius: 6px; |
| 45 | color: #fff9; |
| 46 | background: radial-gradient(circle at 25% 20%, hsl(var(--hue) 55% 45% / 0.9), transparent 60%), |
| 47 | linear-gradient(135deg, hsl(calc(var(--hue) + 40) 40% 28%), hsl(calc(var(--hue) + 90) 35% 14%)); |
| 48 | background-size: cover; |
| 49 | background-position: center; |
| 50 | } |
| 51 | |
| 52 | .yt-duration { |
| 53 | position: absolute; |
| 54 | right: 4px; |
| 55 | bottom: 4px; |
| 56 | padding: 0 4px; |
| 57 | border-radius: 3px; |
| 58 | background: #000b; |
| 59 | color: #fff; |
| 60 | font: 10px/16px var(--mono); |
| 61 | } |
| 62 | |
| 63 | .yt-body { display: grid; gap: 2px; align-content: start; padding: 8px 0; min-width: 0; } |
| 64 | .yt-title { font-weight: 600; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } |
| 65 | .yt-title.mono { font-weight: 400; overflow-wrap: anywhere; } |
| 66 | input.yt-title { |
| 67 | height: 22px; |
| 68 | width: 100%; |
| 69 | margin-left: -6px; |
| 70 | padding: 0 5px; |
| 71 | border: 1px dashed var(--axis); |
| 72 | border-radius: 5px; |
| 73 | background: none; |
| 74 | color: inherit; |
| 75 | font: inherit; |
| 76 | font-weight: 600; |
| 77 | transition: border-color 150ms, background-color 150ms; |
| 78 | } |
| 79 | input.yt-title:hover { border-style: solid; } |
| 80 | input.yt-title:focus-visible { outline: none; border: 1px solid var(--accent); background: var(--well); } |
| 81 | .yt-body .error { font-size: 12px; margin-top: 4px; } |
| 82 | |
| 83 | .yt-fields { --control: 26px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } |
| 84 | .yt-fields .search { font-size: 13px; padding: 0 8px; } |
| 85 | .yt-fields .yt-dest { width: 150px; } |
| 86 | .yt-fields .yt-season { width: 124px; } |
| 87 | .yt-fields .yt-show { width: 140px; } |
| 88 | .yt-episode { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; } |
| 89 | .yt-episode .search { width: 52px; } |
| 90 | |
| 91 | .yt-actions { display: flex; gap: 6px; margin-left: auto; transition: opacity 150ms; } |
| 92 | @media (hover: hover) { |
| 93 | .yt-item:not(:hover, :focus-within) .yt-actions, |
| 94 | .yt-channels tr:not(:hover, :focus-within) .actions > div { opacity: 0; } |
| 95 | } |
| 96 | |
| 97 | .yt-jobs { border-top: 1px solid var(--line); } |
| 98 | .yt-job-state { width: 1%; white-space: nowrap; } |
| 99 | .yt-job-state > * { vertical-align: middle; } |
| 100 | .yt-job-state .meter { display: inline-flex; width: 56px; min-width: 0; margin: 0 8px; } |
| 101 | .yt-job-title { overflow-wrap: anywhere; } |
| 102 | .yt-list-head { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px; font-size: 12px; } |
| 103 | .yt-list-head:first-child { margin-top: 4px; } |
| 104 | .yt-list-head h2 { margin: 0; } |
| 105 | .yt-list-head .button { margin-left: auto; align-self: center; } |
| 106 | .yt-channels { border-top: 1px solid var(--line); } |
| 107 | .yt-channel { font-weight: 550; white-space: nowrap; } |
| 108 | .yt-handle { width: 100%; font-size: 12px; } |
| 109 | .yt-rules { text-align: right; white-space: nowrap; } |
| 110 | .yt-rules .chip { margin-left: 4px; } |
| 111 | .yt-channels .actions > div { transition: opacity 150ms; } |
| 112 | |
| 113 | .yt-backlog { display: flex; gap: 8px; } |
| 114 | .yt-backlog > * { flex: 1; } |
| 115 | .yt-keywords { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 8px; align-items: center; color: var(--text-2); font-size: 12px; } |
| 116 | .yt-keywords .search { min-width: 0; } |
| 117 | .yt-keywords .hint { grid-column: span 2; margin-top: -2px; color: var(--muted); } |
| 118 | |
| 119 | :is(.yt-meta, .yt-job-title) a { color: inherit; text-underline-offset: 3px; border-radius: 3px; } |
| 120 | :is(.yt-meta, .yt-job-title) a:not(:hover) { text-decoration: none; } |
| 121 | .yt-meta a:hover { color: var(--text); } |
| 122 | |
| 123 | .yt-library-search { margin: 12px; max-width: calc(100% - 24px); width: 320px; } |
| 124 | .yt-library { width: 100%; } |
| 125 | .yt-library-edit { display: flex; gap: 6px; align-items: center; } |
| 126 | .yt-library-edit input { min-width: 0; } |
| 127 | .yt-library-edit input:first-child { flex: 1; } |
| 128 | .yt-library-edit input[type="number"] { width: 58px; } |