Added the ability to scale tooltips in Configuration > Scaling. (#411)

* Updated readme for a Kofi donation link to Aylur.

* Added tooltip scaling option.
This commit is contained in:
Jas Singh
2024-10-31 01:45:52 -07:00
committed by GitHub
parent 7ceb6a9b99
commit 14d5e4c270
3 changed files with 58 additions and 48 deletions

View File

@@ -89,6 +89,9 @@ const tertiary_colors = {
const options = mkOptions(OPTIONS, { const options = mkOptions(OPTIONS, {
theme: { theme: {
tooltip: {
scaling: opt(100),
},
matugen: opt(false), matugen: opt(false),
matugen_settings: { matugen_settings: {
mode: opt<MatugenTheme>('dark'), mode: opt<MatugenTheme>('dark'),

View File

@@ -1,79 +1,78 @@
@import '../colors.scss'; @import '../colors.scss';
.txt-icon { .txt-icon {
font-family: "JetBrainsMono Nerd Font Propo", monospace; font-family: 'JetBrainsMono Nerd Font Propo', monospace;
font-size: 1.5em; font-size: 1.5em;
&.bluetooth { &.bluetooth {
font-size: 1em; font-size: 1em;
} }
&.playback { &.playback {
font-size: 1.3em; font-size: 1.3em;
} }
&.input { &.input {
font-size: 1.3em; font-size: 1.3em;
} }
} }
.bar.txt-icon { .bar.txt-icon {
font-family: "JetBrainsMono Nerd Font Propo", monospace; font-family: 'JetBrainsMono Nerd Font Propo', monospace;
font-size: 1.2em; font-size: 1.2em;
} }
window.popup { window.popup {
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
menuitem { menuitem {
label { label {
color: $bar-menus-popover-text; color: $bar-menus-popover-text;
}
&:hover {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
}
} }
&:hover { menu {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6); border-color: $bar-menus-popover-border;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
} }
}
menu { separator {
border-color: $bar-menus-popover-border; background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background); min-height: 0.075em;
} }
separator { arrow {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7); }
min-height: 0.075em;
}
arrow {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
}
} }
tooltip { tooltip {
* { * {
all: unset; all: unset;
} }
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
font-size: 1.1em; font-size: 1.1em * $tooltip-scaling * 0.01;
>*>* { > * > * {
padding: 0.6em; padding: 0.6em;
border-radius: $bar-menus-border-radius * 0.5; border-radius: $bar-menus-border-radius * 0.5;
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);
} }
} }
check:not(:checked) { check:not(:checked) {
background-color: $bar-menus-check_radio_button-background; background-color: $bar-menus-check_radio_button-background;
border: 1px solid $bar-menus-check_radio_button-active; border: 1px solid $bar-menus-check_radio_button-active;
} }
check:checked { check:checked {
background-color: $bar-menus-check_radio_button-active; background-color: $bar-menus-check_radio_button-active;
border: 1px solid $bar-menus-check_radio_button-background; border: 1px solid $bar-menus-check_radio_button-background;
} }

View File

@@ -174,6 +174,14 @@ export const BarGeneral = (): Scrollable<Child, Attribute> => {
max: 100, max: 100,
increment: 5, increment: 5,
}), }),
Option({
opt: options.theme.tooltip.scaling,
title: 'Tooltips',
type: 'number',
min: 1,
max: 100,
increment: 5,
}),
], ],
}), }),
}); });