push

web/css/pages.css

@@ -4,34 +4,6 @@
   page-level blocks and handles responsive behavior.
 */
 
-/* ---- home ------------------------------------------------------------------ */
-
-.home-hero {
-  margin: 0 0 var(--space-6);
-  padding: var(--space-5);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background:
-    radial-gradient(80% 120% at 10% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%),
-    var(--color-surface);
-}
-
-.home-hero h1 {
-  font-size: var(--text-2xl);
-  letter-spacing: -0.02em;
-}
-
-.home-hero p {
-  margin-top: var(--space-2);
-  max-width: 56ch;
-  color: var(--color-text-dim);
-  font-size: var(--text-sm);
-}
-
-.home-hero .chips {
-  margin-top: var(--space-4);
-}
-
 /* ---- search ------------------------------------------------------------------ */
 
 .search-bar {
@@ -183,7 +155,7 @@
   margin-bottom: var(--space-1);
 }
 
-/* ---- watch: toolbar + sources ---------------------------------------------------- */
+/* ---- watch: toolbar (source popup lives in components.css with the player) ---------- */
 
 .watch-toolbar {
   display: flex;
@@ -204,78 +176,6 @@
   flex: 1;
 }
 
-.sources {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  margin-bottom: var(--space-6);
-  overflow: hidden;
-}
-
-.sources__head {
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-semibold);
-}
-
-.source-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  border: none;
-  border-bottom: 1px solid var(--color-border);
-  background: transparent;
-  color: var(--color-text);
-  text-align: left;
-  cursor: pointer;
-  font-size: var(--text-sm);
-}
-
-.source-item:last-child {
-  border-bottom: none;
-}
-
-.source-item:hover {
-  background: var(--color-surface-hover);
-}
-
-.source-item--active {
-  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
-}
-
-.source-item__rank {
-  flex: 0 0 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-full);
-  background: var(--color-surface-2);
-  border: 1px solid var(--color-border);
-  font-size: var(--text-xs);
-  color: var(--color-text-dim);
-}
-
-.source-item--active .source-item__rank {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-accent-text);
-}
-
-.source-item__name {
-  font-weight: var(--font-weight-medium);
-}
-
-.source-item__meta {
-  margin-left: auto;
-  color: var(--color-text-faint);
-  font-size: var(--text-xs);
-  white-space: nowrap;
-}
-
 .loading-cell {
   grid-column: 1 / -1;
   display: flex;
@@ -483,6 +383,7 @@
 
 .provider-list {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: var(--space-2);
   margin-top: var(--space-4);
 }
@@ -490,9 +391,8 @@
 .provider {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-surface-2);
@@ -504,14 +404,21 @@
   border-color: var(--color-border-strong);
 }
 
+.provider input[type="checkbox"] {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--color-accent);
+  cursor: pointer;
+}
+
 .provider__name {
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
-}
-
-.provider__note {
-  font-size: var(--text-xs);
-  color: var(--color-text-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* ---- responsive ---------------------------------------------------------------- */
@@ -536,10 +443,6 @@
     font-size: var(--text-2xl);
   }
 
-  .home-hero h1 {
-    font-size: var(--text-xl);
-  }
-
   .search-bar__form {
     flex-direction: column;
   }