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

Added the ability to apply custom opacity to all elements. (#140)

Browse Source 
* Added the ability to apply custom opacity to all elements.

* Apply menu opacity to settings menu
This commit is contained in:
Jas Singh
2024-08-16 22:50:05 -07:00
committed by GitHub
parent b3b397d479
commit 0bcbe05a0b
19 changed files with 61 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
options.ts
View File

@@ -86,6 +86,7 @@ const options = mkOptions(OPTIONS, {
},
notification: {
background: opt(tertiary_colors.mantle),
opacity: opt(100),
actions: {
background: opt(secondary_colors.lavender),
text: opt(colors.mantle),
@@ -103,6 +104,7 @@ const options = mkOptions(OPTIONS, {
osd: {
enable: opt(true),
orientation: opt<OSDOrientation>("vertical"),
opacity: opt(100),
bar_container: opt(colors.crust),
icon_container: opt(tertiary_colors.lavender),
bar_color: opt(tertiary_colors.lavender),
@@ -119,6 +121,7 @@ const options = mkOptions(OPTIONS, {
bar: {
floating: opt(false),
margin_top: opt("0.5em"),
opacity: opt(100),
margin_bottom: opt("0em"),
margin_sides: opt("0.5em"),
border_radius: opt("0.4em"),
@@ -130,6 +133,7 @@ const options = mkOptions(OPTIONS, {
monochrome: opt(false),
spacing: opt("0.25em"),
radius: opt("0.3em"),
opacity: opt(100),
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.lavender),
@@ -213,6 +217,7 @@ const options = mkOptions(OPTIONS, {
menus: {
monochrome: opt(false),
background: opt(colors.crust),
opacity: opt(100),
cards: opt(colors.base),
card_radius: opt("0.4em"),
border: {

7
scss/style/bar/bar.scss
View File

@@ -1,5 +1,4 @@
.bar {
.bar-panel-container {
margin-top: if($bar-floating, $bar-margin_top, 0em);
margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
@@ -7,8 +6,11 @@
margin-right: if($bar-floating, $bar-margin_sides, 0em);
}
.bar-panel {
background: if($bar-transparent, transparent, $bar-background);
$bar-opacity-ratio: $bar-opacity / 100;
$transparency-value: 1 - $bar-opacity-ratio;
background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
border-radius: if($bar-floating, $bar-border_radius, 0em);
}
}
@@ -18,6 +20,7 @@
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: 0.5rem $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100;
&:hover {
background: $bar-buttons-hover;

4
scss/style/common/general.scss
View File

@@ -1,6 +1,8 @@
@import '../colors.scss';
window.popup {
opacity: $bar-menus-opacity/100;
menuitem {
label {
color: $bar-menus-popover-text;
@@ -32,6 +34,8 @@ tooltip {
all: unset;
}
opacity: $bar-menus-opacity/100;
font-size: 1.1em;
>*>* {

1
scss/style/menus/audiomenu.scss
View File

@@ -1,6 +1,7 @@
.menu-items.audio {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-dropdown-label.audio {

1
scss/style/menus/bluetooth.scss
View File

@@ -1,6 +1,7 @@
.menu-items.bluetooth {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-items-container.bluetooth {

1
scss/style/menus/calendar.scss
View File

@@ -6,6 +6,7 @@
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
border-radius: $bar-menus-border-radius;
margin-right: 0.5em;
opacity: $bar-menus-opacity/100;
}
.calendar-menu-item-container {

1
scss/style/menus/dashboard.scss
View File

@@ -4,6 +4,7 @@
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
border-radius: $bar-menus-border-radius;
opacity: $bar-menus-opacity/100;
button {
border-radius: 0.4em;

3
scss/style/menus/energy.scss
View File

@@ -1,6 +1,7 @@
.menu-items.energy {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-items-container.energy {
@@ -34,6 +35,7 @@
&:hover {
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
label {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}
@@ -45,6 +47,7 @@
&.active {
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
image {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}

1
scss/style/menus/media.scss
View File

@@ -1,6 +1,7 @@
.menu-items.media {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-items-container.media {

1
scss/style/menus/network.scss
View File

@@ -1,6 +1,7 @@
.menu-items.network {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-items-container.network {

1
scss/style/menus/notifications.scss
View File

@@ -6,6 +6,7 @@
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
border-radius: $bar-menus-border-radius;
margin-right: 0.45em;
opacity: $bar-menus-opacity/100;
.window-content.notificationsmenu-window {
margin-right: 0.50em;

1
scss/style/menus/power.scss
View File

@@ -14,6 +14,7 @@ window#verification .verification {
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
opacity: $bar-menus-opacity/100;
.verification-content {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);

1
scss/style/notifications/popups.scss
View File

@@ -6,6 +6,7 @@
min-width: 26em;
min-height: 6rem;
border-radius: 0.6em;
opacity: $notification-opacity/100;
}
.notification-card-container {

1
scss/style/osd/index.scss
View File

@@ -1,6 +1,7 @@
.indicator {
.osd-container {
margin: $osd-margins;
opacity: $osd-opacity/100;
}
.osd-label-container {

1
scss/style/settings/dialog.scss
View File

@@ -1,4 +1,5 @@
window.settings-dialog {
opacity: $bar-menus-opacity/100;
background-color: $bar-menus-cards;
color: $bar-menus-text;

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

@@ -14,6 +14,8 @@ export const BarTheme = () => {
Header('General'),
Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }),
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.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' }),

1
widget/settings/pages/theme/menus/index.ts
View File

@@ -27,6 +27,7 @@ export const MenuTheme = () => {
Option({ opt: options.wallpaper.enable, title: 'Apply Wallpapers', subtitle: 'Whether to apply the wallpaper or to only use it for Matugen color generation.', type: 'boolean' }),
Option({ opt: options.wallpaper.image, title: 'Wallpaper', subtitle: options.wallpaper.image.bind("value"), type: 'wallpaper' }),
Option({ opt: options.theme.bar.menus.background, title: 'Background Color', type: 'color' }),
Option({ opt: options.theme.bar.menus.opacity, title: 'Menu Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.menus.cards, title: 'Cards', type: 'color' }),
Option({ opt: options.theme.bar.menus.card_radius, title: 'Card Radius', type: 'string' }),
Option({ opt: options.theme.bar.menus.text, title: 'Primary Text', type: 'color' }),

1
widget/settings/pages/theme/notifications/index.ts
View File

@@ -14,6 +14,7 @@ export const NotificationsTheme = () => {
children: [
Header('Notifications Theme Settings'),
Option({ opt: options.theme.notification.background, title: 'Notification Background', type: 'color' }),
Option({ opt: options.theme.notification.opacity, title: 'Notification Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.notification.actions.background, title: 'Action Button Background', subtitle: 'Buttons that perform actions within a notification', type: 'color' }),
Option({ opt: options.theme.notification.actions.text, title: 'Action Button Text Color', type: 'color' }),
Option({ opt: options.theme.notification.label, title: 'Label', type: 'color' }),

1
widget/settings/pages/theme/osd/index.ts
View File

@@ -13,6 +13,7 @@ export const OsdTheme = () => {
vertical: true,
children: [
Header('On Screen Display Settings'),
Option({ opt: options.theme.osd.opacity, title: 'OSD Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.osd.bar_color, title: 'Bar', type: 'color' }),
Option({ opt: options.theme.osd.bar_overflow_color, title: 'Bar Overflow', subtitle: 'Overflow color is for when the volume goes over a 100', type: 'color' }),
Option({ opt: options.theme.osd.bar_empty_color, title: 'Bar Background', type: 'color' }),