feat(UI): use normalised font-family and line-height (#2117)

Author: AprilSylph

src/action/backup.css

@@ -42,7 +42,7 @@
 
   background-color: rgb(var(--passive-grey));
   color: rgb(var(--black));
-  font-family: monospace, monospace;
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: smaller;
   white-space: pre;
 }

src/action/components/xkit-feature/index.css

@@ -71,7 +71,6 @@ summary:focus {
 
   background-color: #ff62ce;
   color: rgb(var(--white));
-  line-height: 1.5;
 }
 
 .title,
@@ -81,13 +80,11 @@ summary:focus {
 
 .title {
   font-size: 15px;
-  line-height: 18.5px;
 }
 
 .description {
   font-size: 13px;
-  line-height: 16px;
-  opacity: 70%;
+  opacity: 69%;
 }
 
 .disabled:not([open], :focus-within, :hover) :is(.icon, .meta) {

src/action/configuration.css

@@ -39,9 +39,9 @@ label[for="filter"] {
   height: 100px;
 
   color: rgb(var(--active-grey));
-  content: "Loading...";
-  font-size: 1.3125rem;
-  font-weight: 700;
+  content: "Loading…";
+  font-size: 1.133rem;
+  font-weight: bold;
 }
 
 xkit-feature.search-hidden,

src/action/popup.css

@@ -55,8 +55,8 @@ html, main {
 body {
   background-color: rgb(var(--white));
   color: rgb(var(--black));
-  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
-  font-size: 100%;
+  font: inherit;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -77,8 +77,7 @@ body {
   border-radius: 0.5ch;
   margin: 8px auto 0;
 
-  font-family: 'Courier New', Courier, monospace;
-  line-height: 1;
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
 }
 
 #grant-host-permission:focus {
@@ -106,7 +105,6 @@ nav a {
 
   color: rgb(var(--black));
   font-weight: bold;
-  line-height: 1em;
   text-align: center;
   text-decoration: none;
 }
@@ -131,7 +129,7 @@ section.open:empty {
 }
 
 section.open:empty::before {
-  content: "No one's around to help.";
+  content: "No one’s around to help.";
 }
 
 section h2 {

src/features/postblock/options/index.css

@@ -24,8 +24,7 @@ html {
 body {
   background-color: rgb(var(--white));
   color: rgb(var(--black));
-  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
-  font-size: 100%;
+  font: inherit;
   -webkit-user-select: none;
   user-select: none;
 }
@@ -35,16 +34,30 @@ header {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1em;
+  column-gap: 6px;
+  flex-wrap: wrap;
+}
+
+#posts-blocked-count,
+#posts-blocked-info {
+  margin: 0;
 }
 
 #posts-blocked-count {
-  font-weight: bold;
+  font-size: 15px;
+}
+
+#posts-blocked-info {
+  font-size: 11px;
 }
 
 #blocked-posts {
   padding: 0;
-  margin: 0;
+  margin: 1em 0 0;
+}
+
+#blocked-posts:empty {
+  display: none;
 }
 
 .blocked-post {

src/features/postblock/options/index.html

@@ -20,8 +20,8 @@
     </template>
     <main>
       <header>
-        <span id="posts-blocked-count"></span>
-        <small>Unblocking a post will immediately unhide it.</small>
+        <h3 id="posts-blocked-count">Loading…</h3>
+        <p id="posts-blocked-info">Unblocking a post will immediately unhide it.</p>
       </header>
       <ul id="blocked-posts"></ul>
     </main>

src/features/quick_tags/options/index.css

@@ -24,8 +24,7 @@ html {
 body {
   background-color: rgb(var(--white));
   color: rgb(var(--black));
-  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
-  font-size: 100%;
+  font: inherit;
   -webkit-user-select: none;
   user-select: none;
 }
@@ -106,7 +105,7 @@ input[type="text"] {
 
 .bundle button i {
   color: rgb(var(--black));
-  font-size: 1.5em;
+  font-size: 21px;
 }
 
 .bundle .drag-handle {