Minor: Refactor the code-base for better organization and compartmentalization. (#934)

* Clean up unused code

* Fix media player formatting issue for labels with new line characteres.

* Refactor the media player handlers into a class.

* More code cleanup and organize shared weather utils into distinct classes.

* Flatten some nesting.

* Move weather manager in dedicated class and build HTTP Utility class for Rest API calling.

* Remove logs

* Rebase master merge

* Reorg code (WIP)

* More reorg

* Delete utility scripts

* Reorg options

* Finish moving all options over

* Fix typescript issues

* Update options imports to default

* missed update

* Screw barrel files honestly, work of the devil.

* Only initialize power profiles if power-profiles-daemon is running.

* Fix window positioning and weather service naming

* style dir

* More organization

* Restructure types to be closer to their source

* Remove lib types and constants

* Update basic weather object to be saner with extensibility.

* Service updates

* Fix initialization strategy for services.

* Fix Config Manager to only emit changed objects and added missing temp converters.

* Update storage service to handle unit changes.

* Added cpu temp sensor auto-discovery

* Added missing JSDocs to services

* remove unused

* Migrate to network service.

* Fix network password issue.

* Move out password input into helper

* Rename password mask constant to be less double-negativey.

* Dropdown menu rename

* Added a component to edit JSON in the settings dialog (rough/WIP)

* Align settings

* Add and style JSON Editor.

* Adjust padding

* perf(shortcuts): ⚡ avoid unnecessary polling when shortcuts are disabled

Stops the recording poller when shortcuts are disabled, preventing redundant polling and reducing resource usage.

* Fix types and return value if shortcut not enabled.

* Move the swww daemon checking process outside of the wallpaper service into a dedicated deamon lifecyle processor.

* Add more string formatters and use title case for weather status (as it was).

* Fix startup errors.

* Rgba fix

* Remove zod from dependencies

---------

Co-authored-by: KernelDiego <gonzalezdiego.contact@gmail.com>

src/style/index.ts

@@ -0,0 +1,220 @@
+import { MatugenColors } from '../lib/options/types';
+import { initializeTrackers } from './optionsTrackers';
+import { readFile, writeFile } from 'astal/file';
+import { App } from 'astal/gtk3';
+import { initializeHotReload } from './utils/hotReload';
+import { Opt } from 'src/lib/options';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import options from 'src/configuration';
+import { MatugenService } from 'src/services/matugen';
+import { isHexColor } from 'src/lib/validation/colors';
+
+const matugenService = MatugenService.getInstance();
+
+/**
+ * Central manager for theme styling throughout the application
+ * Handles the transformation of theme options into compiled CSS
+ */
+class ThemeStyleManager {
+    /**
+     * Orchestrates the full theme regeneration process
+     * Falls back to standard theme if Matugen is unavailable
+     */
+    public async applyCss(): Promise<void> {
+        if (!SystemUtilities.checkDependencies('sass')) return;
+
+        try {
+            const variables = await this._generateThemeVariables();
+
+            await this._compileSass(variables);
+
+            this._applyCss();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    /**
+     * Decides whether to use Matugen-generated colors or standard theme variables
+     * Controls the main theming strategy based on user configuration
+     *
+     * @returns An array of SCSS variable declarations
+     */
+    private async _generateThemeVariables(): Promise<string[]> {
+        const useMatugen = options.theme.matugen.get();
+        if (!useMatugen) {
+            return this._extractStandardVariables();
+        }
+
+        const matugenColors = await matugenService.generateMatugenColors();
+        if (!matugenColors) {
+            return this._extractStandardVariables();
+        }
+
+        return this._extractMatugenizedVariables(matugenColors);
+    }
+
+    /**
+     * Recursively processes theme objects to generate SCSS variables
+     * Handles nested properties by creating properly namespaced variable names
+     *
+     * @returns An array of SCSS variable declarations using standard theme values
+     */
+    private _extractStandardVariables(): string[] {
+        const cssVariables: string[] = [];
+
+        const optArray = options.toArray();
+
+        for (const opt of optArray) {
+            const currentPath = opt.id;
+
+            if (!currentPath.startsWith('theme.')) {
+                continue;
+            }
+
+            const variableName = this._buildCssVariableName(currentPath);
+            const variable = this._buildCssVariable(variableName, opt);
+
+            cssVariables.push(variable);
+        }
+
+        return cssVariables;
+    }
+
+    /**
+     * Alternative variable extraction when using Matugen's color generation
+     * Processes all theme options and applies Matugen's palette where appropriate
+     *
+     * @param matugenColors - Color palette generated by Matugen service
+     * @returns An array of SCSS variable declarations with Matugen colors applied
+     */
+    private async _extractMatugenizedVariables(matugenColors: MatugenColors): Promise<string[]> {
+        try {
+            const result: string[] = [];
+            const optArray = options.toArray();
+
+            for (const opt of optArray) {
+                const currentPath = opt.id;
+
+                if (!currentPath.startsWith('theme.')) {
+                    continue;
+                }
+
+                const optionValue = opt.get();
+                const variableName = this._buildCssVariableName(currentPath);
+
+                if (!isHexColor(optionValue)) {
+                    result.push(`$${variableName}: ${optionValue};`);
+                    continue;
+                }
+
+                const defaultThemeValue = opt.initial;
+
+                if (!isHexColor(defaultThemeValue)) {
+                    continue;
+                }
+
+                const matugenColor = matugenService.getMatugenHex(defaultThemeValue, matugenColors);
+                result.push(`$${variableName}: ${matugenColor};`);
+            }
+
+            return result;
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+    }
+
+    /**
+     * Handles object properties that have values needing transformation
+     * Creates properly formatted SCSS variable declarations
+     *
+     * @param variableName - CSS-friendly variable name
+     * @param property - Option object containing the property value
+     * @returns Formatted SCSS variable declaration
+     */
+    private _buildCssVariable(variableName: string, property: Opt): string {
+        const propertyValue = property.get();
+
+        return `$${variableName}: ${propertyValue};`;
+    }
+
+    /**
+     * Transforms dotted paths into hyphenated CSS variable names
+     * Strips the "theme." prefix for cleaner variable naming
+     *
+     * @param path - Dot-notation path of an option (e.g., "theme.background.primary")
+     * @returns CSS-friendly variable name (e.g., "background-primary")
+     */
+    private _buildCssVariableName(path: string): string {
+        return path.replace('theme.', '').split('.').join('-');
+    }
+
+    /**
+     * Executes the SCSS compilation process with generated variables
+     * Combines main SCSS with custom variables and module styles
+     *
+     * @param themeVariables - Array of SCSS variable declarations for user customization options
+     *
+     * File paths used in compilation:
+     * - themeVariablesPath: Contains all user-configurable variables (theme colors, margins, borders, etc.)
+     * - appScssPath: The application's main SCSS entry point file
+     * - entryScssPath: A temporary file that combines all SCSS sources in the correct order
+     * - modulesScssPath: User-defined custom module styles
+     * - compiledCssPath: The final compiled CSS that gets used by the application
+     */
+    private async _compileSass(themeVariables: string[]): Promise<void> {
+        const themeVariablesPath = `${TMP}/variables.scss`;
+        const appScssPath = `${SRC_DIR}/src/style/main.scss`;
+        const entryScssPath = `${TMP}/entry.scss`;
+        const modulesScssPath = `${CONFIG_DIR}/modules.scss`;
+        const compiledCssPath = `${TMP}/main.css`;
+
+        const scssImports = [`@import '${themeVariablesPath}';`];
+
+        writeFile(themeVariablesPath, themeVariables.join('\n'));
+
+        let combinedScss = readFile(appScssPath);
+        combinedScss = `${scssImports.join('\n')}\n${combinedScss}`;
+
+        const moduleCustomizations = readFile(modulesScssPath);
+        combinedScss = `${combinedScss}\n${moduleCustomizations}`;
+
+        writeFile(entryScssPath, combinedScss);
+
+        await SystemUtilities.bash(
+            `sass --load-path=${SRC_DIR}/src/style ${entryScssPath} ${compiledCssPath}`,
+        );
+    }
+
+    /**
+     * Loads the compiled CSS into the application
+     *
+     * @remarks
+     * Uses the compiled CSS file generated in _compileSass to apply styles to the application
+     */
+    private _applyCss(): void {
+        const compiledCssPath = `${TMP}/main.css`;
+
+        App.apply_css(compiledCssPath, true);
+    }
+}
+
+const themeManager = new ThemeStyleManager();
+const optionsToWatch = [
+    'font',
+    'theme',
+    'bar.flatButtons',
+    'bar.position',
+    'bar.battery.charging',
+    'bar.battery.blocks',
+];
+
+initializeTrackers(themeManager.applyCss.bind(themeManager));
+initializeHotReload();
+
+options.handler(optionsToWatch, themeManager.applyCss.bind(themeManager));
+
+await themeManager.applyCss();
+
+export { themeManager };

src/style/main.scss

@@ -0,0 +1,57 @@
+* {
+    all: unset;
+    font-family: $font-name;
+    font-style: $font-style;
+    font-size: $font-size;
+    font-weight: $font-weight;
+}
+
+//general
+@import 'scss/common/common.scss';
+@import 'scss/common/floating-widget.scss';
+@import 'scss/common/widget-button.scss';
+@import 'scss/common/popover_menu.scss';
+
+//general scsss
+@import 'scss/common/general';
+
+//modules - bar
+@import 'scss/bar/bar';
+@import 'scss/bar/menu';
+@import 'scss/bar/audio';
+@import 'scss/bar/media';
+@import 'scss/bar/network';
+@import 'scss/bar/bluetooth';
+@import 'scss/bar/clock';
+@import 'scss/bar/workspace';
+@import 'scss/bar/window_title';
+@import 'scss/bar/systray';
+@import 'scss/bar/notifications';
+@import 'scss/bar/battery';
+@import 'scss/bar/style';
+
+//notifications
+@import 'scss/notifications/popups';
+
+//modules - menus
+@import 'scss/menus/menu';
+@import 'scss/menus/power';
+@import 'scss/menus/powerdropdown';
+@import 'scss/menus/audiomenu';
+@import 'scss/menus/network';
+@import 'scss/menus/bluetooth';
+@import 'scss/menus/media';
+@import 'scss/menus/notifications';
+@import 'scss/menus/calendar';
+@import 'scss/menus/energy';
+@import 'scss/menus/dashboard';
+
+//osd
+@import 'scss/osd/index';
+
+//settings dialog
+@import 'scss/settings/dialog';
+@import 'scss/settings/json-editor';
+
+//bar separator
+@import 'scss/bar/module-separator';

src/style/optionsTrackers.ts

@@ -0,0 +1,50 @@
+import options from 'src/configuration';
+import { normalizeToAbsolutePath } from 'src/lib/path/helpers';
+import icons from '../lib/icons/icons';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import { WallpaperService } from 'src/services/wallpaper';
+import { isAnImage } from 'src/lib/validation/images';
+
+const wallpaperService = WallpaperService.getInstance();
+
+const { matugen } = options.theme;
+
+const ensureMatugenWallpaper = (): void => {
+    const wallpaperPath = options.wallpaper.image.get();
+
+    if (matugen.get() && (!wallpaperPath.length || !isAnImage(normalizeToAbsolutePath(wallpaperPath)))) {
+        SystemUtilities.notify({
+            summary: 'Matugen Failed',
+            body: "Please select a wallpaper in 'Theming > General' first.",
+            iconName: icons.ui.warning,
+        });
+        matugen.set(false);
+    }
+};
+
+export const initializeTrackers = (resetCssFunc: () => void): void => {
+    matugen.subscribe(() => {
+        ensureMatugenWallpaper();
+    });
+
+    wallpaperService.connect('changed', () => {
+        console.info('Wallpaper changed, regenerating Matugen colors...');
+        if (options.theme.matugen.get()) {
+            resetCssFunc();
+        }
+    });
+
+    options.wallpaper.image.subscribe(() => {
+        if (
+            (!wallpaperService.isRunning() && options.theme.matugen.get()) ||
+            !options.wallpaper.enable.get()
+        ) {
+            console.info('Wallpaper path changed, regenerating Matugen colors...');
+            resetCssFunc();
+        }
+        if (options.wallpaper.pywal.get() && SystemUtilities.checkDependencies('wal')) {
+            const wallpaperPath = options.wallpaper.image.get();
+            SystemUtilities.bash(`wal -i "${wallpaperPath}"`);
+        }
+    });
+};

src/style/scss/bar/audio.scss

@@ -0,0 +1,59 @@
+.bar-button-icon.volume {
+    font-size: 1.3em;
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
+}
+
+.bar-button-label.volume {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
+    margin-left: $bar-buttons-volume-spacing;
+}
+
+.style2 {
+    .bar-button-icon.volume {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-volume-icon_background);
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-volume-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
+    }
+
+    .bar-button-label.volume {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-volume-spacing;
+        margin-left: 0em;
+    }
+    &.no-label.volume-container {
+        .bar-button-icon.volume {
+            border-top-right-radius: if(
+                $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-right-radius: if(
+                $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+    }
+}
+.bar_item_box_visible.volume {
+    border: if(
+        $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-volume-border),
+        0em
+    );
+}

src/style/scss/bar/bar.scss

@@ -0,0 +1,184 @@
+.bar {
+    * {
+        font-size: $font-size * $bar-scaling * 0.01;
+    }
+
+    .bar-panel-container {
+        margin-top: if($bar-floating, $bar-margin_top, 0em);
+        margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
+        margin-left: if($bar-floating, $bar-margin_sides, 0em);
+        margin-right: if($bar-floating, $bar-margin_sides, 0em);
+    }
+
+    .bar-panel {
+        $bar-opacity-ratio: $bar-opacity * 0.01;
+        $transparency-value: 1 - $bar-opacity-ratio;
+        background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
+        border-radius: if($bar-floating, $bar-border_radius, 0em);
+
+        margin: if($bar-enableShadow, $bar-shadowMargins, 0px);
+        box-shadow: if($bar-enableShadow, $bar-shadow, 0 0 0 0);
+
+        &.withBorder {
+            border-top: if(
+                $bar-border_location == 'top' or $bar-border_location == 'horizontal' or $bar-border_location == 'full',
+                $bar-border_width solid,
+                none
+            );
+            border-bottom: if(
+                $bar-border_location == 'bottom' or $bar-border_location == 'horizontal' or $bar-border_location ==
+                    'full',
+                $bar-border_width solid,
+                none
+            );
+            border-left: if(
+                $bar-border_location == 'left' or $bar-border_location == 'vertical' or $bar-border_location == 'full',
+                $bar-border_width solid,
+                none
+            );
+            border-right: if(
+                $bar-border_location == 'right' or $bar-border_location == 'vertical' or $bar-border_location == 'full',
+                $bar-border_width solid,
+                none
+            );
+            border-color: $bar-border_color;
+        }
+    }
+}
+
+$bar-button-background-opacity-ratio: $bar-buttons-background_opacity * 0.01;
+$transparency-value: 1 - $bar-button-background-opacity-ratio;
+
+$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity * 0.01;
+$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
+
+.bar_item_box_visible {
+    background-color: transparentize($bar-buttons-background, $transparency-value);
+    border-radius: $bar-buttons-radius;
+    margin: $bar-buttons-y_margins $bar-buttons-spacing;
+    opacity: $bar-buttons-opacity * 0.01;
+    padding: $bar-buttons-padding_y $bar-buttons-padding_x;
+
+    &.style3 {
+        border-bottom-left-radius: 1.3em;
+        border-top-right-radius: 1.3em;
+    }
+
+    &.style4 {
+        border-bottom-right-radius: 1.3em;
+        border-top-left-radius: 1.3em;
+    }
+
+    &:hover {
+        opacity: $bar-buttons-background_hover_opacity * 0.01;
+    }
+
+    &.battery {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background),
+            $transparency-value
+        );
+    }
+
+    &.bluetooth {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background),
+            $transparency-value
+        );
+    }
+
+    &.clock {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background),
+            $transparency-value
+        );
+    }
+
+    &.media {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background),
+            $transparency-value
+        );
+    }
+
+    &.dashboard {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background),
+            $transparency-value
+        );
+    }
+
+    &.network {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background),
+            $transparency-value
+        );
+    }
+
+    &.notifications {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background),
+            $transparency-value
+        );
+    }
+
+    &.systray {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background),
+            $transparency-value
+        );
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &.volume {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background),
+            $transparency-value
+        );
+    }
+
+    &.windowtitle {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background),
+            $transparency-value
+        );
+    }
+
+    &.workspaces {
+        background-color: transparentize(
+            if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background),
+            $transparency-value
+        );
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &.style2 {
+        padding: 0em;
+    }
+}
+
+.no-label.style2 {
+    .bar-button-icon {
+        border-top-right-radius: $bar-buttons-radius;
+        border-bottom-right-radius: $bar-buttons-radius;
+    }
+}
+
+.bar_item_box_hidden {
+    background: none;
+    border-radius: 0rem;
+    padding: 0rem 0rem 0rem 0rem;
+    margin: 0rem 0rem 0rem 0rem;
+}
+
+.box-left {
+    margin-left: $bar-outer_spacing;
+}
+
+.box-right {
+    margin-right: $bar-outer_spacing;
+}

