Implemented the calendar menu that displays time, calendar and weather (WIP).

modules/icons/index.js

@@ -1,145 +1,196 @@
 export const substitutes = {
-    "transmission-gtk": "transmission",
+  "transmission-gtk": "transmission",
-    "blueberry.py": "blueberry",
+  "blueberry.py": "blueberry",
-    "Caprine": "facebook-messenger",
+  Caprine: "facebook-messenger",
-    "com.raggesilver.BlackBox-symbolic": "terminal-symbolic",
+  "com.raggesilver.BlackBox-symbolic": "terminal-symbolic",
-    "org.wezfurlong.wezterm-symbolic": "terminal-symbolic",
+  "org.wezfurlong.wezterm-symbolic": "terminal-symbolic",
-    "audio-headset-bluetooth": "audio-headphones-symbolic",
+  "audio-headset-bluetooth": "audio-headphones-symbolic",
-    "audio-card-analog-usb": "audio-speakers-symbolic",
+  "audio-card-analog-usb": "audio-speakers-symbolic",
-    "audio-card-analog-pci": "audio-card-symbolic",
+  "audio-card-analog-pci": "audio-card-symbolic",
-    "preferences-system": "emblem-system-symbolic",
+  "preferences-system": "emblem-system-symbolic",
-    "com.github.Aylur.ags-symbolic": "controls-symbolic",
+  "com.github.Aylur.ags-symbolic": "controls-symbolic",
-    "com.github.Aylur.ags": "controls-symbolic",
+  "com.github.Aylur.ags": "controls-symbolic",
-}
+};
 
 export default {
-    missing: "image-missing-symbolic",
+  missing: "image-missing-symbolic",
-    nix: {
+  nix: {
-        nix: "nix-snowflake-symbolic",
+    nix: "nix-snowflake-symbolic",
+  },
+  app: {
+    terminal: "terminal-symbolic",
+  },
+  fallback: {
+    executable: "application-x-executable",
+    notification: "dialog-information-symbolic",
+    video: "video-x-generic-symbolic",
+    audio: "audio-x-generic-symbolic",
+  },
+  ui: {
+    close: "window-close-symbolic",
+    colorpicker: "color-select-symbolic",
+    info: "info-symbolic",
+    link: "external-link-symbolic",
+    lock: "system-lock-screen-symbolic",
+    menu: "open-menu-symbolic",
+    refresh: "view-refresh-symbolic",
+    search: "system-search-symbolic",
+    settings: "emblem-system-symbolic",
+    themes: "preferences-desktop-theme-symbolic",
+    tick: "object-select-symbolic",
+    time: "hourglass-symbolic",
+    toolbars: "toolbars-symbolic",
+    warning: "dialog-warning-symbolic",
+    avatar: "avatar-default-symbolic",
+    arrow: {
+      right: "pan-end-symbolic",
+      left: "pan-start-symbolic",
+      down: "pan-down-symbolic",
+      up: "pan-up-symbolic",
     },
-    app: {
+  },
-        terminal: "terminal-symbolic",
+  audio: {
+    mic: {
+      muted: "microphone-disabled-symbolic",
+      low: "microphone-sensitivity-low-symbolic",
+      medium: "microphone-sensitivity-medium-symbolic",
+      high: "microphone-sensitivity-high-symbolic",
     },
-    fallback: {
+    volume: {
-        executable: "application-x-executable",
+      muted: "audio-volume-muted-symbolic",
-        notification: "dialog-information-symbolic",
+      low: "audio-volume-low-symbolic",
-        video: "video-x-generic-symbolic",
+      medium: "audio-volume-medium-symbolic",
-        audio: "audio-x-generic-symbolic",
+      high: "audio-volume-high-symbolic",
+      overamplified: "audio-volume-overamplified-symbolic",
     },
-    ui: {
+    type: {
-        close: "window-close-symbolic",
+      headset: "audio-headphones-symbolic",
-        colorpicker: "color-select-symbolic",
+      speaker: "audio-speakers-symbolic",
-        info: "info-symbolic",
+      card: "audio-card-symbolic",
-        link: "external-link-symbolic",
-        lock: "system-lock-screen-symbolic",
-        menu: "open-menu-symbolic",
-        refresh: "view-refresh-symbolic",
-        search: "system-search-symbolic",
-        settings: "emblem-system-symbolic",
-        themes: "preferences-desktop-theme-symbolic",
-        tick: "object-select-symbolic",
-        time: "hourglass-symbolic",
-        toolbars: "toolbars-symbolic",
-        warning: "dialog-warning-symbolic",
-        avatar: "avatar-default-symbolic",
-        arrow: {
-            right: "pan-end-symbolic",
-            left: "pan-start-symbolic",
-            down: "pan-down-symbolic",
-            up: "pan-up-symbolic",
-        },
     },
-    audio: {
+    mixer: "mixer-symbolic",
-        mic: {
+  },
-            muted: "microphone-disabled-symbolic",
+  powerprofile: {
-            low: "microphone-sensitivity-low-symbolic",
+    balanced: "power-profile-balanced-symbolic",
-            medium: "microphone-sensitivity-medium-symbolic",
+    "power-saver": "power-profile-power-saver-symbolic",
-            high: "microphone-sensitivity-high-symbolic",
+    performance: "power-profile-performance-symbolic",
-        },
+  },
-        volume: {
+  asusctl: {
-            muted: "audio-volume-muted-symbolic",
+    profile: {
-            low: "audio-volume-low-symbolic",
+      Balanced: "power-profile-balanced-symbolic",
-            medium: "audio-volume-medium-symbolic",
+      Quiet: "power-profile-power-saver-symbolic",
-            high: "audio-volume-high-symbolic",
+      Performance: "power-profile-performance-symbolic",
-            overamplified: "audio-volume-overamplified-symbolic",
-        },
-        type: {
-            headset: "audio-headphones-symbolic",
-            speaker: "audio-speakers-symbolic",
-            card: "audio-card-symbolic",
-        },
-        mixer: "mixer-symbolic",
     },
-    powerprofile: {
+    mode: {
-        balanced: "power-profile-balanced-symbolic",
+      Integrated: "processor-symbolic",
-        "power-saver": "power-profile-power-saver-symbolic",
+      Hybrid: "controller-symbolic",
-        performance: "power-profile-performance-symbolic",
     },
-    asusctl: {
+  },
-        profile: {
+  battery: {
-            Balanced: "power-profile-balanced-symbolic",
+    charging: "battery-flash-symbolic",
-            Quiet: "power-profile-power-saver-symbolic",
+    warning: "battery-empty-symbolic",
-            Performance: "power-profile-performance-symbolic",
+  },
-        },
+  bluetooth: {
-        mode: {
+    enabled: "bluetooth-active-symbolic",
-            Integrated: "processor-symbolic",
+    disabled: "bluetooth-disabled-symbolic",
-            Hybrid: "controller-symbolic",
+  },
-        },
+  brightness: {
+    indicator: "display-brightness-symbolic",
+    keyboard: "keyboard-brightness-symbolic",
+    screen: "display-brightness-symbolic",
+  },
+  powermenu: {
+    sleep: "weather-clear-night-symbolic",
+    reboot: "system-reboot-symbolic",
+    logout: "system-log-out-symbolic",
+    shutdown: "system-shutdown-symbolic",
+  },
+  recorder: {
+    recording: "media-record-symbolic",
+  },
+  notifications: {
+    noisy: "org.gnome.Settings-notifications-symbolic",
+    silent: "notifications-disabled-symbolic",
+    message: "chat-bubbles-symbolic",
+  },
+  trash: {
+    full: "user-trash-full-symbolic",
+    empty: "user-trash-symbolic",
+  },
+  mpris: {
+    shuffle: {
+      enabled: "media-playlist-shuffle-symbolic",
+      disabled: "media-playlist-consecutive-symbolic",
     },
-    battery: {
+    loop: {
-        charging: "battery-flash-symbolic",
+      none: "media-playlist-repeat-symbolic",
-        warning: "battery-empty-symbolic",
+      track: "media-playlist-repeat-song-symbolic",
+      playlist: "media-playlist-repeat-symbolic",
     },
-    bluetooth: {
+    playing: "media-playback-pause-symbolic",
-        enabled: "bluetooth-active-symbolic",
+    paused: "media-playback-start-symbolic",
-        disabled: "bluetooth-disabled-symbolic",
+    stopped: "media-playback-start-symbolic",
-    },
+    prev: "media-skip-backward-symbolic",
-    brightness: {
+    next: "media-skip-forward-symbolic",
-        indicator: "display-brightness-symbolic",
+  },
-        keyboard: "keyboard-brightness-symbolic",
+  system: {
-        screen: "display-brightness-symbolic",
+    cpu: "org.gnome.SystemMonitor-symbolic",
-    },
+    ram: "drive-harddisk-solidstate-symbolic",
-    powermenu: {
+    temp: "temperature-symbolic",
-        sleep: "weather-clear-night-symbolic",
+  },
-        reboot: "system-reboot-symbolic",
+  color: {
-        logout: "system-log-out-symbolic",
+    dark: "dark-mode-symbolic",
-        shutdown: "system-shutdown-symbolic",
+    light: "light-mode-symbolic",
-    },
+  },
-    recorder: {
+  weather: {
-        recording: "media-record-symbolic",
+    sunny: "weather-clear-symbolic",
-    },
+    clear: "weather-clear-night-symbolic",
-    notifications: {
+    partly_cloudy: "weather-few-clouds-symbolic",
-        noisy: "org.gnome.Settings-notifications-symbolic",
+    cloudy: "weather-overcast-symbolic",
-        silent: "notifications-disabled-symbolic",
+    overcast: "weather-overcast-symbolic",
-        message: "chat-bubbles-symbolic",
+    mist: "weather-overcast-symbolic",
-    },
+    patchy_rain_possible: "weather-showers-scattered-symbolic",
-    trash: {
+    patchy_snow_possible: "weather-snow-symbolic",
-        full: "user-trash-full-symbolic",
+    patchy_sleet_possible: "weather-snow-symbolic",
-        empty: "user-trash-symbolic",
+    patchy_freezing_drizzle_possible: "weather-showers-scattered-symbolic",
-    },
+    thundery_outbreaks_possible: "weather-overcast-symbolic",
-    mpris: {
+    blowing_snow: "weather-snow-symbolic",
-        shuffle: {
+    blizzard: "weather-snow-symbolic",
-            enabled: "media-playlist-shuffle-symbolic",
+    fog: "weather-fog-symbolic",
-            disabled: "media-playlist-consecutive-symbolic",
+    freezing_fog: "weather-fog-symbolic",
-        },
+    patchy_light_drizzle: "weather-showers-scattered-symbolic",
-        loop: {
+    light_drizzle: "weather-showers-symbolic",
-            none: "media-playlist-repeat-symbolic",
+    freezing_drizzle: "weather-showers-symbolic",
-            track: "media-playlist-repeat-song-symbolic",
+    heavy_freezing_drizzle: "weather-showers-symbolic",
-            playlist: "media-playlist-repeat-symbolic",
+    patchy_light_rain: "weather-showers-scattered-symbolic",
-        },
+    light_rain: "weather-showers-symbolic",
-        playing: "media-playback-pause-symbolic",
+    moderate_rain_at_times: "weather-showers-symbolic",
-        paused: "media-playback-start-symbolic",
+    moderate_rain: "weather-showers-symbolic",
-        stopped: "media-playback-start-symbolic",
+    heavy_rain_at_times: "weather-showers-symbolic",
-        prev: "media-skip-backward-symbolic",
+    heavy_rain: "weather-showers-symbolic",
-        next: "media-skip-forward-symbolic",
+    light_freezing_rain: "weather-showers-symbolic",
-    },
+    moderate_or_heavy_freezing_rain: "weather-showers-symbolic",
-    system: {
+    light_sleet: "weather-snow-symbolic",
-        cpu: "org.gnome.SystemMonitor-symbolic",
+    moderate_or_heavy_sleet: "weather-snow-symbolic",
-        ram: "drive-harddisk-solidstate-symbolic",
+    patchy_light_snow: "weather-snow-symbolic",
-        temp: "temperature-symbolic",
+    light_snow: "weather-snow-symbolic",
-    },
+    patchy_moderate_snow: "weather-snow-symbolic",
-    color: {
+    moderate_snow: "weather-snow-symbolic",
-        dark: "dark-mode-symbolic",
+    patchy_heavy_snow: "weather-snow-symbolic",
-        light: "light-mode-symbolic",
+    heavy_snow: "weather-snow-symbolic",
-    },
+    ice_pellets: "weather-showers-symbolic",
-}
+    light_rain_shower: "weather-showers-symbolic",
+    moderate_or_heavy_rain_shower: "weather-showers-symbolic",
+    torrential_rain_shower: "weather-showers-symbolic",
+    light_sleet_showers: "weather-showers-symbolic",
+    moderate_or_heavy_sleet_showers: "weather-showers-symbolic",
+    light_snow_showers: "weather-snow-symbolic",
+    moderate_or_heavy_snow_showers: "weather-snow-symbolic",
+    light_showers_of_ice_pellets: "weather-showers-symbolic",
+    moderate_or_heavy_showers_of_ice_pellets: "weather-showers-symbolic",
+    patchy_light_rain_with_thunder: "weather-showers-scattered-symbolic",
+    moderate_or_heavy_rain_with_thunder: "weather-showers-symbolic",
+    patchy_light_snow_with_thunder: "weather-snow-symbolic",
+    moderate_or_heavy_snow_with_thunder: "weather-snow-symbolic",
+  },
+};

modules/menus/bluetooth/index.js

@@ -5,7 +5,7 @@ export default () => {
   const connectedDevices = (btDevices) => {
     const noDevices = () => {
       return Widget.Box({
-        hpack: "start",
+        hpack: "center",
         hexpand: true,
         child: Widget.Label({
           class_name: "dim",

modules/menus/calendar/index.js

@@ -1,5 +1,242 @@
 import PopupWindow from "../PopupWindow.js";
 import icons from "../../icons/index.js";
+import { keyRing } from "../../../../../Documents/Keys/keyList.js";
+
+const time = Variable("", {
+  poll: [1000, 'date "+%I:%M:%S"'],
+});
+
+const period = Variable("", {
+  poll: [1000, 'date "+%p"'],
+});
+const defaultWeather = {
+  current: {
+    temp_f: 0,
+    wind_mph: 0,
+    condition: {
+      text: "Clear",
+    },
+    forecast: {
+      forecastday: [
+        {
+          day: {
+            daily_chance_of_rain: 0,
+          },
+        },
+      ],
+    },
+  },
+};
+
+const theWeather = Variable(defaultWeather);
+
+const getIcon = (fahren) => {
+  const icons = {
+    100: "",
+    75: "",
+    50: "",
+    25: "",
+    0: "",
+  };
+  const colors = {
+    100: "weather-color red",
+    75: "weather-color orange",
+    50: "weather-color lavender",
+    25: "weather-color blue",
+    0: "weather-color sky",
+  };
+
+  const threshold =
+    fahren < 0
+      ? 0
+      : [100, 75, 50, 25, 0].find((threshold) => threshold <= fahren);
+
+  return {
+    icon: icons[threshold],
+    color: colors[threshold],
+  };
+};
+
+const TimeWidget = () => {
+  return Widget.Box({
+    class_name: "calendar-menu-item-container clock",
+    hexpand: true,
+    vpack: "center",
+    hpack: "fill",
+    child: Widget.Box({
+      hexpand: true,
+      vpack: "center",
+      hpack: "center",
+      class_name: "clock-content-items",
+      children: [
+        Widget.Box({
+          hpack: "center",
+          children: [
+            Widget.Label({
+              class_name: "clock-content-time",
+              label: time.bind(),
+            }),
+          ],
+        }),
+        Widget.Box({
+          hpack: "center",
+          children: [
+            Widget.Label({
+              vpack: "end",
+              class_name: "clock-content-period",
+              label: period.bind(),
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};
+
+const CalendarWidget = () => {
+  return Widget.Box({
+    class_name: "calendar-menu-item-container calendar",
+    hpack: "fill",
+    vpack: "fill",
+    expand: true,
+    child: Widget.Box({
+      class_name: "calendar-container-box",
+      child: Widget.Calendar({
+        expand: true,
+        hpack: "fill",
+        vpack: "fill",
+        class_name: "calendar-menu-widget",
+        showDayNames: true,
+        showDetails: false,
+        showHeading: true,
+      }),
+    }),
+  });
+};
+
+const WeatherWidget = () => {
+  return Widget.Box({
+    class_name: "calendar-menu-item-container weather",
+    child: Widget.Box({
+      class_name: "weather-container-box",
+      setup: (self) => {
+        Utils.interval(6000, () => {
+          Utils.execAsync(
+            `curl "https://api.weatherapi.com/v1/forecast.json?key=${keyRing.weatherapi}&q=93722&days=1&aqi=no&alerts=no"`,
+          ).then((res) => {
+            theWeather.value = JSON.parse(res);
+          });
+        });
+
+        return (self.child = Widget.Box({
+          class_name: "calendar-menu-weather today",
+          hexpand: true,
+          children: [
+            Widget.Box({
+              vpack: "center",
+              hpack: "start",
+              class_name: "calendar-menu-weather today icon container",
+              children: [
+                Widget.Icon({
+                  class_name: "calendar-menu-weather today icon",
+                  icon: theWeather.bind("value").as((v) => {
+                    return icons.weather[
+                      v.current.condition.text
+                        .toLowerCase()
+                        .replaceAll(" ", "_")
+                    ];
+                  }),
+                }),
+              ],
+            }),
+            Widget.Box({
+              hexpand: true,
+              vpack: "center",
+              hpack: "center",
+              class_name: "calendar-menu-weather today temp container",
+              vertical: true,
+              children: [
+                Widget.Box({
+                  children: [
+                    Widget.Label({
+                      class_name: "calendar-menu-weather today temp label",
+                      label: theWeather
+                        .bind("value")
+                        .as((v) => `${Math.ceil(v.current.temp_f)}° F`),
+                    }),
+                    Widget.Label({
+                      class_name: theWeather
+                        .bind("value")
+                        .as(
+                          (v) =>
+                            `calendar-menu-weather today temp label icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
+                        ),
+                      label: theWeather
+                        .bind("value")
+                        .as((v) => getIcon(Math.ceil(v.current.temp_f)).icon),
+                    }),
+                  ],
+                }),
+                Widget.Label({
+                  class_name: theWeather
+                    .bind("value")
+                    .as(
+                      (v) =>
+                        `calendar-menu-weather today condition label ${getIcon(Math.ceil(v.current.temp_f)).color}`,
+                    ),
+                  label: theWeather
+                    .bind("value")
+                    .as((v) => v.current.condition.text),
+                }),
+              ],
+            }),
+            Widget.Box({
+              class_name: "calendar-menu-weather today stats container",
+              hpack: "end",
+              vpack: "start",
+              vertical: true,
+              children: [
+                Widget.Box({
+                  class_name: "weather wind",
+                  children: [
+                    Widget.Label({
+                      class_name: "weather wind icon",
+                      label: "",
+                    }),
+                    Widget.Label({
+                      class_name: "weather wind label",
+                      label: theWeather
+                        .bind("value")
+                        .as((v) => `${Math.floor(v.current.wind_mph)} mph`),
+                    }),
+                  ],
+                }),
+                Widget.Box({
+                  class_name: "weather precip",
+                  children: [
+                    Widget.Label({
+                      class_name: "weather precip icon",
+                      label: "",
+                    }),
+                    Widget.Label({
+                      class_name: "weather precip label",
+                      label: theWeather
+                        .bind("value")
+                        .as(
+                          (v) =>
+                            `${v.forecast.forecastday[0].day.daily_chance_of_rain}%`,
+                        ),
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        }));
+      },
+    }),
+  });
+};
 
 export default () => {
   return PopupWindow({
@@ -14,17 +251,12 @@ export default () => {
       children: [
         Widget.Box({
           class_name: "calendar-content-container",
+          vertical: true,
           children: [
             Widget.Box({
               class_name: "calendar-content-items",
-              children: [
+              vertical: true,
-                Widget.Calendar({
+              children: [TimeWidget(), CalendarWidget(), WeatherWidget()],
-                  class_name: "calendar-menu-calendar",
-                  showDayNames: true,
-                  showDetails: true,
-                  showHeading: true,
-                }),
-              ],
             }),
           ],
         }),

scss/bar/bar.scss

@@ -1,12 +1,13 @@
 @import "../colors";
 
 .bar {
-  background: $mantle;
+  background: $crust;
 }
 
 .bar_item_box_visible {
-  background: transparentize($surface0, 0.2);
+  background-color: $base2;
   border-radius: 0.35em;
+  // border: 0.15em solid $surface0;
   padding: 0.2rem 0.9rem;
   margin: 0.5rem 0.25rem;
 

scss/bar/workspace.scss

@@ -19,8 +19,8 @@
     }
 
     &.active {
-      color: $lavender;
+      color: $pink;
-      background-color: $lavender;
+      background-color: $pink;
       min-width: 11em;
       min-height: 4.5em;
     }

scss/colors.scss

@@ -38,6 +38,7 @@ $surface2: #585b70;
 $surface1: #45475a;
 $surface0: #313244;
 $base: #1e1e2e;
+$base2: #242438;
 $mantle: #181825;
 $crust: #11111b;
 

scss/main.scss

@@ -1,7 +1,7 @@
 * {
   all: unset;
   font-family: "Ubuntu Nerd Font";
-  font-size: 1.2rem;
+  font-size: 1.175rem;
   font-weight: 600;
 }
 

scss/menus/calendar.scss

@@ -2,9 +2,9 @@
 
 .calendar-content-container {
   margin-top: 0em;
-  min-width: 16em;
+  min-width: 27em;
   min-height: 6em;
-  background: $mantle;
+  background: $crust;
   border: 0.13em solid $surface0; border-radius: 0.4em;
 }
 
@@ -12,19 +12,30 @@
   margin-right: 0.50em;
 }
 
-.calendar-content-items {
+.calendar-menu-item-container {
-  margin: 1em;
+  border-radius: 0.4em;
+  margin-bottom: 1.35em;
+  background: $base;
 }
 
-.calendar-menu-calendar {
+.calendar-content-items {
-  all: unset;
+  margin: 1.35em;
-  padding: 1em;
+}
+
+.calendar-container-box {
+  margin: 0.75em;
+  margin-bottom: 0em;
+}
+
+.calendar-menu-widget {
+  margin-top: 2em;
+  border-radius: 0.4em;
   color: $text;
 
   &:selected {
-    box-shadow: inset 0 -0.4em 0 0 $pink,
+    box-shadow: inset 0 -0.5em 0 0 $pink,
-      inset 0 -0.2em 0 0 $mantle,
+      inset -0.4em -0.3em 0 0 $base,
-      inset 0 0 0 0.01em $mantle;
+      inset 0.4em 0 0 0.01em $base;
     color: $pink;
     border-radius: 0em;
   }
@@ -33,17 +44,122 @@
     background-color: transparent;
     color: $teal;
   }
-
+  &.button {
+    color: $text;
+    font-weight: 900;
+    font-size: 900em;
+  }
+  &:hover {
+    color: $pink;
+  }
   &.highlight {
     border: 2em solid $pink;
     background-color: transparent;
     color: $pink;
   }
-
   &:indeterminate {
     color: $surface2;
   }
 
   font-size: 1.1em;
-  padding: 0.2em;
+  padding: 0.35em;
 }
+
+.clock-content-items {
+  min-height: 6em;
+
+  .clock-content-time {
+    font-size: 4em;
+    color: $pink;
+  }
+  .clock-content-period {
+    font-size: 1.75em;
+    margin-bottom: 0.7em;
+    margin-right: -0.875em;
+    color: $teal;
+  }
+}
+
+.calendar-menu-item-container.weather {
+  margin-bottom: 0em;
+}
+
+.weather-container-box {
+  color: $red;
+  margin: 1.5em;
+  min-width: 3em;
+  // min-height: 10em;
+
+  .calendar-menu-weather.today.icon {
+    image {
+      color: $pink;
+      font-size: 5em;
+      // margin-right: 0.3em;
+    }
+  }
+
+  .calendar-menu-weather.today.temp.label {
+    color: $text;
+    margin-left: 0.2em;
+    font-size: 2.5em;
+  }
+
+  .calendar-menu-weather.today.condition.label {
+    color: $teal;
+    font-size: 1.75em;
+    margin-left: -1.4em;
+  }
+  
+  // .calendar-menu-weather.today.condition.label.weather-color.red {
+  //   color: $red;
+  // }
+  // .calendar-menu-weather.today.condition.label.weather-color.orange {
+  //   color: $orange;
+  // }
+  // .calendar-menu-weather.today.condition.label.weather-color.lavender {
+  //   color: $lavender;
+  // }
+  // .calendar-menu-weather.today.condition.label.weather-color.blue {
+  //   color: $blue;
+  // }
+  // .calendar-menu-weather.today.condition.label.weather-color.sky {
+  //   color: $sky;
+  // }
+
+  .calendar-menu-weather.today.temp.label.icon.weather-color.red {
+    color: $red;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
+    color: $orange;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
+    color: $lavender;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
+    color: $blue;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
+    color: $sky;
+  }
+}
+
+.calendar-menu-weather.today.stats.container {
+  // margin-left: 2.2em;
+  color: $pink;
+
+  .weather.label {
+    margin-left: 0.35em;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+

scss/menus/power.scss

@@ -10,35 +10,35 @@ $popover-padding: 0.6rem * 1.6;
 
 window#verification .verification {
     @include floating-widget;
-    padding: 0.5rem * 1.6 * 1.5;
+    padding: 0.35em * 1.6 * 1.5;
-    min-width: 20rem;
+    min-width: 20em;
-    min-height: 8rem;
+    min-height: 6em;
     font-size: 1.3em;
 
     .text-box {
-        margin-bottom: 0.4rem;
+        margin-bottom: 0.3em;
 
         .title {
             font-size: 1.5em;
             color: $maroon;
-            margin-bottom: 0.75rem;
+            margin-bottom: 0.5em;
         }
 
         .desc {
             color: $lavender;
             font-size: 1em;
-            margin-bottom: 0.75rem;
+            margin-bottom: 0.55em;
-            padding: 1.15rem 2.25rem;
+            padding: 1em 3em;
         }
     }
 
     .verification-button {
         background: $crust;
-        padding: 0.75rem 0rem;
+        padding: 0.7em 0em;
-        margin: 0.4rem 1.9rem;
+        margin: 0.4em 1.7em;
-        border: 0.2rem solid;
+        border: 0.15em solid;
         border-color: $crust;
-        border-radius: 0.4rem;
+        border-radius: 0.3em;
         opacity: 1;
         transition: border-color 0.2s ease-in-out;
         transition: opacity .3s ease-in-out;
@@ -105,6 +105,8 @@ window#powermenu .powermenu {
 
 .widget-button {
     border-color: $crust;
+    min-width: 4.5em;
+    min-height: 4.5em;
     opacity: 1;
     transition: border-color 0.2s ease-in-out;
     transition: opacity .3s ease-in-out;

style.css

@@ -1,7 +1,7 @@
 * {
   all: unset;
   font-family: "Ubuntu Nerd Font";
-  font-size: 1.2rem;
+  font-size: 1.175rem;
   font-weight: 600;
 }
 
@@ -344,8 +344,8 @@ spinner:checked {
   min-height: 4.5em;
 }
 .workspaces label.active {
-  color: #b4befe;
+  color: #f5c2e7;
-  background-color: #b4befe;
+  background-color: #f5c2e7;
   min-width: 11em;
   min-height: 4.5em;
 }
@@ -400,11 +400,11 @@ spinner:checked {
 }
 
 .bar {
-  background: #181825;
+  background: #11111b;
 }
 
 .bar_item_box_visible {
-  background: rgba(49, 50, 68, 0.8);
+  background-color: #242438;
   border-radius: 0.35em;
   padding: 0.2rem 0.9rem;
   margin: 0.5rem 0.25rem;
@@ -611,32 +611,32 @@ window#verification .verification {
   color: #9278b6;
   border-radius: 0.5rem;
   padding: 1.5rem;
-  padding: 1.2rem;
+  padding: 0.84em;
-  min-width: 20rem;
+  min-width: 20em;
-  min-height: 8rem;
+  min-height: 6em;
   font-size: 1.3em;
 }
 window#verification .verification .text-box {
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.3em;
 }
 window#verification .verification .text-box .title {
   font-size: 1.5em;
   color: #eba0ac;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5em;
 }
 window#verification .verification .text-box .desc {
   color: #b4befe;
   font-size: 1em;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.55em;
-  padding: 1.15rem 2.25rem;
+  padding: 1em 3em;
 }
 window#verification .verification .verification-button {
   background: #11111b;
-  padding: 0.75rem 0rem;
+  padding: 0.7em 0em;
-  margin: 0.4rem 1.9rem;
+  margin: 0.4em 1.7em;
-  border: 0.2rem solid;
+  border: 0.15em solid;
   border-color: #11111b;
-  border-radius: 0.4rem;
+  border-radius: 0.3em;
   opacity: 1;
   transition: border-color 0.2s ease-in-out;
   transition: opacity 0.3s ease-in-out;
@@ -697,6 +697,8 @@ window#powermenu .powermenu.box {
 
 .widget-button {
   border-color: #11111b;
+  min-width: 4.5em;
+  min-height: 4.5em;
   opacity: 1;
   transition: border-color 0.2s ease-in-out;
   transition: opacity 0.3s ease-in-out;
@@ -1108,9 +1110,9 @@ image {
 
 .calendar-content-container {
   margin-top: 0em;
-  min-width: 16em;
+  min-width: 27em;
   min-height: 6em;
-  background: #181825;
+  background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.4em;
 }
@@ -1119,35 +1121,114 @@ image {
   margin-right: 0.5em;
 }
 
-.calendar-content-items {
+.calendar-menu-item-container {
-  margin: 1em;
+  border-radius: 0.4em;
+  margin-bottom: 1.35em;
+  background: #1e1e2e;
 }
 
-.calendar-menu-calendar {
+.calendar-content-items {
-  all: unset;
+  margin: 1.35em;
-  padding: 1em;
+}
+
+.calendar-container-box {
+  margin: 0.75em;
+  margin-bottom: 0em;
+}
+
+.calendar-menu-widget {
+  margin-top: 2em;
+  border-radius: 0.4em;
   color: #cdd6f4;
   font-size: 1.1em;
-  padding: 0.2em;
+  padding: 0.35em;
 }
-.calendar-menu-calendar:selected {
+.calendar-menu-widget:selected {
-  box-shadow: inset 0 -0.4em 0 0 #f5c2e7, inset 0 -0.2em 0 0 #181825, inset 0 0 0 0.01em #181825;
+  box-shadow: inset 0 -0.5em 0 0 #f5c2e7, inset -0.4em -0.3em 0 0 #1e1e2e, inset 0.4em 0 0 0.01em #1e1e2e;
   color: #f5c2e7;
   border-radius: 0em;
 }
-.calendar-menu-calendar.header {
+.calendar-menu-widget.header {
   background-color: transparent;
   color: #94e2d5;
 }
-.calendar-menu-calendar.highlight {
+.calendar-menu-widget.button {
+  color: #cdd6f4;
+  font-weight: 900;
+  font-size: 900em;
+}
+.calendar-menu-widget:hover {
+  color: #f5c2e7;
+}
+.calendar-menu-widget.highlight {
   border: 2em solid #f5c2e7;
   background-color: transparent;
   color: #f5c2e7;
 }
-.calendar-menu-calendar:indeterminate {
+.calendar-menu-widget:indeterminate {
   color: #585b70;
 }
 
+.clock-content-items {
+  min-height: 6em;
+}
+.clock-content-items .clock-content-time {
+  font-size: 4em;
+  color: #f5c2e7;
+}
+.clock-content-items .clock-content-period {
+  font-size: 1.75em;
+  margin-bottom: 0.7em;
+  margin-right: -0.875em;
+  color: #94e2d5;
+}
+
+.calendar-menu-item-container.weather {
+  margin-bottom: 0em;
+}
+
+.weather-container-box {
+  color: #f38ba8;
+  margin: 1.5em;
+  min-width: 3em;
+}
+.weather-container-box .calendar-menu-weather.today.icon image {
+  color: #f5c2e7;
+  font-size: 5em;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label {
+  color: #cdd6f4;
+  margin-left: 0.2em;
+  font-size: 2.5em;
+}
+.weather-container-box .calendar-menu-weather.today.condition.label {
+  color: #94e2d5;
+  font-size: 1.75em;
+  margin-left: -1.4em;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.red {
+  color: #f38ba8;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
+  color: #fab387;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
+  color: #b4befe;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
+  color: #89b4fa;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
+  color: #89dceb;
+}
+
+.calendar-menu-weather.today.stats.container {
+  color: #f5c2e7;
+}
+.calendar-menu-weather.today.stats.container .weather.label {
+  margin-left: 0.35em;
+}
+
 .notification-card-container {
   margin-top: 3.5rem;
 }