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

5 files changed, 34 insertions, 13 deletions

diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
index 4345d3a6..0fcef05d 100644
--- a/ext/css/action-popup.css
+++ b/ext/css/action-popup.css
@@ -16,6 +16,12 @@
  */
 
 :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;
 
     --warning-color: #96751c;
@@ -26,7 +32,7 @@ body {
     padding: 10px;
     margin: 0;
     font-family: 'Segoe UI', Tahoma, sans-serif;
-    font-size: 14px;
+    font-size: var(--font-size);
 }
 
 h3 {
@@ -183,9 +189,9 @@ body[data-loaded=true] .toggle-group {
 .toggle-handle {
     display: block;
     padding: 6px 12px;
-    font-size: 14px;
+    font-size: var(--font-size);
     font-weight: normal;
-    line-height: calc(20 / 14);
+    line-height: var(--line-height);
     text-align: center;
     white-space: nowrap;
     cursor: pointer;
@@ -376,7 +382,7 @@ select.profile-select {
     opacity: 0;
     outline: none;
     cursor: pointer;
-    font-size: 14px;
+    font-size: var(--font-size);
 }
 .profile-select optgroup {
     color: #666666;
diff --git a/ext/css/display.css b/ext/css/display.css
index b4a7983e..e9339ccc 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -63,10 +63,10 @@
 
     --expression-space-size: 0.5em;
 
-    --tag-font-size-no-units: calc(11 / 14);
-    --tag-font-size: calc(1em * var(--tag-font-size-no-units));
+    --tag-font-size-no-units: 11;
+    --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: 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-font-weight: bold;
 
@@ -256,7 +256,7 @@ h3 {
     padding: 0;
 }
 h5 {
-    font-size: calc(12em / 14);
+    font-size: calc(12em / var(--font-size-no-units));
     margin: 0;
     padding: 0;
     font-weight: normal;
diff --git a/ext/css/material.css b/ext/css/material.css
index 71f930fc..a5fcee29 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -1155,8 +1155,8 @@ button.popup-menu-item:not([hidden]) {
     display: flex;
 }
 .popup-menu-item-icon {
-    width: calc(16em / 14);
-    height: calc(16em / 14);
+    width: calc(16em / var(--font-size-no-units));
+    height: calc(16em / var(--font-size-no-units));
     background-color: var(--button-current-content-color);
     flex: 0 0 auto;
 }
diff --git a/ext/css/pitch-accents-preview.css b/ext/css/pitch-accents-preview.css
index cda9977e..8ee013b2 100644
--- a/ext/css/pitch-accents-preview.css
+++ b/ext/css/pitch-accents-preview.css
@@ -15,6 +15,14 @@
  * 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 {
     background-color: transparent;
     color: #333333;
@@ -28,8 +36,8 @@ body {
     width: 100%;
     height: 100%;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    line-height: calc(20 / 14);
+    font-size: var(--font-size);
+    line-height: var(--line-height);
 }
 ul {
     margin: 0;
diff --git a/ext/css/popup-preview.css b/ext/css/popup-preview.css
index 2faccc3f..6e9251c8 100644
--- a/ext/css/popup-preview.css
+++ b/ext/css/popup-preview.css
@@ -16,6 +16,12 @@
  */
 
 :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;
 }
 :root[data-loaded=true] {
@@ -40,7 +46,8 @@ body {
     width: 100%;
     height: 100%;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 14px;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
 }
 
 .content {