[New Dependency: sassc] Move to SCSS from regular CSS (#352)

.github/workflows/ubuntu-build.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       DEBIAN_FRONTEND: noninteractive
-      PACKAGES: meson libwayland-dev libgtk-3-dev gobject-introspection libgirepository1.0-dev valac libjson-glib-dev libhandy-1-dev libgtk-layer-shell-dev scdoc libgee-0.8-dev libpulse-dev
+      PACKAGES: meson libwayland-dev libgtk-3-dev gobject-introspection libgirepository1.0-dev valac libjson-glib-dev libhandy-1-dev libgtk-layer-shell-dev scdoc libgee-0.8-dev libpulse-dev sassc
     steps:
       - name: Install packages
         run: |

README.md

@@ -238,10 +238,12 @@ See `swaync(5)` man page for more information
 
 To reload the config, you'll need to run `swaync-client --reload-config`
 
-The main CSS style file is located in `/etc/xdg/swaync/style.css`. Copy it over 
-to your `~/.config/swaync/` folder to customize without needing root access. 
+The main CSS style file is located in `/etc/xdg/swaync/style.css`. Copy it over
+to your `~/.config/swaync/` folder to customize without needing root access. For
+more advanced/larger themes, I recommend that you use the SCSS files from source
+and customize them instead. To use the SCSS files, compile with `sassc`.
 
-**Tip**: running swaync with `GTK_DEBUG=interactive swaync` will open a inspector 
+**Tip**: running swaync with `GTK_DEBUG=interactive swaync` will open a inspector
 window that'll allow you to see all of the CSS classes + other information.
 
 ## Toggle Buttons

build-scripts/PKGBUILD

@@ -15,7 +15,7 @@ license=(GPL3)
 depends=("gtk3" "gtk-layer-shell" "dbus" "glib2" "gobject-introspection" "libgee" "json-glib" "libhandy" "libpulse")
 conflicts=("swaync" "swaync-client")
 provides=("swaync" "swaync-client" "notification-daemon")
-makedepends=(vala meson git scdoc)
+makedepends=(vala meson git scdoc sassc)
 source=("${_pkgfoldername}-${pkgver}.tar.gz::${url}/archive/v${pkgver}.tar.gz")
 sha256sums=('3f00bc858b7b3610e88ef0f6ee64d727892dd82f280f1dfc01dde863c2ea3376')
 

build-scripts/PKGBUILD-git

@@ -15,7 +15,7 @@ license=('GPL3')
 depends=("gtk3" "gtk-layer-shell" "dbus" "glib2" "gobject-introspection" "libgee" "json-glib" "libhandy" "libpulse" )
 conflicts=("swaync" "swaync-client")
 provides=("swaync" "swaync-client" "notification-daemon")
-makedepends=(vala meson git scdoc)
+makedepends=(vala meson git scdoc sassc)
 source=("$_pkgname::git+$url")
 sha256sums=('SKIP')
 

build-scripts/swaync.rpkg.spec

@@ -28,6 +28,7 @@ BuildRequires:  pkgconfig(fish)
 BuildRequires:  pkgconfig(libpulse)
 BuildRequires:  systemd-devel
 BuildRequires:  systemd
+BuildRequires:  sassc
 
 Requires:       dbus
 %{?systemd_requires}

data/meson.build

@@ -10,3 +10,26 @@ if compile_schemas.found()
     args: ['--strict', '--dry-run', meson.current_source_dir()]
   )
 endif
+
+# SCSS Dependency
+sassc = find_program('sassc')
+assert(sassc.found())
+
+# SCSS Compilation
+style_css = custom_target(
+  'SCSS Compilation',
+  build_by_default: true,
+  input : 'style/style.scss',
+  output : 'style.css',
+  install: true,
+  install_dir: config_path,
+  command : [
+    sassc,
+    '-t',
+    'expanded',
+    '@INPUT@',
+    '@OUTPUT@'
+  ],
+)
+
+message(style_css.full_path())

data/style/style.scss

