feat: scale the whole UI based on font size

foray1010 · Mar 3, 2023 · 97bea3c · 97bea3c
1 parent 2880b34
commit 97bea3c
Show file tree

Hide file tree

Showing 20 changed files with 59 additions and 57 deletions.
diff --git a/src/core/components/baseItems/Button/styles.module.css b/src/core/components/baseItems/Button/styles.module.css
@@ -1,8 +1,8 @@
 .main {
   border: 0;
   background-color: var(--highlight-level1);
-  padding-block: var(--gap-px-2x);
-  padding-inline: var(--gap-px-4x);
+  padding-block: var(--gap-rem-2x);
+  padding-inline: var(--gap-rem-4x);
   color: inherit;
   font-family: inherit;
   font-size: inherit;

diff --git a/src/core/components/baseItems/Input/styles.module.css b/src/core/components/baseItems/Input/styles.module.css
@@ -5,8 +5,8 @@
 .textInput {
   border: 1px solid var(--highlight-level2);
   background-color: transparent;
-  padding-block: var(--gap-px-2x);
-  padding-inline: var(--gap-px-4x);
+  padding-block: var(--gap-rem-2x);
+  padding-inline: var(--gap-rem-4x);
   color: inherit;
   font-family: inherit;
   font-size: inherit;

diff --git a/src/core/components/baseItems/Select/styles.module.css b/src/core/components/baseItems/Select/styles.module.css
@@ -1,8 +1,8 @@
 .main {
   border: 1px solid var(--highlight-level2);
   background-color: transparent;
-  padding-block: var(--gap-px-2x);
-  padding-inline: var(--gap-px-4x);
+  padding-block: var(--gap-rem-2x);
+  padding-inline: var(--gap-rem-4x);
   color: inherit;
   font-family: inherit;
   font-size: inherit;

diff --git a/src/core/styles/globals.module.css b/src/core/styles/globals.module.css
@@ -8,8 +8,11 @@
 
 :root {
   --gap-px: 2px;
-  --gap-px-2x: calc(var(--gap-px) * 2);
-  --gap-px-4x: calc(var(--gap-px) * 4);
+  /* upper limit is 4px because the popup size is limited to 800x600, and we need to save space */
+  --gap-rem: min(0.125rem, 4px);
+  --gap-rem-2x: calc(var(--gap-rem) * 2);
+  --gap-rem-3x: calc(var(--gap-rem) * 3);
+  --gap-rem-4x: calc(var(--gap-rem) * 4);
   --highlight-level1: #eee;
   --highlight-level2: #e0e0e0;
   --highlight-level3: #bdbdbd;
@@ -26,7 +29,6 @@
   background-color: rgb(var(--bg-color-rgb));
   color: var(--main-font-color);
   font-family: sans-serif;
-  font-size: 75%;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -43,6 +45,4 @@
 
 body {
   margin: 0;
-  font-family: unset;
-  font-size: unset;
 }
diff --git a/src/options/components/NavBar/styles.module.css b/src/options/components/NavBar/styles.module.css
@@ -7,10 +7,10 @@
 
 .button {
   border: 0;
-  border-block-end: var(--gap-px-2x) solid transparent;
+  border-block-end: var(--gap-rem-2x) solid transparent;
   background-color: transparent;
   cursor: default;
-  padding-block-start: var(--gap-px-2x);
+  padding-block-start: var(--gap-rem-2x);
   text-align: center;
   color: rgb(var(--bg-color-rgb));
   font: 1.5rem 'Archivo Narrow', sans-serif;

diff --git a/src/options/components/OptionForm/OptionItem/SelectMultiple/styles.module.css b/src/options/components/OptionForm/OptionItem/SelectMultiple/styles.module.css
@@ -1,16 +1,16 @@
 .main {
   display: inline flow-root;
   border: 1px solid var(--main-color1);
-  padding-inline: var(--gap-px-4x);
+  padding-inline: var(--gap-rem-4x);
 }
 
 .checkbox {
   margin: 0;
-  margin-inline-end: var(--gap-px-2x);
+  margin-inline-end: var(--gap-rem-2x);
   vertical-align: middle;
   accent-color: var(--main-color1);
 }
 
 .list-item {
-  margin-block: var(--gap-px-4x);
+  margin-block: var(--gap-rem-4x);
 }
diff --git a/src/options/components/OptionForm/option-form.module.css b/src/options/components/OptionForm/option-form.module.css
@@ -1,14 +1,14 @@
 .form {
   display: flow-root;
-  margin-block: var(--gap-px-4x);
+  margin-block: var(--gap-rem-4x);
 }
 
 .table {
   /* unsetting the top and bottom spacing added by border-spacing as it does not support margin collapse */
-  margin-block: calc(var(--gap-px-4x) * -1);
+  margin-block: calc(var(--gap-rem-4x) * -1);
   width: 100%;
   table-layout: fixed;
-  border-spacing: var(--gap-px-4x);
+  border-spacing: var(--gap-rem-4x);
 
   & > tbody,
   & > tfoot {
@@ -24,7 +24,7 @@
   & > select {
     box-sizing: border-box;
     border-color: var(--main-color1);
-    padding-block: var(--gap-px-2x);
-    padding-inline: var(--gap-px-4x);
+    padding-block: var(--gap-rem-2x);
+    padding-inline: var(--gap-rem-4x);
   }
 }
diff --git a/src/options/components/donate.module.css b/src/options/components/donate.module.css
@@ -1,9 +1,9 @@
 .container {
   display: inline flex;
-  gap: var(--gap-px-4x);
+  gap: var(--gap-rem-4x);
   align-items: center;
   background-color: var(--highlight-level1);
-  padding: var(--gap-px-4x);
+  padding: var(--gap-rem-4x);
 }
 
 .desc {
@@ -19,5 +19,5 @@
 .main {
   display: flex;
   justify-content: center;
-  margin: var(--gap-px-4x);
+  margin: var(--gap-rem-4x);
 }
diff --git a/src/popup/components/App/globals.module.css b/src/popup/components/App/globals.module.css
@@ -6,12 +6,11 @@
 
 ::-webkit-scrollbar {
   background-color: transparent;
-  width: calc(5px + var(--gap-px));
-  height: 5px;
+  width: var(--gap-rem-4x);
 }
 
 ::-webkit-scrollbar-thumb {
-  border-inline-start: var(--gap-px) solid rgb(var(--bg-color-rgb));
+  border-left: var(--gap-rem) solid rgb(var(--bg-color-rgb));
   background-color: var(--highlight-level3);
 
   &:hover {

diff --git a/src/popup/components/App/index.tsx b/src/popup/components/App/index.tsx
@@ -53,7 +53,8 @@ const AppWithOptions = withOptions(function InnerApp() {
         ).join(','),
         'font-size':
           options[OPTIONS.FONT_SIZE] !== undefined
-            ? `${options[OPTIONS.FONT_SIZE]}px`
+            ? // revert the 75% font size in body
+              `${options[OPTIONS.FONT_SIZE] / 0.75}px`
             : null,
         height:
           globalBodySize?.height !== undefined

diff --git a/src/popup/components/BookmarkTree/BookmarkRow/bookmark-row.module.css b/src/popup/components/BookmarkTree/BookmarkRow/bookmark-row.module.css
@@ -1,8 +1,8 @@
 .main {
   display: flex;
-  gap: var(--gap-px-2x);
+  gap: var(--gap-rem-2x);
   align-items: center;
-  padding-inline: var(--gap-px);
+  padding-inline: var(--gap-rem);
   color: var(--main-font-color);
   /* stylelint-disable-next-line value-keyword-case */
   composes: listItem from '../../../../core/styles/composes.module.css';
@@ -25,7 +25,7 @@
     color: var(--highlight-level4);
 
     & > .title {
-      padding-block: var(--gap-px);
+      padding-block: var(--gap-rem);
       text-overflow: clip;
       line-height: 0.5;
     }
@@ -45,11 +45,11 @@
   aspect-ratio: 1;
   width: auto;
   height: 1em;
-  min-height: 16px;
+  min-height: 1rem;
 }
 
 .title {
-  padding-block: var(--gap-px-2x);
+  padding-block: var(--gap-rem-2x);
   line-height: 1;
   /* stylelint-disable-next-line value-keyword-case */
   composes: noTextOverflow from '../../../../core/styles/composes.module.css';

diff --git a/src/popup/components/BookmarkTree/bookmark-tree.module.css b/src/popup/components/BookmarkTree/bookmark-tree.module.css
@@ -1,7 +1,7 @@
 .listItem {
   &:last-child {
-    border-block-end: currentcolor solid var(--gap-px);
-    padding-block-end: var(--gap-px);
+    border-block-end: currentcolor solid var(--gap-rem);
+    padding-block-end: var(--gap-rem);
   }
 }
 

diff --git a/src/popup/components/BookmarkTree/no-search-result.module.css b/src/popup/components/BookmarkTree/no-search-result.module.css
@@ -1,8 +1,8 @@
 .main {
   box-sizing: border-box;
-  margin: var(--gap-px-2x);
+  margin: var(--gap-rem-2x);
   cursor: default;
-  padding: var(--gap-px);
+  padding: var(--gap-rem);
   text-align: center;
   color: var(--main-font-color);
   /* stylelint-disable-next-line value-keyword-case */

diff --git a/src/popup/components/BookmarkTree/tree-header.module.css b/src/popup/components/BookmarkTree/tree-header.module.css
@@ -1,6 +1,6 @@
 .close {
   box-sizing: border-box;
-  padding: 6px;
+  padding: var(--gap-rem-3x);
   height: 100%;
   color: rgb(var(--bg-color-rgb));
 
@@ -13,12 +13,13 @@
   display: grid;
   grid-auto-flow: column;
   justify-content: space-between;
-  margin-block-end: var(--gap-px);
+  margin-block-end: var(--gap-rem);
   background-color: currentcolor;
+  padding-inline-start: var(--gap-rem-2x);
 }
 
 .title {
-  margin: var(--gap-px-2x);
+  margin-block: var(--gap-rem-2x);
   cursor: default;
   line-height: 1;
   color: rgb(var(--bg-color-rgb));

diff --git a/src/popup/components/BookmarkTrees/bookmark-trees.module.css b/src/popup/components/BookmarkTrees/bookmark-trees.module.css
@@ -1,6 +1,7 @@
 .main {
   display: flex;
   flex-direction: row-reverse;
+  /* do not use --gap-rem because the max-width is fixed (800px) */
   gap: var(--gap-px);
 }
 

diff --git a/src/popup/components/Search/search-input.module.css b/src/popup/components/Search/search-input.module.css
@@ -1,23 +1,23 @@
 .icon {
   box-sizing: border-box;
-  padding: var(--gap-px);
+  padding: var(--gap-rem);
   height: 100%;
   color: var(--highlight-level4);
 }
 
 .main {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  margin-block-end: var(--gap-px);
+  margin-block-end: var(--gap-rem);
   border: 0;
   border-block-end: 1px solid var(--highlight-level3);
 }
 
 .searchInput {
   outline: 0;
   border: 0;
-  padding-block: var(--gap-px-2x);
-  padding-inline: var(--gap-px);
+  padding-block: var(--gap-rem-2x);
+  padding-inline: var(--gap-rem);
   /* without this, the UI will break when the height is too large, as it scales with font size. */
   width: 100%;
   height: 1em;

diff --git a/src/popup/components/editor/editor-form.module.css b/src/popup/components/editor/editor-form.module.css
@@ -1,31 +1,31 @@
 .button-group {
   display: flex;
-  gap: var(--gap-px-2x);
+  gap: var(--gap-rem-2x);
   justify-content: end;
-  margin-block: var(--gap-px-2x);
+  margin-block: var(--gap-rem-2x);
 }
 
 .header {
   float: left;
-  margin-block: var(--gap-px-2x);
+  margin-block: var(--gap-rem-2x);
   background-color: var(--main-color2);
   cursor: default;
-  padding-block: var(--gap-px);
-  padding-inline: var(--gap-px-4x);
+  padding-block: var(--gap-rem);
+  padding-inline: var(--gap-rem-4x);
   color: rgb(var(--bg-color-rgb));
 }
 
 .input {
   box-sizing: border-box;
   display: block;
-  margin-block: var(--gap-px-2x);
+  margin-block: var(--gap-rem-2x);
   width: 100%;
 }
 
 .main {
   box-sizing: border-box;
   border-block: 1px solid var(--highlight-level3);
   background-color: rgb(var(--bg-color-rgb));
-  padding-inline: var(--gap-px-2x);
+  padding-inline: var(--gap-rem-2x);
   text-align: right;
 }
diff --git a/src/popup/components/floatingWindow/FloatingWindow.tsx b/src/popup/components/floatingWindow/FloatingWindow.tsx
@@ -79,7 +79,7 @@ export default function FloatingWindow({
         ref={ref}
         style={React.useMemo(
           () => ({
-            position: 'fixed',
+            position: 'absolute',
             left: `${calibratedPosition.left ?? 0}px`,
             top: `${calibratedPosition.top ?? 0}px`,
           }),

diff --git a/src/popup/components/menu/menu-row.module.css b/src/popup/components/menu/menu-row.module.css
@@ -1,8 +1,8 @@
 .main {
   /* stylelint-disable-next-line value-keyword-case */
   composes: listItem from '../../../core/styles/composes.module.css';
-  padding-block: var(--gap-px);
-  padding-inline: var(--gap-px-4x);
+  padding-block: var(--gap-rem);
+  padding-inline: var(--gap-rem-4x);
   white-space: nowrap;
 
   &.unclickable {

diff --git a/src/popup/components/menu/menu.module.css b/src/popup/components/menu/menu.module.css
@@ -2,12 +2,12 @@
   border: 1px solid var(--highlight-level3);
   box-shadow: 0 2px 4px rgba(0 0 0 20%);
   background-color: rgb(var(--bg-color-rgb));
-  padding: var(--gap-px-2x);
+  padding: var(--gap-rem-2x);
 
   /* separator between menu fields */
   & > * + * {
-    margin-block-start: var(--gap-px-2x);
+    margin-block-start: var(--gap-rem-2x);
     border-block-start: 1px solid var(--highlight-level2);
-    padding-block-start: var(--gap-px-2x);
+    padding-block-start: var(--gap-rem-2x);
   }
 }