From 22f9210d75b4a2e3042af6e537960d2e7bd73f46 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera_w@proton.me>
Date: Wed, 10 Apr 2024 04:32:13 +0700
Subject: [PATCH] update css for dark theme

---
 style.css | 91 +++++++++++++++++++++++++++++++++----------------------
 1 file changed, 54 insertions(+), 37 deletions(-)

diff --git a/style.css b/style.css
index 2c1c5c1..2cde754 100644
--- a/style.css
+++ b/style.css
@@ -80,12 +80,6 @@ html *
         'left middle right' 
   } 
 
-  .separator {
-    width: 15cm;
-    height: 1px;
-    background-color: rgba(237, 237, 237, 1);
-  }
-
   .listaction {
     display: flex;
     color: black;
@@ -162,53 +156,45 @@ html *
 
 @media (prefers-color-scheme: dark) {
 
+  body {
+    background-color: #222222;
+  }
+
   .logo {
     color: #fff;
     font-weight: bold;
     text-decoration: none;
   }
 
-  body {
-    background-color: #222222;
-  }
-
   .grid-container {
     display: grid;
     justify-content: center;
-    color: #ffffff;
+    color: #fff;
     grid-template-areas: 
-      'left middle right' 
-  }
-
-  .list {
-    border-radius: 12px 12px 12px 12px;
-    background-color: #363636;
-    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
-    margin-bottom: 50px;
-  }
-
-  .separator {
-    width: 15cm;
-    height: 1px;
-    background-color: #232323;
-  }
+        'left middle right' 
+  } 
 
   .listaction {
-    display: grid;
-    grid-template-columns: 1fr 1cm;
-    text-decoration: none;
-    color: #ffffff;
+    display: flex;
+    color: white;
     align-items: center;
-    height: 1.5cm;
   }
 
-  .listinfo {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
+  .button {
+    height: 1cm;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
     text-decoration: none;
-    color: #ffffff;
-    align-items: center;
-    height: 1.5cm;
+    font-weight: bold;
+    padding: 10px 10px;
+    margin-top: 1cm;
+    margin-bottom: 1cm;
+    transition-duration: 0.2s;
+  }
+
+  .button:hover {
+    background: rgba(255, 255, 255, 0.18);
   }
 
   .gtk-button-pill {
@@ -228,4 +214,35 @@ html *
     padding: 0px 32px;
     flex-wrap: nowrap;
   }
+
+  .itemcard {
+    display: grid;
+    border-radius: 12px;
+    text-decoration: none;
+    background-color: #303030;
+    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
+    margin-bottom: 0.5cm;
+    min-height: 3cm;
+    min-width: 6cm;
+    width: 32.5%;
+    transition-duration: 0.2s;
+  }
+  .itemcard-stealth {
+    display: grid;
+    border-radius: 12px;
+    text-decoration: none;
+    margin-bottom: 0.5cm;
+    min-height: 3cm;
+    min-width: 6cm;
+    width: 32.5%;
+    transition-duration: 0.2s;
+  }
+
+  .itemcard:hover {
+    background-color: #4a4a4a;
+  }
+
+  .itemcard-stealth:hover {
+    background-color: #4a4a4a;
+  }
 }