From 54ce2d085a08ce951c2ba089ab8ae7fd6faedcb2 Mon Sep 17 00:00:00 2001
From: Diocrafts <pozo.dionisio@gmail.com>
Date: Sat, 7 Mar 2026 18:34:16 +0100
Subject: [PATCH] style: apply card border/shadow style from Archivos to Fotos
 tiles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- photo-tile: border-radius 4px → 12px, add 2px solid border + box-shadow
- hover: translateY(-2px) elevation effect matching file-card
- selected: border-color + background tint instead of outline
- grid gaps: 4px → 12/14/10px for daily/monthly/yearly to breathe
---
 static/css/views/photos.css | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/static/css/views/photos.css b/static/css/views/photos.css
index 77cf26ad..9f27c6bd 100755
--- a/static/css/views/photos.css
+++ b/static/css/views/photos.css
@@ -43,7 +43,7 @@
 .photos-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 4px;
+    gap: 12px;
     padding: 0 8px;
     margin-bottom: 16px;
 }
@@ -51,7 +51,7 @@
 /* Monthly mode — larger tiles, more breathing room */
 .photos-group-monthly .photos-grid {
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 6px;
+    gap: 14px;
 }
 
 .photos-group-monthly .photos-day-header {
@@ -62,7 +62,7 @@
 /* Yearly mode — smaller tiles, more items visible */
 .photos-group-yearly .photos-grid {
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: 4px;
+    gap: 10px;
 }
 
 .photos-group-yearly .photos-day-header {
@@ -75,20 +75,30 @@
     position: relative;
     aspect-ratio: 1;
     overflow: hidden;
-    border-radius: 4px;
+    border-radius: 12px;
+    border: 2px solid #e2e8f0;
     cursor: pointer;
-    background: #e2e8f0;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .photo-tile img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: 10px;
     transition: transform 0.2s ease;
 }
 
+.photo-tile:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+    border-color: #cbd5e0;
+}
+
 .photo-tile:hover img {
-    transform: scale(1.05);
+    transform: scale(1.03);
 }
 
 /* Selection checkbox */
@@ -122,12 +132,13 @@
 }
 
 .photo-tile.selected {
-    outline: 3px solid #ff5e3a;
-    outline-offset: -3px;
+    border-color: #ff5e3a;
+    background: #fff8f6;
+    box-shadow: 0 0 0 1px rgba(255, 94, 58, 0.15), 0 4px 12px rgba(255, 94, 58, 0.1);
 }
 
 .photo-tile.selected img {
-    transform: scale(0.92);
+    transform: scale(0.95);
 }
 
 /* Video badge */