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

feat: add switch and slider radius (#367)

Browse Source 
* feat: add switch radius

* feat: add slider radius

* Update slider radii

* Update widget/settings/pages/theme/menus/index.ts

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* Update widget/settings/pages/theme/menus/index.ts

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* Update widget/settings/pages/theme/menus/index.ts

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* Update widget/settings/pages/theme/menus/index.ts

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
This commit is contained in:
Rubin Bhandari
2024-10-26 12:50:42 +05:45
committed by GitHub
parent 37ab13a829
commit bf6fc3dbea
4 changed files with 158 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
options.ts
View File

@@ -387,6 +387,8 @@ const options = mkOptions(OPTIONS, {
enabled: opt(colors.lavender), enabled: opt(colors.lavender),
disabled: opt(tertiary_colors.surface0), disabled: opt(tertiary_colors.surface0),
puck: opt(secondary_colors.surface1), puck: opt(secondary_colors.surface1),
radius: opt('0.2em'),
slider_radius: opt('0.2em'),
}, },
check_radio_button: { check_radio_button: {
background: opt(colors.surface1), background: opt(colors.surface1),
@@ -411,6 +413,8 @@ const options = mkOptions(OPTIONS, {
background: opt(tertiary_colors.surface2), background: opt(tertiary_colors.surface2),
backgroundhover: opt(colors.surface1), backgroundhover: opt(colors.surface1),
puck: opt(colors.overlay0), puck: opt(colors.overlay0),
slider_radius: opt('0.3rem'),
progress_radius: opt('0.3rem'),
}, },
dropdownmenu: { dropdownmenu: {
background: opt(colors.crust), background: opt(colors.crust),

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

@@ -2,7 +2,6 @@
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color); 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); border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
} }
.menu-items-container.media { .menu-items-container.media {
@@ -79,18 +78,27 @@
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
&:hover { &:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), 0.5); background: transparentize(
if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background),
0.5
);
} }
&.active { &.active {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-media-buttons-enabled
);
&:hover { &:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), 0.5); background: transparentize(
if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled),
0.5
);
} }
} }
} }
} }
image { image {
@@ -102,13 +110,17 @@
margin-bottom: 1em; margin-bottom: 1em;
trough { trough {
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-media-slider-background); background: if(
border-radius: 0.2em; $bar-menus-monochrome,
$bar-menus-slider-background,
$bar-menus-menu-media-slider-background
);
border-radius: $bar-menus-slider-progress-radius;
highlight, highlight,
progress { progress {
border-radius: 0.2em; border-radius: $bar-menus-slider-progress-radius;
min-height: .85em; min-height: 0.85em;
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary); background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
} }
} }
@@ -119,7 +131,14 @@
&:hover { &:hover {
trough { trough {
background: transparentize(if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-media-slider-backgroundhover), 0.3); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-slider-backgroundhover,
$bar-menus-menu-media-slider-backgroundhover
),
0.3
);
} }
} }
} }

12
scss/style/menus/menu.scss
View File

@@ -1,12 +1,12 @@
.menu-slider { .menu-slider {
trough { trough {
border-radius: 0.3rem; border-radius: $bar-menus-slider-progress-radius;
background: $surface0; background: $surface0;
highlight, highlight,
progress { progress {
background: $peach; background: $peach;
border-radius: 0.3rem; border-radius: $bar-menus-slider-progress-radius;
} }
} }
@@ -16,7 +16,7 @@
min-height: 0.6rem; min-height: 0.6rem;
min-width: 0.6rem; min-width: 0.6rem;
border: 0rem solid transparent; border: 0rem solid transparent;
border-radius: 0.3rem; border-radius: $bar-menus-slider-slider-radius;
} }
&:hover { &:hover {
@@ -34,7 +34,7 @@
.menu-switch { .menu-switch {
font-size: 1.3em; font-size: 1.3em;
background-color: $surface0; background-color: $surface0;
border-radius: 0.2em; border-radius: $bar-menus-switch-radius;
&:checked { &:checked {
background: $sky; background: $sky;
@@ -44,7 +44,7 @@
highlight, highlight,
progress { progress {
background-color: $peach; background-color: $peach;
border-radius: 0.3em; border-radius: $bar-menus-switch-radius;
} }
} }
@@ -54,7 +54,7 @@
min-height: 1em; min-height: 1em;
min-width: 1em; min-width: 1em;
border: 0em solid transparent; border: 0em solid transparent;
border-radius: 0.2em; border-radius: $bar-menus-switch-slider-radius;
margin: 0.1em 0.15em; margin: 0.1em 0.15em;
} }

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

@@ -91,6 +91,12 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Header('Switch'), Header('Switch'),
Option({ opt: options.theme.bar.menus.switch.enabled, title: 'Enabled', type: 'color' }), Option({ opt: options.theme.bar.menus.switch.enabled, title: 'Enabled', type: 'color' }),
Option({ opt: options.theme.bar.menus.switch.disabled, title: 'Disabled', type: 'color' }), Option({ opt: options.theme.bar.menus.switch.disabled, title: 'Disabled', type: 'color' }),
Option({ opt: options.theme.bar.menus.switch.radius, title: 'Switch Radius', type: 'string' }),
Option({
opt: options.theme.bar.menus.switch.slider_radius,
title: 'Switch Puck Radius',
type: 'string',
}),
Option({ opt: options.theme.bar.menus.switch.puck, title: 'Puck', type: 'color' }), Option({ opt: options.theme.bar.menus.switch.puck, title: 'Puck', type: 'color' }),
Header('Check/Radio Buttons'), Header('Check/Radio Buttons'),
@@ -123,6 +129,16 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
title: 'Background (Hover)', title: 'Background (Hover)',
type: 'color', type: 'color',
}), }),
Option({
opt: options.theme.bar.menus.slider.slider_radius,
title: 'Slider Puck Radius',
type: 'string',
}),
Option({
opt: options.theme.bar.menus.slider.progress_radius,
title: 'Slider/Progress Bar Radius',
type: 'string',
}),
Option({ opt: options.theme.bar.menus.slider.puck, title: 'Puck', type: 'color' }), Option({ opt: options.theme.bar.menus.slider.puck, title: 'Puck', type: 'color' }),
Header('Dropdown Menu'), Header('Dropdown Menu'),