This is the base of the bar I want to work with. It includes workspaces for Hyprland, a time/calendar widget, and quick settings including: - Toggles for wifi, bluetooth and idle inhibition (using matcha as a dependency) - Sliders for audio and brightness
89 lines
1.5 KiB
SCSS
89 lines
1.5 KiB
SCSS
@use "sass:color";
|
|
@use "sass:string";
|
|
|
|
@function gtkalpha($c, $a) {
|
|
@return string.unquote("alpha(#{$c},#{$a})");
|
|
}
|
|
|
|
// https://gitlab.gnome.org/GNOME/libadwaita/-/blob/main/src/stylesheet/_colors.scss
|
|
$bg: #{"@window_bg_color"};
|
|
$fg: #{"@window_fg_color"};
|
|
$accent: #{"@accent_color"};
|
|
|
|
.Bar {
|
|
border: none;
|
|
box-shadow: none;
|
|
background-color: $bg;
|
|
color: $fg;
|
|
font-size: 16px;
|
|
padding: 0.5rem;
|
|
|
|
.Workspaces {
|
|
button {
|
|
all: unset;
|
|
min-width: 0.9rem;
|
|
min-height: 0.9rem;
|
|
border: 2px solid $fg;
|
|
border-radius: 50%;
|
|
margin: 0em 0.3rem;
|
|
}
|
|
|
|
.focused {
|
|
border-color: $accent;
|
|
background-color: $accent;
|
|
}
|
|
}
|
|
|
|
.Time {
|
|
calendar {
|
|
label:selected {
|
|
background-color: $accent;
|
|
}
|
|
}
|
|
}
|
|
.Battery label {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.QuickSettings {
|
|
image {
|
|
-gtk-icon-size: 1.2em;
|
|
}
|
|
.Audio,
|
|
.Wifi {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
popover {
|
|
min-width: 350px;
|
|
|
|
.Toggles {
|
|
margin: 0.5em 0;
|
|
button image {
|
|
-gtk-icon-size: 3em;
|
|
}
|
|
}
|
|
trough highlight {
|
|
background-color: $accent;
|
|
border-radius: 2em;
|
|
}
|
|
|
|
slider {
|
|
min-height: 1.7em;
|
|
min-width: 1.7em;
|
|
margin: -0.2em;
|
|
}
|
|
}
|
|
}
|
|
menubutton button {
|
|
background: transparent;
|
|
border-radius: 1em;
|
|
&:hover {
|
|
background-color: gtkalpha($fg, 0.1);
|
|
}
|
|
}
|
|
|
|
popover {
|
|
margin-top: 0.8em;
|
|
}
|
|
}
|