Set font size directly rather than using classes, add 18px font size option, fixes

This commit is contained in:
Freeplay 2023-06-13 14:42:18 -04:00
parent 35fd45965d
commit e8ae6738d1
5 changed files with 39 additions and 29 deletions

View File

@ -95,9 +95,13 @@
}
//#endregion
const fontSize = localStorage.getItem("fontSize");
let fontSize = localStorage.getItem("fontSize");
if (fontSize) {
document.documentElement.classList.add("f-" + fontSize);
if (fontSize < 10) { // need to do this for now, as values before were 1, 2, 3 depending on the option
localStorage.setItem("fontSize", null);
fontSize = localStorage.getItem("fontSize");
}
document.documentElement.style.fontSize = fontSize + "px";
}
const useSystemFont = localStorage.getItem("useSystemFont");

View File

@ -23,9 +23,9 @@
/>
<datalist v-if="showTicks && steps" :id="id">
<option
v-for="i in steps + 1"
:value="i"
:label="i.toString()"
v-for="i in steps"
:value="i + min"
:label="(i + min).toString()"
></option>
</datalist>
</div>

View File

@ -431,7 +431,8 @@ onUnmounted(() => {
> .icon {
margin-right: 8px;
width: 16px;
min-width: 16px;
width: 1em;
text-align: center;
}
@ -508,10 +509,11 @@ onUnmounted(() => {
}
&.collapse {
--width: 38px;
--width: 2.7em;
// --width: 1.33333em
> .tab {
width: 38px;
min-width: 38px !important;
width: 2.7em;
min-width: 2.7em !important;
&:not(.active) > .title {
opacity: 0;
}

View File

@ -114,18 +114,34 @@
<FormRadios v-model="fontSize" class="_formBlock">
<template #label>{{ i18n.ts.fontSize }}</template>
<option :value="null">
<span style="font-size: 14px">Aa</span>
<span style="font-size: 14px">14</span>
</option>
<option value="1">
<span style="font-size: 15px">Aa</span>
<option value="15">
<span style="font-size: 15px">15</span>
</option>
<option value="2">
<span style="font-size: 16px">Aa</span>
<option value="16">
<span style="font-size: 16px">16</span>
</option>
<option value="3">
<span style="font-size: 17px">Aa</span>
<option value="17">
<span style="font-size: 17px">17</span>
</option>
<option value="18">
<span style="font-size: 18px">18</span>
</option>
</FormRadios>
<!-- <FormRange
v-model="fontSize"
:min="12"
:max="18"
:step="1"
:value="fontSize ? fontSize : 14"
easing
:showTicks="true"
class="_formBlock"
>
<template #label>{{ i18n.ts.fontSize }}</template>
</FormRange> -->
</FormSection>
<FormSection>

View File

@ -54,20 +54,8 @@ html {
tab-size: 2;
scroll-padding: 60px;
&.f-1 {
font-size: 15px;
}
&.f-2 {
font-size: 16px;
}
&.f-3 {
font-size: 17px;
}
&.useSystemFont {
font-family: sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
}
body::-webkit-scrollbar {