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:
@@ -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'),
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user