Improve some values based on the font-size (#1430)

This commit is contained in:
toasted-nutbread 2021-02-21 11:34:55 -05:00 committed by GitHub
parent 1e4545107d
commit 75d0d333d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 13 deletions

View File

@ -16,6 +16,12 @@
*/ */
:root { :root {
--font-size-no-units: 14;
--font-size: calc(1px * var(--font-size-no-units));
--line-height-no-units: 20;
--line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
--badge-size: 16px; --badge-size: 16px;
--warning-color: #96751c; --warning-color: #96751c;
@ -26,7 +32,7 @@ body {
padding: 10px; padding: 10px;
margin: 0; margin: 0;
font-family: 'Segoe UI', Tahoma, sans-serif; font-family: 'Segoe UI', Tahoma, sans-serif;
font-size: 14px; font-size: var(--font-size);
} }
h3 { h3 {
@ -183,9 +189,9 @@ body[data-loaded=true] .toggle-group {
.toggle-handle { .toggle-handle {
display: block; display: block;
padding: 6px 12px; padding: 6px 12px;
font-size: 14px; font-size: var(--font-size);
font-weight: normal; font-weight: normal;
line-height: calc(20 / 14); line-height: var(--line-height);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -376,7 +382,7 @@ select.profile-select {
opacity: 0; opacity: 0;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: var(--font-size);
} }
.profile-select optgroup { .profile-select optgroup {
color: #666666; color: #666666;

View File

@ -63,10 +63,10 @@
--expression-space-size: 0.5em; --expression-space-size: 0.5em;
--tag-font-size-no-units: calc(11 / 14); --tag-font-size-no-units: 11;
--tag-font-size: calc(1em * var(--tag-font-size-no-units)); --tag-font-size: calc(1em * var(--tag-font-size-no-units) / var(--font-size-no-units));
--tag-border-size-no-units: 0; --tag-border-size-no-units: 0;
--tag-border-size: calc(1em * (var(--tag-border-size-no-units) / (var(--font-size-no-units) * var(--tag-font-size-no-units)))); --tag-border-size: calc(1em * (var(--tag-border-size-no-units) / var(--tag-font-size-no-units)));
--tag-border-style: none; --tag-border-style: none;
--tag-font-weight: bold; --tag-font-weight: bold;
@ -256,7 +256,7 @@ h3 {
padding: 0; padding: 0;
} }
h5 { h5 {
font-size: calc(12em / 14); font-size: calc(12em / var(--font-size-no-units));
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: normal; font-weight: normal;

View File

@ -1155,8 +1155,8 @@ button.popup-menu-item:not([hidden]) {
display: flex; display: flex;
} }
.popup-menu-item-icon { .popup-menu-item-icon {
width: calc(16em / 14); width: calc(16em / var(--font-size-no-units));
height: calc(16em / 14); height: calc(16em / var(--font-size-no-units));
background-color: var(--button-current-content-color); background-color: var(--button-current-content-color);
flex: 0 0 auto; flex: 0 0 auto;
} }

View File

@ -15,6 +15,14 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
:root {
--font-size-no-units: 14;
--font-size: calc(1px * var(--font-size-no-units));
--line-height-no-units: 20;
--line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
}
html { html {
background-color: transparent; background-color: transparent;
color: #333333; color: #333333;
@ -28,8 +36,8 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: var(--font-size);
line-height: calc(20 / 14); line-height: var(--line-height);
} }
ul { ul {
margin: 0; margin: 0;

View File

@ -16,6 +16,12 @@
*/ */
:root { :root {
--font-size-no-units: 14;
--font-size: calc(1px * var(--font-size-no-units));
--line-height-no-units: 20;
--line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
--animation-duration: 0s; --animation-duration: 0s;
} }
:root[data-loaded=true] { :root[data-loaded=true] {
@ -40,7 +46,8 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: var(--font-size);
line-height: var(--line-height);
} }
.content { .content {