diff --git a/options.ts b/options.ts index a4f8a2a..6a72f82 100644 --- a/options.ts +++ b/options.ts @@ -387,6 +387,8 @@ const options = mkOptions(OPTIONS, { enabled: opt(colors.lavender), disabled: opt(tertiary_colors.surface0), puck: opt(secondary_colors.surface1), + radius: opt('0.2em'), + slider_radius: opt('0.2em'), }, check_radio_button: { background: opt(colors.surface1), @@ -411,6 +413,8 @@ const options = mkOptions(OPTIONS, { background: opt(tertiary_colors.surface2), backgroundhover: opt(colors.surface1), puck: opt(colors.overlay0), + slider_radius: opt('0.3rem'), + progress_radius: opt('0.3rem'), }, dropdownmenu: { background: opt(colors.crust), diff --git a/scss/style/menus/media.scss b/scss/style/menus/media.scss index 7c6205c..ea861d2 100644 --- a/scss/style/menus/media.scss +++ b/scss/style/menus/media.scss @@ -1,126 +1,145 @@ .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 * 0.01; - + 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 * 0.01; } .menu-items-container.media { - * { - font-size: $font-size * $bar-menus-menu-media-scaling * 0.01; - } - - min-width: 23em * $bar-menus-menu-media-scaling * 0.01; - min-height: 10em * $bar-menus-menu-media-scaling * 0.01; - - .menu-section-container { - margin: 1em 0em; - } - - .menu-items-section { - border-radius: $bar-menus-card_radius; - padding: 0em; - } - - .menu-content { - border-radius: 0.4em; - background-size: cover; - background-position: center; - } - - .media-content { - margin: 1em; - } - - .media-indicator-current-song-name { - margin-bottom: 0.75rem; - } - - .media-indicator-current-song-author { - margin-bottom: 0.75rem; - } - - .media-indicator-current-song-name-label { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song); - font-size: 1.35em; - } - - .media-indicator-current-song-author-label { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist); - font-size: 1em; - } - - .media-indicator-current-song-album-label { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album); - font-size: 1em; - } - - .media-indicator-current-controls { - margin-top: 1.5rem; - margin-bottom: 0.5rem; - } - - .media-indicator-control-button { - margin: 0rem 0.5rem; - } - - .media-indicator-control-button { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text); - min-height: 1.8em; - min-width: 2.5em; - border-radius: 0.2rem; - - &.disabled { - background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive); + * { + font-size: $font-size * $bar-menus-menu-media-scaling * 0.01; } - &.enabled { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); + min-width: 23em * $bar-menus-menu-media-scaling * 0.01; + min-height: 10em * $bar-menus-menu-media-scaling * 0.01; - &:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), 0.5); - } + .menu-section-container { + margin: 1em 0em; + } - &.active { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled); + .menu-items-section { + border-radius: $bar-menus-card_radius; + padding: 0em; + } + + .menu-content { + border-radius: 0.4em; + background-size: cover; + background-position: center; + } + + .media-content { + margin: 1em; + } + + .media-indicator-current-song-name { + margin-bottom: 0.75rem; + } + + .media-indicator-current-song-author { + margin-bottom: 0.75rem; + } + + .media-indicator-current-song-name-label { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song); + font-size: 1.35em; + } + + .media-indicator-current-song-author-label { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist); + font-size: 1em; + } + + .media-indicator-current-song-album-label { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album); + font-size: 1em; + } + + .media-indicator-current-controls { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + } + + .media-indicator-control-button { + margin: 0rem 0.5rem; + } + + .media-indicator-control-button { + background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text); + min-height: 1.8em; + min-width: 2.5em; + border-radius: 0.2rem; + + &.disabled { + background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive); + } + + &.enabled { + background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); + + &:hover { + background: transparentize( + if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), + 0.5 + ); + } + + &.active { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-media-buttons-enabled + ); + + &:hover { + background: transparentize( + if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), + 0.5 + ); + } + } + } + } + + image { + font-size: 1.1em; + } + + .menu-slider.media.progress { + margin-top: 1em; + margin-bottom: 1em; + + trough { + background: if( + $bar-menus-monochrome, + $bar-menus-slider-background, + $bar-menus-menu-media-slider-background + ); + border-radius: $bar-menus-slider-progress-radius; + + highlight, + progress { + border-radius: $bar-menus-slider-progress-radius; + min-height: 0.85em; + background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary); + } + } + + slider { + background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck); + } &:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), 0.5); + trough { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-slider-backgroundhover, + $bar-menus-menu-media-slider-backgroundhover + ), + 0.3 + ); + } } - } } - - } - - image { - font-size: 1.1em; - } - - .menu-slider.media.progress { - margin-top: 1em; - margin-bottom: 1em; - - trough { - background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-media-slider-background); - border-radius: 0.2em; - - highlight, - progress { - border-radius: 0.2em; - min-height: .85em; - background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary); - } - } - - slider { - background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck); - } - - &:hover { - trough { - background: transparentize(if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-media-slider-backgroundhover), 0.3); - } - } - } } diff --git a/scss/style/menus/menu.scss b/scss/style/menus/menu.scss index 349169a..1232b03 100644 --- a/scss/style/menus/menu.scss +++ b/scss/style/menus/menu.scss @@ -1,12 +1,12 @@ .menu-slider { trough { - border-radius: 0.3rem; + border-radius: $bar-menus-slider-progress-radius; background: $surface0; highlight, progress { background: $peach; - border-radius: 0.3rem; + border-radius: $bar-menus-slider-progress-radius; } } @@ -16,7 +16,7 @@ min-height: 0.6rem; min-width: 0.6rem; border: 0rem solid transparent; - border-radius: 0.3rem; + border-radius: $bar-menus-slider-slider-radius; } &:hover { @@ -34,7 +34,7 @@ .menu-switch { font-size: 1.3em; background-color: $surface0; - border-radius: 0.2em; + border-radius: $bar-menus-switch-radius; &:checked { background: $sky; @@ -44,7 +44,7 @@ highlight, progress { background-color: $peach; - border-radius: 0.3em; + border-radius: $bar-menus-switch-radius; } } @@ -54,7 +54,7 @@ min-height: 1em; min-width: 1em; border: 0em solid transparent; - border-radius: 0.2em; + border-radius: $bar-menus-switch-slider-radius; margin: 0.1em 0.15em; } diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts index 333fe96..447d6a3 100644 --- a/widget/settings/pages/theme/menus/index.ts +++ b/widget/settings/pages/theme/menus/index.ts @@ -91,6 +91,12 @@ export const MenuTheme = (): Scrollable => { Header('Switch'), 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.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' }), Header('Check/Radio Buttons'), @@ -123,6 +129,16 @@ export const MenuTheme = (): Scrollable => { title: 'Background (Hover)', 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' }), Header('Dropdown Menu'),