From 4e0fa33ba5c073d4abc46e2c025da9c9a054ab3b Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Sat, 1 Mar 2025 21:09:33 +0545
Subject: [PATCH] update css

---
 styles/bar.css          |  20 +++----
 styles/main.css         |  76 ++++++++++++--------------
 styles/notification.css | 115 +++++++++++++++++++++++-----------------
 3 files changed, 109 insertions(+), 102 deletions(-)

diff --git a/styles/bar.css b/styles/bar.css
index 49803cb..5cca825 100644
--- a/styles/bar.css
+++ b/styles/bar.css
@@ -3,14 +3,14 @@
 }
 
 #bar.start-container {
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 2px;
+  padding-bottom: 2px;
   border-bottom-right-radius: 15px;
 }
 
 #bar.end-container {
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 2px;
+  padding-bottom: 2px;
   border-bottom-left-radius: 15px;
 }
 
@@ -25,15 +25,11 @@
 
 #bar.hidden {
   opacity: 0;
-  padding: 3px;
-  margin-bottom: -52px;
   transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
 }
 
 #bar.visible {
   opacity: 1;
-  padding: 3px;
-  margin-bottom: 0px;
   transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
 }
 
@@ -54,7 +50,7 @@
 
 #button-bar-label {
   color: @primary;
-  font-size: 24px;
+  font-size: 20px;
   border-radius: 8px;
   transition: all 0.1s ease;
 }
@@ -99,7 +95,7 @@
 #updated-icon {
   color: @primary;
   font-size: 20px;
-  padding: 8px;
+  padding: 4px;
   border-radius: 99px;
   transition: all 0.1s ease;
 }
@@ -172,7 +168,7 @@
 #battery-balanced-label,
 #battery-performance-label {
   color: @outline;
-  font-size: 24px;
+  font-size: 20px;
 }
 
 #battery-save:hover,
@@ -317,7 +313,7 @@ menu > menuitem:hover > label {
 }
 
 #system-indicator-icon {
-  font-size: 24px;
+  font-size: 20px;
 }
 
 /*
diff --git a/styles/main.css b/styles/main.css
index 5d9aa20..c97593e 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -6,10 +6,10 @@
 @import "./dashboard.css";
 
 * {
-    all: unset;
-    color: @foreground;
-    font-size: 16px;
-    font-family: "Product Sans", sans-serif;
+  all: unset;
+  color: @foreground;
+  font-size: 16px;
+  font-family: "Product Sans", sans-serif;
 }
 
 /*
@@ -17,66 +17,60 @@
 */
 
 tooltip {
-    background-color: @surfaceContainer;
-    border-radius: 10px;
-    padding: 6px 10px;
-    outline: none;
-    border: none;
-    box-shadow: none;
-    animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
-}
-
-tooltip label {
-    color: @onSurface;
-    outline: none;
-    border: none;
-    box-shadow: none;
-    font-weight: normal;
+  border: solid 1px;
+  border-radius: 10px;
+  border-color: @surface;
+  background-color: @shadow;
+  animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
 }
 
 @keyframes tooltipShow {
-    from {
-        opacity: 0;
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 1;
-    }
+  to {
+    opacity: 1;
+  }
+}
+
+tooltip > * {
+  padding: 6px 10px;
+  border-radius: 10px;
 }
 
 /*
  * ── dock ──────────────────────────────────────────────────────────────
 */
 #dock-icon {
-    padding: 0px 2px 0px 2px;
+  padding: 0px 2px 0px 2px;
 }
 
 #dock {
-    padding: 10px;
-    background-color: alpha(@background, 0.8);
-    box-shadow: inset 0 -0.5px 0 0.5px alpha(@outlineVariant, 0.4);
-    border: 0.5px solid alpha(@outlineVariant, 0.4);
-    border-radius: 12px;
-    margin-bottom: 2px;
+  padding: 10px;
+  background-color: alpha(@shadow, 0.5);
+  border: 0.5px solid alpha(@outlineVariant, 0.4);
+  border-radius: 12px;
+  margin-bottom: 2px;
 }
 
 #dock-separator {