+@define-color cc-bg rgba(0, 0, 0, 0.7);
+
+@define-color noti-border-color rgba(255, 255, 255, 0.15);
+@define-color noti-bg rgb(48, 48, 48);
+@define-color noti-bg-darker rgb(38, 38, 38);
+@define-color noti-bg-hover rgb(56, 56, 56);
+@define-color noti-bg-focus rgba(68, 68, 68, 0.6);
+@define-color noti-close-bg rgba(255, 255, 255, 0.1);
+@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);
+
+@define-color text-color rgb(255, 255, 255);
+@define-color text-color-disabled rgb(150, 150, 150);
+
+@define-color bg-selected rgb(0, 128, 255);
+
+.notification-row {
+  outline: none;
+
+  &:focus,
+  &:hover {
+    background: #{"@noti-bg-focus"};
+  }
+  .notification-background {
+    .close-button {
+      /* The notification Close Button */
+      background: #{"@noti-close-bg"};
+      color: #{"@text-color"};
+      text-shadow: none;
+      padding: 0;
+      border-radius: 100%;
+      margin-top: 10px;
+      margin-right: 16px;
+      box-shadow: none;
+      border: none;
+      min-width: 24px;
+      min-height: 24px;
+
+      &:hover {
+        box-shadow: none;
+        background: #{"@noti-close-bg-hover"};
+        transition: all 0.15s ease-in-out;
+        border: none;
+      }
+    }
+
+    .notification {
+      /* The actual notification */
+      border-radius: 12px;
+      margin: 6px 12px;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7),
+        0 2px 6px 2px rgba(0, 0, 0, 0.3);
+      padding: 0;
+
+      &.low {
+        /* Low Priority Notification */
+      }
+      &.normal {
+        /* Normal Priority Notification */
+      }
+      &.critical {
+        /* Critical Priority Notification */
+      }
+
+      %action {
+        padding: 4px;
+        margin: 0;
+        box-shadow: none;
+        background: #{"@noti-bg"};
+        border: 1px solid #{"@noti-border-color"};
+        color: #{"@text-color"};
+        transition: all 0.15s ease-in-out;
+      }
+      %action-hover {
+        -gtk-icon-effect: none;
+        background: #{"@noti-bg-hover"};
+      }
+
+      .notification-default-action {
+        /* The large action that also displays the notification summary and body */
+        @extend %action;
+        border-radius: 12px;
+
+        &:hover {
+          @extend %action-hover;
+        }
+
+        .notification-content {
+          background: transparent;
+          padding: 6px;
+          border-radius: 12px;
+
+          .image {
+            /* Notification Primary Image */
+            -gtk-icon-effect: none;
+          }
+          .summary {
+            /* Notification summary/title */
+            font-size: 16px;
+            font-weight: bold;
+            background: transparent;
+            color: #{"@text-color"};
+            text-shadow: none;
+          }
+          .time {
+            /* Notification time-ago */
+            font-size: 16px;
+            font-weight: bold;
+            background: transparent;
+            color: #{"@text-color"};
+            text-shadow: none;
+            margin-right: 18px;
+          }
+          .body {
+            /* Notification body */
+            font-size: 15px;
+            font-weight: normal;
+            background: transparent;
+            color: #{"@text-color"};
+            text-shadow: none;
+          }
+
+          progressbar {
+            /* The optional notification progress bar */
+          }
+
+          .body-image {
+            /* The "extra" optional bottom notification image */
+            margin-top: 6px;
+            background-color: white;
+            border-radius: 12px;
+          }
+
+          .inline-reply {
+            /* The inline reply section */
+            margin-top: 8px;
+
+            .inline-reply-entry {
+              background: #{"@noti-bg-darker"};
+              color: #{"@text-color"};
+              caret-color: #{"@text-color"};
+              border: 1px solid #{"@noti-border-color"};
+              border-radius: 12px;
+            }
+            .inline-reply-button {
+              margin-left: 4px;
+              background: #{"@noti-bg"};
+              border: 1px solid #{"@noti-border-color"};
+              border-radius: 12px;
+              color: #{"@text-color"};
+
+              &:disabled {
+                background: initial;
+                color: #{"@text-color-disabled"};
+                border: 1px solid transparent;
+              }
+              &:hover {
+                background: #{"@noti-bg-hover"};
+              }
+            }
+          }
+        }
+      }
+
+      .notification-action {
+        /* The sub actions below the default action */
+        @extend %action;
+        border-radius: 0px;
+        border-top: none;
+        border-right: none;
+
+        &:not(:only-child) {
+          /* When alternative actions are visible */
+          border-bottom-left-radius: 0px;
+          border-bottom-right-radius: 0px;
+        }
+
+        &:first-child {
+          /* add bottom border radius to eliminate clipping */
+          border-bottom-left-radius: 10px;
+        }
+        &:last-child {
+          border-bottom-right-radius: 10px;
+          border-right: 1px solid #{"@noti-border-color"};
+        }
+
+        &:hover {
+          @extend %action-hover;
+        }
+      }
+    }
+  }
+}
+
+.notification-group {
+  /* Styling only for Grouped Notifications */
+
+  &.low {
+    /* Low Priority Group */
+  }
+  &.normal {
+    /* Low Priority Group */
+  }
+  &.critical {
+    /* Low Priority Group */
+  }
+
+  %header {
+    margin: 0 16px;
+    color: #{"@text-color"};
+  }
+
+  .notification-group-headers {
+    /* Notification Group Headers */
+    @extend %header;
+
+    .notification-group-icon {
+      color: #{"@text-color"};
+    }
+    .notification-group-header {
+      color: #{"@text-color"};
+    }
+  }
+  .notification-group-buttons {
+    /* Notification Group Buttons */
+    @extend %header;
+  }
+
+  &.collapsed {
+    /* Set lower stacked notifications opacity to 0 */
+    .notification-row:not(:last-child) {
+      /* Top notification in stack */
+      .notification-action *,
+      .notification-default-action * {
+        transition: opacity 400ms ease-in-out;
+        opacity: 0;
+      }
+    }
+
+    &:hover {
+      .notification-default-action,
+      .notification-action {
+        background-color: #{"@noti-bg-hover"};
+      }
+    }
+  }
+}
+
+.control-center {
+  /* The Control Center which contains the old notifications + widgets */
+  background: #{"@cc-bg"};
+
+  .control-center-list-placeholder {
+    /* The placeholder when there are no notifications */
+    opacity: 0.5;
+  }
+
+  .control-center-list {
+    /* List of notifications */
+    background: transparent;
+  }
+}
+
+.blank-window {
+  /* Window behind control center and on all other monitors */
+  background: #{"alpha(black, 0.25)"};
+}
+
+.floating-notifications {
+  background: transparent;
+}
+
+/*** Widgets ***/
+/* Title widget */
+@import "widgets/title";
+/* DND widget */
+@import "widgets/dnd";
+/* Label widget */
+@import "widgets/label";
+/* Mpris widget */
+@import "widgets/mpris";
+/* Buttons widget */
+@import "widgets/buttons";
+/* Menubar widget */
+@import "widgets/menubar";
+/* Volume widget */
+@import "widgets/volume";
+/* Backlight widget */
+@import "widgets/backlight";
+/* Inhibitors widget */
+@import "widgets/inhibitors";

