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 ? numbered_active_indicator
: ""; : "";
return `workspace-number ${numActiveInd}`; return `workspace-number can_${numbered_active_indicator} ${numActiveInd}`;
} }
return ""; return "default";
}, },
), ),
label: Utils.merge( label: Utils.merge(

4
options.ts
View File

@@ -140,6 +140,8 @@ const options = mkOptions(OPTIONS, {
y_margins: opt("0.4em"), y_margins: opt("0.4em"),
radius: opt("0.3em"), radius: opt("0.3em"),
opacity: opt(100), opacity: opt(100),
background_opacity: opt(100),
background_hover_opacity: opt(100),
background: opt(colors.base2), background: opt(colors.base2),
hover: opt(colors.surface1), hover: opt(colors.surface1),
text: opt(colors.lavender), text: opt(colors.lavender),
@@ -151,7 +153,7 @@ const options = mkOptions(OPTIONS, {
}, },
workspaces: { workspaces: {
background: opt(colors.base2), background: opt(colors.base2),
hover: opt(colors.surface1), hover: opt(colors.pink),
available: opt(colors.sky), available: opt(colors.sky),
occupied: opt(colors.flamingo), occupied: opt(colors.flamingo),
active: opt(colors.pink), 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 { .bar_item_box_visible {
background-color: $bar-buttons-background; background-color: transparentize($bar-buttons-background, $transparency-value);
border-radius: $bar-buttons-radius; border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem; padding: 0.2rem 0.9rem;
margin: $bar-buttons-y_margins $bar-buttons-spacing; margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100; opacity: $bar-buttons-opacity/100;
&:hover { &:hover {
background: $bar-buttons-hover; background: transparentize($bar-buttons-hover, $transparency-value-hover);
} }
&.battery { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.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 { &: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 { &.workspaces {
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background); background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background), $transparency-value);
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-workspaces-hover);
}
} }
} }

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

@@ -42,6 +42,7 @@
} }
&.underline { &.underline {
border-top: 0.1em solid transparent;
border-bottom: 0.1em solid $bar-buttons-workspaces-numbered_active_underline_color; 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.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.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.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.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.background, title: 'Button Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }), Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),
@@ -29,6 +31,7 @@ export const BarTheme = () => {
Header('Workspaces'), Header('Workspaces'),
Option({ opt: options.theme.bar.buttons.workspaces.background, title: 'Background', type: 'color' }), 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.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.occupied, title: 'Workspace Occupied Color', type: 'color' }),
Option({ opt: options.theme.bar.buttons.workspaces.active, title: 'Workspace Active Color', type: 'color' }), Option({ opt: options.theme.bar.buttons.workspaces.active, title: 'Workspace Active Color', type: 'color' }),