add latest updates

src/static/style.css

@@ -1,8 +1,9 @@
+/* other styles are in magic.css */
 /* ========== GRID LAYOUT ========== */
 .results {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 1em;
     margin-top: 20px;
 }
 
@@ -20,11 +21,16 @@
     border: 1px solid #ccc;
     background: #fafafa;
     text-align: center;
-    transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s transform 0.2s;
+        border-radius: 10px;
 }
 
 .card:hover {
     box-shadow: 0 0 10px #aaa;
+    transform: scale(1.1);
+        /* pop out by 10% */
+        z-index: 2;
+        /* ensure it appears above others */
 }
 
 .card img {
@@ -39,6 +45,32 @@
     justify-content: space-around;
 }
 
+.actions .info {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 0.5em 1em;
+    cursor: pointer;
+    border-radius: 5px;
+    margin-right: 0.5em;
+}
+
+.actions .info:hover {
+    background-color: #0056b3;
+}
+
+.actions .request {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 0.5em 1em;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.actions .request:hover {
+    background-color: #1e7e34;
+}
 /* ========== MODAL ========== */
 .modal {
     position: fixed;
@@ -84,12 +116,15 @@
 
 /* ========== BLUR CONTROL VIA BODY CLASS ========== */
 body.nsfw-disabled .image-container.nsfw img {
-    filter: blur(8px);
+    filter: grayscale(100%) blur(5px) !important;
+        /* Ensure the blur is applied */
+        transition: filter 0.3s ease;
+        /* Add smooth transition */
 }
 
 body.nsfw-disabled .image-container.nsfw:hover img {
-    filter: none;
-    /* Remove blur on hover, set as important */
+    filter: none !important;
+        /* Remove blur on hover */
 }
 
 
@@ -145,10 +180,23 @@ body.nsfw-disabled .image-container.nsfw:hover img {
 
 .reset {
     /* Implement design here */
+    background-color: #f44336;
+        /* round the edges of the button */
+        border-radius: 9px;
+    
+    }
+    
+    .selectors {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 8px;
+        margin-top: 5px;
+        flex-wrap: wrap;
 }
 
 .info {
     /* Implement design here */
+    background-color: #4CAF50;
 }
 
 .request {
@@ -183,4 +231,10 @@ body.nsfw-disabled .image-container.nsfw:hover img {
 .card.komga .request {
     pointer-events: none;
     opacity: 0.5;
+}
+.card.komga:hover,
+.card.requested:hover {
+    transform: none !important;
+    box-shadow: none !important;
+    z-index: auto !important;
 }