44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix tooltip styling inconsistency

Browse Source 
This commit fixes inconsistent tooltip styling by setting the font
explicitly on the tooltip container to ensure uniform tooltip fonts.

As tooltip is rendered inside the parent elements' DOM, styling parent
element's font was also styling the font's font due to style
propogation, but setting fonts explicitly on tooltip ensure this does
not happen.
This commit is contained in:
undergroundwires
2024-03-19 09:09:29 +01:00
parent 840adf9429
commit ec34ac1124
3 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/presentation/assets/styles/_mixins.scss
View File

@@ -128,3 +128,8 @@
$calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch}); $calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch});
#{$property}: $calculated-width-in-em; #{$property}: $calculated-width-in-em;
} }
@mixin base-font-style {
font-family: $font-family-main;
font-size: $font-size-absolute-normal;
}

4
src/presentation/assets/styles/base/_index.scss
View File

@@ -21,9 +21,7 @@ $base-spacing: 1em;
body { body {
background: $color-background; background: $color-background;
font-family: $font-family-main; @include base-font-style;
font-size: $font-size-absolute-normal;
@include apply-uniform-spacing($base-spacing: $base-spacing) @include apply-uniform-spacing($base-spacing: $base-spacing)
} }

4
src/presentation/components/Shared/TooltipWrapper.vue
View File

@@ -220,7 +220,9 @@ $color-tooltip-background: $color-primary-darkest;
color: $color-on-primary; color: $color-on-primary;
border-radius: 16px; border-radius: 16px;
padding: 12px 10px; padding: 12px 10px;
font-size: $font-size-absolute-normal;
// Explicitly set font styling for tooltips to prevent inconsistent appearances due to style inheritance from trigger elements.
@include base-font-style;
/* /*
This margin creates a visual buffer between the tooltip and the edges of the document. This margin creates a visual buffer between the tooltip and the edges of the document.