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);
} }

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

@@ -6,17 +6,9 @@
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,
$bar-menus-background,
$bar-menus-menu-clock-background-color
);
border: $bar-menus-border-size solid border: $bar-menus-border-size solid
if( if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
$bar-menus-monochrome,
$bar-menus-border-color,
$bar-menus-menu-clock-border-color
);
border-radius: $bar-menus-border-radius; border-radius: $bar-menus-border-radius;
margin-right: 0.5em; margin-right: 0.5em;
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
@@ -25,11 +17,7 @@
.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 {
@@ -43,42 +31,20 @@
.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,
$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; 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 {
@@ -88,30 +54,15 @@
} }
&: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;
@@ -123,22 +74,14 @@
.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
);
} }
} }
@@ -156,21 +99,13 @@
.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,
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-icon
);
font-size: 5em; 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,
$bar-menus-text,
$bar-menus-menu-clock-weather-temperature
);
margin-left: 0.2em; margin-left: 0.2em;
font-size: 2.5em; font-size: 2.5em;
@@ -180,11 +115,7 @@
} }
.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,
$bar-menus-label,
$bar-menus-menu-clock-weather-status
);
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
@@ -198,27 +129,15 @@
} }
.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 {
@@ -232,11 +151,7 @@
.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;
@@ -248,30 +163,18 @@
} }
.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,
$bar-menus-label,
$bar-menus-menu-clock-weather-hourly-time
);
margin-bottom: 0.5em; 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,
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-hourly-icon
);
margin-bottom: 0.25em; margin-bottom: 0.25em;
font-size: 1.8em; 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 {

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 {

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

@@ -7,13 +7,14 @@
min-width: 30.6em * $bar-menus-menu-notifications-scaling * 0.01; 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; 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); 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: $bar-menus-border-size solid
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
border-radius: $bar-menus-border-radius; border-radius: $bar-menus-border-radius;
margin-right: 0.45em; margin-right: 0.45em;
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
.window-content.notificationsmenu-window { .window-content.notificationsmenu-window {
margin-right: 0.50em; margin-right: 0.5em;
} }
.menu-content-container.notifications { .menu-content-container.notifications {
@@ -32,7 +33,8 @@
.notification-card.menu { .notification-card.menu {
background: $notification-background; background: $notification-background;
min-width: 26.2em * $bar-menus-menu-notifications-scaling * 0.01; min-width: 0em;
min-height: 0em;
font-size: $font-size * $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: 0.15em solid $notification-border;
border-radius: 0em; border-radius: 0em;
@@ -61,33 +63,65 @@
.menu-separator.notification-controls { .menu-separator.notification-controls {
min-width: 0.1em; min-width: 0.1em;
background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-divider, $bar-menus-menu-notifications-switch_divider); background-color: if(
$bar-menus-monochrome,
$bar-menus-dropdownmenu-divider,
$bar-menus-menu-notifications-switch_divider
);
margin: 0em 1em; margin: 0em 1em;
} }
.menu-switch.notifications { .menu-switch.notifications {
background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled); * {
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 { &:checked {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled); background: if(
$bar-menus-monochrome,
$bar-menus-switch-enabled,
$bar-menus-menu-notifications-switch-enabled
);
} }
slider { slider {
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck); background-color: if(
$bar-menus-monochrome,
$bar-menus-switch-puck,
$bar-menus-menu-notifications-switch-puck
);
} }
&:hover { &:hover {
trough { trough {
background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled); background: if(
$bar-menus-monochrome,
$bar-menus-switch-disabled,
$bar-menus-menu-notifications-switch-disabled
);
} }
slider { slider {
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck); background: if(
$bar-menus-monochrome,
$bar-menus-switch-puck,
$bar-menus-menu-notifications-switch-puck
);
} }
} }
&:active { &:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled); background: if(
$bar-menus-monochrome,
$bar-menus-switch-enabled,
$bar-menus-menu-notifications-switch-enabled
);
} }
} }
@@ -95,13 +129,16 @@
margin-right: 0.3em; margin-right: 0.3em;
&:hover label:not(.removing) { &:hover label:not(.removing) {
color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5); color: transparentize(
if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear),
0.5
);
} }
} }
.clear-notifications-label { .clear-notifications-label {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear); color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
font-size: 1.5em; font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
&.removing { &.removing {
color: $bar-menus-buttons-disabled; color: $bar-menus-buttons-disabled;
@@ -110,16 +147,31 @@
scrollbar { scrollbar {
margin-right: 0.2em; margin-right: 0.2em;
min-width: $bar-menus-menu-notifications-scrollbar-width; min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
border-radius: $bar-menus-menu-notifications-scrollbar-radius; border-radius: $bar-menus-menu-notifications-scrollbar-radius;
background: transparent; background: transparent;
slider { slider {
min-width: $bar-menus-menu-notifications-scrollbar-width; min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
border-radius: $bar-menus-menu-notifications-scrollbar-radius; border-radius: $bar-menus-menu-notifications-scrollbar-radius;
background: $bar-menus-menu-notifications-scrollbar-color; 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 {
@@ -141,11 +193,11 @@
.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 {
@@ -165,7 +217,7 @@
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 { &:hover {

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

@@ -4,7 +4,7 @@
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;
} }
@@ -42,7 +42,7 @@
.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 {
@@ -67,7 +67,7 @@
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;

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' }),
], ],