diff --git a/modules/menus/notifications/notification/index.ts b/modules/menus/notifications/notification/index.ts index 2e3dd82..776c409 100644 --- a/modules/menus/notifications/notification/index.ts +++ b/modules/menus/notifications/notification/index.ts @@ -19,8 +19,8 @@ const NotificationCard = (notifs: Notifications, curPage: Variable): Scr vscroll: 'automatic', child: Widget.Box({ class_name: 'menu-content-container notifications', - hpack: 'center', vexpand: true, + hpack: 'fill', spacing: 0, vertical: true, setup: (self) => { @@ -66,11 +66,11 @@ const NotificationCard = (notifs: Notifications, curPage: Variable): Scr }, child: Widget.Box({ class_name: 'notification-card-content-container', + hexpand: true, children: [ Widget.Box({ class_name: 'notification-card menu', vpack: 'start', - hexpand: true, vexpand: false, children: [ Image(notif), diff --git a/options.ts b/options.ts index 1429115..1334a85 100644 --- a/options.ts +++ b/options.ts @@ -393,6 +393,7 @@ const options = mkOptions(OPTIONS, { label: opt(colors.lavender), popover: { scaling: opt(100), + radius: opt('0.4em'), text: opt(colors.lavender), background: opt(secondary_colors.mantle), border: opt(secondary_colors.mantle), @@ -421,6 +422,7 @@ const options = mkOptions(OPTIONS, { active: opt(secondary_colors.pink), disabled: opt(tertiary_colors.surface2), text: opt(secondary_colors.mantle), + radius: opt('0.4em'), }, iconbuttons: { passive: opt(secondary_colors.text), @@ -429,6 +431,7 @@ const options = mkOptions(OPTIONS, { progressbar: { foreground: opt(colors.lavender), background: opt(colors.surface1), + radius: opt('0.3rem'), }, slider: { primary: opt(colors.lavender), @@ -444,6 +447,7 @@ const options = mkOptions(OPTIONS, { divider: opt(colors.base), }, tooltip: { + radius: opt('0.3em'), background: opt(colors.crust), text: opt(tertiary_colors.lavender), }, diff --git a/scss/main.scss b/scss/main.scss index 2533279..8997bd3 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -30,6 +30,9 @@ @import 'style/bar/power'; @import 'style/bar/battery'; +//notifications +@import 'style/notifications/popups'; + //modules - menus @import 'style/menus/menu'; @import 'style/menus/power'; @@ -43,9 +46,6 @@ @import 'style/menus/energy'; @import 'style/menus/dashboard'; -//notifications -@import 'style/notifications/popups'; - //osd @import 'style/osd/index'; diff --git a/scss/style/common/general.scss b/scss/style/common/general.scss index 1f1f87f..5701efe 100644 --- a/scss/style/common/general.scss +++ b/scss/style/common/general.scss @@ -33,7 +33,7 @@ tooltip { > * > * { padding: 0.6em; - border-radius: $bar-menus-border-radius * 0.5; + border-radius: $bar-menus-tooltip-radius; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background); } diff --git a/scss/style/common/popover_menu.scss b/scss/style/common/popover_menu.scss index 592a773..934b7d1 100644 --- a/scss/style/common/popover_menu.scss +++ b/scss/style/common/popover_menu.scss @@ -6,6 +6,7 @@ window.popup { opacity: $bar-menus-opacity * $popoverScaling; menu { + border-radius: $bar-menus-popover-radius; border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background); } @@ -13,6 +14,7 @@ window.popup { menuitem { transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1); padding: 0.3em * $popoverScaling 0.3em * $popoverScaling; + border-radius: $bar-menus-popover-radius; label { font-size: 1.2rem * $popoverScaling; @@ -72,7 +74,7 @@ window.popup { } check { - border-radius: $bar-buttons-radius; + border-radius: $bar-menus-buttons-radius * 0.2; border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text); } diff --git a/scss/style/menus/calendar.scss b/scss/style/menus/calendar.scss index 2552ddb..ed5aff8 100644 --- a/scss/style/menus/calendar.scss +++ b/scss/style/menus/calendar.scss @@ -1,285 +1,188 @@ .calendar-menu-content * { - font-size: $font-size * $bar-menus-menu-clock-scaling * 0.01; + font-size: $font-size * $bar-menus-menu-clock-scaling * 0.01; } .calendar-content-container { - margin-top: 0em; - min-width: 27em; - min-height: 6em; - background: if( - $bar-menus-monochrome, - $bar-menus-background, - $bar-menus-menu-clock-background-color - ); - 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 * 0.01; + margin-top: 0em; + min-width: 27em; + min-height: 6em; + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color); + 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 * 0.01; } .calendar-menu-item-container { - border-radius: $bar-menus-card_radius; - margin-bottom: 1.35em; - background: if( - $bar-menus-monochrome, - $bar-menus-cards, - $bar-menus-menu-clock-card-color - ); + border-radius: $bar-menus-card_radius; + margin-bottom: 1.35em; + background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color); } .calendar-content-items { - margin: 1.35em; + margin: 1.35em; } .calendar-container-box { - margin: 0.75em; - margin-bottom: 0em; + margin: 0.75em; + margin-bottom: 0em; } .calendar-menu-widget { - border-radius: 0.4em; - color: if( - $bar-menus-monochrome, - $bar-menus-text, - $bar-menus-menu-clock-calendar-days - ); + border-radius: 0.4em; + color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days); - &:selected { - box-shadow: - inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday), - inset -0.4em -0.3em 0 0 - if( - $bar-menus-monochrome, - $bar-menus-cards, - $bar-menus-menu-clock-card-color - ), - inset 0.4em 0 0 0.01em - if( - $bar-menus-monochrome, - $bar-menus-cards, - $bar-menus-menu-clock-card-color - ); - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-calendar-currentday - ); - border-radius: 0em; - } + &:selected { + box-shadow: + inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday), + inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color), + inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color); + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday); + border-radius: 0em; + } - &.header { - background-color: transparent; - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-calendar-yearmonth - ); - } + &.header { + background-color: transparent; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth); + } - &.button { - color: $text; - font-weight: 900; - font-size: 900em; - } + &.button { + color: $text; + font-weight: 900; + font-size: 900em; + } - &:hover { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-calendar-paginator - ); - } + &:hover { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator); + } - &.highlight { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-calendar-weekdays - ); - } + &.highlight { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays); + } - &:indeterminate { - color: transparentize( - if( - $bar-menus-monochrome, - $bar-menus-text, - $bar-menus-menu-clock-calendar-days - ), - 0.65 - ); - } + &:indeterminate { + color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65); + } - font-size: 1.1em; - padding: 0.35em; + font-size: 1.1em; + padding: 0.35em; } .clock-content-items { - min-height: 8em; + min-height: 8em; - .clock-content-time { - font-size: 4em; - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-time-time - ); - } + .clock-content-time { + font-size: 4em; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time); + } - .clock-content-period { - font-size: 1.75em; - margin-bottom: 1.35em; - margin-right: -0.875em; - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-time-timeperiod - ); - } + .clock-content-period { + font-size: 1.75em; + margin-bottom: 1.35em; + margin-right: -0.875em; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-timeperiod); + } } .calendar-menu-item-container { - margin-bottom: 0.65em; - &:last-child { - margin-bottom: 0em; - } + margin-bottom: 0.65em; + &:last-child { + margin-bottom: 0em; + } } .weather-container-box { - margin: 1.5em; - margin-top: 2.5em; - min-width: 3em; + margin: 1.5em; + margin-top: 2.5em; + min-width: 3em; - .calendar-menu-weather.today.icon { - label { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-weather-icon - ); - font-size: 5em; + .calendar-menu-weather.today.icon { + label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon); + font-size: 5em; + } } - } - .calendar-menu-weather.today.temp.label { - color: if( - $bar-menus-monochrome, - $bar-menus-text, - $bar-menus-menu-clock-weather-temperature - ); - margin-left: 0.2em; - font-size: 2.5em; + .calendar-menu-weather.today.temp.label { + color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature); + margin-left: 0.2em; + font-size: 2.5em; - &.icon { - font-size: 2.5em; + &.icon { + font-size: 2.5em; + } } - } - .calendar-menu-weather.today.condition.label { - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-weather-status - ); - font-size: 1.5em; - margin-bottom: 0.4em; - } + .calendar-menu-weather.today.condition.label { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-status); + font-size: 1.5em; + margin-bottom: 0.4em; + } - .calendar-menu-weather.today.temp.label.icon.weather-color.red { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-weather-thermometer-extremelyhot - ); - } + .calendar-menu-weather.today.temp.label.icon.weather-color.red { + color: if( + $bar-menus-monochrome, + $bar-menus-icons-active, + $bar-menus-menu-clock-weather-thermometer-extremelyhot + ); + } - .calendar-menu-weather.today.temp.label.icon.weather-color.orange { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-weather-thermometer-hot - ); - } + .calendar-menu-weather.today.temp.label.icon.weather-color.orange { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot); + } - .calendar-menu-weather.today.temp.label.icon.weather-color.lavender { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-weather-thermometer-moderate - ); - } + .calendar-menu-weather.today.temp.label.icon.weather-color.lavender { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate); + } - .calendar-menu-weather.today.temp.label.icon.weather-color.blue { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-weather-thermometer-cold - ); - } + .calendar-menu-weather.today.temp.label.icon.weather-color.blue { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold); + } - .calendar-menu-weather.today.temp.label.icon.weather-color.sky { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-weather-thermometer-extremelycold - ); - } + .calendar-menu-weather.today.temp.label.icon.weather-color.sky { + color: if( + $bar-menus-monochrome, + $bar-menus-icons-active, + $bar-menus-menu-clock-weather-thermometer-extremelycold + ); + } } .calendar-menu-weather.today.stats.container { - margin-bottom: 0.75em; - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-weather-stats - ); + margin-bottom: 0.75em; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-stats); - .weather.label { - margin-left: 0.35em; - } + .weather.label { + margin-left: 0.35em; + } } .menu-separator.weather { - margin: 1.5em 0em; + margin: 1.5em 0em; } .hourly-weather-time { - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-weather-hourly-time - ); - margin-bottom: 0.5em; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-time); + margin-bottom: 0.5em; } .hourly-weather-icon { - color: if( - $bar-menus-monochrome, - $bar-menus-icons-active, - $bar-menus-menu-clock-weather-hourly-icon - ); - margin-bottom: 0.25em; - font-size: 1.8em; + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon); + margin-bottom: 0.25em; + font-size: 1.8em; } .hourly-weather-temp { - color: if( - $bar-menus-monochrome, - $bar-menus-label, - $bar-menus-menu-clock-weather-hourly-temperature - ); + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature); } .weather.precip.icon { - min-width: 1em; - font-size: 1em; + min-width: 1em; + font-size: 1em; } .weather.wind.icon { - min-width: 1em; - font-size: 1em; + min-width: 1em; + font-size: 1em; } diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss index 01eb8e3..a1a2745 100644 --- a/scss/style/menus/dashboard.scss +++ b/scss/style/menus/dashboard.scss @@ -12,7 +12,7 @@ opacity: $bar-menus-opacity * 0.01; button { - border-radius: 0.4em; + border-radius: $bar-menus-buttons-radius; } .dashboard-card { @@ -499,7 +499,7 @@ } block { - border-radius: 0.4em; + border-radius: $bar-menus-progressbar-radius; &.empty { background: if( diff --git a/scss/style/menus/media.scss b/scss/style/menus/media.scss index ea861d2..c2aea57 100644 --- a/scss/style/menus/media.scss +++ b/scss/style/menus/media.scss @@ -22,7 +22,7 @@ } .menu-content { - border-radius: 0.4em; + border-radius: $bar-menus-buttons-radius; background-size: cover; background-position: center; } @@ -68,7 +68,7 @@ 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; + border-radius: $bar-menus-buttons-radius * 0.75; &.disabled { background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive); diff --git a/scss/style/menus/menu.scss b/scss/style/menus/menu.scss index 1232b03..2cddf3c 100644 --- a/scss/style/menus/menu.scss +++ b/scss/style/menus/menu.scss @@ -176,7 +176,7 @@ .menu-active-slider * { min-height: 0.85em; - border-radius: 0.2em; + border-radius: $bar-menus-slider-progress-radius; } .menu-slider-container { diff --git a/scss/style/menus/notifications.scss b/scss/style/menus/notifications.scss index 5f2d735..5f94324 100644 --- a/scss/style/menus/notifications.scss +++ b/scss/style/menus/notifications.scss @@ -1,192 +1,244 @@ .notification-menu-content * { - font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01; + font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01; } .notification-card-container.menu { - margin: 0em; - min-width: 30.6em * $bar-menus-menu-notifications-scaling * 0.01; - min-height: $bar-menus-menu-notifications-height * $bar-menus-menu-notifications-scaling * 0.01; - background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background); - 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 * 0.01; - - .window-content.notificationsmenu-window { - margin-right: 0.50em; - } - - .menu-content-container.notifications { - margin: 1em; - margin-bottom: 0em; - min-height: 4em; - } - - .notification-menu-controls { - background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card); - margin: 1em 1em; - margin-bottom: 0.5em; - border-radius: $bar-menus-card_radius; - padding: 0.4em 0.75em; - } - - .notification-card.menu { - background: $notification-background; - min-width: 26.2em * $bar-menus-menu-notifications-scaling * 0.01; - font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01; - border: 0.15em solid $notification-border; - border-radius: 0em; - border-bottom-left-radius: $notification-border_radius; - border-top-left-radius: $notification-border_radius; margin: 0em; - } + min-width: 30.6em * $bar-menus-menu-notifications-scaling * 0.01; + min-height: $bar-menus-menu-notifications-height * $bar-menus-menu-notifications-scaling * 0.01; + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background); + 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 * 0.01; - .notification-card-content-container { - margin-bottom: 0.65em; - - &:last-child { - margin-bottom: 1em; - } - } - - .notification-card-content { - margin-bottom: 0.25em; - } - - .menu-label.notifications { - margin: 0em; - font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01; - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label); - } - - .menu-separator.notification-controls { - min-width: 0.1em; - background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-divider, $bar-menus-menu-notifications-switch_divider); - margin: 0em 1em; - } - - .menu-switch.notifications { - background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled); - - &:checked { - background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled); + .window-content.notificationsmenu-window { + margin-right: 0.5em; } - slider { - background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck); + .menu-content-container.notifications { + margin: 1em; + margin-bottom: 0em; + min-height: 4em; } - &:hover { - trough { - background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled); - } - - slider { - background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck); - } + .notification-menu-controls { + background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card); + margin: 1em 1em; + margin-bottom: 0.5em; + border-radius: $bar-menus-card_radius; + padding: 0.4em 0.75em; } - &:active { - background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled); + .notification-card.menu { + background: $notification-background; + min-width: 0em; + min-height: 0em; + font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01; + border: 0.15em solid $notification-border; + border-radius: 0em; + border-bottom-left-radius: $notification-border_radius; + border-top-left-radius: $notification-border_radius; + margin: 0em; } - } - .clear-notifications-button { - margin-right: 0.3em; + .notification-card-content-container { + margin-bottom: 0.65em; - &:hover label:not(.removing) { - color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5); + &:last-child { + margin-bottom: 1em; + } } - } - .clear-notifications-label { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear); - font-size: 1.5em; - - &.removing { - color: $bar-menus-buttons-disabled; + .notification-card-content { + margin-bottom: 0.25em; } - } - scrollbar { - margin-right: 0.2em; - min-width: $bar-menus-menu-notifications-scrollbar-width; - border-radius: $bar-menus-menu-notifications-scrollbar-radius; - background: transparent; - - slider { - min-width: $bar-menus-menu-notifications-scrollbar-width; - border-radius: $bar-menus-menu-notifications-scrollbar-radius; - background: $bar-menus-menu-notifications-scrollbar-color; + .menu-label.notifications { + margin: 0em; + font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label); + } + + .menu-separator.notification-controls { + min-width: 0.1em; + background-color: if( + $bar-menus-monochrome, + $bar-menus-dropdownmenu-divider, + $bar-menus-menu-notifications-switch_divider + ); + margin: 0em 1em; + } + + .menu-switch.notifications { + * { + font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01; + } + + background-color: if( + $bar-menus-monochrome, + $bar-menus-switch-disabled, + $bar-menus-menu-notifications-switch-disabled + ); + + &:checked { + background: if( + $bar-menus-monochrome, + $bar-menus-switch-enabled, + $bar-menus-menu-notifications-switch-enabled + ); + } + + slider { + background-color: if( + $bar-menus-monochrome, + $bar-menus-switch-puck, + $bar-menus-menu-notifications-switch-puck + ); + } + + &:hover { + trough { + background: if( + $bar-menus-monochrome, + $bar-menus-switch-disabled, + $bar-menus-menu-notifications-switch-disabled + ); + } + + slider { + background: if( + $bar-menus-monochrome, + $bar-menus-switch-puck, + $bar-menus-menu-notifications-switch-puck + ); + } + } + + &:active { + background: if( + $bar-menus-monochrome, + $bar-menus-switch-enabled, + $bar-menus-menu-notifications-switch-enabled + ); + } + } + + .clear-notifications-button { + margin-right: 0.3em; + + &:hover label:not(.removing) { + color: transparentize( + if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), + 0.5 + ); + } + } + + .clear-notifications-label { + color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear); + font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01; + + &.removing { + color: $bar-menus-buttons-disabled; + } + } + + scrollbar { + margin-right: 0.2em; + min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01; + border-radius: $bar-menus-menu-notifications-scrollbar-radius; + background: transparent; + + slider { + min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01; + border-radius: $bar-menus-menu-notifications-scrollbar-radius; + background: $bar-menus-menu-notifications-scrollbar-color; + } + } + + .notification-card-header-label { + font-size: 0.95em; + } + + .notification-card-body-label { + font-size: 0.84em; + } + .notification-icon { + font-size: 1.3em; + } + + .notification-time { + font-size: 0.85em; } - } } .notification-label-container { - margin-bottom: 8em; + margin-bottom: 8em; - label { - color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label); - } + label { + color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label); + } - .bell { - font-size: 10em * $bar-menus-menu-notifications-scaling * 0.01; - } + .bell { + font-size: 10em * $bar-menus-menu-notifications-scaling * 0.01; + } - .message { - font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01; - } + .message { + font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01; + } } .close-notification-button.menu { - background: $notification-close_button-background; - color: $notification-close_button-label; - min-width: 2.1em; - border-radius: 0rem $notification-border_radius $notification-border_radius 0em; + background: $notification-close_button-background; + color: $notification-close_button-label; + min-width: 2.1em * $bar-menus-menu-notifications-scaling * 0.01; + border-radius: 0rem $notification-border_radius $notification-border_radius 0em; - label { - font-size: 1.5em; - } + label { + font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01; + } - &:hover { - background: transparentize($notification-close_button-background , 0.5); - } + &:hover { + background: transparentize($notification-close_button-background, 0.5); + } } .notification-menu-pager { - background: $bar-menus-menu-notifications-pager-background; - border-radius: $bar-menus-border-radius; - border-top-left-radius: 0em; - border-top-right-radius: 0em; + background: $bar-menus-menu-notifications-pager-background; + border-radius: $bar-menus-border-radius; + border-top-left-radius: 0em; + border-top-right-radius: 0em; - .pager-button { - margin: 0em; - padding: 0.25em 1em; - color: $bar-menus-menu-notifications-pager-button; + .pager-button { + margin: 0em; + padding: 0.25em 1em; + color: $bar-menus-menu-notifications-pager-button; - .pager-button-label { - font-size: 2em; + .pager-button-label { + font-size: 2em * $bar-menus-menu-notifications-scaling * 0.01; + } + + &:hover { + .pager-button-label { + color: transparentize($bar-menus-menu-notifications-pager-button, 0.4); + text-decoration: none; + } + } } - &:hover { - .pager-button-label { - color: transparentize($bar-menus-menu-notifications-pager-button, 0.4); - text-decoration: none; - } + .pager-label { + color: $bar-menus-menu-notifications-pager-label; } - } - .pager-label { - color: $bar-menus-menu-notifications-pager-label; - } - - .disabled { - color: transparentize($bar-menus-menu-notifications-pager-button, 0.8); - - &:hover { - .pager-button-label { + .disabled { color: transparentize($bar-menus-menu-notifications-pager-button, 0.8); - } + + &:hover { + .pager-button-label { + color: transparentize($bar-menus-menu-notifications-pager-button, 0.8); + } + } } - } } diff --git a/scss/style/notifications/popups.scss b/scss/style/notifications/popups.scss index c371c3a..4c2068b 100644 --- a/scss/style/notifications/popups.scss +++ b/scss/style/notifications/popups.scss @@ -1,107 +1,107 @@ .notification-card { - color: $notification-text; - background: $notification-background; - margin: 0.45em; - border: 0.15em solid transparentize($notification-border, 0.5); - min-width: 26em; - min-height: 6rem; - border-radius: $notification-border_radius; - opacity: $notification-opacity * 0.01; + color: $notification-text; + background: $notification-background; + margin: 0.45em; + border: 0.15em solid transparentize($notification-border, 0.5); + min-width: 26em; + min-height: 4em; + border-radius: $notification-border_radius; + opacity: $notification-opacity * 0.01; } .notification-card-container { - * { - font-size: $font-size * $notification-scaling * 0.01; - } + * { + font-size: $font-size * $notification-scaling * 0.01; + } - padding: 1px; + padding: 1px; } .notification-card-image-container { - margin: 0.65em 0.65em; - border-radius: 0.4em; + margin: 0.65em 0.65em; + border-radius: 0.4em; } .notification-card-image { - border-radius: 0.4em; - min-width: 2.5em; - min-height: 2.5em; - padding: 0.85em 0.85em; - background-size: contain; - background-repeat: no-repeat; - background-position: center; + border-radius: 0.4em; + min-width: 2.5em; + min-height: 2.5em; + padding: 0.85em 0.85em; + background-size: contain; + background-repeat: no-repeat; + background-position: center; } .notification-card-content { - min-width: 2.9em; - min-height: 2.9em; - padding: 0.5em 0.5em; - margin-right: 0.5rem; - margin-bottom: 0.5rem; + min-width: 2.9em; + min-height: 2.9em; + padding: 0.5em 0.5em; + margin-right: 0.5rem; + margin-bottom: 0.5rem; } .notification-card-content.noimg { - margin-left: 0.5em; - margin-top: .15em; + margin-left: 0.5em; + margin-top: 0.15em; } .notification-card-header-label { - font-size: 0.95em; - margin-bottom: 0.5em; - color: $notification-label; + font-size: 0.95em; + margin-bottom: 0.5em; + color: $notification-label; } .notification-card-body-label { - font-size: 0.84em; - margin-bottom: 1em; - font-weight: 600; + font-size: 0.84em; + margin-bottom: 1em; + font-weight: 600; } .notification-card-actions { - margin-top: 0.25em; - margin-bottom: 0.4em; + margin-top: 0.25em; + margin-bottom: 0.4em; } .notification-action-buttons { - color: $notification-actions-text; - background: $notification-actions-background; - min-width: 4em; - min-height: 1.65em; - border-radius: 0.2em; + color: $notification-actions-text; + background: $notification-actions-background; + min-width: 4em; + min-height: 1.65em; + border-radius: $bar-menus-buttons-radius; - &:not(:last-child) { - margin-right: 2rem; - } + &:not(:last-child) { + margin-right: 2rem; + } - &:hover { - background: transparentize($notification-actions-background, 0.6); - } + &:hover { + background: transparentize($notification-actions-background, 0.6); + } } .notification-icon { - color: $notification-labelicon; - margin-bottom: 0.4em; - min-width: 1em; - min-height: 1em; - font-size: 1.3em; + color: $notification-labelicon; + margin-bottom: 0.4em; + min-width: 1em; + min-height: 1em; + font-size: 1.3em; } .notification-time { - font-size: 0.85em; - color: $notification-time; + font-size: 0.85em; + color: $notification-time; } .close-notification-button { - background: $notification-close_button-background; - color: $notification-close_button-label; - min-width: 2.1em; - border-radius: 0rem $notification-border_radius*0.7 $notification-border_radius*0.7 0em; + background: $notification-close_button-background; + color: $notification-close_button-label; + min-width: 2.1em; + border-radius: 0rem $notification-border_radius * 0.7 $notification-border_radius * 0.7 0em; - label { - font-size: 1.5em; - } + label { + font-size: 1.5em; + } - &:hover { - background: transparentize($notification-close_button-background, 0.5); - } + &:hover { + background: transparentize($notification-close_button-background, 0.5); + } } diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts index 447d6a3..5c73f6c 100644 --- a/widget/settings/pages/theme/menus/index.ts +++ b/widget/settings/pages/theme/menus/index.ts @@ -71,6 +71,11 @@ export const MenuTheme = (): Scrollable => { Option({ opt: options.theme.bar.menus.border.color, title: 'Border Color', type: 'color' }), Header('Popover'), + Option({ + opt: options.theme.bar.menus.popover.radius, + title: 'Popover Radius', + type: 'string', + }), Option({ opt: options.theme.bar.menus.popover.text, title: 'Text', type: 'color' }), Option({ opt: options.theme.bar.menus.popover.background, title: 'Background', type: 'color' }), @@ -108,6 +113,7 @@ export const MenuTheme = (): Scrollable => { Option({ opt: options.theme.bar.menus.check_radio_button.active, title: 'Active', type: 'color' }), Header('Buttons'), + Option({ opt: options.theme.bar.menus.buttons.radius, title: 'Button Radius', type: 'string' }), Option({ opt: options.theme.bar.menus.buttons.default, title: 'Primary', type: 'color' }), Option({ opt: options.theme.bar.menus.buttons.active, title: 'Active', type: 'color' }), Option({ opt: options.theme.bar.menus.buttons.disabled, title: 'Disabled', type: 'color' }), @@ -118,6 +124,11 @@ export const MenuTheme = (): Scrollable => { Option({ opt: options.theme.bar.menus.iconbuttons.active, title: 'Active/Hovered', type: 'color' }), Header('Progress Bar'), + Option({ + opt: options.theme.bar.menus.progressbar.radius, + title: 'Progress Bar Radius', + type: 'string', + }), Option({ opt: options.theme.bar.menus.progressbar.foreground, title: 'Primary', type: 'color' }), Option({ opt: options.theme.bar.menus.progressbar.background, title: 'Background', type: 'color' }), @@ -147,6 +158,11 @@ export const MenuTheme = (): Scrollable => { Option({ opt: options.theme.bar.menus.dropdownmenu.divider, title: 'Divider', type: 'color' }), Header('Tooltips'), + Option({ + opt: options.theme.bar.menus.tooltip.radius, + title: 'Tooltip Radius', + type: 'string', + }), Option({ opt: options.theme.bar.menus.tooltip.background, title: 'Background', type: 'color' }), Option({ opt: options.theme.bar.menus.tooltip.text, title: 'Text', type: 'color' }), ],