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

4
modules/bar/workspaces/index.ts
View File

@@ -195,9 +195,9 @@ const Workspaces = (monitor = -1, ws = 8) => {
? numbered_active_indicator
: "";
return `workspace-number ${numActiveInd}`;
return `workspace-number can_${numbered_active_indicator} ${numActiveInd}`;
}
return "";
return "default";
},
),
label: Utils.merge(

4
options.ts
View File

@@ -140,6 +140,8 @@ const options = mkOptions(OPTIONS, {
y_margins: opt("0.4em"),
radius: opt("0.3em"),
opacity: opt(100),
background_opacity: opt(100),
background_hover_opacity: opt(100),
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.lavender),
@@ -151,7 +153,7 @@ const options = mkOptions(OPTIONS, {
},
workspaces: {
background: opt(colors.base2),
hover: opt(colors.surface1),
hover: opt(colors.pink),
available: opt(colors.sky),
occupied: opt(colors.flamingo),
active: opt(colors.pink),

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

3
widget/settings/pages/theme/bar/index.ts
View File

@@ -16,6 +16,8 @@ export const BarTheme = () => {
Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
Option({ opt: options.theme.bar.opacity, title: 'Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.buttons.opacity, title: 'Button Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.buttons.background_opacity, title: 'Button Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.buttons.background_hover_opacity, title: 'Button Background Hover Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean', disabledBinding: options.theme.matugen }),
Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),
@@ -29,6 +31,7 @@ export const BarTheme = () => {
Header('Workspaces'),
Option({ opt: options.theme.bar.buttons.workspaces.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.workspaces.hover, title: 'Workspace Hover Color', type: 'color' }),
Option({ opt: options.theme.bar.buttons.workspaces.available, title: 'Workspace Available Color', type: 'color' }),
Option({ opt: options.theme.bar.buttons.workspaces.occupied, title: 'Workspace Occupied Color', type: 'color' }),
Option({ opt: options.theme.bar.buttons.workspaces.active, title: 'Workspace Active Color', type: 'color' }),