src/style/scss/bar/battery.scss

@@ -0,0 +1,64 @@
+.bar-button-label.battery {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
+    margin-left: $bar-buttons-battery-spacing;
+}
+
+.bar-button-icon.battery {
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
+    font-size: 1.15em;
+}
+
+.style2 {
+    .bar-button-icon.battery {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-battery-icon_background);
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-battery-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+
+        &:last-child {
+            border-radius: $bar-buttons-radius;
+        }
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
+    }
+
+    .bar-button-label.battery {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-battery-spacing;
+        margin-left: 0em;
+    }
+    &.no-label.battery-container {
+        .bar-button-icon.battery {
+            border-top-right-radius: if(
+                $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-right-radius: if(
+                $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+    }
+}
+
+.bar_item_box_visible.battery {
+    border: if(
+        $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-battery-border),
+        0em
+    );
+}

src/style/scss/bar/bluetooth.scss

@@ -0,0 +1,72 @@
+.bar-button-icon.bluetooth {
+    font-size: 1.15em;
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
+}
+
+.bar-button-label.bluetooth {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
+    margin-left: $bar-buttons-bluetooth-spacing;
+}
+
+.bluetooth-disabled-menu {
+    font-weight: bold;
+    font-size: 1.1rem;
+    color: $surface2;
+    margin: 6rem 0rem;
+}
+
+.menu-button-isactive {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
+}
+
+.style2 {
+    .bar-button-icon.bluetooth {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-bluetooth-icon_background);
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-bluetooth-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
+    }
+
+    .bar-button-label.bluetooth {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-bluetooth-spacing;
+        margin-left: 0em;
+    }
+    &.no-label.bluetooth-container {
+        .bar-button-icon.bluetooth {
+            border-top-right-radius: if(
+                $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-right-radius: if(
+                $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+    }
+}
+
+.bar_item_box_visible.bluetooth {
+    border: if(
+        $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid
+            if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-bluetooth-border),
+        0em
+    );
+}

src/style/scss/bar/clock.scss

@@ -0,0 +1,60 @@
+.bar-button-label.clock {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
+    margin-left: $bar-buttons-clock-spacing;
+}
+
+.bar-button-icon.clock {
+    font-size: 1.2em;
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
+}
+
+.style2 {
+    .bar-button-icon.clock {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-clock-icon_background);
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-clock-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
+    }
+
+    .bar-button-label.clock {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-clock-spacing;
+        margin-left: 0em;
+    }
+    &.no-label.clock-container {
+        .bar-button-icon.clock {
+            border-top-right-radius: if(
+                $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-right-radius: if(
+                $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+    }
+}
+
+.bar_item_box_visible.clock {
+    border: if(
+        $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-clock-border),
+        0em
+    );
+}

src/style/scss/bar/media.scss

@@ -0,0 +1,44 @@
+.bar-button-label.media {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
+    margin-left: $bar-buttons-media-spacing;
+}
+
+.bar-button-icon.media {
+    font-size: 1.2em;
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
+}
+
+.style2 {
+    .bar-button-icon.media {
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-media-icon_background);
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-media-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
+    }
+
+    .bar-button-label.media {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-media-spacing;
+        margin-left: 0em;
+    }
+}
+
+.bar_item_box_visible.media {
+    border: if(
+        $bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-media-border),
+        0em
+    );
+}

src/style/scss/bar/menu.scss

@@ -0,0 +1,26 @@
+.bar-menu_label {
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-icon);
+    font-size: 1.3em;
+    border-radius: $bar-buttons-radius;
+}
+
+.bar_item_box_visible.style2.dashboard {
+    background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-dashboard-background);
+
+    .bar-menu_label {
+        color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);
+    }
+}
+
+.style2 .bar-menu_label {
+    padding: $bar-buttons-padding_y $bar-buttons-padding_x;
+}
+
+.bar_item_box_visible.dashboard {
+    border: if(
+        $bar-buttons-dashboard-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid
+            if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-dashboard-border),
+        0em
+    );
+}

src/style/scss/bar/module-separator.scss

@@ -0,0 +1,6 @@
+.bar-module-separator {
+    background-color: $bar-buttons-separator-color;
+    opacity: $bar-buttons-opacity * 0.01;
+    margin: $bar-buttons-separator-margins;
+    min-width: $bar-buttons-separator-width;
+}

src/style/scss/bar/network.scss

@@ -0,0 +1,59 @@
+.bar-button-label.network-label {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
+    margin-left: $bar-buttons-network-spacing;
+}
+
+.bar-button-icon.network-icon {
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
+}
+
+.style2 {
+    .bar-button-icon.network-icon {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-network-icon_background);
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-network-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
+    }
+
+    .bar-button-label.network-label {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-network-spacing;
+        margin-left: 0em;
+    }
+    &.no-label.network-container {
+        .bar-button-icon.network-icon {
+            border-top-right-radius: if(
+                $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-right-radius: if(
+                $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+    }
+}
+
+.bar_item_box_visible.network {
+    border: if(
+        $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-network-border),
+        0em
+    );
+}

src/style/scss/bar/notifications.scss

@@ -0,0 +1,71 @@
+.bar-button-icon.notifications {
+    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
+    font-size: 1.3em;
+}
+
+.bar-button-label.notifications {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
+    margin-left: $bar-buttons-notifications-spacing;
+    min-width: 1em;
+}
+
+.style2 {
+    .bar-button-icon.notifications {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        background: if(
+            $bar-buttons-monochrome,
+            $bar-buttons-icon_background,
+            $bar-buttons-notifications-icon_background
+        );
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-notifications-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        &:last-child {
+            border-radius: $bar-buttons-radius;
+        }
+
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
+    }
+
+    .bar-button-label.notifications {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-notifications-spacing;
+        margin-left: 0em;
+    }
+
+    &.no-label.notifications-container {
+        .bar-button-icon.notifications {
+            border-top-right-radius: if(
+                $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-right-radius: if(
+                $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+    }
+}
+
+.bar_item_box_visible.notifications {
+    border: if(
+        $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid
+            if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-notifications-border),
+        0em
+    );
+}

src/style/scss/bar/style.scss

@@ -0,0 +1,425 @@
+/*
+ * #################################
+ * #       Default Styling         #
+ * #################################
+ */
+.bar-button-label {
+    margin-left: 0.5em;
+    color: $text;
+}
+
+.module-icon {
+    font-size: 1em;
+    min-width: 0.7em;
+}
+
+.style2 {
+    .bar-button-icon {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: 0.5em;
+        background: $text;
+        color: $bar-background;
+    }
+
+    .bar-button-label {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: 0.5em;
+        margin-left: 0em;
+    }
+}
+
+$style-module-defaults: (
+    'label-color': $bar-buttons-text,
+    'icon-color': $bar-buttons-icon,
+    'icon-background': $bar-buttons-icon_background,
+    'label-background': $bar-buttons-background,
+    'border-enabled': false,
+    'border-color': $text,
+    'icon-size': 1em,
+    'inner-spacing': 0.5em,
+);
+
+/*
+ * #################################
+ * #        Styling Function       #
+ * #################################
+ */
+@mixin styleModule($class, $config: ()) {
+    $config: map-merge($style-module-defaults, $config);
+    $text-color: map-get($config, 'text-color');
+    $icon-color: map-get($config, 'icon-color');
+    $icon-background: map-get($config, 'icon-background');
+    $label-background: map-get($config, 'label-background');
+    $spacing: map-get($config, 'inner-spacing');
+    $border-enabled: map-get($config, 'border-enabled');
+    $border-color: map-get($config, 'border-color');
+    $icon-size: map-get($config, 'icon-size');
+
+    $bar-button-background-opacity-ratio: $bar-buttons-background_opacity * 0.01;
+    $transparency-value: 1 - $bar-button-background-opacity-ratio;
+
+    $bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity * 0.01;
+    $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
+    .bar_item_box_visible {
+        &.#{$class} {
+            background: transparentize(
+                if($bar-buttons-monochrome, $bar-buttons-background, $label-background),
+                $transparency-value
+            );
+            border: if(
+                $border-enabled or $bar-buttons-enableBorders,
+                $bar-buttons-borderSize solid
+                    if($bar-buttons-monochrome, $bar-buttons-borderColor, $border-color),
+                0em
+            );
+
+            &.style2 {
+                background: transparent;
+            }
+
+            &:hover {
+                opacity: $bar-buttons-background_hover_opacity * 0.01;
+            }
+        }
+    }
+
+    .module-label.#{$class} {
+        color: if($bar-buttons-monochrome, $bar-buttons-text, $text-color);
+        margin-left: $spacing;
+        border-radius: $bar-buttons-radius;
+    }
+
+    .module-icon.#{$class} {
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $icon-color);
+        font-size: if($icon-size, $icon-size, 1em);
+    }
+
+    .style2 {
+        .module-icon.#{$class} {
+            background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $icon-background);
+            padding-right: $spacing;
+            color: if($bar-buttons-monochrome, $bar-buttons-icon, $icon-color);
+            border-top-left-radius: if(
+                $border-enabled or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-left-radius: if(
+                $border-enabled or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+
+        .module-label.#{$class} {
+            background: transparentize($label-background, $transparency-value);
+            padding-left: $spacing * 1.5;
+            margin-left: 0em;
+            border-top-left-radius: 0em;
+            border-bottom-left-radius: 0em;
+        }
+        &.no-label.#{$class} {
+            .module-icon {
+                border-top-right-radius: if(
+                    $border-enabled or $bar-buttons-enableBorders,
+                    $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                    $bar-buttons-radius
+                );
+                border-bottom-right-radius: if(
+                    $border-enabled or $bar-buttons-enableBorders,
+                    $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                    $bar-buttons-radius
+                );
+            }
+        }
+    }
+}
+
+/*
+ * #################################
+ * #      Mic Module Styling       #
+ * #################################
+ */
+@include styleModule(
+    'mic',
+    (
+        'text-color': $bar-buttons-modules-microphone-text,
+        'icon-color': $bar-buttons-modules-microphone-icon,
+        'icon-background': $bar-buttons-modules-microphone-icon_background,
+        'label-background': $bar-buttons-modules-microphone-background,
+        'inner-spacing': $bar-buttons-modules-microphone-spacing,
+        'border-enabled': $bar-buttons-modules-microphone-enableBorder,
+        'border-color': $bar-buttons-modules-microphone-border,
+        'icon-size': 1.3em,
+    )
+);
+
+/*
+ * #################################
+ * #      Ram Module Styling       #
+ * #################################
+ */
+@include styleModule(
+    'ram',
+    (
+        'text-color': $bar-buttons-modules-ram-text,
+        'icon-color': $bar-buttons-modules-ram-icon,
+        'icon-background': $bar-buttons-modules-ram-icon_background,
+        'label-background': $bar-buttons-modules-ram-background,
+        'inner-spacing': $bar-buttons-modules-ram-spacing,
+        'border-enabled': $bar-buttons-modules-ram-enableBorder,
+        'border-color': $bar-buttons-modules-ram-border,
+        'icon-size': 1em,
+    )
+);
+
+/*
+ * #################################
+ * #      Cpu Module Styling       #
+ * #################################
+ */
+@include styleModule(
+    'cpu',
+    (
+        'text-color': $bar-buttons-modules-cpu-text,
+        'icon-color': $bar-buttons-modules-cpu-icon,
+        'icon-background': $bar-buttons-modules-cpu-icon_background,
+        'label-background': $bar-buttons-modules-cpu-background,
+        'inner-spacing': $bar-buttons-modules-cpu-spacing,
+        'border-enabled': $bar-buttons-modules-cpu-enableBorder,
+        'border-color': $bar-buttons-modules-cpu-border,
+        'icon-size': 1.05em,
+    )
+);
+
+/*
+ * #################################
+ * #    Cpu Temp Module Styling    #
+ * #################################
+ */
+@include styleModule(
+    'cpu-temp',
+    (
+        'text-color': $bar-buttons-modules-cpuTemp-text,
+        'icon-color': $bar-buttons-modules-cpuTemp-icon,
+        'icon-background': $bar-buttons-modules-cpuTemp-icon_background,
+        'label-background': $bar-buttons-modules-cpuTemp-background,
+        'inner-spacing': $bar-buttons-modules-cpuTemp-spacing,
+        'border-enabled': $bar-buttons-modules-cpuTemp-enableBorder,
+        'border-color': $bar-buttons-modules-cpuTemp-border,
+        'icon-size': 1.05em,
+    )
+);
+
+/*
+ * #################################
+ * #    Storage Module Styling     #
+ * #################################
+ */
+@include styleModule(
+    'storage',
+    (
+        'text-color': $bar-buttons-modules-storage-text,
+        'icon-color': $bar-buttons-modules-storage-icon,
+        'icon-background': $bar-buttons-modules-storage-icon_background,
+        'label-background': $bar-buttons-modules-storage-background,
+        'inner-spacing': $bar-buttons-modules-storage-spacing,
+        'border-enabled': $bar-buttons-modules-storage-enableBorder,
+        'border-color': $bar-buttons-modules-storage-border,
+        'icon-size': 1.3em,
+    )
+);
+
+/*
+ * #################################
+ * #    Netstat Module Styling     #
+ * #################################
+ */
+@include styleModule(
+    'netstat',
+    (
+        'text-color': $bar-buttons-modules-netstat-text,
+        'icon-color': $bar-buttons-modules-netstat-icon,
+        'icon-background': $bar-buttons-modules-netstat-icon_background,
+        'label-background': $bar-buttons-modules-netstat-background,
+        'inner-spacing': $bar-buttons-modules-netstat-spacing,
+        'border-enabled': $bar-buttons-modules-netstat-enableBorder,
+        'border-color': $bar-buttons-modules-netstat-border,
+        'icon-size': 1.2em,
+    )
+);
+
+/*
+ * #################################
+ * #    KB Layout Module Styling   #
+ * #################################
+ */
+@include styleModule(
+    'kblayout',
+    (
+        'text-color': $bar-buttons-modules-kbLayout-text,
+        'icon-color': $bar-buttons-modules-kbLayout-icon,
+        'icon-background': $bar-buttons-modules-kbLayout-icon_background,
+        'label-background': $bar-buttons-modules-kbLayout-background,
+        'inner-spacing': $bar-buttons-modules-kbLayout-spacing,
+        'border-enabled': $bar-buttons-modules-kbLayout-enableBorder,
+        'border-color': $bar-buttons-modules-kbLayout-border,
+        'icon-size': 1.2em,
+    )
+);
+
+/*
+ * #################################
+ * #    Updates Module Styling     #
+ * #################################
+ */
+@include styleModule(
+    'updates',
+    (
+        'text-color': $bar-buttons-modules-updates-text,
+        'icon-color': $bar-buttons-modules-updates-icon,
+        'icon-background': $bar-buttons-modules-updates-icon_background,
+        'label-background': $bar-buttons-modules-updates-background,
+        'inner-spacing': $bar-buttons-modules-updates-spacing,
+        'border-enabled': $bar-buttons-modules-updates-enableBorder,
+        'border-color': $bar-buttons-modules-updates-border,
+        'icon-size': 1.2em,
+    )
+);
+
+/*
+ * #################################
+ * #    Submap Module Styling      #
+ * #################################
+ */
+@include styleModule(
+    'submap',
+    (
+        'text-color': $bar-buttons-modules-submap-text,
+        'icon-color': $bar-buttons-modules-submap-icon,
+        'icon-background': $bar-buttons-modules-submap-icon_background,
+        'label-background': $bar-buttons-modules-submap-background,
+        'inner-spacing': $bar-buttons-modules-submap-spacing,
+        'border-enabled': $bar-buttons-modules-submap-enableBorder,
+        'border-color': $bar-buttons-modules-submap-border,
+        'icon-size': 1.2em,
+    )
+);
+
+/*
+ * #################################
+ * #    Weather Module Styling     #
+ * #################################
+ */
+@include styleModule(
+    'weather-custom',
+    (
+        'text-color': $bar-buttons-modules-weather-text,
+        'icon-color': $bar-buttons-modules-weather-icon,
+        'icon-background': $bar-buttons-modules-weather-icon_background,
+        'label-background': $bar-buttons-modules-weather-background,
+        'inner-spacing': $bar-buttons-modules-weather-spacing,
+        'border-enabled': $bar-buttons-modules-weather-enableBorder,
+        'border-color': $bar-buttons-modules-weather-border,
+        'icon-size': 1.2em,
+    )
+);
+
+/*
+ * #################################
+ * #    Power Module Styling       #
+ * #################################
+ */
+@include styleModule(
+    'powermodule',
+    (
+        'text-color': $bar-buttons-modules-power-icon,
+        'icon-color': $bar-buttons-modules-power-icon,
+        'icon-background': $bar-buttons-modules-power-icon_background,
+        'label-background': $bar-buttons-modules-power-background,
+        'inner-spacing': $bar-buttons-modules-power-spacing,
+        'border-enabled': $bar-buttons-modules-power-enableBorder,
+        'border-color': $bar-buttons-modules-power-border,
+        'icon-size': 1.3em,
+    )
+);
+
+/*
+ * #################################
+ * #      Hyprsunset Styling       #
+ * #################################
+ */
+@include styleModule(
+    'hyprsunset',
+    (
+        'text-color': $bar-buttons-modules-hyprsunset-text,
+        'icon-color': $bar-buttons-modules-hyprsunset-icon,
+        'icon-background': $bar-buttons-modules-hyprsunset-icon_background,
+        'label-background': $bar-buttons-modules-hyprsunset-background,
+        'inner-spacing': $bar-buttons-modules-hyprsunset-spacing,
+        'border-enabled': $bar-buttons-modules-hyprsunset-enableBorder,
+        'border-color': $bar-buttons-modules-hyprsunset-border,
+        'icon-size': 1.3em,
+    )
+);
+
+/*
+ * #################################
+ * #       Hypridle Styling        #
+ * #################################
+ */
+@include styleModule(
+    'hypridle',
+    (
+        'text-color': $bar-buttons-modules-hypridle-text,
+        'icon-color': $bar-buttons-modules-hypridle-icon,
+        'icon-background': $bar-buttons-modules-hypridle-icon_background,
+        'label-background': $bar-buttons-modules-hypridle-background,
+        'inner-spacing': $bar-buttons-modules-hypridle-spacing,
+        'border-enabled': $bar-buttons-modules-hypridle-enableBorder,
+        'border-color': $bar-buttons-modules-hypridle-border,
+        'icon-size': 1.075em,
+    )
+);
+
+/*
+ * #################################
+ * #       Cava Styling            #
+ * #################################
+ */
+@include styleModule(
+    'cava',
+    (
+        'text-color': $bar-buttons-modules-cava-text,
+        'icon-color': $bar-buttons-modules-cava-icon,
+        'icon-background': $bar-buttons-modules-cava-icon_background,
+        'label-background': $bar-buttons-modules-cava-background,
+        'inner-spacing': $bar-buttons-modules-cava-spacing,
+        'border-enabled': $bar-buttons-modules-cava-enableBorder,
+        'border-color': $bar-buttons-modules-cava-border,
+        'icon-size': 1.2em,
+    )
+);
+
+/*
+ * #################################
+ * #      World Clock Styling      #
+ * #################################
+ */
+@include styleModule(
+    'worldclock',
+    (
+        'text-color': $bar-buttons-modules-worldclock-text,
+        'icon-color': $bar-buttons-modules-worldclock-icon,
+        'icon-background': $bar-buttons-modules-worldclock-icon_background,
+        'label-background': $bar-buttons-modules-worldclock-background,
+        'inner-spacing': $bar-buttons-modules-worldclock-spacing,
+        'border-enabled': $bar-buttons-modules-worldclock-enableBorder,
+        'border-color': $bar-buttons-modules-worldclock-border,
+        'icon-size': 1.2em,
+    )
+);

