diff options
Diffstat (limited to 'lib/res/styles/partials')
| -rw-r--r-- | lib/res/styles/partials/_base.scss | 85 | ||||
| -rw-r--r-- | lib/res/styles/partials/_control-center.scss | 142 | ||||
| -rw-r--r-- | lib/res/styles/partials/_launcher.scss | 67 | ||||
| -rw-r--r-- | lib/res/styles/partials/_notification.scss | 67 | ||||
| -rw-r--r-- | lib/res/styles/partials/_panel.scss | 129 |
5 files changed, 490 insertions, 0 deletions
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; + } + } +} |