data/style/widgets/backlight.scss

+.widget-backlight {
+  background-color: #{"@noti-bg"};
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+}

data/style/widgets/buttons.scss

+.widget-buttons-grid {
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+  background-color: #{"@noti-bg"};
+}
+
+.widget-buttons-grid > flowbox > flowboxchild > button {
+  background: #{"@noti-bg"};
+  border-radius: 12px;
+}
+
+.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked {
+  /* style given to the active toggle button */
+}
+
+.widget-buttons-grid > flowbox > flowboxchild > button:hover {
+}

data/style/widgets/dnd.scss

+.widget-dnd {
+  margin: 8px;
+  font-size: 1.1rem;
+}
+.widget-dnd > switch {
+  font-size: initial;
+  border-radius: 12px;
+  background: #{"@noti-bg"};
+  border: 1px solid #{"@noti-border-color"};
+  box-shadow: none;
+}
+.widget-dnd > switch:checked {
+  background: #{"@bg-selected"};
+}
+.widget-dnd > switch slider {
+  background: #{"@noti-bg-hover"};
+  border-radius: 12px;
+}

data/style/widgets/inhibitors.scss

+.widget-inhibitors {
+  margin: 8px;
+  font-size: 1.5rem;
+}
+.widget-inhibitors > button {
+  font-size: initial;
+  color: #{"@text-color"};
+  text-shadow: none;
+  background: #{"@noti-bg"};
+  border: 1px solid #{"@noti-border-color"};
+  box-shadow: none;
+  border-radius: 12px;
+}
+.widget-inhibitors > button:hover {
+  background: #{"@noti-bg-hover"};
+}

