improvements on the games list page, better design and grid/card/list views

2026-02-28 13:53:23 +02:00
parent 29b5eca900
commit 90f492808c
5 changed files with 339 additions and 41 deletions
@@ -244,3 +244,127 @@ body {
    color: #fff; background: rgba(0, 0, 0, 0.7);
    display: none; justify-content: center; align-items: center;
 }
+
+/* Game Card Styles */
+.game-card-grid {
+    transition: transform 0.2s ease-in-out;
+}
+
+.game-card-grid:hover {
+    transform: translateY(-5px);
+}
+
+.game-cover-wrapper {
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.game-cover {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 3/4;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.game-card-grid:hover .game-cover {
+    transform: scale(1.05);
+}
+
+.game-cover-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 50%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    display: flex;
+    align-items: flex-end;
+    padding: 1rem;
+}
+
+.game-card-grid:hover .game-cover-overlay {
+    opacity: 1;
+}
+
+.overlay-content {
+    width: 100%;
+}
+
+.rating-badge {
+    background: linear-gradient(90deg, var(--primary), var(--accent));
+    color: white;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    display: inline-block;
+}
+
+.game-info-grid .game-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+/* Card View Styles */
+.game-card-enhanced {
+    background-color: rgba(30, 30, 30, 0.8);
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    overflow: hidden;
+}
+
+.game-card-enhanced:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(127, 0, 255, 0.3);
+}
+
+.game-card-enhanced .card-body {
+    background-color: rgba(18, 18, 18, 0.9);
+}
+
+/* List View Styles */
+.game-card-list {
+    background-color: rgba(30, 30, 30, 0.8);
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.game-card-list:hover {
+    transform: translateX(5px);
+    box-shadow: 0 4px 15px rgba(127, 0, 255, 0.3);
+}
+
+.game-card-list .card-body {
+    background-color: rgba(18, 18, 18, 0.9);
+}
+
+/* View Mode Button Styles */
+.view-mode-btn {
+    padding: 0.5rem 0.75rem;
+    transition: all 0.2s ease-in-out;
+}
+
+.view-mode-btn.active {
+    background: linear-gradient(90deg, var(--primary), var(--accent));
+    border-color: transparent;
+    color: white;
+}
+
+.view-mode-btn:not(.active):hover {
+    background-color: rgba(127, 0, 255, 0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .game-info-grid .game-title {
+        font-size: 0.85rem;
+    }
+
+    .rating-badge {
+        font-size: 0.8rem;
+        padding: 0.3rem 0.6rem;
+    }
+}