src/style/scss/bar/systray.scss

@@ -0,0 +1,23 @@
+.systray button:not(:first-child) {
+    margin-left: $bar-buttons-systray-spacing;
+}
+
+.systray-icon {
+    font-size: 1.3em;
+
+    &.txt-icon {
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-systray-customIcon);
+    }
+}
+
+.style2.systray {
+    padding: $bar-buttons-padding_y $bar-buttons-padding_x;
+}
+
+.bar_item_box_visible.systray {
+    border: if(
+        $bar-buttons-systray-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-systray-border),
+        0em
+    );
+}

src/style/scss/bar/window_title.scss

@@ -0,0 +1,68 @@
+.bar-button-icon.windowtitle {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-icon);
+}
+
+.bar-button-label.windowtitle {
+    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
+    margin-left: $bar-buttons-windowtitle-spacing;
+
+    &.no-icon {
+        margin-left: 0;
+    }
+}
+
+.style2 {
+    .bar-button-icon.windowtitle {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-windowtitle-icon_background);
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: $bar-buttons-windowtitle-spacing;
+        border-top-left-radius: if(
+            $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        border-bottom-left-radius: if(
+            $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+            $bar-buttons-radius
+        );
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon);
+    }
+
+    .bar-button-label.windowtitle {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: $bar-buttons-windowtitle-spacing;
+        margin-left: 0em;
+
+        &.no-icon {
+            padding-left: $bar-buttons-padding_x;
+        }
+    }
+    &.no-label.windowtitle-container {
+        .bar-button-icon.windowtitle {
+            border-top-right-radius: if(
+                $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+            border-bottom-right-radius: if(
+                $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
+                $bar-buttons-radius
+            );
+        }
+    }
+}
+
+.bar_item_box_visible.windowtitle {
+    border: if(
+        $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid
+            if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-windowtitle-border),
+        0em
+    );
+}

src/style/scss/bar/workspace.scss

@@ -0,0 +1,93 @@
+.workspaces {
+    label {
+        font-size: 0.2em;
+        min-width: $bar-buttons-workspaces-pill-width;
+        min-height: $bar-buttons-workspaces-pill-height;
+        border-radius: $bar-buttons-workspaces-pill-radius;
+        transition: 300ms * 0.5;
+        background-color: $bar-buttons-workspaces-available;
+        color: $bar-buttons-workspaces-available;
+
+        &.occupied {
+            background-color: $bar-buttons-workspaces-occupied;
+            color: $bar-buttons-workspaces-occupied;
+            min-width: $bar-buttons-workspaces-pill-width;
+            min-height: $bar-buttons-workspaces-pill-height;
+        }
+
+        &.active {
+            background-color: $bar-buttons-workspaces-active;
+            color: $bar-buttons-workspaces-active;
+            min-width: $bar-buttons-workspaces-pill-active_width;
+            min-height: $bar-buttons-workspaces-pill-height;
+        }
+
+        &.workspace-icon {
+            background-color: transparent;
+            min-width: 0em;
+            min-height: 0em;
+            border-radius: 0em;
+            transition: 300ms * 0.5;
+            font-size: 1em;
+        }
+
+        &.workspace-number {
+            background-color: transparent;
+            min-width: 0em;
+            min-height: 0em;
+            border-radius: 0em;
+            transition: 0ms;
+            padding: 0em $bar-buttons-workspaces-numbered_inactive_padding;
+            font-size: $bar-buttons-workspaces-fontSize;
+        }
+
+        &.underline {
+            border-top: 0.1em solid transparent;
+            border-bottom: 0.1em solid $bar-buttons-workspaces-numbered_active_underline_color;
+            transition: 0ms;
+        }
+
+        &.highlight {
+            transition: 0ms;
+            color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
+            border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
+            background-color: $bar-buttons-workspaces-active;
+            padding: 0em $bar-buttons-workspaces-numbered_active_highlight_padding;
+        }
+    }
+}
+
+.workspace-button {
+    &:hover label {
+        color: $bar-buttons-workspaces-hover;
+
+        &.default {
+            background-color: $bar-buttons-workspaces-hover;
+        }
+    }
+
+    &:hover .can_underline {
+        border-top: 0.1em solid transparent;
+        border-bottom: 0.1em solid
+            if($bar-buttons-monochrome, $bar-buttons-workspaces-hover, $bar-buttons-workspaces-hover);
+    }
+
+    &:hover .can_highlight {
+        background-color: $bar-buttons-workspaces-hover;
+        color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
+        border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
+    }
+}
+
+.style2.workspaces {
+    padding: $bar-buttons-padding_y $bar-buttons-padding_x;
+}
+
+.bar_item_box_visible.workspaces {
+    border: if(
+        $bar-buttons-workspaces-enableBorder or $bar-buttons-enableBorders,
+        $bar-buttons-borderSize solid
+            if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-workspaces-border),
+        0em
+    );
+}

src/style/scss/colors.scss

@@ -0,0 +1,45 @@
+$primary-color: #cdd6f4;
+$dark-background: #0e0e1e;
+$light-background: #1e1e2e;
+$orange: #fab387;
+$lightteal: #bac2de;
+$grey: #585b70;
+$lightgrey: #a6adc8;
+$lightblue: #74c7ec;
+
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext2: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$base2: #242438;
+$mantle: #181825;
+$crust: #11111b;
+
+$default_fg: $primary-color;
+$default_bg: #000000;
+$primary_bg: $dark-background;
+// $primary_fg: mix($mauve, $primary_bg, 70%);
+$primary_fg: mix($mauve, $primary_bg, 70%);
+$secondary_fg: $green;
+$secondary_bg: $light-background;
+$shadow-color: #1e1e2e;

src/style/scss/common/common.scss

@@ -0,0 +1,240 @@
+@import '../colors';
+
+menu {
+    margin: 6px;
+    padding: 6px;
+    background-color: $primary_bg;
+    background-clip: border-box;
+    border-radius: 12px;
+    border: 1px solid $secondary_bg;
+
+    menuitem {
+        transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+        min-height: 20px;
+        min-width: 40px;
+        padding: 4px 8px;
+        color: #ffffff;
+        font: initial;
+        text-shadow: none;
+        border-radius: 6px;
+
+        &:hover,
+        &:active {
+            background-color: $secondary_bg;
+        }
+
+        &:disabled {
+            color: $secondary_bg;
+        }
+
+        arrow {
+            min-height: 16px;
+            min-width: 16px;
+            -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+            margin-left: 8px;
+        }
+    }
+
+    separator {
+        min-height: 1px;
+        margin: 4px 0;
+        background-color: $secondary_bg;
+    }
+}
+
+menu > arrow {
+    min-height: 16px;
+    min-width: 16px;
+    padding: 4px;
+    color: $secondary_bg;
+}
+
+menu > arrow.top {
+    margin-top: 0;
+    border-radius: 6px;
+    -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+}
+
+menu > arrow.bottom {
+    margin-top: 8px;
+    margin-bottom: -12px;
+    border-radius: 6px;
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+}
+
+check,
+radio {
+    min-height: 15px;
+    min-width: 15px;
+    margin: 4px;
+    padding: 0;
+    color: transparent;
+    background-color: $secondary_bg;
+    transition:
+        all 75ms cubic-bezier(0, 0, 0.2, 1),
+        box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+radio {
+    border-radius: 9999px;
+}
+
+check {
+    border-radius: 4px;
+}
+
+check:hover,
+radio:hover {
+    box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
+    background-color: $primary_bg;
+}
+
+check:active,
+radio:active {
+    box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
+    background-color: $primary_bg;
+}
+
+check:checked,
+check:indeterminate,
+radio:checked,
+radio:indeterminate {
+    color: $primary_bg;
+    background-color: $primary_fg;
+}
+
+check:checked:hover,
+check:indeterminate:hover,
+radio:checked:hover,
+radio:indeterminate:hover {
+    box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
+    background-color: $primary_fg;
+}
+
+check:checked:active,
+check:indeterminate:active,
+radio:checked:active,
+radio:indeterminate:active {
+    box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
+    background-color: $primary_fg;
+}
+
+switch {
+    transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+    margin: 4px 0;
+    border: none;
+    border-radius: 9999px;
+    background-color: $secondary_bg;
+    background-clip: padding-box;
+    font-size: 0;
+    color: transparent;
+}
+
+switch:checked {
+    background-color: $primary_fg;
+}
+
+switch:disabled {
+    opacity: 0.5;
+}
+
+switch slider {
+    transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+    min-width: 18px;
+    min-height: 18px;
+    margin: 3px;
+    border-radius: 9999px;
+    outline: none;
+    background-color: $default_fg;
+    border: none;
+    color: transparent;
+}
+
+scale {
+    min-height: 2px;
+    min-width: 2px;
+}
+
+scale.horizontal {
+    padding: 17px 12px;
+}
+
+scale.vertical {
+    padding: 12px 17px;
+}
+
+scale slider {
+    min-height: 18px;
+    min-width: 18px;
+    margin: -8px;
+}
+
+scale trough {
+    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+    outline: none;
+    background-color: $secondary_bg;
+}
+
+scale highlight {
+    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+    background-color: $primary_fg;
+}
+
+scale highlight:disabled {
+    background-color: #1e1e2e;
+}
+
+scale fill {
+    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+scale fill:disabled {
+    background-color: transparent;
+}
+
+scale slider {
+    transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+    border-radius: 9999px;
+    color: $primary_fg;
+    background-color: $primary_bg;
+    box-shadow: inset 0 0 0 2px $primary_fg;
+}
+
+scale slider:hover {
+    box-shadow:
+        inset 0 0 0 2px $primary_fg,
+        0 0 0 8px transparentize($primary_fg, 0.9);
+}
+
+scale slider:active {
+    box-shadow:
+        inset 0 0 0 4px $primary_fg,
+        0 0 0 8px transparentize($primary_fg, 0.9);
+}
+
+tooltip {
+    box-shadow: none;
+}
+
+separator {
+    min-width: 1px;
+    min-height: 1px;
+    background-color: $secondary_bg;
+}
+
+@keyframes spin {
+    to {
+        -gtk-icon-transform: rotate(1turn);
+    }
+}
+
+spinner {
+    background: none;
+    opacity: 0;
+    -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+}
+
+spinner:checked {
+    opacity: 1;
+    animation: spin 1s linear infinite;
+}

src/style/scss/common/floating-widget.scss

@@ -0,0 +1,10 @@
+@import "../colors";
+
+@mixin floating-widget {
+    margin: max($spacing, 8px);
+    border: 0.2rem solid $surface0;
+    background-color: $base;
+    color: $primary_fg;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+}

src/style/scss/common/general.scss

@@ -0,0 +1,50 @@
+@import '../colors.scss';
+
+.txt-icon {
+    font-family: 'JetBrainsMono Nerd Font Propo', monospace;
+    font-size: 1.5em;
+
+    &.bluetooth {
+        font-size: 1em;
+    }
+
+    &.playback {
+        font-size: 1.3em;
+    }
+
+    &.input {
+        font-size: 1.3em;
+    }
+}
+
+.bar.txt-icon {
+    font-family: 'JetBrainsMono Nerd Font Propo', monospace;
+    font-size: 1.2em;
+}
+
+tooltip {
+    * {
+        all: unset;
+    }
+
+    opacity: $bar-menus-opacity * 0.01;
+
+    font-size: 1.1em * $tooltip-scaling * 0.01;
+
+    > * > * {
+        padding: 0.6em;
+        border-radius: $bar-menus-tooltip-radius;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text);
+        background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background);
+    }
+}
+
+check:not(:checked) {
+    background-color: $bar-menus-check_radio_button-background;
+    border: 1px solid $bar-menus-check_radio_button-active;
+}
+
+check:checked {
+    background-color: $bar-menus-check_radio_button-active;
+    border: 1px solid $bar-menus-check_radio_button-background;
+}

