Added Photo Collage to Calendar TV View

2026-04-04 11:18:28 -04:00
parent dee4567f74
commit 44e6547a0a
14 changed files with 139 additions and 10 deletions
@@ -814,8 +814,109 @@ body.calendar-tv-dark {
    --secondary-color: #1e293b;
 }

+/* Photo collage behind TV calendar (fixed full viewport) */
+.calendar-tv-collage-bg {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.calendar-tv-collage-grid {
+    display: grid;
+    width: 100%;
+    height: 100%;
+    gap: clamp(6px, 1vw, 14px);
+    padding: clamp(6px, 1vw, 14px);
+    box-sizing: border-box;
+}
+
+.calendar-tv-collage-grid--mosaic {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(1) {
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(2) {
+    grid-column: 3 / 4;
+    grid-row: 1 / 2;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(3) {
+    grid-column: 4 / 5;
+    grid-row: 1 / 2;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(4) {
+    grid-column: 5 / 6;
+    grid-row: 1 / 2;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(5) {
+    grid-column: 3 / 4;
+    grid-row: 2 / 3;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(6) {
+    grid-column: 4 / 5;
+    grid-row: 2 / 3;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(7) {
+    grid-column: 5 / 6;
+    grid-row: 2 / 3;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(8) {
+    grid-column: 1 / 3;
+    grid-row: 3 / 5;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(9) {
+    grid-column: 3 / 5;
+    grid-row: 3 / 5;
+}
+
+.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(10) {
+    grid-column: 5 / 6;
+    grid-row: 3 / 5;
+}
+
+.calendar-tv-collage-grid--even .calendar-tv-collage-tile {
+    min-height: 0;
+    min-width: 0;
+}
+
+.calendar-tv-collage-tile {
+    min-height: 0;
+    min-width: 0;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 6px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
+}
+
+.calendar-tv-collage-scrim {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        160deg,
+        rgba(15, 23, 42, 0.78) 0%,
+        rgba(15, 23, 42, 0.62) 45%,
+        rgba(15, 23, 42, 0.75) 100%
+    );
+}
+
 body.calendar-tv-dark main {
-    background-color: #0f172a;
+    position: relative;
+    z-index: 1;
+    background-color: transparent;
 }

 body.calendar-tv-dark .calendar-tv-view h2,