add quick actions tab

modules/home/wayland/apps/eww/bar/css/_clock.scss

@@ -1,29 +1,20 @@
+
 calendar {
-  padding: 5pt;
+  padding: 2pt 1pt;
+  font-size: 10pt;
 
-  :selected {
-    @include color-accent;
-  }
-
-  .header {
+  header {
+    padding: 2pt 0;
     @include color-body;
   }
 
-  .highlight {
-    @include color-accent;
-    font-weight: bold;
-  }
-
-  label {
-    font-size: 20pt;
-    @include color-accent;
-  }
-
-  :indeterminate {
-    color: $base03;
-  }
+  :selected      { @include color-accent; }
+  .highlight     { @include color-accent; font-weight: bold; }
+  :indeterminate { color: $base03; }
 }
 
+.cal-box .sys-section-header { margin-bottom: 4pt; }
+
 
 .hour, .month {
   font-weight: bolder;
@@ -46,7 +37,36 @@ calendar {
 
 // Clock window accents
 .weather-accent { background-color: $base0A; }
+.cal-accent     { background-color: $base0B; }
+.bri-accent     { background-color: $base09; }
 .vol-accent     { background-color: $base0D; }
+.quick-accent   { background-color: $base0E; }
+
+// Quick actions
+.quick-grid { margin-top: 2pt; }
+
+.quick-btn {
+  @include background-base2;
+  @include border-radius;
+  padding: 8pt 4pt;
+  margin: 4px;
+  min-width: 0;
+  min-height: 0;
+  border: none;
+
+  &:hover { 
+    @include background-active; 
+    .quick-icon, .quick-label {color: $base01;}
+  }
+}
+
+.quick-btn-active {
+  .quick-icon  { @include color-accent; }
+  .quick-label { @include color-accent; }
+}
+
+.quick-icon  { font-size: 1.5em; @include color-body; }
+.quick-label { font-size: 0.68em; margin-top: 3pt; @include color-body; }
 
 // Weather section
 .weather-main  { margin-bottom: 8pt; }
@@ -57,10 +77,18 @@ calendar {
 
 // Volume section
 .ctrl-row   { margin-bottom: 4pt; }
-.ctrl-icon  { font-size: 1.1em; min-width: 22pt; @include color-body; }
-.ctrl-muted { @include color-inactive; }
+.ctrl-icon        { font-size: 1.1em; min-width: 22pt; @include border-radius; @include color-body; }
+.ctrl-icon:hover  { @include background-active; }
+.ctrl-muted       { @include color-inactive; }
 .ctrl-value { font-size: 0.72em; min-width: 28pt; @include color-active; }
 
+scale.ctrl-slider.ctrl-slider-muted {
+  trough {
+    highlight { background-color: $base03; }
+    slider    { background-color: $base03; }
+  }
+}
+
 scale.ctrl-slider {
   padding: 2pt 4pt;
   trough {