src/style/scss/common/popover_menu.scss

@@ -0,0 +1,116 @@
+@import '../colors';
+
+$popoverScaling: $bar-menus-popover-scaling * 0.01;
+
+window.popup {
+    opacity: $bar-menus-opacity * $popoverScaling;
+
+    menu {
+        border-radius: $bar-menus-popover-radius;
+        border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border);
+        background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+    }
+
+    menuitem {
+        transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
+        padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
+        border-radius: $bar-menus-popover-radius;
+
+        label {
+            font-size: 1.2rem * $popoverScaling;
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        }
+
+        &:hover,
+        &:active {
+            background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
+        }
+
+        &:disabled {
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        }
+
+        arrow {
+            min-height: 1.2em * $popoverScaling;
+            min-width: 1.2em * $popoverScaling;
+            -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+            margin-left: 0.5em * $popoverScaling;
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
+        }
+    }
+
+    separator {
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
+        min-height: 0.075em * $popoverScaling;
+    }
+
+    arrow.top {
+        margin-top: 0;
+        -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+
+    arrow.bottom {
+        margin-top: 0.5em * $popoverScaling;
+        margin-bottom: -0.6em * $popoverScaling;
+        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+
+    check,
+    radio {
+        min-height: 0.8em * $popoverScaling;
+        min-width: 0.8em * $popoverScaling;
+        margin-right: 0.5em * $popoverScaling;
+        padding: 0;
+        color: transparent;
+        background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+        transition:
+            all 100ms cubic-bezier(0, 0, 0.2, 1),
+            box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    radio {
+        border-radius: 9999px;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check {
+        border-radius: $bar-menus-buttons-radius * 0.2;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:hover,
+    radio:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:active,
+    radio:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked,
+    check:indeterminate,
+    radio:checked,
+    radio:indeterminate {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked:hover,
+    check:indeterminate:hover,
+    radio:checked:hover,
+    radio:indeterminate:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:checked:active,
+    check:indeterminate:active,
+    radio:checked:active,
+    radio:indeterminate:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+}

src/style/scss/common/widget-button.scss

@@ -0,0 +1,52 @@
+$popover-padding: 7px * 1.6;
+$padding: 7px;
+$spacing: 12px;
+$radius: 11px;
+
+.widget-button {
+  background: $crust;
+  opacity: 1;
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin: 10px;
+  padding: 15px 20px;
+  border-radius: 10px;
+  border: 3px solid;
+  border-color: $crust;
+  transition: border-color .3s ease-in-out;
+  transition: opacity .3s ease-in-out;
+
+  &:hover {
+    border: 3px solid;
+    border-color: $lavender;
+    transition: border-color .3s ease-in-out;
+  }
+
+  &:focus,
+  &:active {
+    border: 3px solid;
+    border-color: $lavender;
+  }
+
+  image {
+    border-radius: $radius + ($popover-padding * 1.4);
+    min-width: 1.2em;
+    min-height: 1.2em;
+    font-size: 4em;
+  }
+
+  label {
+    margin-top: $spacing;
+  }
+
+  &:active {
+    image {
+      opacity: .3;
+      transition: opacity .3s ease-in-out;
+    }
+    label {
+      opacity: .3;
+      transition: opacity .3s ease-in-out;
+    }
+  }
+}

src/style/scss/highlights.scss

@@ -0,0 +1,210 @@
+@import 'colors';
+
+html,
+body {
+    padding: 0;
+    margin: 0;
+    background-color: $primary_bg;
+}
+
+.code {
+    background: $light-background;
+    border-radius: 0.5rem;
+
+    .code-header {
+        background: $light-background;
+        border-top-left-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+        border-bottom: 1px solid $primary_fg;
+        padding: 5px;
+
+        > button {
+            color: $default_fg;
+            background: transparent;
+            float: right;
+            border: none;
+
+            &:before {
+                content: '󰆏';
+                display: inline-block;
+                padding-right: 0.5rem;
+            }
+        }
+    }
+}
+
+$languages-map: (
+    arduino: '',
+    armasm: '',
+    avrasm: '',
+    bash: '',
+    c: '',
+    clojure: '',
+    coffeescript: '',
+    cpp: '',
+    csharp: '󰌛',
+    css: '',
+    dockerfile: '󰡨',
+    go: '',
+    gradle: '',
+    haskell: '',
+    html: '',
+    java: '',
+    javascript: '󰌞',
+    json: '',
+    latex: '',
+    lua: '󰢱',
+    makefile: '',
+    markdown: '',
+    mipsasm: '',
+    nginx: '',
+    nix: '󱄅',
+    php: '',
+    prolog: '',
+    python: '',
+    r: '󰟔',
+    ruby: '',
+    rust: '',
+    scss: '',
+    shell: '',
+    typescript: '󰛦',
+    wasm: '',
+    x86asm: '',
+    xml: '󰗀',
+);
+
+@each $lang, $content in $languages-map {
+    [data-language='#{$lang}']:before {
+        content: $content;
+        font-size: 1.1rem;
+        color: $primary_fg;
+        padding-right: 0.5rem;
+    }
+}
+
+pre {
+    padding: 5px;
+    overflow-x: scroll;
+
+    code.hljs {
+        color: $default_fg;
+        background: transparent;
+    }
+}
+
+code {
+    & .hljs-keyword {
+        color: $mauve;
+    }
+
+    & .hljs-built_in {
+        color: $red;
+    }
+
+    & .hljs-type {
+        color: $yellow;
+    }
+
+    & .hljs-literal,
+    & .hljs-number {
+        color: $orange;
+    }
+
+    & .hljs-operator {
+        color: $teal;
+    }
+
+    & .hljs-punctuation {
+        color: $lightteal;
+    }
+
+    & .hljs-property,
+    & .hljs-variable.language_,
+    & .hljs-symbol {
+        color: $teal;
+    }
+
+    & .hljs-regexp {
+        color: $pink;
+    }
+
+    & .hljs-string,
+    & .hljs-char.escape_,
+    & .hljs-subst {
+        color: $green;
+    }
+
+    & .hljs-comment {
+        color: $grey;
+    }
+
+    & .hljs-doctag {
+        color: $red;
+    }
+
+    & .hljs-meta,
+    & .hljs-title.function_,
+    & .hljs-section {
+        color: $orange;
+    }
+
+    & .hljs-tag,
+    & .hljs-attribute {
+        color: $lightgrey;
+    }
+
+    & .hljs-name,
+    & .hljs-selector-attr {
+        color: $mauve;
+    }
+
+    & .hljs-params,
+    & .hljs-selector-class,
+    & .hljs-template-variable {
+        color: $default_fg;
+    }
+
+    & .hljs-selector-tag {
+        color: $yellow;
+    }
+
+    & .hljs-selector-id {
+        color: $blue;
+    }
+
+    & .hljs-bullet,
+    & .hljs-code,
+    & .hljs-formula {
+        color: $teal;
+    }
+
+    & .hljs-emphasis {
+        color: $red;
+        font-style: italic;
+    }
+
+    & .hljs-strong {
+        color: $red;
+        font-weight: bold;
+    }
+
+    & .hljs-link {
+        color: $lightblue;
+        font-style: italic;
+    }
+
+    & .hljs-quote {
+        color: $green;
+        font-style: italic;
+    }
+
+    & .hljs-addition {
+        color: $green;
+        background: rgba(166, 227, 161, 0.15);
+    }
+
+    & .hljs-deletion {
+        color: $red;
+        background: rgba(243, 139, 168, 0.15);
+    }
+}

src/style/scss/menus/audiomenu.scss

@@ -0,0 +1,244 @@
+.menu-items.audio {
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
+    opacity: $bar-menus-opacity * 0.01;
+}
+
+.menu-items-container.audio {
+    min-width: 18em * $bar-menus-menu-volume-scaling * 0.01;
+
+    @import './menu.scss';
+
+    * {
+        font-size: $font-size * $bar-menus-menu-volume-scaling * 0.01;
+    }
+
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
+
+    .menu-dropdown-label.audio {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
+    }
+
+    .menu-label.audio {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
+    }
+
+    .menu-active.playback,
+    .menu-active.input {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
+    }
+
+    .menu-button-isactive.audio {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
+    }
+
+    .menu-icon-button.volume {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
+        padding: 0em 1em;
+
+        label {
+            font-size: 1.25em;
+        }
+        &:hover {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
+        }
+    }
+
+    .menu-slider.playback {
+        trough {
+            background: if(
+                $bar-menus-monochrome,
+                $bar-menus-slider-background,
+                $bar-menus-menu-volume-audio_slider-background
+            );
+
+            highlight,
+            progress {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-slider-primary,
+                    $bar-menus-menu-volume-audio_slider-primary
+                );
+            }
+        }
+
+        &:hover {
+            trough {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-slider-backgroundhover,
+                    $bar-menus-menu-volume-audio_slider-backgroundhover
+                );
+            }
+
+            slider {
+                background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
+            }
+        }
+    }
+
+    .menu-slider.input {
+        trough {
+            background: if(
+                $bar-menus-monochrome,
+                $bar-menus-slider-background,
+                $bar-menus-menu-volume-input_slider-background
+            );
+
+            highlight,
+            progress {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-slider-primary,
+                    $bar-menus-menu-volume-input_slider-primary
+                );
+            }
+        }
+
+        &:hover {
+            trough {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-slider-backgroundhover,
+                    $bar-menus-menu-volume-input_slider-backgroundhover
+                );
+            }
+
+            slider {
+                background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
+            }
+        }
+    }
+
+    .menu-active-percentage.playback,
+    .menu-active-percentage.input {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
+    }
+
+    .menu-active-button {
+        .menu-active-icon.playback,
+        .menu-active-icon.input {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
+            opacity: 1;
+        }
+
+        &.muted {
+            .menu-active-icon.playback,
+            .menu-active-icon.input {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-iconbuttons-passive,
+                    $bar-menus-menu-volume-iconbutton-passive
+                );
+                opacity: 1;
+            }
+        }
+
+        &:hover {
+            .menu-active-icon.playback,
+            .menu-active-icon.input {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-iconbuttons-passive,
+                    $bar-menus-menu-volume-iconbutton-passive
+                );
+                opacity: 0.3;
+            }
+        }
+
+        &.muted:hover {
+            .menu-active-icon.playback,
+            .menu-active-icon.input {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-iconbuttons-active,
+                    $bar-menus-menu-volume-iconbutton-active
+                );
+                opacity: 1;
+            }
+        }
+    }
+
+    .menu-button-icon.playback,
+    .menu-button-icon.input {
+        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
+
+        &.active {
+            color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
+        }
+    }
+
+    .menu-button.audio {
+        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
+
+        .menu-button-name.playback,
+        .menu-button-name.input {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
+        }
+
+        &:hover {
+            .menu-button-name.playback,
+            .menu-button-name.input {
+                color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active);
+            }
+        }
+    }
+
+    .menu-section-container.volume {
+        margin-bottom: 0.65em;
+    }
+
+    .menu-section-container.playback {
+        margin-top: 0em;
+        margin-bottom: 1em;
+    }
+
+    .menu-section-container.input {
+        margin-top: 0em;
+    }
+
+    .menu-label-container.input {
+        border-radius: 0em;
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
+    }
+
+    .menu-label-container.playback {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
+    }
+
+    .menu-items-section.input {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
+    }
+
+    .menu-items-section.playback {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
+    }
+
+    .menu-label-container.selected {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
+    }
+
+    .menu-items-section.selected {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
+    }
+
+    .menu-items-section.playback {
+        border-radius: 0em;
+    }
+
+    .active-playbacks-scrollable {
+        min-height: 12.5em;
+
+        scrollbar contents trough slider {
+            background: $bar-menus-menu-volume-scroller-color;
+        }
+
+        .menu-active-percentage.playback,
+        .menu-active-percentage.input {
+            margin-right: 0.6em;
+        }
+    }
+
+    .no-playbacks.dim {
+        opacity: 0.5;
+    }
+}

src/style/scss/menus/bluetooth.scss

