Merge branch 'themes3' into shigusegubu-themes3

src/App.scss

@@ -3,6 +3,8 @@
 @import "./panel";
 
 :root {
+  --font-size: 14px;
+  --status-margin: 0.75em;
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
   // Z-Index stuff
@@ -15,7 +17,7 @@
 }
 
 html {
-  font-size: 14px;
+  font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
@@ -203,7 +205,6 @@ nav {
   --miniColumn: 25rem;
   --maxiColumn: 45rem;
   --columnGap: 1em;
-  --status-margin: 0.75em;
   --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
   --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
   --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));

src/components/chat_list_item/chat_list_item.scss

@@ -10,7 +10,7 @@
   }
 
   &:hover {
-    box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
+    box-shadow: var(--shadow);
   }
 
   .chat-list-item-left {
@@ -49,12 +49,12 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: var(--faintText);
+    color: var(--textFaint);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink);
+    color: var(--linkFaint);
     text-decoration: none;
     pointer-events: none;
   }

src/components/conversation/conversation.vue

@@ -31,7 +31,7 @@
     <div
       class="conversation-body"
       :class="{ 'panel-body': isExpanded }"
-      >
+    >
       <div
         v-if="isTreeView"
         class="thread-body"

src/components/poll/poll.vue

@@ -37,8 +37,8 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
-          @click="activateOption(index)"
           class="input unstyled"
+          @click="activateOption(index)"
         >
           <!-- TODO: USE CHECKBOX -->
           <input
@@ -112,6 +112,10 @@
 
   .poll-option {
     margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
   }
 
   .option-result {

src/components/settings_modal/tabs/theme_tab/preview.vue

@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink);">
+              <a style="color: var(--linkFaint);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>

src/components/user_profile/user_profile.vue

@@ -77,7 +77,10 @@
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList :user-id="userId" :non-interactive="true">
+          <FriendList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
@@ -89,7 +92,10 @@
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList :user-id="userId" :non-interactive="true">
+          <FollowerList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard
                 :user="item"