From c23e7a6ce079c8a1bbd030580e5f6beca2dba3ad Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Mon, 24 Jun 2024 15:36:04 +0700
Subject: [PATCH] refactor css

---
 style.css | 253 ++++++++++++++++++++++--------------------------------
 1 file changed, 104 insertions(+), 149 deletions(-)

diff --git a/style.css b/style.css
index 4d35694..477da06 100644
--- a/style.css
+++ b/style.css
@@ -23,7 +23,6 @@ html *
   justify-content: center;
   align-items: center;
   margin-top: 2cm;
-  
 }
 
 .middle {
@@ -46,6 +45,104 @@ html *
   opacity: 0.5;
 }
 
+.logo {
+  text-align: center;
+}
+
+.grid-container {
+  display: grid;
+  justify-content: center;
+  grid-template-areas: 
+    'left middle right' 
+}
+
+.headerbutton {
+  border: none;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 4px 2px;
+  padding-left: 0.3cm;
+  padding-right: 0.3cm;
+  cursor: pointer;
+  min-height: 35px;
+  transition-duration: 0.2s;
+}
+
+.list {
+  border-radius: 12px 12px 12px 12px;
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
+  margin-bottom: 50px;
+}
+
+.listaction {
+  display: grid;
+  grid-template-columns: 1fr 1cm;
+  text-decoration: none;
+  align-items: center;
+  min-height: 1.5cm;
+}
+
+.listinfo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  text-decoration: none;
+  align-items: center;
+  min-height: 1.5cm;
+}
+
+.separator {
+  max-width: 15cm;
+  height: 1px;
+}
+
+.topbar {
+  position: fixed;
+  width: 100%;
+  height: 1.2cm;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+}
+
+.backbutton {
+  position: absolute;
+  border-radius:10px;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: grid;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0.1cm;
+  transition-duration: 0.2s;
+  width: 1cm;
+  height: 1cm;
+}
+
+.gtk-button-pill {
+  position: relative;
+  width: auto;
+  height: 44px;
+  border-radius: 22px;
+  background-color: rgba(53, 132, 228, 1);
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0px;
+  padding: 0px 32px;
+  margin-bottom: 1cm;
+  flex-wrap: nowrap;
+}
+
 @media (prefers-color-scheme: light) {
 
   body {
@@ -54,34 +151,15 @@ html *
 
   .logo {
     color: #000;
-    text-align: center;
   }
 
   .grid-container {
-    display: grid;
-    justify-content: center;
     color: #000000;
-    grid-template-areas: 
-        'left middle right' 
   } 
 
   .headerbutton {
     background-color: #EBEBEB;
-    color: black;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 4px 2px;
-    padding-left: 0.3cm;
-    padding-right: 0.3cm;
-    cursor: pointer;
-    min-height: 35px;
-    transition-duration: 0.2s;
+    color: #000;
   }
 
   .headerbutton:hover {
@@ -89,124 +167,53 @@ html *
   }
 
   .list {
-    border-radius: 12px 12px 12px 12px;
     background-color: #ffffff;
-    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
-    margin-bottom: 50px;
   }
 
   .separator {
-    max-width: 15cm;
-    height: 1px;
     background-color: rgba(237, 237, 237, 1);
   }
 
   .listaction {
-    display: grid;
-    grid-template-columns: 1fr 1cm;
-    text-decoration: none;
     color: black;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .listinfo {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    text-decoration: none;
     color: black;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .topbar {
-    position: fixed;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
     background-color: rgba(255, 255, 255, 1);
     border: 1px solid rgba(224, 224, 224, 1);
     color: #000000;
-    z-index: 10;
   }
 
   .backbutton {
-    position: absolute;
     color: black;
-    border-radius:10px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: grid;
-    font-size: 14px;
-    cursor: pointer;
-    margin: 0.1cm;
-    transition-duration: 0.2s;
-    width: 1cm;
-    height: 1cm;
   }
 
   .backbutton:hover {
     background-color: #DEDEDE;
   }
-
-  .gtk-button-pill {
-    position: relative;
-    width: auto;
-    height: 44px;
-    border-radius: 22px;
-    background-color: rgba(53, 132, 228, 1);
-    color: white;
-    text-decoration: none;
-    font-weight: bold;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0px;
-    padding: 0px 32px;
-    margin-bottom: 1cm;
-    flex-wrap: nowrap;
-  }
 }
 
 @media (prefers-color-scheme: dark) {
 
-  .logo {
-    color: #fff;
-    text-align: center;
-  }
-
   body {
     background-color: #222222;
   }
 
+  .logo {
+    color: #fff;
+  }
+
   .grid-container {
-    display: grid;
-    justify-content: center;
     color: #ffffff;
-    grid-template-areas: 
-      'left middle right' 
   }
 
   .headerbutton {
     background-color: #4a4a4a;
-    color: #ffffff;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 4px 2px;
-    padding-left: 0.3cm;
-    padding-right: 0.3cm;
-    cursor: pointer;
-    min-height: 35px;
-    transition-duration: 0.2s;
+    color: #fff;
   }
 
   .headerbutton:hover {
@@ -214,84 +221,32 @@ html *
   }
 
   .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 {
-    max-width: 15cm;
-    height: 1px;
     background-color: #232323;
   }
 
   .listaction {
-    display: grid;
-    grid-template-columns: 1fr 1cm;
-    text-decoration: none;
     color: #ffffff;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .listinfo {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    text-decoration: none;
     color: #ffffff;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .topbar {
-    position: fixed;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
     background-color: #303030;
     border: 1px solid #1f1f1f;
     color: #ffffff;
-    z-index: 10;
   }
 
   .backbutton {
-    position: absolute;
     color: #ffffff;
-    border-radius:10px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: grid;
-    font-size: 14px;
-    cursor: pointer;
-    margin: 0.1cm;
-    transition-duration: 0.2s;
-    width: 1cm;
-    height: 1cm;
   }
 
   .backbutton:hover {
     background-color: #3e3e3e;
   }
-
-  .gtk-button-pill {
-    position: relative;
-    width: auto;
-    height: 44px;
-    border-radius: 22px;
-    background-color: rgba(53, 132, 228, 1);
-    color: white;
-    text-decoration: none;
-    font-weight: bold;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0px;
-    padding: 0px 32px;
-    margin-bottom: 1cm;
-    flex-wrap: nowrap;
-  }
 }