@@ -0,0 +1,209 @@
+.menu-items-container.bluetooth * {
+    font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01;
+}
+
+@import './menu.scss';
+
+.menu-items.bluetooth {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
+    opacity: $bar-menus-opacity * 0.01;
+    font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01;
+}
+
+.menu-items-container.bluetooth {
+    min-width: 18em * $bar-menus-menu-bluetooth-scaling * 0.01;
+
+    font-size: 1.3em;
+
+    .menu-section-container {
+        margin: 1em 0em;
+    }
+
+    .menu-label-container {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
+
+        .menu-label {
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-bluetooth-label-color);
+        }
+
+        .controls-container {
+            margin: 0.5em 1em;
+        }
+    }
+
+    .menu-items-section {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
+        min-height: 20em * $bar-menus-menu-bluetooth-scaling * 0.01;
+        font-size: 1em;
+    }
+
+    button {
+        margin-right: 0.5em;
+
+        &.search {
+            image {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-iconbuttons-passive,
+                    $bar-menus-menu-bluetooth-iconbutton-passive
+                );
+            }
+
+            &:hover image {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-iconbuttons-active,
+                    $bar-menus-menu-bluetooth-iconbutton-active
+                );
+            }
+
+            font-size: 0.8em;
+            margin-bottom: 0em;
+        }
+
+        &:hover {
+            color: if(
+                $bar-menus-monochrome,
+                $bar-menus-iconbuttons-active,
+                $bar-menus-menu-bluetooth-iconbutton-active
+            );
+        }
+    }
+
+    .menu-icon-button.bluetooth {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
+
+        &:hover {
+            color: if(
+                $bar-menus-monochrome,
+                $bar-menus-iconbuttons-active,
+                $bar-menus-menu-bluetooth-iconbutton-active
+            );
+        }
+    }
+
+    .bluetooth-element-item {
+        margin-bottom: 0.4em;
+
+        &:hover {
+            .menu-button-icon,
+            .menu-button-name {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-iconbuttons-active,
+                    $bar-menus-menu-bluetooth-iconbutton-active
+                );
+            }
+        }
+
+        image {
+            margin-right: 0em;
+            margin-top: 0em;
+            min-height: 1em;
+            min-width: 1em;
+
+            &.active {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
+            }
+        }
+
+        label {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
+            font-size: 1em;
+        }
+
+        .menu-button-icon {
+            font-size: 1.5em;
+            color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-bluetooth-icons-passive);
+
+            &.active {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
+            }
+        }
+
+        .connection-status {
+            font-size: 0.9em;
+            margin-left: 0.6rem;
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
+            opacity: 0.4;
+        }
+        .battery {
+            opacity: 0.6;
+        }
+    }
+
+    spinner {
+        min-height: 1.3em;
+        min-width: 1.3em;
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
+    }
+
+    .menu-separator {
+        margin: 0em 1em;
+    }
+
+    .menu-switch.bluetooth {
+        background-color: if(
+            $bar-menus-monochrome,
+            $bar-menus-switch-disabled,
+            $bar-menus-menu-bluetooth-switch-disabled
+        );
+
+        &:checked {
+            background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
+        }
+
+        slider {
+            background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
+        }
+
+        &:hover {
+            trough {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-switch-disabled,
+                    $bar-menus-menu-bluetooth-switch-disabled
+                );
+            }
+
+            slider {
+                background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
+            }
+        }
+
+        &:active {
+            background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
+        }
+    }
+
+    .no-bluetooth-devices.dim,
+    .search-bluetooth-label.dim,
+    .bluetooth-disabled.dim {
+        &:last-child {
+            margin-bottom: 2em;
+        }
+
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
+        opacity: 0.5;
+    }
+    .menu-separator.bluetooth-battery {
+        margin: 0.2em 0.5em;
+        min-width: 0.1em;
+    }
+    .connection-status.txt-icon {
+        margin-left: 0.2em;
+    }
+
+    .bluetooth-controls {
+        margin-right: 0.5em;
+    }
+
+    .menu-scroller.bluetooth {
+        min-height: 18em;
+
+        scrollbar contents trough slider {
+            background: $bar-menus-menu-bluetooth-scroller-color;
+        }
+    }
+}

src/style/scss/menus/calendar.scss

@@ -0,0 +1,187 @@
+.calendar-menu-content * {
+    font-size: $font-size * $bar-menus-menu-clock-scaling * 0.01;
+}
+
+.calendar-content-container {
+    margin-top: 0em;
+    min-width: 27em;
+    min-height: 6em;
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
+    border: $bar-menus-border-size solid
+        if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
+    border-radius: $bar-menus-border-radius;
+    opacity: $bar-menus-opacity * 0.01;
+}
+
+.calendar-menu-item-container {
+    border-radius: $bar-menus-card_radius;
+    margin-bottom: 1.35em;
+    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
+}
+
+.calendar-content-items {
+    margin: 1.35em;
+}
+
+.calendar-container-box {
+    margin: 0.75em;
+    margin-bottom: 0em;
+}
+
+.calendar-menu-widget {
+    border-radius: 0.4em;
+    color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
+
+    &:selected {
+        box-shadow:
+            inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday),
+            inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
+            inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday);
+        border-radius: 0em;
+    }
+
+    &.header {
+        background-color: transparent;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth);
+    }
+
+    &.button {
+        color: $text;
+        font-weight: 900;
+        font-size: 900em;
+    }
+
+    &:hover {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
+    }
+
+    &.highlight {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
+    }
+
+    &:indeterminate {
+        color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
+    }
+
+    font-size: 1.1em;
+    padding: 0.35em;
+}
+
+.clock-content-items {
+    min-height: 8em;
+
+    .clock-content-time {
+        font-size: 4em;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time);
+    }
+
+    .clock-content-period {
+        font-size: 1.75em;
+        margin-bottom: 1.35em;
+        margin-right: -0.875em;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-timeperiod);
+    }
+}
+
+.calendar-menu-item-container {
+    margin-bottom: 0.65em;
+    &:last-child {
+        margin-bottom: 0em;
+    }
+}
+
+.weather-container-box {
+    margin: 1.5em;
+    margin-top: 2.5em;
+    min-width: 3em;
+
+    .calendar-menu-weather.today.icon {
+        label {
+            color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
+            font-size: 5em;
+        }
+    }
+
+    .calendar-menu-weather.today.temp.label {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
+        margin-left: 0.2em;
+        font-size: 2.5em;
+
+        &.icon {
+            font-size: 2.5em;
+        }
+    }
+
+    .calendar-menu-weather.today.condition.label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-status);
+        font-size: 1.5em;
+        margin-bottom: 0.4em;
+    }
+
+    .calendar-menu-weather.today.temp.label.icon.weather-color.red {
+        color: if(
+            $bar-menus-monochrome,
+            $bar-menus-icons-active,
+            $bar-menus-menu-clock-weather-thermometer-extremelyhot
+        );
+    }
+
+    .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot);
+    }
+
+    .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate);
+    }
+
+    .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold);
+    }
+
+    .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
+        color: if(
+            $bar-menus-monochrome,
+            $bar-menus-icons-active,
+            $bar-menus-menu-clock-weather-thermometer-extremelycold
+        );
+    }
+}
+
+.calendar-menu-weather.today.stats.container {
+    margin-bottom: 0.75em;
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-stats);
+
+    .weather.label {
+        margin-left: 0.35em;
+    }
+}
+
+.menu-separator.weather {
+    margin: 1.5em 0em;
+}
+
+.hourly-weather-time {
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-time);
+    margin-bottom: 0.5em;
+}
+
+.hourly-weather-icon {
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
+    margin-bottom: 0.25em;
+    font-size: 1.8em;
+}
+
+.hourly-weather-temp {
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature);
+}
+
+.weather.precip.icon {
+    min-width: 1em;
+    font-size: 1em;
+}
+
+.weather.wind.icon {
+    min-width: 1em;
+    font-size: 1em;
+}

src/style/scss/menus/dashboard.scss

@@ -0,0 +1,635 @@
+.dashboard-menu-content * {
+    font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01;
+}
+
+.dashboard-content-items {
+    min-width: 28.5em;
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
+    border: $bar-menus-border-size solid
+        if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
+    border-radius: $bar-menus-border-radius;
+    opacity: $bar-menus-opacity * 0.01;
+
+    button {
+        border-radius: $bar-menus-buttons-radius;
+    }
+
+    .dashboard-card {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
+        margin: 0em 1.3em;
+        border-radius: $bar-menus-card_radius;
+        padding: 1.5em;
+    }
+
+    .profile-picture-container {
+        margin-right: 0.65em;
+
+        .profile-picture {
+            min-width: $bar-menus-menu-dashboard-profile-size;
+            min-height: $bar-menus-menu-dashboard-profile-size;
+            border-radius: $bar-menus-menu-dashboard-profile-radius;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        .profile-name {
+            font-size: 1.5em;
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
+            margin-top: 0.75em;
+        }
+    }
+
+    .power-menu-container {
+        margin-left: 0em;
+
+        .dashboard-button {
+            min-width: 3em;
+            min-height: 2.5em;
+
+            &:not(:last-child) {
+                margin-bottom: 0.75em;
+            }
+
+            label {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-text,
+                    $bar-menus-menu-dashboard-shortcuts-text
+                );
+                font-size: 1.7em;
+            }
+
+            &.shutdown {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-shutdown
+                );
+
+                label {
+                    font-size: 1.9em;
+                }
+            }
+
+            &.reboot {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-restart
+                );
+
+                label {
+                    font-size: 1.9em;
+                }
+            }
+
+            &.logout {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-logout
+                );
+            }
+
+            &.sleep {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-powermenu-sleep
+                );
+            }
+
+            &:hover {
+                &.shutdown {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-shutdown
+                        ),
+                        0.5
+                    );
+                }
+
+                &.reboot {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-restart
+                        ),
+                        0.5
+                    );
+                }
+
+                &.logout {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-logout
+                        ),
+                        0.5
+                    );
+                }
+
+                &.sleep {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-powermenu-sleep
+                        ),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    .shortcuts-container {
+        font-size: 1em;
+
+        .dashboard-card {
+            padding: 1.5em;
+
+            button {
+                min-height: 2.5em;
+                min-width: 2.5em;
+            }
+        }
+
+        .card-button-section-container.visible {
+            margin-right: 1.5em;
+        }
+
+        .top-button.paired {
+            margin-bottom: 1.5em;
+        }
+
+        .container {
+            margin-top: 0em;
+
+            &.most-used {
+                margin-right: 0.65em;
+            }
+
+            &.utilities.paired {
+                margin-left: 0em;
+            }
+
+            button {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-shortcuts-background
+                );
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-text,
+                    $bar-menus-menu-dashboard-shortcuts-text
+                );
+                min-height: 3em;
+
+                label {
+                    font-size: 1.5em;
+                }
+
+                &.record.active {
+                    background: $red;
+
+                    &:hover {
+                        background: transparentize($red, 0.5);
+                    }
+                }
+
+                &:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-shortcuts-background
+                        ),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    .controls-container {
+        &.dashboard-card {
+            margin-top: 0em;
+        }
+
+        button {
+            padding: 0em;
+            min-height: 3em;
+            min-width: 3.8em;
+
+            label {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-text,
+                    $bar-menus-menu-dashboard-controls-wifi-text
+                );
+                font-size: 1.6em;
+            }
+
+            &:not(:last-child) {
+                margin-right: 1em;
+            }
+
+            &.wifi {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-wifi-background
+                );
+            }
+
+            &.bluetooth {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-bluetooth-background
+                );
+            }
+
+            &.notifications {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-notifications-background
+                );
+            }
+
+            &.playback {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-volume-background
+                );
+            }
+
+            &.input {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-controls-input-background
+                );
+            }
+
+            &.wifi:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-wifi-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.bluetooth:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-bluetooth-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.notifications:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-notifications-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.playback:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-volume-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.input:hover {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-controls-input-background
+                    ),
+                    0.5
+                );
+            }
+
+            &.disabled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-disabled,
+                    $bar-menus-menu-dashboard-controls-disabled
+                );
+
+                &.wifi:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-wifi-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.bluetooth:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-bluetooth-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.notifications:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-notifications-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.playback:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-volume-background
+                        ),
+                        0.5
+                    );
+                }
+
+                &.input:hover {
+                    background: transparentize(
+                        if(
+                            $bar-menus-monochrome,
+                            $bar-menus-buttons-default,
+                            $bar-menus-menu-dashboard-controls-input-background
+                        ),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    .directories-container {
+        &.dashboard-card {
+            margin-top: 0em;
+            padding-left: 1.5em;
+            padding-right: 0em;
+        }
+
+        .directory-link {
+            padding: 0.5em 0em;
+            min-width: 9em;
+
+            &:last-child {
+                margin-bottom: 0em;
+            }
+
+            label {
+                font-size: 1.3em;
+            }
+
+            &.right.top {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-right-top-color
+                );
+            }
+
+            &.right.middle {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-right-middle-color
+                );
+            }
+
+            &.right.bottom {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-right-bottom-color
+                );
+            }
+
+            &.left.top {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-left-top-color
+                );
+            }
+
+            &.left.middle {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-left-middle-color
+                );
+            }
+
+            &.left.bottom {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-dashboard-directories-left-bottom-color
+                );
+            }
+
+            &:hover {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .stats-container {
+        margin-top: 0em;
+
+        .stat {
+            label {
+                margin-right: 0.75em;
+                font-size: 1.3em;
+                min-width: 1.65em;
+            }
+
+            &.cpu label {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-cpu-icon
+                );
+            }
+
+            &.ram label {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-ram-icon
+                );
+            }
+
+            &.gpu label {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-gpu-icon
+                );
+            }
+
+            &.storage label {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-disk-icon
+                );
+            }
+
+            .stats-bar {
+                levelbar * {
+                    transition: 200ms;
+                }
+
+                trough {
+                    min-height: 1.05em;
+                }
+
+                block {
+                    border-radius: $bar-menus-progressbar-radius;
+
+                    &.empty {
+                        background: if(
+                            $bar-menus-monochrome,
+                            $bar-menus-progressbar-background,
+                            $bar-menus-menu-dashboard-monitors-bar_background
+                        );
+                    }
+
+                    &.filled {
+                        padding-left: 0.85em;
+                    }
+                }
+            }
+
+            &.cpu .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-cpu-bar
+                );
+            }
+
+            &.ram .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-ram-bar
+                );
+            }
+
+            &.gpu .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-gpu-bar
+                );
+            }
+
+            &.storage .stats-bar block.filled {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-progressbar-foreground,
+                    $bar-menus-menu-dashboard-monitors-disk-bar
+                );
+            }
+        }
+
+        .stat-value {
+            margin-bottom: 0.5em;
+            font-size: 0.9em;
+
+            &.cpu {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-cpu-label
+                );
+            }
+
+            &.ram {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-ram-label
+                );
+            }
+
+            &.gpu {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-gpu-label
+                );
+            }
+
+            &.storage {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-disk-label
+                );
+            }
+        }
+    }
+}
+
+.dashboard-content-items > :not(:first-child):not(:last-child) {
+    margin-top: 0;
+    margin-bottom: 0.65em;
+}
+
+.dashboard-content-items > :first-child {
+    margin-top: 1.3em;
+    margin-bottom: 0.65em;
+}
+
+.dashboard-content-items > :last-child {
+    margin-top: 0;
+    margin-bottom: 1.3em;
+}
+
+.dashboard-content-items > :only-child {
+    margin-top: 1.3em;
+    margin-bottom: 1.3em;
+}

src/style/scss/menus/energy.scss

@@ -0,0 +1,108 @@
+.menu-items-container.energy * {
+  font-size: $font-size * $bar-menus-menu-battery-scaling * 0.01;
+}
+
+.menu-items.energy {
+  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
+  border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
+  opacity: $bar-menus-opacity * 0.01;
+  font-size: $font-size * $bar-menus-menu-battery-scaling * 0.01;
+}
+
+@import "./menu.scss";
+
+.menu-items-container.energy {
+  min-width: 18em * $bar-menus-menu-battery-scaling * 0.01;
+
+  .menu-label {
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);
+  }
+
+  .menu-label-container {
+    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-battery-card-color);
+  }
+
+  .uptime {
+    font-size: 0.92em;
+  }
+
+  .menu-items-section {
+    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-battery-card-color);
+  }
+
+  .power-profile-item {
+    color: if($bar-menus-monochrome, $bar-menus-listitems-passive, $bar-menus-menu-battery-listitems-passive);
+    margin-bottom: 0.5em;
+
+    label {
+      margin-left: 1em;
+    }
+
+    image {
+      font-size: 1.3em;
+      min-width: 1em;
+      min-height: 1em;
+      color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-battery-icons-passive);
+    }
+
+    &:hover {
+      color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
+
+      label {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
+      }
+
+      image {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
+      }
+    }
+
+    &.active {
+      color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
+
+      image {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
+      }
+    }
+  }
+
+  .brightness-container {
+    padding-bottom: 1em;
+  }
+
+  .brightness-slider-icon {
+    font-size: 1.4em;
+    min-width: 1em;
+    min-height: 1em;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
+  }
+
+  .brightness-slider-label {
+    color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-battery-text);
+    font-size: 0.9em;
+    min-width: 2.5em;
+    font-weight: bold;
+    margin-bottom: 0.2em;
+  }
+
+  .menu-slider.brightness {
+    trough {
+      background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-battery-slider-background);
+
+      highlight,
+      progress {
+        background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-battery-slider-primary);
+      }
+    }
+
+    &:hover {
+      trough {
+        background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-battery-slider-backgroundhover);
+      }
+
+      slider {
+        background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-battery-slider-puck);
+      }
+    }
+  }
+}

src/style/scss/menus/media.scss

