coquille/style.scss
Anthony Rodriguez 5a918d507a
feat: add functionalities to bar
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
2025-02-14 22:19:57 +01:00

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;
}
}