huge updates

styles/launcher.css

@@ -43,6 +43,11 @@
   min-height: 52px;
 }
 
+#launcher-content.calendar {
+  min-height: 420px;
+  min-width: 420px;
+}
+
 #launcher-content {
   min-width: 420px;
 }
@@ -63,7 +68,7 @@
   color: @onSecondaryContainer;
   margin: 11px;
   margin-left: 0px;
-  min-width: 54px;
+  min-width: 48px;
   min-height: 44px;
   border-radius: 100%;
 }
@@ -125,6 +130,9 @@
 /*
  * ── wallpaper ─────────────────────────────────────────────────────────
 */
+#search-entry-walls {
+  min-width: 300px;
+}
 
 #wallpaper-icons:selected {
   background-color: @surfaceBright;
@@ -410,3 +418,80 @@
   border-radius: 20px;
   min-height: 200px;
 }
+
+/*
+ * ── calendar ──────────────────────────────────────────────────────────
+*/
+
+#header {
+  border-radius: 16px;
+  padding: 4px;
+}
+
+#weekday-row {
+  border-radius: 8px;
+  padding: 4px;
+}
+
+#month-label,
+#weekday-label,
+#day-label {
+  font-weight: bold;
+}
+
+#day-label,
+#day-empty {
+  min-width: 41px;
+  min-height: 30px;
+}
+
+#day-empty {
+  color: @surfaceBright;
+}
+
+#weekday-label {
+  color: @primary;
+}
+
+#calendar-grid {
+  border-radius: 16px;
+  padding: 4px;
+}
+
+#day-label.current-day {
+  background-color: @primary;
+  color: @onPrimary;
+  border-radius: 20px;
+}
+
+#prev-month-button,
+#next-month-button {
+  border-radius: 8px;
+  padding: 4px;
+}
+
+#prev-month-button:hover,
+#next-month-button:hover {
+  background-color: @surfaceBright;
+}
+
+#prev-month-button:active,
+#next-month-button:active {
+  background-color: @primary;
+}
+
+#month-button-label {
+  color: @primary;
+  font-size: 20px;
+}
+
+#prev-month-button:active #month-button-label,
+#next-month-button:active #month-button-label {
+  color: @surface;
+}
+
+#prev-month-day,
+#next-month-day {
+  /*color: lighter(@surfaceBright);*/
+  color: mix(@onSurfaceVariant, transparent, 0.6);
+}

styles/osd.css

@@ -1,42 +1,44 @@
-#osd {
-  background: @surfaceContainer;
-  padding: 10px 4px 10px 4px;
-  border-radius: 14px;
-  margin-bottom: 16px;
-  min-width: 190px;
+.osd-panel {
+  background-color: transparent;
 }
 
-#osd scale {
+#osd-label {
+  font-size: 17px;
+  font-weight: bold;
+}
+
+#osd-value {
+  font-weight: bold;
+  font-size: 25px;
+}
+
+#progress-container {
+  border-radius: 6px;
+  min-height: 12px;
   min-width: 150px;
 }
 
-#osd slider {
-  color: @onPrimary;
+#progress-fill {
   background-color: @primary;
-  background-size: 20px 20px;
-  min-width: 5px;
-  min-height: 14px;
-  border-radius: 100px;
-  padding: 0px;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-top: -16px;
-  margin-bottom: -16px;
-  box-shadow:
-    -4px 0px 0px 1px @surfaceContainer,
-    4px 0px 0px 1px @surfaceContainer;
+  border-radius: 6px;
+  min-height: 8px;
+  transition: min-width 0.3s ease-in-out;
 }
 
-#osd trough {
-  background: @secondaryContainer;
-  min-height: 10px;
-  margin-right: 4px;
-  border-radius: 100px;
+#progress-background {
+  background-color: @surfaceContainer;
+  border-radius: 6px;
+  min-height: 8px;
+  min-width: 150px;
 }
 
-#osd highlight {
-  border-radius: 100px 0px 0px 100px;
-  background: @primary;
+#control-section {
+  padding: 10px;
+  border-radius: 10px;
+  background-color: @surface;
+}
+
+.osd-hidden {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
 }