data/style/widgets/label.scss

+.widget-label {
+  margin: 8px;
+}
+.widget-label > label {
+  font-size: 1.1rem;
+}

data/style/widgets/menubar.scss

+.widget-menubar > box > .menu-button-bar > button {
+  border: none;
+  background: transparent;
+}
+
+/* .AnyName { Name defined in config after #
+  background-color: @noti-bg;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+}
+
+.AnyName>button {
+  background: transparent;
+  border: none;
+}
+
+.AnyName>button:hover {
+  background-color: @noti-bg-hover;
+} */
+
+.topbar-buttons > button {
+  /* Name defined in config after # */
+  border: none;
+  background: transparent;
+}

data/style/widgets/mpris.scss

+.widget-mpris {
+  /* The parent to all players */
+}
+.widget-mpris-player {
+  padding: 8px;
+  margin: 8px;
+}
+.widget-mpris-title {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+.widget-mpris-subtitle {
+  font-size: 1.1rem;
+}

data/style/widgets/title.scss

+.widget-title {
+  margin: 8px;
+  font-size: 1.5rem;
+}
+.widget-title > button {
+  font-size: initial;
+  color: #{"@text-color"};
+  text-shadow: none;
+  background: #{"@noti-bg"};
+  border: 1px solid #{"@noti-border-color"};
+  box-shadow: none;
+  border-radius: 12px;
+}
+.widget-title > button:hover {
+  background: #{"@noti-bg-hover"};
+}

data/style/widgets/volume.scss

+.widget-volume {
+  background-color: #{"@noti-bg"};
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+}
+
+.widget-volume > box > button {
+  background: transparent;
+  border: none;
+}
+
+.per-app-volume {
+  background-color: #{"@noti-bg-alt"};
+  padding: 4px 8px 8px 8px;
+  margin: 0px 8px 8px 8px;
+  border-radius: 12px;
+}

meson.build

@@ -13,6 +13,8 @@ gnome = import('gnome')
 
 app_resources = []
 
+config_path = join_paths(get_option('sysconfdir'), 'xdg', 'swaync')
+
 subdir('data')
 subdir('src')
 

src/meson.build

@@ -121,8 +121,6 @@ args = [
   '--pkg=GtkLayerShell-0.1',
 ]
 
-sysconfdir = get_option('sysconfdir')
-
 app_resources += gnome.compile_resources('sway_notification_center-resources',
   'sway_notification_center.gresource.xml',
   c_name: 'sway_notification_center'
@@ -142,8 +140,6 @@ executable('swaync-client',
   install: true,
 )
 
-config_path = join_paths(sysconfdir, 'xdg/swaync')
-
 config_data = configuration_data()
 config_data.set_quoted('JSONPATH', join_paths('/', config_path, 'configSchema.json'))
 config_json = configure_file(
@@ -152,6 +148,5 @@ config_json = configure_file(
   configuration : config_data
 )
 
-install_data('style.css', install_dir : config_path)
 install_data(config_json, install_dir : config_path)
 install_data('configSchema.json', install_dir : config_path)

src/style.css

-/*
- * vim: ft=less
- */
-
-@define-color cc-bg rgba(0, 0, 0, 0.7);
-
-@define-color noti-border-color rgba(255, 255, 255, 0.15);
-@define-color noti-bg rgb(48, 48, 48);
-@define-color noti-bg-darker rgb(38, 38, 38);
-@define-color noti-bg-hover rgb(56, 56, 56);
-@define-color noti-bg-focus rgba(68, 68, 68, 0.6);
-@define-color noti-close-bg rgba(255, 255, 255, 0.1);
-@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);
-
-@define-color text-color rgb(255, 255, 255);
-@define-color text-color-disabled rgb(150, 150, 150);
-
-@define-color bg-selected rgb(0, 128, 255);
-
-.notification-group {
-}
-
-/* Set lower stacked notifications opacity to 0 */
-.notification-group.collapsed
-  .notification-row:not(:last-child)
-  .notification-action
-  *,
-.notification-group.collapsed
-  .notification-row:not(:last-child)
-  .notification-default-action
-  * {
-  transition: opacity 400ms ease-in-out;
-  opacity: 0;
-}
-
-.notification-group-buttons,
-.notification-group-headers {
-  margin: 0 16px;
-  color: @text-color;
-}
-
-.notification-group-icon {
-}
-
-.notification-group > widget {
-}
-.notification-group.collapsed:hover .notification-default-action,
-.notification-group.collapsed:hover .notification-action {
-  background-color: @noti-bg-hover;
-}
-
-.notification-row {
-  outline: none;
-}
-
-.notification-row:focus,
-.notification-row:hover {
-  background: @noti-bg-focus;
-}
-
-.notification {
-  border-radius: 12px;
-  margin: 6px 12px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7),
-    0 2px 6px 2px rgba(0, 0, 0, 0.3);
-  padding: 0;
-}
-
-/* Uncomment to enable specific urgency colors
-.notification.low {
-  background: yellow;
-  padding: 6px;
-  border-radius: 12px;
-}
-
-.notification.normal {
-  background: green;
-  padding: 6px;
-  border-radius: 12px;
-}
-
-.notification.critical {
-  background: red;
-  padding: 6px;
-  border-radius: 12px;
-}
-
-.notification-group.low {
-  background: yellow;
-  padding: 6px;
-  border-radius: 12px;
-}
-
-.notification-group.normal {
-  background: green;
-  padding: 6px;
-  border-radius: 12px;
-}
-
-.notification-group.critical {
-  background: red;
-  padding: 6px;
-  border-radius: 12px;
-}
-*/
-
-.notification-content {
-  background: transparent;
-  padding: 6px;
-  border-radius: 12px;
-}
-
-.close-button {
-  background: @noti-close-bg;
-  color: @text-color;
-  text-shadow: none;
-  padding: 0;
-  border-radius: 100%;
-  margin-top: 10px;
-  margin-right: 16px;
-  box-shadow: none;
-  border: none;
-  min-width: 24px;
-  min-height: 24px;
-}
-
-.close-button:hover {
-  box-shadow: none;
-  background: @noti-close-bg-hover;
-  transition: all 0.15s ease-in-out;
-  border: none;
-}
-
-.notification-default-action,
-.notification-action {
-  padding: 4px;
-  margin: 0;
-  box-shadow: none;
-  background: @noti-bg;
-  border: 1px solid @noti-border-color;
-  color: @text-color;
-  transition: all 0.15s ease-in-out;
-}
-
-.notification-default-action:hover,
-.notification-action:hover {
-  -gtk-icon-effect: none;
-  background: @noti-bg-hover;
-}
-
-.notification-default-action {
-  border-radius: 12px;
-}
-
-/* When alternative actions are visible */
-.notification-default-action:not(:only-child) {
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-
-.notification-action {
-  border-radius: 0px;
-  border-top: none;
-  border-right: none;
-}
-
-/* add bottom border radius to eliminate clipping */
-.notification-action:first-child {
-  border-bottom-left-radius: 10px;
-}
-
-.notification-action:last-child {
-  border-bottom-right-radius: 10px;
-  border-right: 1px solid @noti-border-color;
-}
-
-.inline-reply {
-  margin-top: 8px;
-}
-.inline-reply-entry {
-  background: @noti-bg-darker;
-  color: @text-color;
-  caret-color: @text-color;
-  border: 1px solid @noti-border-color;
-  border-radius: 12px;
-}
-.inline-reply-button {
-  margin-left: 4px;
-  background: @noti-bg;
-  border: 1px solid @noti-border-color;
-  border-radius: 12px;
-  color: @text-color;
-}
-.inline-reply-button:disabled {
-  background: initial;
-  color: @text-color-disabled;
-  border: 1px solid transparent;
-}
-.inline-reply-button:hover {
-  background: @noti-bg-hover;
-}
-
-.image {
-  -gtk-icon-effect: none;
-}
-
-.body-image {
-  margin-top: 6px;
-  background-color: white;
-  border-radius: 12px;
-}
-
-.summary {
-  font-size: 16px;
-  font-weight: bold;
-  background: transparent;
-  color: @text-color;
-  text-shadow: none;
-}
-
-.time {
-  font-size: 16px;
-  font-weight: bold;
-  background: transparent;
-  color: @text-color;
-  text-shadow: none;
-  margin-right: 18px;
-}
-
-.body {
-  font-size: 15px;
-  font-weight: normal;
-  background: transparent;
-  color: @text-color;
-  text-shadow: none;
-}
-
-.control-center {
-  background: @cc-bg;
-}
-
-.control-center-list {
-  background: transparent;
-}
-
-.control-center-list-placeholder {
-  opacity: 0.5;
-}
-
-.floating-notifications {
-  background: transparent;
-}
-
-/* Window behind control center and on all other monitors */
-.blank-window {
-  background: alpha(black, 0.25);
-}
-
-/*** Widgets ***/
-
-/* Title widget */
-.widget-title {
-  margin: 8px;
-  font-size: 1.5rem;
-}
-.widget-title > button {
-  font-size: initial;
-  color: @text-color;
-  text-shadow: none;
-  background: @noti-bg;
-  border: 1px solid @noti-border-color;
-  box-shadow: none;
-  border-radius: 12px;
-}
-.widget-title > button:hover {
-  background: @noti-bg-hover;
-}
-
-/* DND widget */
-.widget-dnd {
-  margin: 8px;
-  font-size: 1.1rem;
-}
-.widget-dnd > switch {
-  font-size: initial;
-  border-radius: 12px;
-  background: @noti-bg;
-  border: 1px solid @noti-border-color;
-  box-shadow: none;
-}
-.widget-dnd > switch:checked {
-  background: @bg-selected;
-}
-.widget-dnd > switch slider {
-  background: @noti-bg-hover;
-  border-radius: 12px;
-}
-
-/* Label widget */
-.widget-label {
-  margin: 8px;
-}
-.widget-label > label {
-  font-size: 1.1rem;
-}
-
-/* Mpris widget */
-.widget-mpris {
-  /* The parent to all players */
-}
-.widget-mpris-player {
-  padding: 8px;
-  margin: 8px;
-}
-.widget-mpris-title {
-  font-weight: bold;
-  font-size: 1.25rem;
-}
-.widget-mpris-subtitle {
-  font-size: 1.1rem;
-}
-
-/* Buttons widget */
-.widget-buttons-grid {
-  padding: 8px;
-  margin: 8px;
-  border-radius: 12px;
-  background-color: @noti-bg;
-}
-
-.widget-buttons-grid>flowbox>flowboxchild>button{
-  background: @noti-bg;
-  border-radius: 12px;
-}
-
-/* style given to the active toggle button */
-.widget-buttons-grid>flowbox>flowboxchild>button.toggle:checked {
-}
-
-.widget-buttons-grid>flowbox>flowboxchild>button:hover {
-}
-
-/* Menubar widget */
-.widget-menubar>box>.menu-button-bar>button {
-  border: none;
-  background: transparent;
-}
-
-/* .AnyName { Name defined in config after #
-  background-color: @noti-bg;
-  padding: 8px;
-  margin: 8px;
-  border-radius: 12px;
-}
-
-.AnyName>button {
-  background: transparent;
-  border: none;
-}
-
-.AnyName>button:hover {
-  background-color: @noti-bg-hover;
-} */
-
-.topbar-buttons>button { /* Name defined in config after # */
-  border: none;
-  background: transparent;
-}
-
-/* Volume widget */
-
-.widget-volume {
-  background-color: @noti-bg;
-  padding: 8px;
-  margin: 8px;
-  border-radius: 12px;
-}
-
-.widget-volume>box>button {
-  background: transparent;
-  border: none;
-}
-
-.per-app-volume {
-  background-color: @noti-bg-alt;
-  padding: 4px 8px 8px 8px;
-  margin: 0px 8px 8px 8px;
-  border-radius: 12px;
-}
-
-/* Backlight widget */
-.widget-backlight {
-  background-color: @noti-bg;
-  padding: 8px;
-  margin: 8px;
-  border-radius: 12px;
-}
-
-/* Title widget */
-.widget-inhibitors {
-  margin: 8px;
-  font-size: 1.5rem;
-}
-.widget-inhibitors > button {
-  font-size: initial;
-  color: @text-color;
-  text-shadow: none;
-  background: @noti-bg;
-  border: 1px solid @noti-border-color;
-  box-shadow: none;
-  border-radius: 12px;
-}
-.widget-inhibitors > button:hover {
-  background: @noti-bg-hover;
-}