From 2c1ec69023df86edc1a605c9beefc2e2d647eb9e Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Thu, 26 Feb 2026 06:54:41 +0545
Subject: [PATCH] feat(styles): restructure UI styles and add main composition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New Features
- Added styles/main.css aggregating imports and global defaults
- Renamed battery.css → battery-widget.css for widget-specific styling

Enhancements
- Added smooth transitions and hover effects in panel.css
- Improved OSD styling with rounded corners, translucent background, and better spacing
- Updated button margins, paddings, and border‑radius for consistency

Bug Fixes
- Fixed missing border‑radius and spacing in panel buttons
- Corrected workspace button active/urgent styling
---
 styles/{battery.css => battery-widget.css} |  0
 styles/main.css                            | 34 +++++++++++++
 styles/osd.css                             | 38 +++++++++++++++
 styles/panel.css                           | 55 ++++++++++++----------
 4 files changed, 101 insertions(+), 26 deletions(-)
 rename styles/{battery.css => battery-widget.css} (100%)
 create mode 100644 styles/main.css

diff --git a/styles/battery.css b/styles/battery-widget.css
similarity index 100%
rename from styles/battery.css
rename to styles/battery-widget.css
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..5077bb1
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,34 @@
+@import url("./colors.css");
+@import url("./panel.css");
+@import url("./dock.css");
+@import url("./switcher.css");
+@import url("./launcher.css");
+@import url("./osd.css");
+@import url("./controlcenter.css");
+@import url("./notification.css");
+@import url("./dropdown.css");
+@import url("./about.css");
+@import url("./notification-center.css");
+@import url("./player.css");
+@import url("./widgets.css");
+@import url("./tray.css");
+@import url("./battery-widget.css");
+@import url("./lock.css");
+@import url("./todo.css");
+
+* {
+    all: unset;
+    color: var(--foreground);
+    font-size: unset;
+    font-family: "SF Pro Rounded";
+}
+
+#corner {
+    background-color: var(--shadow);
+    border-radius: 0;
+}
+
+#corner-container {
+    min-width: 20px;
+    min-height: 20px;
+}
diff --git a/styles/osd.css b/styles/osd.css
index e69de29..38c82d9 100644
--- a/styles/osd.css
+++ b/styles/osd.css
@@ -0,0 +1,38 @@
+#osd {
+    background-color: alpha(#fff, 0.09);
+    padding: 12px 20px;
+    margin: 70px;
+    min-height: 200px;
+    border-radius: 16px;
+}
+
+#osd scale {
+    min-width: 180px;
+}
+
+#osd trough {
+    background: var(--surface);
+    min-height: 15px;
+    margin-right: 4px;
+    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border-radius: 16px;
+}
+
+#osd trough highlight {
+    border-radius: 100px;
+    background: var(--primary);
+    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#osd.muted trough highlight,
+#osd.muted slider,
+#osd scale.muted trough highlight,
+#osd scale.muted slider {
+    background-color: var(--surface-bright);
+}
+
+#brighntess-icons.muted,
+#vol-icon.muted,
+#mic-icon.muted {
+    color: var(--outline);
+}
diff --git a/styles/panel.css b/styles/panel.css
index 62d97a1..1e57dc3 100644
--- a/styles/panel.css
+++ b/styles/panel.css
@@ -1,12 +1,13 @@
 #panel {
-  background-color: @bg;
-  margin: -4px 0;
+    background-color: @bg;
+    margin: -4px 0;
+    transition: all 120ms ease-in-out;
 }
 
 #modules-left,
 #modules-right {
-  margin: 0 5px;
-  padding: 2px 0;
+    margin: 0 5px;
+    padding: 2px 0;
 }
 
 #panel-button:hover,
@@ -15,8 +16,8 @@
 #bt-button:hover,
 #tray-button:hover,
 #global-menu:hover,
-#workspaces > button:hover {
-  background-color: @hover;
+#workspaces>button:hover {
+    background-color: @hover;
 }
 
 #panel-button,
@@ -24,41 +25,43 @@
 #network-button,
 #bt-button,
 #tray-button {
-  margin: 5px 0;
-  padding: 0 2px;
-  border-radius: 8px;
+    margin: 5px 0;
+    padding: 0 2px;
+    border-radius: 8px;
 }
 
 #menubar label,
 #battery-label,
 #date-time {
-  font-weight: 500;
+    font-weight: 500;
 }
+
 #global-menu {
-  margin: 5px 2px;
-  padding: 0 5px;
-  border-radius: 5px;
+    margin: 5px 2px;
+    padding: 0 5px;
+    border-radius: 5px;
 }
+
 #date-time {
-  margin: 0 4px;
+    margin: 0 4px;
 }
 
-#workspaces > button {
-  margin: 6px 0;
-  padding: 0 16px;
-  border-radius: 8px;
-  min-width: 12px;
-  border: 1px solid @border;
+#workspaces>button {
+    margin: 6px 0;
+    padding: 0 16px;
+    border-radius: 8px;
+    min-width: 12px;
+    border: 1px solid @border;
 }
 
-#workspaces > button.active {
-  background-color: @active;
+#workspaces>button.active {
+    background-color: @active;
 }
 
-#workspaces > button.active label {
-  color: var(--shadow);
+#workspaces>button.active label {
+    color: var(--shadow);
 }
 
-#workspaces > button.urgent {
-  background-color: @urgent;
+#workspaces>button.urgent {
+    background-color: @urgent;
 }