-    border-right: 1px solid alpha(@foreground, 0.3);
+  border-right: 1px solid alpha(@foreground, 0.5);
 }
 
 #dock-app-button {
-    padding: 2px;
-    margin-left: 2px;
-    margin-right: 2px;
-    border-radius: 12px;
+  padding: 2px;
+  margin-left: 2px;
+  margin-right: 2px;
+  border-radius: 12px;
 }
 
 .show-dock {
-    opacity: 1;
-    margin: 0;
+  opacity: 1;
+  margin: 0;
 }
 
 .hide-dock {
-    opacity: 1;
-    margin: -80px;
+  opacity: 1;
+  margin: -80px;
 }
diff --git a/styles/notification.css b/styles/notification.css
index 16f1817..7b8ea88 100644
--- a/styles/notification.css
+++ b/styles/notification.css
@@ -1,63 +1,80 @@
-#notification {
-  padding: 16px;
-  border: solid 1px @outlineVariant;
+#notification-action-buttons button.start-action {
   border-radius: 20px;
-  margin-bottom: 12px;
-  background-color: @surfaceContainerLow;
-  min-width: 350px;
-}
-
-.notification-header .summary {
-  font-size: 0.92rem;
-  font-weight: bold;
-}
-
-.notification-body .body {
-  color: darker(@foreground);
-  font-weight: 600;
-  font-size: 0.92rem;
-}
-
-#notification .close-button {
-  border-radius: 100px;
-  min-width: 40px;
-  min-height: 40px;
-}
-
-#notification .close-button:hover {
-  background: alpha(@foreground, 0.2);
-  transition: background 0.15s ease-in-out;
-  border-radius: 100px;
-}
-
-#notification-action-button button.start-action {
-  margin-left: 0;
-}
-
-#notification-action-button button.end-action {
-  margin-right: 0;
 }
 
 #notification-action-buttons button {
-  padding: 0.6rem;
-  font-weight: 600;
-  border-radius: 100px;
-  background-color: transparent;
+  background-color: @surfaceContainer;
+  padding: 8px;
+  border-radius: 20px;
 }
 
 #notification-action-buttons button:hover {
-  background-color: lighter(@outlineVariant);
+  background-color: @surfaceBright;
 }
 
-#notification-icon {
-  margin-right: 5px;
+#notification-action-buttons button:active {
+  background-color: @primary;
 }
 
-.image {
-  border-radius: 30px;
+#notification-action-buttons button:active #button-label {
+  color: @shadow;
 }
 
-#notification-circular-progress-bar {
-  border: solid 0px @outlineVariant;
-  color: transparent;
+#notification-image image {
+  border-radius: 16px;
+  color: @onSurface;
+}
+
+#notification-summary,
+#button-label {
+  font-weight: bold;
+}
+
+#notification-summary {
+  font-weight: bold;
+  color: @primary;
+}
+
+#notification-app-name {
+  color: @outline;
+}
+
+#action-button {
+  margin-top: 8px;
+}
+
+#notification-box {
+  border-radius: 20px;
+  padding: 16px;
+  background-color: @surfaceContainerLow;
+  margin: 4px;
+  min-width: 336px;
+}
+
+#boxed-notification-revealer {
+  margin-top: -14px;
+}
+
+#notif-close-button {
+  background-color: @surface;
+  border-radius: 16px;
+  padding: 4px;
+}
+
+#notif-close-button:hover,
+#notif-close-button:focus {
+  background-color: @surfaceBright;
+}
+
+#notif-close-button:active {
+  background-color: @error;
+}
+
+#notif-close-label {
+  color: @error;
+  font-size: 20px;
+}
+
+#notif-close-button:active #notif-close-label {
+  color: @shadow;
 }