Updated UI 1.7 CSS

Signed-off-by: Someshdiwan <[email protected]>

Author: Someshdiwan

site/assets/style.css

@@ -1,4 +1,4 @@
-/*  1. Color Variables & Dark‑Mode Overrides*/
+/* 1. Color Variables & Dark-Mode Overrides */
 :root {
   --bg-color: #ffffff;
   --text-color: #000000;
@@ -29,7 +29,7 @@ body {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/*  2. Sidebar Styles*/
+/* 2. Sidebar Styles */
 .sidebar {
   background-color: var(--sidebar-bg);
   width: 260px;
@@ -60,7 +60,7 @@ body {
   background-color: var(--hover-bg);
 }
 
-/*  3. Main Content Area*/
+/* 3. Main Content Area */
 .content {
   margin-left: 260px;
   padding: 1rem;
@@ -71,9 +71,7 @@ body {
   margin-left: 0;
 }
 
-/*
-  4. Toggle Buttons
-*/
+/* 4. Toggle Buttons */
 .toggle-btn {
   position: fixed;
   top: 1rem;
@@ -93,10 +91,6 @@ body {
 }
 
 .dark-toggle {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 1001;
   background: var(--button-bg);
   color: var(--button-text);
   border: none;
@@ -110,8 +104,7 @@ body {
   background-color: var(--hover-bg);
 }
 
-/* 5. Fade‑In Animation*/
-
+/* 5. Fade-In Animation */
 .fade-in {
   animation: fadeIn 0.4s ease-in;
 }
@@ -121,8 +114,7 @@ body {
   to   { opacity: 1; transform: translateY(0); }
 }
 
-
-/*  6. Responsive Sidebar (Mobile)*/
+/* 6. Responsive Sidebar (Mobile) */
 @media (max-width: 768px) {
   .sidebar {
     transform: translateX(-100%);
@@ -137,7 +129,7 @@ body {
   }
 }
 
-/*7. Image Layout Helpers*/
+/* 7. Image Layout Helpers */
 .image-row {
   display: flex;
   flex-wrap: wrap;
@@ -183,12 +175,11 @@ body {
   box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
 }
 
-/* Dark‑Mode Toggle & Live‑Time Container */
+/* 8. Dark-Mode Toggle & Live-Time Container */
 #theme-time-container {
   position: fixed;
   top: 1rem;
-  right: 1rem;      /* move to the right */
-  left: auto;       /* ensure no left offset */
+  right: 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -202,7 +193,28 @@ body {
   transition: background-color 0.3s, color 0.3s;
 }
 
-body.dark-mode #theme-time-container {
-  background-color: var(--sidebar-bg);
-  color: var(--text-color);
+/* Alignment Fix: Dark Mode Button on Left, Time Elements on Right */
+#theme-time-container .dark-toggle {
+  position: static;       /* Remove fixed positioning to follow flex layout */
+  margin-right: auto;     /* Push the dark mode button to the left */
+}
+
+/* Optional: Consistent Button Styling in Container */
+#theme-time-container button {
+  background: var(--button-bg);
+  color: var(--button-text);
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
 }
+
+#theme-time-container button:hover {
+  background-color: var(--hover-bg);
+}
+
+/* Optional: Style the Time Display */
+#live-time {
+  padding: 0.5rem; /* Matches button padding for consistency */
+}