From 37d5ef75306c45ca95550f4af40d9750c5b9cb88 Mon Sep 17 00:00:00 2001
From: Hannes Schulze <haschu0103@outlook.de>
Date: Mon, 6 May 2024 13:42:55 +0200
Subject: initial commit

yup, i definitely wrote all of this in a single commit
---
 res/styles/partials/_base.scss           |  85 ++++++++++++++++++
 res/styles/partials/_control-center.scss | 142 +++++++++++++++++++++++++++++++
 res/styles/partials/_launcher.scss       |  67 +++++++++++++++
 res/styles/partials/_notification.scss   |  67 +++++++++++++++
 res/styles/partials/_panel.scss          | 129 ++++++++++++++++++++++++++++
 5 files changed, 490 insertions(+)
 create mode 100644 res/styles/partials/_base.scss
 create mode 100644 res/styles/partials/_control-center.scss
 create mode 100644 res/styles/partials/_launcher.scss
 create mode 100644 res/styles/partials/_notification.scss
 create mode 100644 res/styles/partials/_panel.scss

(limited to 'res/styles/partials')

diff --git a/res/styles/partials/_base.scss b/res/styles/partials/_base.scss
new file mode 100644
index 0000000..4e4b88b
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/res/styles/partials/_control-center.scss b/res/styles/partials/_control-center.scss
new file mode 100644
index 0000000..991f8e1
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/res/styles/partials/_launcher.scss b/res/styles/partials/_launcher.scss
new file mode 100644
index 0000000..baf002e
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/res/styles/partials/_notification.scss b/res/styles/partials/_notification.scss
new file mode 100644
index 0000000..cfcbd40
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/res/styles/partials/_panel.scss b/res/styles/partials/_panel.scss
new file mode 100644
index 0000000..33cb580
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
-- 
cgit v1.3.1