@@ -0,0 +1,148 @@
+.menu-items.media {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
+    opacity: $bar-menus-opacity * 0.01;
+}
+
+.menu-items-container.media {
+    * {
+        font-size: $font-size * $bar-menus-menu-media-scaling * 0.01;
+    }
+
+    min-width: 23em * $bar-menus-menu-media-scaling * 0.01;
+    min-height: 10em * $bar-menus-menu-media-scaling * 0.01;
+
+    .menu-section-container {
+        margin: 1em 0em;
+    }
+
+    .menu-items-section {
+        background: none;
+        border-radius: $bar-menus-card_radius;
+        padding: 0em;
+    }
+
+    .menu-content {
+        border-radius: $bar-menus-buttons-radius;
+        background-size: cover;
+        background-position: center;
+        padding: 1em;
+    }
+
+    .media-indicator-current-song-name {
+        margin-bottom: 0.75rem;
+    }
+
+    .media-indicator-current-song-author {
+        margin-bottom: 0.75rem;
+    }
+
+    .media-indicator-current-song-name-label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song);
+        font-size: 1.35em;
+    }
+
+    .media-indicator-current-song-author-label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist);
+        font-size: 1em;
+    }
+
+    .media-indicator-current-song-album-label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album);
+        font-size: 1em;
+    }
+
+    .media-indicator-current-controls {
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .media-indicator-control-button {
+        margin: 0rem 0.5rem;
+    }
+
+    .media-indicator-control-button {
+        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
+        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
+        min-height: 1.8em;
+        min-width: 2.5em;
+        border-radius: $bar-menus-buttons-radius * 0.75;
+
+        &.disabled {
+            background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);
+        }
+
+        &.enabled {
+            background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
+
+            &:hover {
+                background: transparentize(
+                    if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background),
+                    0.5
+                );
+            }
+
+            &.active {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-default,
+                    $bar-menus-menu-media-buttons-enabled
+                );
+
+                &:hover {
+                    background: transparentize(
+                        if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled),
+                        0.5
+                    );
+                }
+            }
+        }
+    }
+
+    image {
+        font-size: 1.1em;
+    }
+
+    .menu-slider.media.progress {
+        margin-top: 1em;
+        margin-bottom: 1em;
+
+        trough {
+            background: if(
+                $bar-menus-monochrome,
+                $bar-menus-slider-background,
+                $bar-menus-menu-media-slider-background
+            );
+            border-radius: $bar-menus-slider-progress-radius;
+
+            highlight,
+            progress {
+                border-radius: $bar-menus-slider-progress-radius;
+                min-height: 0.85em;
+                background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
+            }
+        }
+
+        slider {
+            background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
+        }
+
+        &:hover {
+            trough {
+                background: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-slider-backgroundhover,
+                        $bar-menus-menu-media-slider-backgroundhover
+                    ),
+                    0.3
+                );
+            }
+        }
+    }
+
+    .time-label {
+        color: $bar-menus-menu-media-timestamp;
+        margin-bottom: 0.25em;
+    }
+}

src/style/scss/menus/menu.scss

@@ -0,0 +1,273 @@
+.menu-slider {
+    trough {
+        border-radius: $bar-menus-slider-progress-radius;
+        background: $surface0;
+
+        highlight,
+        progress {
+            background: $peach;
+            border-radius: $bar-menus-slider-progress-radius;
+        }
+    }
+
+    slider {
+        box-shadow: none;
+        background-color: transparent;
+        min-height: 0.6rem;
+        min-width: 0.6rem;
+        border: 0rem solid transparent;
+        border-radius: $bar-menus-slider-slider-radius;
+    }
+
+    &:hover {
+        trough {
+            background: $surface0;
+        }
+
+        slider {
+            background: $overlay0;
+            box-shadow: none;
+        }
+    }
+}
+
+.menu-switch {
+    font-size: 1.3em;
+    background-color: $surface0;
+    border-radius: $bar-menus-switch-radius;
+
+    &:checked {
+        background: $sky;
+    }
+
+    trough {
+        highlight,
+        progress {
+            background-color: $peach;
+            border-radius: $bar-menus-switch-radius;
+        }
+    }
+
+    slider {
+        box-shadow: none;
+        background-color: $overlay0;
+        min-height: 1em;
+        min-width: 1em;
+        border: 0em solid transparent;
+        border-radius: $bar-menus-switch-slider-radius;
+        margin: 0.1em 0.15em;
+    }
+
+    &:hover {
+        trough {
+            background: $surface0;
+        }
+
+        slider {
+            background: $overlay0;
+            box-shadow: none;
+        }
+    }
+
+    &:active {
+        background-color: $sky;
+    }
+}
+
+.menu-separator {
+    min-height: 0.1rem;
+    margin: 0.6rem 0rem;
+    background: $surface1;
+}
+
+.menu-items {
+    background: $crust;
+    border: $bar-menus-border-size solid $bar-menus-border-color;
+    border-radius: $bar-menus-border-radius;
+    color: $text;
+}
+
+.menu-items-container {
+    border-radius: 0.4em;
+    font-size: 1.3em;
+}
+
+.menu-section-container {
+    margin: 1em 0em;
+
+    .menu-label {
+        color: $text;
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+
+    .menu-label-container {
+        background: $base;
+        border-radius: $bar-menus-card_radius;
+        border-bottom-left-radius: 0em;
+        border-bottom-right-radius: 0em;
+        margin: 0em 1em;
+        min-height: 2em;
+    }
+
+    &:first-child {
+        margin-bottom: 0em;
+    }
+
+    &:last-child {
+        margin-top: 0em;
+    }
+
+    &:nth-child(2) {
+        margin-top: 1em;
+    }
+
+    .menu-items-section {
+        background: $base;
+        border-radius: $bar-menus-card_radius;
+        border-top-left-radius: 0em;
+        border-top-right-radius: 0em;
+        padding: 0.9em;
+        margin: 0em 1em;
+    }
+}
+
+.menu-active {
+    font-size: 0.9em;
+    font-weight: bold;
+    margin: 0rem 1em;
+    margin-bottom: 0.9em;
+}
+
+.menu-active-container {
+    &:first-child {
+        margin-bottom: 0.5em;
+    }
+}
+
+.menu-active-button {
+    padding: 0.1em;
+    margin-bottom: -0.2em;
+
+    .menu-active-icon {
+        font-size: 1.4em;
+        font-weight: bold;
+    }
+
+    &.muted image {
+        color: $maroon;
+    }
+
+    &:hover image {
+        color: $maroon;
+    }
+}
+
+.menu-active-percentage {
+    font-size: 0.9em;
+    min-width: 2.5em;
+    font-weight: bold;
+}
+
+.menu-active-slider {
+    margin-left: 1rem;
+    margin-right: 1.5rem;
+}
+
+.menu-active-slider * {
+    min-height: 0.85em;
+    border-radius: $bar-menus-slider-progress-radius;
+}
+
+.menu-slider-container {
+    margin-bottom: 0.7rem;
+}
+
+.menu-label-dim {
+    color: $overlay0;
+    margin-right: 1rem;
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.menu-icon-button {
+    &:hover {
+        color: $surface2;
+    }
+}
+
+.menu-dropdown-label-container {
+    background: $base;
+    border-radius: 0.4em;
+}
+
+.menu-button {
+    margin-bottom: 0.4em;
+}
+
+.menu-button-name {
+    font-size: 0.95em;
+    font-weight: bold;
+    margin-left: 0.5em;
+    margin-right: 1.2rem;
+}
+
+.menu-button-icon {
+    font-size: 1.3em;
+    font-weight: bold;
+    margin-right: 0.5rem;
+}
+
+.menu-item-box {
+    margin-bottom: 0.5rem;
+}
+
+.dropdown-menu-container {
+    min-height: 10em;
+}
+
+.dropdown-content {
+    border-radius: $bar-menus-border-radius;
+    margin: if($bar-menus-enableShadow, $bar-menus-shadowMargins, 0px);
+    box-shadow: if($bar-menus-enableShadow, $bar-menus-shadow, 0 0 0 0);
+}
+
+.menu-label {
+    margin: 0.5em 1em;
+    color: $sky;
+}
+
+.event-box-container {
+    min-height: 0em;
+    margin-top: $bar-dropdownGap;
+}
+
+.event-top-padding * {
+    min-height: 0em;
+    margin-top: if($bar-floating and $bar-location == 'top', $bar-margin_top, 0);
+    margin-bottom: if($bar-floating and $bar-location == 'bottom', $bar-margin_bottom, 0);
+}
+
+@keyframes spin {
+    to {
+        -gtk-icon-transform: rotate(1turn);
+    }
+}
+
+.spinning-icon {
+    animation-name: spin;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+.menu-scroller {
+    margin-right: 0em;
+    min-width: 0.35em;
+
+    scrollbar contents trough slider {
+        min-width: $bar-menus-scroller-width;
+        border-radius: $bar-menus-scroller-radius;
+        background: $bar-menus-text;
+    }
+}

src/style/scss/menus/network.scss

@@ -0,0 +1,196 @@
+.menu-items-container.network * {
+    font-size: $font-size * $bar-menus-menu-network-scaling * 0.01;
+}
+
+@import './menu.scss';
+
+.menu-items.network {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
+    opacity: $bar-menus-opacity * 0.01;
+    font-size: $font-size * $bar-menus-menu-network-scaling * 0.01;
+}
+
+.menu-items-container.network {
+    min-width: 18em * $bar-menus-menu-network-scaling * 0.01;
+    font-size: 1.3em;
+
+    .menu-items-section {
+        padding-bottom: 1.5em;
+    }
+
+    .menu-label {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-network-label-color);
+    }
+
+    .network-icon {
+        font-size: 1.3em;
+        min-width: 1em;
+        min-height: 1em;
+        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-network-icons-passive);
+
+        &.active {
+            color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
+        }
+    }
+
+    .menu-icon-button.network {
+        margin: 1em;
+    }
+
+    .connection-container {
+        margin-left: 1em;
+    }
+
+    .connection-status.dim {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        opacity: 0.5;
+        font-size: 0.9em;
+    }
+
+    .menu-section-container.wifi {
+        margin-top: 0.65em;
+
+        .menu-items-section {
+            min-height: 12em;
+        }
+    }
+
+    .network-element-item {
+        &:not(:last-child) {
+            margin-bottom: 0.5em;
+        }
+
+        &.staging {
+            margin-bottom: 0.5em;
+        }
+
+        &:hover {
+            .network-icon {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
+                opacity: 1;
+            }
+
+            .active-connection {
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-iconbuttons-active,
+                    $bar-menus-menu-network-iconbuttons-active
+                );
+            }
+        }
+
+        .active-connection {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        }
+
+        .active-connection.dim {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+            opacity: 0.5;
+        }
+    }
+
+    .spinner.wap {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
+    }
+
+    .network-password-input-container {
+        background: darken(if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color), 5%);
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        border-radius: 0.4em;
+        margin: 0em 2em;
+        margin-top: 0.75em;
+        padding: 0.5em;
+    }
+
+    .close-network-password-input-button {
+        padding: 0em 0.5em;
+
+        &:hover image {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+            opacity: 0.5;
+        }
+    }
+
+    .menu-icon-button.network.search {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
+
+        &:hover {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
+        }
+    }
+
+    .menu-icon-button.network.disconnect {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
+        margin: 0em;
+        margin-top: -0.2em;
+        margin-left: 1em;
+
+        label {
+            font-size: 1.4em;
+        }
+
+        &:hover {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
+        }
+    }
+
+    .waps-not-found.dim {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        opacity: 0.5;
+    }
+
+    .menu-label-container {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color);
+    }
+
+    .menu-items-section {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color);
+    }
+
+    .menu-switch.network {
+        background-color: if(
+            $bar-menus-monochrome,
+            $bar-menus-switch-disabled,
+            $bar-menus-menu-network-switch-disabled
+        );
+
+        &:checked {
+            background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-network-switch-enabled);
+        }
+
+        slider {
+            background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-network-switch-puck);
+        }
+
+        &:hover {
+            trough {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-switch-disabled,
+                    $bar-menus-menu-network-switch-disabled
+                );
+            }
+
+            slider {
+                background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-network-switch-puck);
+            }
+        }
+
+        &:active {
+            background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-network-switch-enabled);
+        }
+    }
+
+    .menu-scroller.wap {
+        min-height: 16em;
+
+        scrollbar contents trough slider {
+            background: $bar-menus-menu-network-scroller-color;
+        }
+    }
+
+    .network-element-controls-container {
+        margin-right: 0.7em;
+    }
+}

src/style/scss/menus/notifications.scss

@@ -0,0 +1,244 @@
+.notification-menu-content * {
+    font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
+}
+
+.notification-card-container.menu {
+    margin: 0em;
+    min-width: 30.6em * $bar-menus-menu-notifications-scaling * 0.01;
+    min-height: $bar-menus-menu-notifications-height * $bar-menus-menu-notifications-scaling * 0.01;
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
+    border: $bar-menus-border-size solid
+        if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
+    border-radius: $bar-menus-border-radius;
+    opacity: $bar-menus-opacity * 0.01;
+
+    .window-content.notificationsmenu-window {
+        margin-right: 0.5em;
+    }
+
+    .menu-content-container.notifications {
+        margin: 1em;
+        margin-bottom: 0em;
+        min-height: 4em;
+    }
+
+    .notification-menu-controls {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
+        margin: 1em 1em;
+        margin-bottom: 0.5em;
+        border-radius: $bar-menus-card_radius;
+        padding: 0.4em 0.75em;
+    }
+
+    .notification-card.menu {
+        background: $notification-background;
+        min-width: 0em;
+        min-height: 0em;
+        font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
+        border: 0.15em solid $notification-border;
+        border-radius: $notification-border_radius;
+        margin: 0em;
+    }
+
+    .notification-card-content-container {
+        .notification-card {
+            margin-bottom: 0.65em;
+
+            &:last-child {
+                margin-bottom: 1em;
+            }
+        }
+    }
+
+    .notification-card-content {
+        margin-bottom: 0.25em;
+    }
+
+    .menu-label.notifications {
+        margin: 0em;
+        font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
+    }
+
+    .menu-separator.notification-controls {
+        min-width: 0.1em;
+        background-color: if(
+            $bar-menus-monochrome,
+            $bar-menus-dropdownmenu-divider,
+            $bar-menus-menu-notifications-switch_divider
+        );
+        margin: 0em 1em;
+    }
+
+    .menu-switch.notifications {
+        * {
+            font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
+        }
+
+        background-color: if(
+            $bar-menus-monochrome,
+            $bar-menus-switch-disabled,
+            $bar-menus-menu-notifications-switch-disabled
+        );
+
+        &:checked {
+            background: if(
+                $bar-menus-monochrome,
+                $bar-menus-switch-enabled,
+                $bar-menus-menu-notifications-switch-enabled
+            );
+        }
+
+        slider {
+            background-color: if(
+                $bar-menus-monochrome,
+                $bar-menus-switch-puck,
+                $bar-menus-menu-notifications-switch-puck
+            );
+        }
+
+        &:hover {
+            trough {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-switch-disabled,
+                    $bar-menus-menu-notifications-switch-disabled
+                );
+            }
+
+            slider {
+                background: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-switch-puck,
+                    $bar-menus-menu-notifications-switch-puck
+                );
+            }
+        }
+
+        &:active {
+            background: if(
+                $bar-menus-monochrome,
+                $bar-menus-switch-enabled,
+                $bar-menus-menu-notifications-switch-enabled
+            );
+        }
+    }
+
+    .clear-notifications-button {
+        margin-right: 0.3em;
+
+        &:hover label:not(.removing) {
+            color: transparentize(
+                if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear),
+                0.5
+            );
+        }
+    }
+
+    .clear-notifications-label {
+        color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
+        font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
+
+        &.removing {
+            color: $bar-menus-buttons-disabled;
+        }
+    }
+
+    scrollbar {
+        margin-right: 0.2em;
+        min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
+        border-radius: $bar-menus-menu-notifications-scrollbar-radius;
+        background: transparent;
+
+        slider {
+            min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
+            border-radius: $bar-menus-menu-notifications-scrollbar-radius;
+            background: $bar-menus-menu-notifications-scrollbar-color;
+        }
+    }
+
+    .notification-card-header-label {
+        font-size: 0.95em;
+    }
+
+    .notification-card-body-label {
+        font-size: 0.84em;
+    }
+    .notification-icon {
+        font-size: 1.3em;
+    }
+
+    .notification-time {
+        font-size: 0.85em;
+    }
+}
+
+.notification-label-container {
+    margin-bottom: 8em;
+
+    label {
+        color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label);
+    }
+
+    .bell {
+        font-size: 10em * $bar-menus-menu-notifications-scaling * 0.01;
+    }
+
+    .message {
+        font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
+    }
+}
+
+.close-notification-button.menu {
+    background: $notification-close_button-background;
+    color: $notification-close_button-label;
+    min-width: 2.1em * $bar-menus-menu-notifications-scaling * 0.01;
+    border-radius: 0rem $notification-border_radius $notification-border_radius 0em;
+
+    label {
+        font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
+    }
+
+    &:hover {
+        background: transparentize($notification-close_button-background, 0.5);
+    }
+}
+
+.notification-menu-pager {
+    background: $bar-menus-menu-notifications-pager-background;
+    margin-bottom: 0.1em;
+    border-radius: $bar-menus-border-radius;
+    border-top-left-radius: 0em;
+    border-top-right-radius: 0em;
+
+    .pager-button {
+        margin: 0em;
+        padding: 0.25em 1em;
+        color: $bar-menus-menu-notifications-pager-button;
+
+        .pager-button-label {
+            font-size: 2em * $bar-menus-menu-notifications-scaling * 0.01;
+        }
+
+        &:hover {
+            .pager-button-label {
+                color: transparentize($bar-menus-menu-notifications-pager-button, 0.4);
+                text-decoration: none;
+            }
+        }
+    }
+
+    .pager-label {
+        color: $bar-menus-menu-notifications-pager-label;
+    }
+
+    .disabled {
+        color: transparentize($bar-menus-menu-notifications-pager-button, 0.8);
+
+        &:hover {
+            .pager-button-label {
+                color: transparentize($bar-menus-menu-notifications-pager-button, 0.8);
+            }
+        }
+    }
+}

