LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added bar button & button hover opacity option and fixed workspace module hover styling. (#166)

Browse Source
This commit is contained in:
Jas Singh
2024-08-21 20:02:00 -07:00
committed by GitHub
parent 2aef35afd8
commit c769ebb27b
5 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
scss/style/bar/bar.scss
View File

@@ -19,103 +19,105 @@
}
}
$bar-button-background-opacity-ratio: $bar-buttons-background_opacity / 100;
$transparency-value: 1 - $bar-button-background-opacity-ratio;
$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity / 100;
$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
.bar_item_box_visible {
background-color: $bar-buttons-background;
background-color: transparentize($bar-buttons-background, $transparency-value);
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100;
&:hover {
background: $bar-buttons-hover;
background: transparentize($bar-buttons-hover, $transparency-value-hover);
}
&.battery {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover), $transparency-value-hover);
}
}
&.bluetooth {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover), $transparency-value-hover);
}
}
&.clock {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value-hover);
}
}
&.media {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover), $transparency-value-hover);
}
}
&.dashboard {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-hover), $transparency-value-hover);
}
}
&.network {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover), $transparency-value-hover);
}
}
&.notifications {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover), $transparency-value-hover);
}
}
&.systray {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-hover), $transparency-value-hover);
}
}
&.volume {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover), $transparency-value-hover);
}
}
&.windowtitle {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background);
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover);
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value-hover);
}
}
&.workspaces {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-workspaces-hover);
}
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background), $transparency-value);
}
}

22
scss/style/bar/workspace.scss
View File

@@ -42,6 +42,7 @@
}
&.underline {
border-top: 0.1em solid transparent;
border-bottom: 0.1em solid $bar-buttons-workspaces-numbered_active_underline_color;
}
@@ -53,3 +54,24 @@
}
}
}
.workspace-button {
&:hover label {
color: $bar-buttons-workspaces-hover;
&.default {
background-color: $bar-buttons-workspaces-hover;
}
}
&:hover .can_underline {
border-top: 0.1em solid transparent;
border-bottom: 0.1em solid if($bar-buttons-monochrome, $bar-buttons-workspaces-hover, $bar-buttons-workspaces-hover);
}
&:hover .can_highlight {
background-color: $bar-buttons-workspaces-hover;
color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
}
}