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

Added the ability to define button, progress bar, tooltip and popover radius. (#448)

Browse Source 
* Added the ability to define button, progress bar, tooltip and popover radius.

* Border updates

* Fix notification scaling
This commit is contained in:
Jas Singh
2024-11-06 21:47:22 -08:00
committed by GitHub
parent 22055b727a
commit dbd932941b
12 changed files with 419 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
modules/menus/notifications/notification/index.ts
View File

@@ -19,8 +19,8 @@ const NotificationCard = (notifs: Notifications, curPage: Variable<number>): Scr
vscroll: 'automatic', vscroll: 'automatic',
child: Widget.Box({ child: Widget.Box({
class_name: 'menu-content-container notifications', class_name: 'menu-content-container notifications',
hpack: 'center',
vexpand: true, vexpand: true,
hpack: 'fill',
spacing: 0, spacing: 0,
vertical: true, vertical: true,
setup: (self) => { setup: (self) => {
@@ -66,11 +66,11 @@ const NotificationCard = (notifs: Notifications, curPage: Variable<number>): Scr
}, },
child: Widget.Box({ child: Widget.Box({
class_name: 'notification-card-content-container', class_name: 'notification-card-content-container',
hexpand: true,
children: [ children: [
Widget.Box({ Widget.Box({
class_name: 'notification-card menu', class_name: 'notification-card menu',
vpack: 'start', vpack: 'start',
hexpand: true,
vexpand: false, vexpand: false,
children: [ children: [
Image(notif), Image(notif),

4
options.ts
View File

@@ -393,6 +393,7 @@ const options = mkOptions(OPTIONS, {
label: opt(colors.lavender), label: opt(colors.lavender),
popover: { popover: {
scaling: opt(100), scaling: opt(100),
radius: opt('0.4em'),
text: opt(colors.lavender), text: opt(colors.lavender),
background: opt(secondary_colors.mantle), background: opt(secondary_colors.mantle),
border: opt(secondary_colors.mantle), border: opt(secondary_colors.mantle),
@@ -421,6 +422,7 @@ const options = mkOptions(OPTIONS, {
active: opt(secondary_colors.pink), active: opt(secondary_colors.pink),
disabled: opt(tertiary_colors.surface2), disabled: opt(tertiary_colors.surface2),
text: opt(secondary_colors.mantle), text: opt(secondary_colors.mantle),
radius: opt('0.4em'),
}, },
iconbuttons: { iconbuttons: {
passive: opt(secondary_colors.text), passive: opt(secondary_colors.text),
@@ -429,6 +431,7 @@ const options = mkOptions(OPTIONS, {
progressbar: { progressbar: {
foreground: opt(colors.lavender), foreground: opt(colors.lavender),
background: opt(colors.surface1), background: opt(colors.surface1),
radius: opt('0.3rem'),
}, },
slider: { slider: {
primary: opt(colors.lavender), primary: opt(colors.lavender),
@@ -444,6 +447,7 @@ const options = mkOptions(OPTIONS, {
divider: opt(colors.base), divider: opt(colors.base),
}, },
tooltip: { tooltip: {
radius: opt('0.3em'),
background: opt(colors.crust), background: opt(colors.crust),
text: opt(tertiary_colors.lavender), text: opt(tertiary_colors.lavender),
}, },

6
scss/main.scss
View File

@@ -30,6 +30,9 @@
@import 'style/bar/power'; @import 'style/bar/power';
@import 'style/bar/battery'; @import 'style/bar/battery';
//notifications
@import 'style/notifications/popups';
//modules - menus //modules - menus
@import 'style/menus/menu'; @import 'style/menus/menu';
@import 'style/menus/power'; @import 'style/menus/power';
@@ -43,9 +46,6 @@
@import 'style/menus/energy'; @import 'style/menus/energy';
@import 'style/menus/dashboard'; @import 'style/menus/dashboard';
//notifications
@import 'style/notifications/popups';
//osd //osd
@import 'style/osd/index'; @import 'style/osd/index';

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

@@ -33,7 +33,7 @@ tooltip {
> * > * { > * > * {
padding: 0.6em; 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); color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background);
} }

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

@@ -6,6 +6,7 @@ window.popup {
opacity: $bar-menus-opacity * $popoverScaling; opacity: $bar-menus-opacity * $popoverScaling;
menu { menu {
border-radius: $bar-menus-popover-radius;
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border); 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); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
} }
@@ -13,6 +14,7 @@ window.popup {
menuitem { menuitem {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1); transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
padding: 0.3em * $popoverScaling 0.3em * $popoverScaling; padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
border-radius: $bar-menus-popover-radius;
label { label {
font-size: 1.2rem * $popoverScaling; font-size: 1.2rem * $popoverScaling;
@@ -72,7 +74,7 @@ window.popup {
} }
check { 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); border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
} }

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

@@ -1,285 +1,188 @@
.calendar-menu-content * { .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 { .calendar-content-container {
margin-top: 0em; margin-top: 0em;
min-width: 27em; min-width: 27em;
min-height: 6em; min-height: 6em;
background: if( background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
$bar-menus-monochrome, border: $bar-menus-border-size solid
$bar-menus-background, if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
$bar-menus-menu-clock-background-color border-radius: $bar-menus-border-radius;
); margin-right: 0.5em;
border: $bar-menus-border-size solid opacity: $bar-menus-opacity * 0.01;
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 { .calendar-menu-item-container {
border-radius: $bar-menus-card_radius; border-radius: $bar-menus-card_radius;
margin-bottom: 1.35em; margin-bottom: 1.35em;
background: if( background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
$bar-menus-monochrome,
$bar-menus-cards,
$bar-menus-menu-clock-card-color
);
} }
.calendar-content-items { .calendar-content-items {
margin: 1.35em; margin: 1.35em;
} }
.calendar-container-box { .calendar-container-box {
margin: 0.75em; margin: 0.75em;
margin-bottom: 0em; margin-bottom: 0em;
} }
.calendar-menu-widget { .calendar-menu-widget {
border-radius: 0.4em; border-radius: 0.4em;
color: if( color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
$bar-menus-monochrome,
$bar-menus-text,
$bar-menus-menu-clock-calendar-days
);
&:selected { &:selected {
box-shadow: box-shadow:
inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday), 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 inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
if( inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
$bar-menus-monochrome, color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday);
$bar-menus-cards, border-radius: 0em;
$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 { &.header {
background-color: transparent; background-color: transparent;
color: if( color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth);
$bar-menus-monochrome, }
$bar-menus-label,
$bar-menus-menu-clock-calendar-yearmonth
);
}
&.button { &.button {
color: $text; color: $text;
font-weight: 900; font-weight: 900;
font-size: 900em; font-size: 900em;
} }
&:hover { &:hover {
color: if( color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
$bar-menus-monochrome, }
$bar-menus-icons-active,
$bar-menus-menu-clock-calendar-paginator
);
}
&.highlight { &.highlight {
color: if( color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
$bar-menus-monochrome, }
$bar-menus-icons-active,
$bar-menus-menu-clock-calendar-weekdays
);
}
&:indeterminate { &:indeterminate {
color: transparentize( color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
if( }
$bar-menus-monochrome,
$bar-menus-text,
$bar-menus-menu-clock-calendar-days
),
0.65
);
}
font-size: 1.1em; font-size: 1.1em;
padding: 0.35em; padding: 0.35em;
} }
.clock-content-items { .clock-content-items {
min-height: 8em; min-height: 8em;
.clock-content-time { .clock-content-time {
font-size: 4em; font-size: 4em;
color: if( color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time);
$bar-menus-monochrome, }
$bar-menus-label,
$bar-menus-menu-clock-time-time
);
}
.clock-content-period { .clock-content-period {
font-size: 1.75em; font-size: 1.75em;
margin-bottom: 1.35em; margin-bottom: 1.35em;
margin-right: -0.875em; margin-right: -0.875em;
color: if( color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-timeperiod);
$bar-menus-monochrome, }
$bar-menus-label,
$bar-menus-menu-clock-time-timeperiod
);
}
} }
.calendar-menu-item-container { .calendar-menu-item-container {
margin-bottom: 0.65em; margin-bottom: 0.65em;
&:last-child { &:last-child {
margin-bottom: 0em; margin-bottom: 0em;
} }
} }
.weather-container-box { .weather-container-box {
margin: 1.5em; margin: 1.5em;
margin-top: 2.5em; margin-top: 2.5em;
min-width: 3em; min-width: 3em;
.calendar-menu-weather.today.icon { .calendar-menu-weather.today.icon {
label { label {
color: if( color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
$bar-menus-monochrome, font-size: 5em;
$bar-menus-icons-active, }
$bar-menus-menu-clock-weather-icon
);
font-size: 5em;
} }
}
.calendar-menu-weather.today.temp.label { .calendar-menu-weather.today.temp.label {
color: if( color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
$bar-menus-monochrome, margin-left: 0.2em;
$bar-menus-text, font-size: 2.5em;
$bar-menus-menu-clock-weather-temperature
);
margin-left: 0.2em;
font-size: 2.5em;
&.icon { &.icon {
font-size: 2.5em; font-size: 2.5em;
}
} }
}
.calendar-menu-weather.today.condition.label { .calendar-menu-weather.today.condition.label {
color: if( color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-status);
$bar-menus-monochrome, font-size: 1.5em;
$bar-menus-label, margin-bottom: 0.4em;
$bar-menus-menu-clock-weather-status }
);
font-size: 1.5em;
margin-bottom: 0.4em;
}
.calendar-menu-weather.today.temp.label.icon.weather-color.red { .calendar-menu-weather.today.temp.label.icon.weather-color.red {
color: if( color: if(
$bar-menus-monochrome, $bar-menus-monochrome,
$bar-menus-icons-active, $bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-extremelyhot $bar-menus-menu-clock-weather-thermometer-extremelyhot
); );
} }
.calendar-menu-weather.today.temp.label.icon.weather-color.orange { .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
color: if( color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot);
$bar-menus-monochrome, }
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-hot
);
}
.calendar-menu-weather.today.temp.label.icon.weather-color.lavender { .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
color: if( color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate);
$bar-menus-monochrome, }
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-moderate
);
}
.calendar-menu-weather.today.temp.label.icon.weather-color.blue { .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
color: if( color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold);
$bar-menus-monochrome, }
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-cold
);
}
.calendar-menu-weather.today.temp.label.icon.weather-color.sky { .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
color: if( color: if(
$bar-menus-monochrome, $bar-menus-monochrome,
$bar-menus-icons-active, $bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-extremelycold $bar-menus-menu-clock-weather-thermometer-extremelycold
); );
} }
} }
.calendar-menu-weather.today.stats.container { .calendar-menu-weather.today.stats.container {
margin-bottom: 0.75em; margin-bottom: 0.75em;
color: if( color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-stats);
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-weather-stats
);
.weather.label { .weather.label {
margin-left: 0.35em; margin-left: 0.35em;
} }
} }
.menu-separator.weather { .menu-separator.weather {
margin: 1.5em 0em; margin: 1.5em 0em;
} }
.hourly-weather-time { .hourly-weather-time {
color: if( color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-time);
$bar-menus-monochrome, margin-bottom: 0.5em;
$bar-menus-label,
$bar-menus-menu-clock-weather-hourly-time
);
margin-bottom: 0.5em;
} }
.hourly-weather-icon { .hourly-weather-icon {
color: if( color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
$bar-menus-monochrome, margin-bottom: 0.25em;
$bar-menus-icons-active, font-size: 1.8em;
$bar-menus-menu-clock-weather-hourly-icon
);
margin-bottom: 0.25em;
font-size: 1.8em;
} }
.hourly-weather-temp { .hourly-weather-temp {
color: if( color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature);
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-weather-hourly-temperature
);
} }
.weather.precip.icon { .weather.precip.icon {
min-width: 1em; min-width: 1em;
font-size: 1em; font-size: 1em;
} }
.weather.wind.icon { .weather.wind.icon {
min-width: 1em; min-width: 1em;
font-size: 1em; font-size: 1em;
} }

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

@@ -12,7 +12,7 @@
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
button { button {
border-radius: 0.4em; border-radius: $bar-menus-buttons-radius;
} }
.dashboard-card { .dashboard-card {
@@ -499,7 +499,7 @@
} }
block { block {
border-radius: 0.4em; border-radius: $bar-menus-progressbar-radius;
&.empty { &.empty {
background: if( background: if(

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

@@ -22,7 +22,7 @@
} }
.menu-content { .menu-content {
border-radius: 0.4em; border-radius: $bar-menus-buttons-radius;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
@@ -68,7 +68,7 @@
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text); color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
min-height: 1.8em; min-height: 1.8em;
min-width: 2.5em; min-width: 2.5em;
border-radius: 0.2rem; border-radius: $bar-menus-buttons-radius * 0.75;
&.disabled { &.disabled {
background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive); background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);

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

@@ -176,7 +176,7 @@
.menu-active-slider * { .menu-active-slider * {
min-height: 0.85em; min-height: 0.85em;
border-radius: 0.2em; border-radius: $bar-menus-slider-progress-radius;
} }
.menu-slider-container { .menu-slider-container {

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

@@ -1,192 +1,244 @@
.notification-menu-content * { .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 { .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; 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 { .window-content.notificationsmenu-window {
margin-bottom: 0.65em; margin-right: 0.5em;
&: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);
} }
slider { .menu-content-container.notifications {
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck); margin: 1em;
margin-bottom: 0em;
min-height: 4em;
} }
&:hover { .notification-menu-controls {
trough { background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled); margin: 1em 1em;
} margin-bottom: 0.5em;
border-radius: $bar-menus-card_radius;
slider { padding: 0.4em 0.75em;
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
}
} }
&:active { .notification-card.menu {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled); 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 { .notification-card-content-container {
margin-right: 0.3em; margin-bottom: 0.65em;
&:hover label:not(.removing) { &:last-child {
color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5); margin-bottom: 1em;
}
} }
}
.clear-notifications-label { .notification-card-content {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear); margin-bottom: 0.25em;
font-size: 1.5em;
&.removing {
color: $bar-menus-buttons-disabled;
} }
}
scrollbar { .menu-label.notifications {
margin-right: 0.2em; margin: 0em;
min-width: $bar-menus-menu-notifications-scrollbar-width; font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
border-radius: $bar-menus-menu-notifications-scrollbar-radius; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
background: transparent; }
slider { .menu-separator.notification-controls {
min-width: $bar-menus-menu-notifications-scrollbar-width; min-width: 0.1em;
border-radius: $bar-menus-menu-notifications-scrollbar-radius; background-color: if(
background: $bar-menus-menu-notifications-scrollbar-color; $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 { .notification-label-container {
margin-bottom: 8em; margin-bottom: 8em;
label { label {
color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label); color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label);
} }
.bell { .bell {
font-size: 10em * $bar-menus-menu-notifications-scaling * 0.01; font-size: 10em * $bar-menus-menu-notifications-scaling * 0.01;
} }
.message { .message {
font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01; font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
} }
} }
.close-notification-button.menu { .close-notification-button.menu {
background: $notification-close_button-background; background: $notification-close_button-background;
color: $notification-close_button-label; color: $notification-close_button-label;
min-width: 2.1em; min-width: 2.1em * $bar-menus-menu-notifications-scaling * 0.01;
border-radius: 0rem $notification-border_radius $notification-border_radius 0em; border-radius: 0rem $notification-border_radius $notification-border_radius 0em;
label { label {
font-size: 1.5em; font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
} }
&:hover { &:hover {
background: transparentize($notification-close_button-background , 0.5); background: transparentize($notification-close_button-background, 0.5);
} }
} }
.notification-menu-pager { .notification-menu-pager {
background: $bar-menus-menu-notifications-pager-background; background: $bar-menus-menu-notifications-pager-background;
border-radius: $bar-menus-border-radius; border-radius: $bar-menus-border-radius;
border-top-left-radius: 0em; border-top-left-radius: 0em;
border-top-right-radius: 0em; border-top-right-radius: 0em;
.pager-button { .pager-button {
margin: 0em; margin: 0em;
padding: 0.25em 1em; padding: 0.25em 1em;
color: $bar-menus-menu-notifications-pager-button; color: $bar-menus-menu-notifications-pager-button;
.pager-button-label { .pager-button-label {
font-size: 2em; 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-label {
.pager-button-label { color: $bar-menus-menu-notifications-pager-label;
color: transparentize($bar-menus-menu-notifications-pager-button, 0.4);
text-decoration: none;
}
} }
}
.pager-label { .disabled {
color: $bar-menus-menu-notifications-pager-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); color: transparentize($bar-menus-menu-notifications-pager-button, 0.8);
}
&:hover {
.pager-button-label {
color: transparentize($bar-menus-menu-notifications-pager-button, 0.8);
}
}
} }
}
} }

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

@@ -1,107 +1,107 @@
.notification-card { .notification-card {
color: $notification-text; color: $notification-text;
background: $notification-background; background: $notification-background;
margin: 0.45em; margin: 0.45em;
border: 0.15em solid transparentize($notification-border, 0.5); border: 0.15em solid transparentize($notification-border, 0.5);
min-width: 26em; min-width: 26em;
min-height: 6rem; min-height: 4em;
border-radius: $notification-border_radius; border-radius: $notification-border_radius;
opacity: $notification-opacity * 0.01; opacity: $notification-opacity * 0.01;
} }
.notification-card-container { .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 { .notification-card-image-container {
margin: 0.65em 0.65em; margin: 0.65em 0.65em;
border-radius: 0.4em; border-radius: 0.4em;
} }
.notification-card-image { .notification-card-image {
border-radius: 0.4em; border-radius: 0.4em;
min-width: 2.5em; min-width: 2.5em;
min-height: 2.5em; min-height: 2.5em;
padding: 0.85em 0.85em; padding: 0.85em 0.85em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.notification-card-content { .notification-card-content {
min-width: 2.9em; min-width: 2.9em;
min-height: 2.9em; min-height: 2.9em;
padding: 0.5em 0.5em; padding: 0.5em 0.5em;
margin-right: 0.5rem; margin-right: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.notification-card-content.noimg { .notification-card-content.noimg {
margin-left: 0.5em; margin-left: 0.5em;
margin-top: .15em; margin-top: 0.15em;
} }
.notification-card-header-label { .notification-card-header-label {
font-size: 0.95em; font-size: 0.95em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: $notification-label; color: $notification-label;
} }
.notification-card-body-label { .notification-card-body-label {
font-size: 0.84em; font-size: 0.84em;
margin-bottom: 1em; margin-bottom: 1em;
font-weight: 600; font-weight: 600;
} }
.notification-card-actions { .notification-card-actions {
margin-top: 0.25em; margin-top: 0.25em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
.notification-action-buttons { .notification-action-buttons {
color: $notification-actions-text; color: $notification-actions-text;
background: $notification-actions-background; background: $notification-actions-background;
min-width: 4em; min-width: 4em;
min-height: 1.65em; min-height: 1.65em;
border-radius: 0.2em; border-radius: $bar-menus-buttons-radius;
&:not(:last-child) { &:not(:last-child) {
margin-right: 2rem; margin-right: 2rem;
} }
&:hover { &:hover {
background: transparentize($notification-actions-background, 0.6); background: transparentize($notification-actions-background, 0.6);
} }
} }
.notification-icon { .notification-icon {
color: $notification-labelicon; color: $notification-labelicon;
margin-bottom: 0.4em; margin-bottom: 0.4em;
min-width: 1em; min-width: 1em;
min-height: 1em; min-height: 1em;
font-size: 1.3em; font-size: 1.3em;
} }
.notification-time { .notification-time {
font-size: 0.85em; font-size: 0.85em;
color: $notification-time; color: $notification-time;
} }
.close-notification-button { .close-notification-button {
background: $notification-close_button-background; background: $notification-close_button-background;
color: $notification-close_button-label; color: $notification-close_button-label;
min-width: 2.1em; min-width: 2.1em;
border-radius: 0rem $notification-border_radius*0.7 $notification-border_radius*0.7 0em; border-radius: 0rem $notification-border_radius * 0.7 $notification-border_radius * 0.7 0em;
label { label {
font-size: 1.5em; font-size: 1.5em;
} }
&:hover { &:hover {
background: transparentize($notification-close_button-background, 0.5); background: transparentize($notification-close_button-background, 0.5);
} }
} }

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

@@ -71,6 +71,11 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.border.color, title: 'Border Color', type: 'color' }), Option({ opt: options.theme.bar.menus.border.color, title: 'Border Color', type: 'color' }),
Header('Popover'), 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.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.menus.popover.background, title: 'Background', type: 'color' }), Option({ opt: options.theme.bar.menus.popover.background, title: 'Background', type: 'color' }),
@@ -108,6 +113,7 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.check_radio_button.active, title: 'Active', type: 'color' }), Option({ opt: options.theme.bar.menus.check_radio_button.active, title: 'Active', type: 'color' }),
Header('Buttons'), 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.default, title: 'Primary', type: 'color' }),
Option({ opt: options.theme.bar.menus.buttons.active, title: 'Active', 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' }), Option({ opt: options.theme.bar.menus.buttons.disabled, title: 'Disabled', type: 'color' }),
@@ -118,6 +124,11 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.iconbuttons.active, title: 'Active/Hovered', type: 'color' }), Option({ opt: options.theme.bar.menus.iconbuttons.active, title: 'Active/Hovered', type: 'color' }),
Header('Progress Bar'), 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.foreground, title: 'Primary', type: 'color' }),
Option({ opt: options.theme.bar.menus.progressbar.background, title: 'Background', type: 'color' }), Option({ opt: options.theme.bar.menus.progressbar.background, title: 'Background', type: 'color' }),
@@ -147,6 +158,11 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.dropdownmenu.divider, title: 'Divider', type: 'color' }), Option({ opt: options.theme.bar.menus.dropdownmenu.divider, title: 'Divider', type: 'color' }),
Header('Tooltips'), 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.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.menus.tooltip.text, title: 'Text', type: 'color' }), Option({ opt: options.theme.bar.menus.tooltip.text, title: 'Text', type: 'color' }),
], ],