Add now playing view

2026-07-06 21:51:09 +02:00
parent 34e6cdbe01
commit e2e6fb1f3c
4 changed files with 195 additions and 3 deletions
@@ -314,3 +314,90 @@ button {
    grid-template-columns: 1fr;
  }
 }
+
+.page-heading {
+  margin-bottom: 22px;
+}
+
+.page-heading h2 {
+  margin: 0;
+  font-size: 1.8rem;
+}
+
+.page-heading p {
+  margin: 6px 0 0;
+  color: var(--muted);
+}
+
+.now-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 18px;
+}
+
+.now-card {
+  background: linear-gradient(180deg, var(--panel-2), var(--panel));
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 20px;
+}
+
+.now-channel {
+  display: flex;
+  justify-content: space-between;
+  color: var(--muted);
+  font-weight: 800;
+  margin-bottom: 12px;
+}
+
+.now-card h3 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.now-subtitle {
+  color: #cbd5e1;
+  margin-top: 6px;
+}
+
+.progress-wrap {
+  margin-top: 18px;
+}
+
+.progress-meta {
+  display: flex;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 0.85rem;
+  margin-bottom: 7px;
+}
+
+.progress-bar {
+  height: 10px;
+  background: #020617;
+  border-radius: 999px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 999px;
+}
+
+.remaining {
+  color: var(--muted);
+  font-size: 0.85rem;
+  margin-top: 8px;
+}
+
+.now-desc {
+  color: #cbd5e1;
+  margin: 16px 0 0;
+  line-height: 1.45;
+}
+
+.favorite-star {
+  color: #facc15;
+}