src/style/scss/menus/power.scss

@@ -0,0 +1,292 @@
+window#powermenu,
+window#verification {
+    // the fraction has to be more than hyprland ignorealpha
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+$popover-padding: 0.6rem * 1.6;
+
+window#verification .verification {
+    * {
+        font-size: $font-size * $bar-menus-menu-dashboard-confirmation_scaling * 0.01;
+    }
+
+    @include floating-widget;
+    background: if(
+        $bar-menus-monochrome,
+        $bar-menus-background,
+        $bar-menus-menu-dashboard-powermenu-confirmation-background
+    );
+    border: $bar-menus-border-size solid
+        if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-powermenu-confirmation-border);
+    padding: 0.35em * 1.6 * 1.5;
+    min-width: 20em;
+    min-height: 6em;
+    opacity: $bar-menus-opacity * 0.01;
+
+    .verification-content {
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
+        border-radius: $bar-menus-border-radius * 0.5;
+        padding: 1em;
+    }
+
+    .text-box {
+        margin-bottom: 0.3em;
+
+        .title {
+            font-size: 1.5em;
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-powermenu-confirmation-label);
+            margin-bottom: 0.5em;
+        }
+
+        .desc {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-dashboard-powermenu-confirmation-body);
+            font-size: 1em;
+            margin-bottom: 0.55em;
+            padding: 1em 3em;
+        }
+    }
+
+    .verification-button {
+        background: $bar-menus-buttons-default;
+        padding: 0.7em 0em;
+        margin: 0.4em 1.7em;
+        border-radius: $bar-menus-border-radius * 0.5;
+        opacity: 1;
+        transition: border-color 0.2s ease-in-out;
+        transition: opacity 0.3s ease-in-out;
+
+        &.bar-verification_yes {
+            background-color: if(
+                $bar-menus-monochrome,
+                $bar-menus-buttons-default,
+                $bar-menus-menu-dashboard-powermenu-confirmation-confirm
+            );
+        }
+
+        &.bar-verification_no {
+            background-color: if(
+                $bar-menus-monochrome,
+                $bar-menus-buttons-default,
+                $bar-menus-menu-dashboard-powermenu-confirmation-deny
+            );
+        }
+
+        &:hover {
+            &.bar-verification_yes {
+                background-color: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-powermenu-confirmation-confirm
+                    ),
+                    0.6
+                );
+                transition: background-color 0.2s ease-in-out;
+            }
+
+            &.bar-verification_no {
+                background-color: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-powermenu-confirmation-deny
+                    ),
+                    0.6
+                );
+                transition: background-color 0.2s ease-in-out;
+            }
+        }
+
+        &:focus {
+            &.bar-verification_yes {
+                background-color: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-powermenu-confirmation-confirm
+                    ),
+                    0.6
+                );
+                transition: background 0.2s ease-in-out;
+            }
+
+            &.bar-verification_no {
+                background-color: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-powermenu-confirmation-deny
+                    ),
+                    0.6
+                );
+                transition: background 0.2s ease-in-out;
+            }
+        }
+
+        &:active {
+            &.bar-verification_yes {
+                background-color: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-powermenu-confirmation-confirm
+                    ),
+                    0.6
+                );
+                transition: background 0.2s ease-in-out;
+            }
+
+            &.bar-verification_no {
+                background-color: transparentize(
+                    if(
+                        $bar-menus-monochrome,
+                        $bar-menus-buttons-default,
+                        $bar-menus-menu-dashboard-powermenu-confirmation-deny
+                    ),
+                    0.6
+                );
+                transition: background 0.2s ease-in-out;
+            }
+
+            image {
+                opacity: 0.3;
+                transition: opacity 0.3s ease-in-out;
+            }
+
+            label {
+                opacity: 0.3;
+                transition: opacity 0.3s ease-in-out;
+            }
+        }
+    }
+
+    .bar-verification_no label {
+        color: if(
+            $bar-menus-monochrome,
+            $bar-menus-buttons-text,
+            $bar-menus-menu-dashboard-powermenu-confirmation-button_text
+        );
+    }
+
+    .bar-verification_yes label {
+        color: if(
+            $bar-menus-monochrome,
+            $bar-menus-buttons-text,
+            $bar-menus-menu-dashboard-powermenu-confirmation-button_text
+        );
+    }
+}
+
+window#powermenu .powermenu {
+    @include floating-widget;
+
+    &.line {
+        padding: $popover-padding * 1.5;
+    }
+
+    &.box {
+        padding: $popover-padding * 2;
+    }
+}
+
+.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 0.3s ease-in-out;
+
+    &:hover {
+        &.powermenu-button-shutdown {
+            border-color: $red;
+        }
+
+        &.powermenu-button-logout {
+            border-color: $green;
+        }
+
+        &.powermenu-button-sleep {
+            border-color: $sky;
+        }
+
+        &.powermenu-button-reboot {
+            border-color: $peach;
+        }
+    }
+
+    &:focus {
+        &.powermenu-button-shutdown {
+            border-color: $red;
+        }
+
+        &.powermenu-button-logout {
+            border-color: $green;
+        }
+
+        &.powermenu-button-sleep {
+            border-color: $sky;
+        }
+
+        &.powermenu-button-reboot {
+            border-color: $peach;
+        }
+    }
+
+    &:active {
+        &.powermenu-button-shutdown {
+            border-color: rgba($red, 0.5);
+        }
+
+        &.powermenu-button-logout {
+            border-color: rgba($green, 0.5);
+        }
+
+        &.powermenu-button-sleep {
+            border-color: rgba($sky, 0.5);
+        }
+
+        &.powermenu-button-reboot {
+            border-color: rgba($peach, 0.5);
+        }
+    }
+}
+
+.system-button_icon {
+    font-size: 3em;
+
+    &.shutdown {
+        color: $red;
+    }
+
+    &.logout {
+        color: $green;
+    }
+
+    &.reboot {
+        color: $peach;
+    }
+
+    &.sleep {
+        color: $sky;
+    }
+}
+
+.system-button_label {
+    &.shutdown {
+        color: $red;
+    }
+
+    &.logout {
+        color: $green;
+    }
+
+    &.reboot {
+        color: $peach;
+    }
+
+    &.sleep {
+        color: $sky;
+    }
+}

src/style/scss/menus/powerdropdown.scss

@@ -0,0 +1,136 @@
+.menu-items-container.power-dropdown * {
+  font-size: $font-size * $bar-menus-menu-power-scaling * 0.01;
+}
+
+@import "./menu.scss";
+
+.menu-items.power-dropdown {
+  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-power-background-color);
+  border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-power-border-color);
+  opacity: $bar-menus-opacity * 0.01;
+  font-size: $font-size * $bar-menus-menu-power-scaling * 0.01;
+}
+
+.menu-items-container.power-dropdown {
+  &.reboot {
+    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-restart-background);
+  }
+
+  &.logout {
+    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-logout-background);
+  }
+
+  &.sleep {
+    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-sleep-background);
+  }
+
+  min-height: 3.5em * $bar-menus-menu-power-scaling * 0.01;
+  font-size: 1.3em;
+  margin: 1em;
+
+  .menu-items-section {
+    padding-bottom: 1.5em;
+  }
+
+  .power-menu-button {
+    border-radius: $bar-menus-border-radius * 0.6;
+
+    // This doubles the border-radius so it doesn't show up as 
+    // an artifact behind the button as that has a radius as well
+    border-top-left-radius: $bar-menus-border-radius * 2;
+    border-bottom-left-radius: $bar-menus-border-radius * 2;
+
+    &.no-label {
+      // This doubles the border-radius so it doesn't show up as 
+      // an artifact behind the button as that has a radius as well
+      border-top-right-radius: $bar-menus-border-radius * 2;
+      border-bottom-right-radius: $bar-menus-border-radius * 2;
+    }
+
+    &:hover {
+      opacity: 0.4;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 1.5em;
+    }
+
+    .power-button-label {
+      font-size: 1.1em;
+    }
+
+    &.shutdown {
+      background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-shutdown-background);
+    }
+
+    &.reboot {
+      background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-restart-background);
+    }
+
+    &.logout {
+      background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-logout-background);
+    }
+
+    &.sleep {
+      background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-sleep-background);
+    }
+
+    .show-label {
+      padding-right: 1em;
+    }
+
+    .no-label {
+      border-top-right-radius: $bar-menus-border-radius * 0.35;
+      border-bottom-right-radius: $bar-menus-border-radius * 0.35;
+    }
+
+    .shutdown-label {
+      color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-shutdown-text);
+    }
+
+    .reboot-label {
+      color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-restart-text);
+    }
+
+    .logout-label {
+      color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-logout-text);
+    }
+
+    .sleep-label {
+      color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-sleep-text);
+    }
+  }
+
+  label:not(.txt-icon) {
+    margin-left: 1em;
+  }
+
+  label.txt-icon {
+    min-width: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
+    min-height: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
+    background: $red;
+    border-top-left-radius: $bar-menus-border-radius * 0.35;
+    border-bottom-left-radius: $bar-menus-border-radius * 0.35;
+    font-size: 1.75em;
+
+    &.shutdown-icon {
+      background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-shutdown-icon_background);
+      color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-shutdown-icon);
+    }
+
+    &.reboot-icon {
+      background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-restart-icon_background);
+      color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-restart-icon);
+    }
+
+    &.logout-icon {
+      background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-logout-icon_background);
+      color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-logout-icon);
+    }
+
+    &.sleep-icon {
+      background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-sleep-icon_background);
+      color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-sleep-icon);
+    }
+  }
+}

src/style/scss/notifications/popups.scss

