Proyecto App Linux

2026-05-03 23:43:09 +02:00
commit 7482733843
1248 changed files with 189750 additions and 0 deletions
@@ -0,0 +1,120 @@
+// Shared content grid and card styles
+//
+// Usage (after adding libs/ui/styles to stylePreprocessorOptions.includePaths):
+//   @use 'content-grid' as grid;
+//   @include grid.content-grid;
+//   @include grid.content-card;
+
+@mixin content-grid($min-width: 140px, $gap: 20px) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
+    gap: $gap;
+}
+
+@mixin content-card {
+    cursor: pointer;
+    border-radius: 10px;
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    }
+}
+
+@mixin thumbnail-wrapper {
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .poster {
+        width: 100%;
+        aspect-ratio: 2/3;
+        object-fit: cover;
+        display: block;
+    }
+
+    .poster-placeholder {
+        width: 100%;
+        aspect-ratio: 2/3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(128, 128, 128, 0.1);
+
+        mat-icon {
+            font-size: 36px;
+            width: 36px;
+            height: 36px;
+            opacity: 0.25;
+        }
+    }
+}
+
+@mixin type-badge {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    background: rgba(0, 0, 0, 0.85);
+    color: #fff;
+
+    &.live {
+        color: #ef5350;
+    }
+    &.movie {
+        color: #42a5f5;
+    }
+    &.series {
+        color: #66bb6a;
+    }
+}
+
+@mixin remove-button {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5);
+    width: 28px;
+    height: 28px;
+    padding: 0;
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    mat-icon {
+        color: white;
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+@mixin card-info {
+    padding: 8px 10px;
+
+    h3 {
+        margin: 0;
+        font-size: 0.8rem;
+        font-weight: 500;
+        line-height: 1.3;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .date-info {
+        margin: 4px 0 0;
+        font-size: 0.7rem;
+        opacity: 0.6;
+    }
+}