add resources

11 files changed, 630 insertions, 0 deletions

diff --git a/lib/res/styles/_common.scss b/lib/res/styles/_common.scss
new file mode 100644
index 0000000..e9c3c93
--- /dev/null
+++ b/lib/res/styles/_common.scss
@@ -0,0 +1,5 @@
+@import './partials/base';
+@import './partials/notification';
+@import './partials/panel';
+@import './partials/launcher';
+@import './partials/control-center';
diff --git a/lib/res/styles/default.scss b/lib/res/styles/default.scss
new file mode 100644
index 0000000..5252cd1
--- /dev/null
+++ b/lib/res/styles/default.scss
@@ -0,0 +1 @@
+@import './monokai-pro';
diff --git a/lib/res/styles/meson.build b/lib/res/styles/meson.build
new file mode 100644
index 0000000..ea1fb2f
--- /dev/null
+++ b/lib/res/styles/meson.build
@@ -0,0 +1,35 @@
+sassc = find_program('sassc')
+
+styles = ['default', 'monokai-pro', 'teatime']
+style_targets = []
+
+common_inputs = files(
+  'partials/_base.scss',
+  'partials/_notification.scss',
+  'partials/_panel.scss',
+  'partials/_launcher.scss',
+  'partials/_control-center.scss',
+  '_common.scss',
+)
+
+foreach style : styles
+  style_targets += custom_target(
+    style + '.scss',
+    input: [style + '.scss'] + common_inputs,
+    output: style + '.css',
+    command: [sassc, '-a', '-M', '-t', 'compact', '@INPUT0@', '@OUTPUT@'],
+  )
+endforeach
+
+styles_resource = gnome.compile_resources(
+  'styles-resource',
+  'styles.gresource.xml',
+  source_dir: [
+    meson.current_build_dir(),
+    meson.current_source_dir(),
+  ],
+  dependencies: style_targets,
+  c_name: 'foobar_styles',
+  export: true,
+  extra_args: [ '--manual-register' ],
+)
diff --git a/lib/res/styles/monokai-pro.scss b/lib/res/styles/monokai-pro.scss
new file mode 100644
index 0000000..5cf35b8
--- /dev/null
+++ b/lib/res/styles/monokai-pro.scss
@@ -0,0 +1,45 @@
+//
+// Color scheme based on the awesome Monokai Pro (https://monokai.pro/).
+//
+// The accent color is a custom one though ¯\_(ツ)_/¯
+//
+
+$foobar-color-background-primary: #19181A;
+$foobar-color-background-secondary: #2d2a2e;
+$foobar-color-background-tertiary: #3e3b40;
+$foobar-color-background-quaternary: #474449;
+$foobar-color-foreground-primary: #fcfcfa;
+$foobar-color-foreground-secondary: transparentize($foobar-color-foreground-primary, 0.5);
+$foobar-color-foreground-tertiary: transparentize($foobar-color-foreground-primary, 0.8);
+$foobar-color-foreground-quaternary: transparentize($foobar-color-foreground-primary, 0.9);
+$foobar-color-accent-primary: #c3b4b0;
+$foobar-color-accent-secondary: transparentize($foobar-color-accent-primary, 0.5);
+$foobar-color-accent-tertiary: transparentize($foobar-color-accent-primary, 0.8);
+$foobar-color-accent-quaternary: transparentize($foobar-color-accent-primary, 0.9);
+$foobar-color-special-primary: #fc9867;
+$foobar-color-special-secondary: transparentize($foobar-color-special-primary, 0.5);
+$foobar-color-special-tertiary: transparentize($foobar-color-special-primary, 0.8);
+$foobar-color-special-quaternary: transparentize($foobar-color-special-primary, 0.9);
+$foobar-color-urgent-primary: #ff6188;
+$foobar-color-urgent-secondary: transparentize($foobar-color-urgent-primary, 0.5);
+$foobar-color-urgent-tertiary: transparentize($foobar-color-urgent-primary, 0.8);
+$foobar-color-urgent-quaternary: transparentize($foobar-color-urgent-primary, 0.9);
+$foobar-color-border: #101011;
+$foobar-dim-border-strong: 2px;
+$foobar-dim-border-light: 1px;
+$foobar-dim-radius-large: 12px;
+$foobar-dim-radius-small: 6px;
+$foobar-dim-spacing-relaxed: 18px;
+$foobar-dim-spacing-large: 12px;
+$foobar-dim-spacing-medium: 6px;
+$foobar-dim-spacing-small: 3px;
+$foobar-dim-margin-large-horizontal: 24px;
+$foobar-dim-margin-large-vertical: 18px;
+$foobar-dim-margin-medium-horizontal: 18px;
+$foobar-dim-margin-medium-vertical: 12px;
+$foobar-dim-margin-small-horizontal: 6px;
+$foobar-dim-margin-small-vertical: 6px;
+$foobar-dim-font-large: 16px;
+$foobar-dim-font-small: 13px;
+
+@import './common';
diff --git a/lib/res/styles/partials/_base.scss b/lib/res/styles/partials/_base.scss
new file mode 100644
index 0000000..b64c475
--- /dev/null
+++ b/lib/res/styles/partials/_base.scss
@@ -0,0 +1,85 @@
+//
+// Set some more minimal defaults than the ones provided by Adwaita.
+//
+
+label, image {
+  color: $foobar-color-foreground-primary;
+  -gtk-icon-filter: none;
+  font-weight: normal;
+}
+
+listview {
+  background: transparent;
+
+  & row {
+    padding: 0;
+  }
+
+  & row:hover {
+    background: $foobar-color-accent-quaternary;
+  }
+
+  & row:active,
+  & row:active:hover,
+  & row:selected,
+  & row:selected:hover {
+    background: $foobar-color-accent-tertiary;
+  }
+
+  & row:hover,
+  & row:active,
+  & row:focus,
+  & row:selected {
+    outline: none;
+  }
+}
+
+separator {
+  background: $foobar-color-border;
+  min-width: $foobar-dim-border-light;
+  min-width: $foobar-dim-border-light;
+}
+
+button {
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  border-radius: $foobar-dim-radius-small;
+  background: transparent;
+  transition: background-color 0.1s;
+
+  &:hover {
+    background: $foobar-color-accent-quaternary;
+  }
+
+  &:active {
+    background: $foobar-color-accent-tertiary;
+  }
+}
+
+scale {
+  &.horizontal {
+    padding: 8px 2px;
+  }
+
+  &.vertical {
+    padding: 2px 8px;
+  }
+
+  & trough {
+    // XXX: Using a transparent color here causes glitches when draggin the slider to the left.
+    background: mix($foobar-color-accent-primary, $foobar-color-background-secondary, 10%);
+    border-color: mix($foobar-color-accent-primary, $foobar-color-background-secondary, 10%);
+  }
+
+  & highlight {
+    background: $foobar-color-accent-primary;
+    border-color: $foobar-color-accent-primary;
+  }
+
+  & slider {
+    background: $foobar-color-accent-primary;
+    border-color: $foobar-color-accent-primary;
+    box-shadow: none;
+  }
+}
diff --git a/lib/res/styles/partials/_control-center.scss b/lib/res/styles/partials/_control-center.scss
new file mode 100644
index 0000000..e91a105
--- /dev/null
+++ b/lib/res/styles/partials/_control-center.scss
@@ -0,0 +1,142 @@
+//
+// Styles for the control center, including its "controls" and "notifications" sections.
+//
+
+window.control-center {
+  // XXX: To prevent some glitches
+  background: rgba(0, 0, 0, 0.005);
+  border-radius: $foobar-dim-radius-large;
+
+  & > box {
+    background: $foobar-color-background-primary;
+    // XXX: Applying the border directly to the window seems to confuse hyprland, GTK, or something else.
+    // To reproduce: set position to "right", alignment to "start", and foobar-dim-border-light to some large value.
+    border: $foobar-dim-border-light solid $foobar-color-border;
+    border-radius: $foobar-dim-radius-large;
+  }
+
+  & control-button,
+  & control-slider {
+    background: $foobar-color-background-secondary;
+    border: $foobar-dim-border-light solid $foobar-color-border;
+    border-radius: $foobar-dim-radius-large;
+    transition: background-color 0.1s, border 0.1s;
+
+    & label,
+    & image {
+      transition: color 0.1s;
+    }
+
+    & image {
+      -gtk-icon-size: 20px;
+    }
+
+    & button {
+      transition: background-color 0.1s, color 0.1s;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+
+      // "Linked" style
+
+      &:last-child {
+        border-top-right-radius: $foobar-dim-radius-large;
+        border-bottom-right-radius: $foobar-dim-radius-large;
+      }
+
+      &:first-child {
+        border-top-left-radius: $foobar-dim-radius-large;
+        border-bottom-left-radius: $foobar-dim-radius-large;
+      }
+    }
+
+    & scale {
+      margin-top: $foobar-dim-spacing-medium;
+    }
+
+    & > .primary {
+      padding: $foobar-dim-margin-medium-vertical $foobar-dim-margin-medium-horizontal;
+
+      & label {
+        font-weight: bold;
+      }
+
+      & image {
+        margin-right: $foobar-dim-spacing-medium;
+      }
+    }
+
+    & > .expand {
+      border-left: $foobar-dim-border-light solid $foobar-color-border;
+      padding: $foobar-dim-margin-small-vertical $foobar-dim-margin-small-horizontal;
+
+      & image {
+        transition: transform 0.1s;
+        transform: rotate(0deg);
+      }
+    }
+
+    &.toggled {
+      background: $foobar-color-accent-primary;
+
+      & label,
+      & image {
+        color: $foobar-color-background-primary;
+      }
+    }
+
+    &.expanded {
+      & > .expand image {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  & control-details {
+    & scrolledwindow {
+      background: $foobar-color-background-secondary;
+      border-top: $foobar-dim-border-light solid $foobar-color-border;
+      border-bottom: $foobar-dim-border-light solid $foobar-color-border;
+    }
+
+    & row {
+      $inset: $foobar-dim-spacing-medium;
+
+      padding-top: $foobar-dim-margin-small-vertical;
+      padding-bottom: $foobar-dim-margin-small-vertical;
+      padding-left: $foobar-dim-margin-medium-horizontal - $inset; // Aligned to primary button content
+      padding-right: $foobar-dim-margin-small-horizontal - $inset; // Aligned to expand button content
+      margin-top: $inset;
+      margin-left: $inset;
+      margin-right: $inset;
+      border-radius: $foobar-dim-radius-small;
+
+      &:last-child {
+        margin-bottom: $inset;
+      }
+
+      & .accessory {
+        margin-left: $foobar-dim-spacing-medium;
+      }
+    }
+  }
+
+  & .notifications {
+    & row,
+    & row:hover,
+    & row:active,
+    & row:focus ,
+    & row:selected {
+      background: transparent;
+    }
+
+    & notification .content {
+      background: $foobar-color-background-secondary;
+    }
+  }
+
+  & .placeholder {
+    font-size: $foobar-dim-font-large;
+    color: $foobar-color-foreground-secondary;
+  }
+}
diff --git a/lib/res/styles/partials/_launcher.scss b/lib/res/styles/partials/_launcher.scss
new file mode 100644
index 0000000..55d6bd0
--- /dev/null
+++ b/lib/res/styles/partials/_launcher.scss
@@ -0,0 +1,67 @@
+//
+// Styles for the launcher.
+//
+// The search icon and label should be aligned to the result item icons (at the center) and labels (at the start).
+//
+
+window.launcher {
+  background: $foobar-color-background-primary;
+  border: $foobar-dim-border-light solid $foobar-color-border;
+  border-radius: $foobar-dim-radius-large;
+
+  $search-icon-size: 24px;
+  $app-icon-size: 32px;
+  // How far the app icon needs to extend into the spacing around it.
+  $icon-overrun: ($app-icon-size - $search-icon-size) / 2;
+
+  & .search {
+    padding: $foobar-dim-margin-large-vertical $foobar-dim-margin-large-horizontal;
+
+    & image {
+      -gtk-icon-size: $search-icon-size;
+      margin-right: $foobar-dim-spacing-relaxed;
+      color: $foobar-color-foreground-secondary;
+    }
+
+    & placeholder {
+      color: $foobar-color-foreground-secondary;
+    }
+
+    & text {
+      font-size: $foobar-dim-font-large;
+    }
+  }
+
+  & row {
+    $inset: $foobar-dim-spacing-medium;
+
+    padding-left: $foobar-dim-margin-large-horizontal - $icon-overrun - $inset;
+    padding-right: $foobar-dim-margin-large-horizontal - $inset;
+    padding-top: $foobar-dim-margin-medium-vertical;
+    padding-bottom: $foobar-dim-margin-medium-vertical;
+    margin-top: $inset;
+    margin-left: $inset;
+    margin-right: $inset;
+    border-radius: $foobar-dim-radius-small;
+
+    &:last-child {
+      margin-bottom: $inset;
+    }
+
+    & .icon {
+      -gtk-icon-size: $app-icon-size;
+      margin-right: $foobar-dim-spacing-relaxed - $icon-overrun;
+    }
+
+    & .name {
+      font-size: $foobar-dim-font-small;
+      font-weight: bold;
+    }
+
+    & .description {
+      font-size: $foobar-dim-font-small;
+      margin-top: $foobar-dim-spacing-small;
+      color: $foobar-color-foreground-secondary;
+    }
+  }
+}
diff --git a/lib/res/styles/partials/_notification.scss b/lib/res/styles/partials/_notification.scss
new file mode 100644
index 0000000..a531b87
--- /dev/null
+++ b/lib/res/styles/partials/_notification.scss
@@ -0,0 +1,67 @@
+//
+// General notification style, used both in the control center as well as the notification area
+//
+
+notification {
+  & .content {
+    background: $foobar-color-background-primary;
+    border: $foobar-dim-border-light solid $foobar-color-border;
+    border-radius: $foobar-dim-radius-large;
+    padding: $foobar-dim-margin-medium-vertical $foobar-dim-margin-medium-horizontal;
+  }
+
+  & .icon {
+    -gtk-icon-size: 32px;
+    margin-right: $foobar-dim-spacing-large;
+  }
+
+  & .title {
+    font-weight: bold;
+  }
+
+  & .body {
+    font-size: $foobar-dim-font-small;
+    margin-top: $foobar-dim-spacing-small;
+  }
+
+  & .time {
+    font-size: $foobar-dim-font-small;
+    color: $foobar-color-foreground-secondary;
+    margin-left: $foobar-dim-spacing-medium;
+  }
+
+  & .close-button {
+    min-width: 24px;
+    min-height: 24px;
+    background: $foobar-color-background-secondary;
+    border: $foobar-dim-border-light solid $foobar-color-border;
+    border-radius: 100%;
+
+    &:hover {
+      background: $foobar-color-background-tertiary;
+    }
+
+    &:active {
+      background: $foobar-color-background-quaternary;
+    }
+  }
+}
+
+//
+// Style for the notification area window presenting popup notifications
+//
+
+window.notification-area {
+  &, & listview {
+    // XXX: To prevent some glitches
+    background: rgba(0, 0, 0, 0.005);
+  }
+
+  & row,
+  & row:hover,
+  & row:active,
+  & row:focus ,
+  & row:selected {
+    background: transparent;
+  }
+}
diff --git a/lib/res/styles/partials/_panel.scss b/lib/res/styles/partials/_panel.scss
new file mode 100644
index 0000000..ae9ffdf
--- /dev/null
+++ b/lib/res/styles/partials/_panel.scss
@@ -0,0 +1,129 @@
+//
+// Styles for the panel and its various supported items.
+//
+
+window.panel {
+  background: $foobar-color-background-primary;
+  border: $foobar-dim-border-light solid $foobar-color-border;
+  border-radius: $foobar-dim-radius-large;
+
+  & panel-item.workspaces {
+    & row,
+    & row:hover,
+    & row:active,
+    & row:focus ,
+    & row:selected {
+      background: transparent;
+    }
+
+    & button {
+      border-radius: 100%;
+      outline: $foobar-dim-border-strong solid $foobar-color-accent-primary;
+      outline-offset: 0;
+      border: $foobar-dim-spacing-small solid $foobar-color-background-primary; // Cut-out effect
+      margin: $foobar-dim-border-strong; // To reverse the outline
+      padding: 0;
+      background: transparent;
+      transition: background-color 0.1s;
+
+      &:hover {
+        background: $foobar-color-accent-tertiary;
+      }
+
+      &.visible {
+        background: $foobar-color-accent-secondary;
+      }
+
+      &.active {
+        background: $foobar-color-accent-primary;
+      }
+    }
+
+    @if variable-exists(foobar-color-alternate-primary) {
+      & row:nth-child(even) button:not(.special):not(.urgent) {
+        outline-color: $foobar-color-alternate-primary;
+
+        &:hover {
+          background: $foobar-color-alternate-tertiary;
+        }
+
+        &.visible {
+          background: $foobar-color-alternate-secondary;
+        }
+
+        &.active {
+          background: $foobar-color-alternate-primary;
+        }
+      }
+    }
+
+    & button.special {
+      outline-color: $foobar-color-special-primary;
+
+      &:hover {
+        background: $foobar-color-special-tertiary;
+      }
+
+      &.visible {
+        background: $foobar-color-special-secondary;
+      }
+
+      &.active {
+        background: $foobar-color-special-primary;
+      }
+    }
+
+    & button.urgent {
+      outline-color: $foobar-color-urgent-primary;
+
+      &:hover {
+        background: $foobar-color-urgent-tertiary;
+      }
+
+      &.visible {
+        background: $foobar-color-urgent-secondary;
+      }
+
+      &.active {
+        background: $foobar-color-urgent-primary;
+      }
+    }
+  }
+
+  & panel-item.clock {
+    & button {
+      min-width: 24px;
+      min-height: 24px;
+    }
+
+    & label {
+      font-size: $foobar-dim-font-large;
+      font-weight: bold;
+    }
+  }
+
+  & panel-item.icon {
+    & button {
+      -gtk-icon-size: 20px;
+      min-width: 24px;
+      min-height: 24px;
+    }
+  }
+
+  & panel-item.status {
+    & button {
+      min-width: 24px;
+      min-height: 24px;
+    }
+
+    & image {
+      -gtk-icon-size: 20px;
+    }
+
+    & label {
+      margin-left: $foobar-dim-spacing-small;
+      font-weight: normal;
+      font-size: $foobar-dim-font-small;
+    }
+  }
+}
diff --git a/lib/res/styles/styles.gresource.xml b/lib/res/styles/styles.gresource.xml
new file mode 100644
index 0000000..e708a1d
--- /dev/null
+++ b/lib/res/styles/styles.gresource.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gresources>
+    <gresource prefix="/foobar/styles">
+        <file compressed="true">default.css</file>
+        <file compressed="true">monokai-pro.css</file>
+        <file compressed="true">teatime.css</file>
+    </gresource>
+</gresources>
diff --git a/lib/res/styles/teatime.scss b/lib/res/styles/teatime.scss
new file mode 100644
index 0000000..6889f9b
--- /dev/null
+++ b/lib/res/styles/teatime.scss
@@ -0,0 +1,46 @@
+// Color scheme by the AMAZING Nxdxl
+//                             ^ some guy who thought i wouldn't review the source code before publishing it under my name
+
+$foobar-color-background-primary: #fff6f6;
+$foobar-color-background-secondary: #fff6f6;
+$foobar-color-background-tertiary: #fff6f6;
+$foobar-color-background-quaternary: #fff6f6;
+$foobar-color-foreground-primary: #1b1b2e;
+$foobar-color-foreground-secondary: transparentize($foobar-color-foreground-primary, 0.5);
+$foobar-color-foreground-tertiary: transparentize($foobar-color-foreground-primary, 0.8);
+$foobar-color-foreground-quaternary: transparentize($foobar-color-foreground-primary, 0.9);
+$foobar-color-accent-primary: #c2649f;
+$foobar-color-accent-secondary: transparentize($foobar-color-accent-primary, 0.5);
+$foobar-color-accent-tertiary: transparentize($foobar-color-accent-primary, 0.8);
+$foobar-color-accent-quaternary: transparentize($foobar-color-accent-primary, 0.9);
+$foobar-color-alternate-primary: #4ba89d;
+$foobar-color-alternate-secondary: transparentize($foobar-color-alternate-primary, 0.5);
+$foobar-color-alternate-tertiary: transparentize($foobar-color-alternate-primary, 0.8);
+$foobar-color-alternate-quaternary: transparentize($foobar-color-alternate-primary, 0.9);
+$foobar-color-special-primary: #4ba89d;
+$foobar-color-special-secondary: transparentize($foobar-color-special-primary, 0.5);
+$foobar-color-special-tertiary: transparentize($foobar-color-special-primary, 0.8);
+$foobar-color-special-quaternary: transparentize($foobar-color-special-primary, 0.9);
+$foobar-color-urgent-primary: #cd6868;
+$foobar-color-urgent-secondary: transparentize($foobar-color-urgent-primary, 0.5);
+$foobar-color-urgent-tertiary: transparentize($foobar-color-urgent-primary, 0.8);
+$foobar-color-urgent-quaternary: transparentize($foobar-color-urgent-primary, 0.9);
+$foobar-color-border: #c2649f;
+$foobar-dim-border-strong: 2px;
+$foobar-dim-border-light: 2px;
+$foobar-dim-radius-large: 12px;
+$foobar-dim-radius-small: 6px;
+$foobar-dim-spacing-relaxed: 18px;
+$foobar-dim-spacing-large: 12px;
+$foobar-dim-spacing-medium: 6px;
+$foobar-dim-spacing-small: 3px;
+$foobar-dim-margin-large-horizontal: 24px;
+$foobar-dim-margin-large-vertical: 18px;
+$foobar-dim-margin-medium-horizontal: 18px;
+$foobar-dim-margin-medium-vertical: 12px;
+$foobar-dim-margin-small-horizontal: 6px;
+$foobar-dim-margin-small-vertical: 6px;
+$foobar-dim-font-large: 13px;
+$foobar-dim-font-small: 13px;
+
+@import './common';