@@ -0,0 +1,116 @@
+.notification-card {
+    color: $notification-text;
+    background: $notification-background;
+    margin: 0.45em;
+    border: 0.15em solid transparentize($notification-border, 0.5);
+    min-width: 26em;
+    min-height: 4em;
+    border-radius: $notification-border_radius;
+    opacity: $notification-opacity * 0.01;
+    margin: if($notification-enableShadow, $notification-shadowMargins, 0px);
+    box-shadow: if($notification-enableShadow, $notification-shadow, 0 0 0 0);
+}
+
+.notification-card-container {
+    * {
+        font-size: $font-size * $notification-scaling * 0.01;
+    }
+
+    padding: 1px;
+}
+
+.notification-card-image-container {
+    margin: 0.65em 0.65em;
+    border-radius: 0.4em;
+}
+
+.notification-card-image {
+    border-radius: 0.4em;
+    min-width: 2.5em;
+    min-height: 2.5em;
+    padding: 0.85em 0.85em;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.icon {
+        min-width: 0em;
+        padding: 0em;
+        min-height: 0em;
+        font-size: 3em;
+    }
+}
+
+.notification-card-content {
+    min-width: 2.9em;
+    min-height: 2.9em;
+    padding: 0.5em 0.5em;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.notification-card-content.noimg {
+    margin-left: 0.5em;
+    margin-top: 0.15em;
+}
+
+.notification-card-header-label {
+    font-size: 0.95em;
+    margin-bottom: 0.5em;
+    color: $notification-label;
+}
+
+.notification-card-body-label {
+    font-size: 0.84em;
+    margin-bottom: 1em;
+    font-weight: 600;
+}
+
+.notification-card-actions {
+    margin-top: 0.25em;
+    margin-bottom: 0.4em;
+}
+
+.notification-action-buttons {
+    color: $notification-actions-text;
+    background: $notification-actions-background;
+    min-width: 4em;
+    min-height: 1.65em;
+    border-radius: $bar-menus-buttons-radius;
+
+    &:not(:last-child) {
+        margin-right: 2rem;
+    }
+
+    &:hover {
+        background: transparentize($notification-actions-background, 0.6);
+    }
+}
+
+.notification-icon {
+    color: $notification-labelicon;
+    margin-bottom: 0.4em;
+    min-width: 1em;
+    min-height: 1em;
+    font-size: 1.3em;
+}
+
+.notification-time {
+    font-size: 0.85em;
+    color: $notification-time;
+}
+
+.close-notification-button {
+    background: $notification-close_button-background;
+    color: $notification-close_button-label;
+    min-width: 2.1em;
+    border-radius: 0rem $notification-border_radius * 0.7 $notification-border_radius * 0.7 0em;
+
+    label {
+        font-size: 1.5em;
+    }
+
+    &:hover {
+        background: transparentize($notification-close_button-background, 0.5);
+    }
+}

src/style/scss/osd/index.scss

@@ -0,0 +1,102 @@
+.indicator {
+    * {
+        font-size: $font-size * $osd-scaling * 0.01;
+    }
+
+    .osd-container {
+        margin: $osd-margins;
+        opacity: $osd-opacity * 0.01;
+        box-shadow: if($osd-enableShadow, $osd-shadow, 0 0 0 0);
+        border-radius: $osd-radius;
+    }
+
+    .osd-label-container {
+        border-top: $osd-border-size solid $osd-border-color;
+        border-bottom: if($osd-orientation == 'horizontal', $osd-border-size solid $osd-border-color, 0em);
+        border-left: if($osd-orientation == 'vertical', $osd-border-size solid $osd-border-color, 0em);
+        border-right: $osd-border-size solid $osd-border-color;
+        background: $osd-bar_container;
+
+        border-radius: if(
+            $osd-orientation == 'vertical',
+            $osd-radius $osd-radius 0em 0em,
+            0em $osd-radius $osd-radius 0em
+        );
+
+        .osd-label {
+            font-size: 1em;
+            padding-top: if($osd-orientation == 'vertical', 1em, 0em);
+            padding-right: if($osd-orientation == 'horizontal', 1em, 0em);
+            color: $osd-label;
+
+            &.overflow {
+                color: $osd-bar_overflow_color;
+            }
+        }
+    }
+
+    .osd-icon-container {
+        border-top: if($osd-orientation == 'horizontal', $osd-border-size solid $osd-border-color, 0em);
+        border-bottom: $osd-border-size solid $osd-border-color;
+        border-left: $osd-border-size solid $osd-border-color;
+        border-right: if($osd-orientation == 'vertical', $osd-border-size solid $osd-border-color, 0em);
+        background: $osd-icon_container;
+
+        border-radius: if(
+            $osd-orientation == 'vertical',
+            0em 0em $osd-radius $osd-radius,
+            $osd-radius 0em 0em $osd-radius
+        );
+
+        .osd-icon {
+            font-size: 2.1em;
+            padding: if($osd-orientation == 'vertical', 0.2em 0em, 0em 0.4em);
+            color: $osd-icon;
+        }
+    }
+
+    .osd-bar-container {
+        border-top: if($osd-orientation == 'horizontal', $osd-border-size solid $osd-border-color, 0em);
+        border-bottom: if($osd-orientation == 'horizontal', $osd-border-size solid $osd-border-color, 0em);
+        border-left: if($osd-orientation == 'vertical', $osd-border-size solid $osd-border-color, 0em);
+        border-right: if($osd-orientation == 'vertical', $osd-border-size solid $osd-border-color, 0em);
+        padding: 1.25em;
+        background: $osd-bar_container;
+
+        .osd-bar {
+            levelbar * {
+                transition: 200ms;
+            }
+
+            trough {
+                min-height: if($osd-orientation == 'vertical', 10em, 0);
+                min-width: if($osd-orientation == 'horizontal', 10em, 0);
+            }
+
+            block {
+                border-radius: $osd-radius * 0.5;
+
+                &.empty {
+                    background: $osd-bar_empty_color;
+                }
+
+                &.filled {
+                    background: $osd-bar_color;
+                    padding: 0.45em;
+                }
+            }
+
+            &.overflow {
+                block {
+                    &.empty {
+                        background: $osd-bar_color;
+                    }
+
+                    &.filled {
+                        background: $osd-bar_overflow_color;
+                    }
+                }
+            }
+        }
+    }
+}

src/style/scss/settings/dialog.scss

@@ -0,0 +1,484 @@
+window.settings-dialog {
+    opacity: $bar-menus-opacity * 0.01;
+    background-color: $bar-menus-cards;
+    color: $bar-menus-text;
+
+    $widget-bg: $bar-menus-cards;
+    $border: none;
+    $fg: $bar-menus-text;
+
+    .settings-dialog-box {
+        min-width: 75em;
+    }
+
+    .header {
+        background-color: transparentize($bar-menus-background, 0.1);
+        border-bottom-left-radius: $bar-menus-border-radius * 0.5;
+        border-bottom-right-radius: $bar-menus-border-radius * 0.5;
+        padding: $padding;
+
+        button {
+            font-weight: bold;
+        }
+
+        button.close {
+            color: $bar-menus-iconbuttons-passive;
+
+            * {
+                font-size: 2em;
+            }
+
+            &:hover {
+                color: $bar-menus-buttons-active;
+            }
+        }
+
+        button.reset {
+            color: $bar-menus-iconbuttons-passive;
+            padding: $padding * 0.5;
+
+            * {
+                font-size: 1.25em;
+            }
+
+            &:hover {
+                color: $bar-menus-buttons-active;
+            }
+        }
+    }
+
+    .page {
+        .page-content {
+            padding: $padding * 2;
+            padding-top: 0;
+        }
+    }
+
+    .group {
+        .group-title {
+            color: $bar-menus-text;
+            margin-bottom: $spacing * 0.5;
+        }
+
+        .group-reset {
+            margin: $spacing * 0.5;
+            padding: $padding * 0.5;
+
+            &:disabled {
+                color: transparent;
+            }
+        }
+
+        &:not(:first-child) {
+            margin-top: $spacing;
+        }
+    }
+
+    .row {
+        background-color: $widget-bg;
+        padding: $padding;
+        border: $border;
+        border-top: none;
+
+        &:first-child {
+            border-radius: $radius $radius 0em 0em;
+            border: $border;
+        }
+
+        &:last-child {
+            border-radius: 0em 0em $radius $radius;
+        }
+
+        &:first-child:last-child {
+            border-radius: $radius;
+            border: $border;
+        }
+
+        button.reset {
+            margin-left: $spacing;
+        }
+
+        label.id,
+        label.note {
+            color: transparentize($fg, 0.4);
+        }
+
+        entry,
+        button {
+            padding: $padding;
+        }
+
+        spinbutton {
+            entry {
+                border-radius: $radius 0em 0em $radius;
+            }
+
+            button {
+                border-radius: 0em;
+            }
+
+            button:last-child {
+                border-radius: 0em $radius $radius 0em;
+            }
+        }
+
+        .enum-setter {
+            label {
+                background-color: $widget-bg;
+                border: $border;
+                padding: 0em $padding;
+                border-radius: $radius 0em 0em $radius;
+            }
+
+            button {
+                border-radius: 0em;
+            }
+
+            button:last-child {
+                border-radius: 0em $radius $radius 0em;
+            }
+        }
+
+        &.wallpaper {
+            button {
+                margin-top: $spacing * 0.5;
+            }
+
+            .preview {
+                border-radius: $radius;
+            }
+        }
+    }
+}
+
+.option-item {
+    margin: 0em 2em;
+    margin-bottom: 1em;
+
+    .reset {
+        color: $bar-menus-iconbuttons-passive;
+    }
+
+    .options-label {
+        color: $bar-menus-text;
+    }
+
+    .options-sublabel {
+        font-size: 0.75em;
+        margin-top: 0.2em;
+        color: $bar-menus-dimtext;
+    }
+
+    .options-sublabel-link {
+        label {
+            font-size: 0.75em;
+            margin-top: 0.2em;
+            color: $bar-menus-dimtext;
+        }
+
+        &:hover label {
+            color: $bar-menus-listitems-active;
+        }
+    }
+
+    .inputter-container {
+        border-radius: $bar-menus-border-radius * 0.5;
+
+        :first-child {
+            border-radius: $bar-menus-border-radius * 0.5;
+        }
+
+        padding: 0.35em 0.35em;
+        background: transparentize($bar-menus-background, 0.6);
+        margin-right: 1em;
+    }
+}
+
+.options-header {
+    margin: 1em 1em;
+
+    .label-name {
+        color: $bar-menus-label;
+        font-size: 0.9em;
+        margin-right: 0.5em;
+    }
+}
+
+.pager-button {
+    color: transparentize($bar-menus-text, 0.4);
+    margin: 0.5em 0.75em;
+
+    &.category label {
+        font-size: 1.4em;
+    }
+
+    &:hover {
+        label {
+            text-decoration: underline;
+            color: $bar-menus-text;
+        }
+    }
+
+    &.active {
+        label {
+            text-decoration: underline;
+            color: $bar-menus-text;
+        }
+    }
+}
+
+.bar-theme-page {
+    min-height: 40em;
+}
+
+.settings-menu-stack {
+    background: $red;
+}
+
+.paged-container {
+    .reset-options {
+        color: $bar-menus-text;
+
+        &:disabled {
+            color: $bar-menus-buttons-disabled;
+        }
+
+        &:hover {
+            color: transparentize($bar-menus-text, 0.5);
+        }
+    }
+
+    scrollbar {
+        margin-right: 0.2em;
+        min-width: 0.6em;
+        border-radius: $bar-menus-border-radius;
+        background: $bar-menus-background;
+
+        slider {
+            min-width: 0.6em;
+            border-radius: $bar-menus-border-radius;
+            background: $bar-menus-buttons-default;
+        }
+    }
+
+    selection {
+        background: $bar-menus-label;
+        color: $bar-menus-cards;
+    }
+
+    switch {
+        font-size: 10px;
+
+        &:checked {
+            background: $bar-menus-switch-enabled;
+        }
+
+        slider {
+            background-color: $bar-menus-switch-puck;
+        }
+
+        &:active {
+            background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
+        }
+    }
+
+    entry {
+        min-width: 15em;
+    }
+}
+
+dialog {
+    background: $bar-menus-cards;
+    color: $bar-menus-text;
+
+    :selected {
+        background: transparentize($bar-menus-label, 0.2);
+        color: transparentize($bar-menus-cards, 0.2);
+    }
+
+    headerbar {
+        border-bottom: 0.075em solid $bar-menus-border-color;
+        background: $bar-menus-cards;
+        padding: 0.5em;
+        font-size: 1.5em;
+
+        button {
+            color: $bar-menus-buttons-text;
+            min-width: 4.5em;
+            min-height: 2.5em;
+            border-radius: $bar-menus-border-radius;
+            background: $bar-menus-buttons-default;
+
+            &:hover {
+                background: transparentize($bar-menus-buttons-default, 0.5);
+            }
+        }
+    }
+
+    viewport {
+        border-right: 0.25em solid $bar-menus-border-color;
+
+        list {
+            row {
+                padding: 0em 1.5em;
+
+                &:hover {
+                    background: $bar-menus-buttons-default;
+                    color: $bar-menus-buttons-text;
+                }
+
+                label {
+                    margin: 0.5em 0.5em;
+                    font-size: 0.85em;
+                }
+            }
+        }
+    }
+
+    stack {
+        .horizontal .path-bar {
+            button {
+                background: $bar-menus-iconbuttons-active;
+                min-width: 3em;
+                min-height: 2em;
+                border-radius: $bar-menus-border-radius * 0.5;
+
+                &:disabled {
+                    background: $bar-menus-buttons-disabled;
+                }
+
+                &:hover {
+                    background: transparentize($bar-menus-buttons-active, 0.5);
+                }
+
+                label {
+                    margin: 0em 0.25em;
+                    color: $bar-menus-buttons-text;
+                }
+
+                image {
+                    margin: 0em 0.5em;
+                    color: $bar-menus-buttons-text;
+                }
+
+                margin: 0.25em;
+            }
+        }
+    }
+
+    treeview header button {
+        padding: 0.25em;
+        border: 0.15em solid $bar-menus-border-color;
+    }
+
+    headerbar {
+        color: $bar-menus-label;
+    }
+
+    popover {
+        background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+        border-radius: $bar-buttons-radius;
+
+        modelbutton {
+            margin-bottom: 0.5em;
+        }
+        modelbutton:hover label {
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        }
+
+        modelbutton:disabled label {
+            color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.5);
+        }
+        separator {
+            margin: 0.5em 0em;
+        }
+    }
+
+    separator {
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
+        min-height: 0.075em * $popoverScaling;
+    }
+
+    check,
+    radio {
+        min-height: 0.8em * $popoverScaling;
+        min-width: 0.8em * $popoverScaling;
+        margin-right: 0.5em * $popoverScaling;
+        padding: 0;
+        color: transparent;
+        background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+        transition:
+            all 100ms cubic-bezier(0, 0, 0.2, 1),
+            box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    radio {
+        border-radius: 9999px;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check {
+        border-radius: $bar-buttons-radius;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:hover,
+    radio:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:active,
+    radio:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked,
+    check:indeterminate,
+    radio:checked,
+    radio:indeterminate {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked:hover,
+    check:indeterminate:hover,
+    radio:checked:hover,
+    radio:indeterminate:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:checked:active,
+    check:indeterminate:active,
+    radio:checked:active,
+    radio:indeterminate:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+}
+
+.unsaved-icon {
+    margin-right: 1em;
+    font-size: 1em;
+    color: $yellow;
+}
+
+.options-import,
+.options-export {
+    border-radius: $bar-menus-border-radius * 0.5;
+    color: $bar-menus-buttons-text;
+    padding: 0.35em 0.35em;
+    background: $bar-menus-buttons-default;
+    margin-right: 1em;
+    margin-left: 0.5em;
+
+    &:hover {
+        background: transparentize($bar-menus-buttons-default, 0.8);
+    }
+}
+
+.options-import {
+    margin-right: 0em;
+}

src/style/scss/settings/json-editor.scss

@@ -0,0 +1,86 @@
+.object-input-container {
+    min-width: 35em;
+    .unsaved-icon-container {
+        .unsaved-icon {
+            margin-right: 1em;
+            font-size: 1em;
+        }
+    }
+
+    .json-editor-wrapper {
+        margin-top: 1em;
+        padding: 1em;
+        background-color: transparentize($bar-menus-cards, 0.97);
+        border: 0.1em solid transparentize($bar-menus-border-color, 0.9);
+        border-radius: $bar-menus-border-radius;
+
+        .json-editor-scrollable-container {
+            padding: 1em;
+            min-height: 20em;
+            background-color: #1a1b26;
+
+            > widget,
+            > textview,
+            .json-editor-sourceview {
+                font-size: 0.95em;
+                font-weight: 500;
+            }
+        }
+
+        .editor-controls {
+            margin-top: 0.75em;
+
+            .error-message {
+                color: #f7768e;
+                font-size: 0.9em;
+                margin: 0.3em 0;
+            }
+
+            .controls-row {
+                .hint-text {
+                    color: transparentize($bar-menus-text, 0.5);
+                    font-size: 0.85em;
+                }
+            }
+
+            .save-button {
+                background-color: $bar-menus-buttons-default;
+                color: $bar-menus-buttons-text;
+                padding: 0.3em 0.75em;
+                border-radius: $bar-menus-buttons-radius * 0.5;
+                font-weight: 500;
+
+                &:hover {
+                    background-color: transparentize($bar-menus-buttons-default, 0.2);
+                }
+
+                &:active {
+                    background-color: $bar-menus-buttons-active;
+                }
+
+                &:disabled {
+                    background-color: $bar-menus-buttons-disabled;
+                    color: transparentize($bar-menus-buttons-text, 0.5);
+                }
+            }
+        }
+    }
+
+    .json-preview {
+        padding: 0.25em 0.75em;
+        background-color: transparentize($bar-menus-background, 0.3);
+        border-radius: $bar-menus-border-radius * 0.4;
+        transition: all 200ms ease;
+
+        .preview-text {
+            color: transparentize($bar-menus-text, 0.4);
+            font-size: 0.9em;
+        }
+
+        .preview-icon {
+            margin-left: 0.5em;
+            font-size: 1em;
+            color: $bar-menus-text;
+        }
+    }
+}

src/style/utils/hotReload.ts

@@ -0,0 +1,19 @@
+import { monitorFile } from 'astal';
+import { themeManager } from '..';
+
+export const initializeHotReload = async (): Promise<void> => {
+    const monitorList = [
+        `${SRC_DIR}/src/style/main.scss`,
+        `${SRC_DIR}/src/style/scss/bar`,
+        `${SRC_DIR}/src/style/scss/common`,
+        `${SRC_DIR}/src/style/scss/menus`,
+        `${SRC_DIR}/src/style/scss/notifications`,
+        `${SRC_DIR}/src/style/scss/osd`,
+        `${SRC_DIR}/src/style/scss/settings`,
+        `${SRC_DIR}/src/style/scss/colors.scss`,
+        `${SRC_DIR}/src/style/scss/highlights.scss`,
+        `${CONFIG_DIR}/modules.scss`,
+    ];
+
+    monitorList.forEach((file) => monitorFile(file, themeManager.applyCss.bind(themeManager)));
+};