From ae345d2c458bd0952d9b85c2e03060b2d286d320 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 17:26:08 +0200
Subject: buttons look great now, including unstyled ones menu items work too

---
 src/components/popover/popover.vue | 62 ++------------------------------------
 1 file changed, 2 insertions(+), 60 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 1a4bffd9..ce053503 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -53,8 +53,7 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
-  box-shadow: var(--popupShadow);
+  box-shadow: var(--shadow);
 }
 
 .popover-default {
@@ -66,24 +65,12 @@
     left: 0;
     right: 0;
     z-index: 3;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     pointer-events: none;
   }
 
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--text;
-  color: var(--popoverText, $fallback--text);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --postLink: var(--popoverPostLink, $fallback--link);
-  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-  --icon: var(--popoverIcon, $fallback--icon);
 }
 
 .dropdown-menu {
@@ -127,7 +114,6 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
@@ -138,25 +124,6 @@
       }
     }
 
-    &:active,
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      box-shadow: none;
-
-      --btnText: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-      svg {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
@@ -188,30 +155,5 @@
       }
     }
   }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*="icon-"] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From bcc50844096b47c0656ed3338de222055a749fb1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Feb 2024 02:09:43 +0200
Subject: add roundness, fix inputs

---
 src/App.scss                                       | 27 ++++++-----
 src/components/autosuggest/autosuggest.vue         | 10 ++---
 src/components/avatar.style.js                     |  6 ++-
 src/components/button.style.js                     |  3 +-
 src/components/button_unstyled.style.js            |  4 +-
 src/components/chat/chat.scss                      |  5 ++-
 src/components/emoji_input/emoji_input.vue         | 19 +++-----
 src/components/input.style.js                      |  1 +
 src/components/link-preview/link-preview.vue       |  6 +--
 src/components/menu_item.style.js                  |  9 +++-
 src/components/mobile_nav/mobile_nav.vue           |  4 +-
 .../moderation_tools/moderation_tools.vue          | 14 +++---
 src/components/nav_panel/nav_panel.vue             | 12 ++---
 src/components/navigation/navigation_pins.vue      |  2 +-
 .../notifications/notification_filters.vue         | 14 +++---
 src/components/panel.style.js                      |  1 +
 src/components/popover.style.js                    |  1 +
 src/components/popover/popover.vue                 | 15 +++----
 .../quick_filter_settings.vue                      | 12 ++---
 .../quick_view_settings/quick_view_settings.vue    | 10 ++---
 src/components/root.style.js                       |  8 ----
 .../settings_modal/tabs/profile_tab.scss           |  3 +-
 src/components/shadow_control/shadow_control.vue   |  6 +--
 src/components/shout_panel/shout_panel.vue         |  3 +-
 src/components/status/status.scss                  |  5 +--
 src/components/status_popover/status_popover.vue   |  5 +--
 src/components/timeline/timeline.scss              |  5 +--
 src/components/user_avatar/user_avatar.vue         | 14 +++---
 src/components/user_card/user_card.scss            |  3 +-
 src/components/user_list_menu/user_list_menu.vue   |  2 +-
 src/panel.scss                                     | 17 +++----
 src/services/style_setter/style_setter.js          |  2 +-
 src/services/theme_data/theme_data_3.service.js    | 52 +++++++++++++++++-----
 33 files changed, 150 insertions(+), 150 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/App.scss b/src/App.scss
index 6a634926..8efa1328 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -355,8 +355,7 @@ nav {
   user-select: none;
   color: var(--text);
   border: none;
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  border-radius: var(--roundness);
   cursor: pointer;
   box-shadow: var(--shadow);
   font-size: 1em;
@@ -380,6 +379,16 @@ nav {
   font-family: inherit;
   cursor: pointer;
   color: inherit;
+
+  &:first-child {
+    border-top-right-radius: var(--roundness);
+    border-top-left-radius: var(--roundness);
+  }
+
+  &:last-child {
+    border-bottom-right-radius: var(--roundness);
+    border-bottom-left-radius: var(--roundness);
+  }
 }
 
 .button-unstyled {
@@ -423,8 +432,7 @@ textarea {
   --_padding: 0.5em;
 
   border: none;
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  border-radius: var(--roundness);
   box-shadow: var(--shadow);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
@@ -511,8 +519,7 @@ textarea {
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: $fallback--checkboxRadius;
-      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+      border-radius: var(--roundness);
       box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
       margin-right: 0.5em;
@@ -562,7 +569,7 @@ option {
 
   li {
     border: 1px solid var(--border);
-    border-radius: var(--inputRadius);
+    border-radius: var(--roundness);
     padding: 0.5em;
     margin: 0.25em;
   }
@@ -634,8 +641,7 @@ option {
 .alert {
   margin: 0 0.35em;
   padding: 0 0.25em;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  border-radius: var(--roundness);
 
   &.error {
     background-color: $fallback--alertError;
@@ -682,8 +688,7 @@ option {
   padding: 0.5em;
   border: 1px solid $fallback--faint;
   border: 1px solid var(--faint, $fallback--faint);
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  border-radius: var(--roundness);
 }
 
 .notice-dismissible {
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 64cc11a4..7912db94 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -1,3 +1,4 @@
+<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
 <template>
   <div
     v-click-outside="onClickOutside"
@@ -11,7 +12,7 @@
     >
     <div
       v-if="resultsVisible && filtered.length > 0"
-      class="autosuggest-results"
+      class="panel autosuggest-results"
     >
       <slot
         v-for="item in filtered"
@@ -45,13 +46,12 @@
     border-style: solid;
     border-width: 1px;
     border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
+    border-color: var(--border);
+    border-radius: var(--roundness);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     overflow-y: auto;
     z-index: 1;
   }
diff --git a/src/components/avatar.style.js b/src/components/avatar.style.js
index 2262fd03..812d45a4 100644
--- a/src/components/avatar.style.js
+++ b/src/components/avatar.style.js
@@ -1,11 +1,13 @@
 export default {
   name: 'Avatar',
   selector: '.Avatar',
+  variants: {
+    compact: '.-compact'
+  },
   defaultRules: [
     {
       directives: {
-        background: '--bg',
-        opacity: 0,
+        roundness: 3,
         shadow: [{
           x: 0,
           y: 1,
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 8d19516f..900eef26 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -64,7 +64,8 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        roundness: 3
       }
     },
     {
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index d0ca03a5..a96cb7b6 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -15,9 +15,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg',
-        shadow: [],
-        opacity: 0
+        shadow: []
       }
     },
     {
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 43e7a5e4..4f8f8492 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -18,8 +18,9 @@
     overflow: visible;
     min-height: calc(100vh - var(--navbar-height));
     margin: 0;
-    border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
+    border-radius: var(--roundness);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
     &::after {
       border-radius: 0;
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index f45d231e..e09969ba 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="root"
-    class="emoji-input"
+    class="input emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot
@@ -68,9 +68,9 @@
             v-for="(suggestion, index) in suggestions"
             :id="suggestionItemId(index)"
             :key="index"
-            class="autocomplete-item"
+            class="menu-item autocomplete-item"
             role="option"
-            :class="{ highlighted: index === highlighted }"
+            :class="{ active: index === highlighted }"
             :aria-label="autoCompleteItemLabel(suggestion)"
             :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"
@@ -145,7 +145,9 @@
   textarea {
     flex: 1 0 auto;
     color: inherit;
+    padding: 0;
     background: none;
+    box-shadow: none;
     border: none;
     outline: none;
   }
@@ -186,7 +188,6 @@
     display: flex;
     cursor: pointer;
     padding: 0.2em 0.4em;
-    border-bottom: 1px solid rgb(0 0 0 / 40%);
     height: 32px;
 
     .image {
@@ -219,16 +220,6 @@
         line-height: 9px;
       }
     }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--selectedMenuPopover, $fallback--fg);
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 37398ab8..9cddfd8e 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -34,6 +34,7 @@ export default {
     {
       directives: {
         background: '--fg, -5',
+        roundness: 3,
         shadow: [{
           x: 0,
           y: 0,
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 09f341ac..88b7fb92 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -51,8 +51,7 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      border-radius: $fallback--attachmentRadius;
-      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -86,8 +85,7 @@
   color: var(--text, $fallback--text);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-radius: var(--roundness);
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
 }
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 72164d30..716edfa7 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -9,7 +9,7 @@ export default {
   ],
   states: {
     hover: ':hover',
-    active: 'active'
+    active: '.active'
   },
   defaultRules: [
     {
@@ -25,6 +25,13 @@ export default {
         opacity: 1
       }
     },
+    {
+      state: ['active'],
+      directives: {
+        background: '$mod(--bg, 5)',
+        opacity: 1
+      }
+    },
     {
       component: 'Text',
       variant: 'normal',
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index baab8c31..489f3866 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="alert-dot"
+            class="badge alert-dot"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,7 +37,7 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="alert-dot"
+            class="badge alert-dot"
           />
         </button>
       </div>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index a207ad6f..e1c77160 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -54,7 +54,7 @@
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
               />
               {{ $t('user_card.admin_menu.force_nsfw') }}
@@ -64,7 +64,7 @@
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
               />
               {{ $t('user_card.admin_menu.strip_media') }}
@@ -74,7 +74,7 @@
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
               />
               {{ $t('user_card.admin_menu.force_unlisted') }}
@@ -84,7 +84,7 @@
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
               />
               {{ $t('user_card.admin_menu.sandbox') }}
@@ -95,7 +95,7 @@
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_remote_subscription') }}
@@ -106,7 +106,7 @@
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_any_subscription') }}
@@ -117,7 +117,7 @@
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
               />
               {{ $t('user_card.admin_menu.quarantine') }}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 51fa62ed..a07a8795 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -126,17 +126,13 @@
 
   > li {
     &:first-child.menu-item {
-      border-top-right-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-top-right-radius: var(--roundness);
+      border-top-left-radius: var(--roundness);
     }
 
     &:last-child.menu-item {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-bottom-right-radius: var(--roundness);
+      border-bottom-left-radius: var(--roundness);
     }
   }
 
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index fbb550f0..48a4dcbd 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="alert-dot"
+        class="badge alert-dot"
       />
     </router-link>
   </span>
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 001c46f9..cc506e78 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -12,7 +12,7 @@
           @click="toggleNotificationFilter('likes')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.likes }"
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
@@ -21,7 +21,7 @@
           @click="toggleNotificationFilter('repeats')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.repeats }"
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
@@ -30,7 +30,7 @@
           @click="toggleNotificationFilter('follows')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.follows }"
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
@@ -39,7 +39,7 @@
           @click="toggleNotificationFilter('mentions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.mentions }"
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
@@ -48,7 +48,7 @@
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
@@ -57,7 +57,7 @@
           @click="toggleNotificationFilter('moves')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.moves }"
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
@@ -66,7 +66,7 @@
           @click="toggleNotificationFilter('polls')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.polls }"
           />{{ $t('settings.notification_visibility_polls') }}
         </button>
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 1e8039c6..2f6f92b5 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -17,6 +17,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        roundness: 3,
         shadow: [{
           x: 1,
           y: 1,
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index ca82354d..7d58859d 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -9,6 +9,7 @@ export default {
     'Text',
     'Link',
     'Icon',
+    'Border',
     'Button',
     'ButtonUnstyled',
     'Input',
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index ce053503..7aec4404 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -69,13 +69,15 @@
     pointer-events: none;
   }
 
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  border-radius: var(--roundness);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: 1px;
 }
 
 .dropdown-menu {
   display: block;
-  padding: 0.5rem 0;
+  padding: 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
@@ -108,8 +110,6 @@
     height: 100%;
     box-sizing: border-box;
 
-    --btnText: var(--popoverText, $fallback--text);
-
     &-icon {
       svg {
         width: 22px;
@@ -134,10 +134,7 @@
       line-height: 22px;
       text-align: center;
       border-radius: 0;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
+      box-shadow: var(--shadow);
       margin-right: 0.75em;
 
       &.menu-checkbox-checked::after {
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index c6792a2c..082d8497 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -22,7 +22,7 @@
             @click="replyVisibilityAll = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_all') }}
@@ -35,7 +35,7 @@
             @click="replyVisibilityFollowing = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_following_short') }}
@@ -48,7 +48,7 @@
             @click="replyVisibilitySelf = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_self_short') }}
@@ -66,7 +66,7 @@
           @click="muteBotStatuses = !muteBotStatuses"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': muteBotStatuses }"
             :aria-hidden="true"
           />{{ $t('settings.mute_bot_posts') }}
@@ -78,7 +78,7 @@
           @click="hideMedia = !hideMedia"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMedia }"
             :aria-hidden="true"
           />{{ $t('settings.hide_media_previews') }}
@@ -90,7 +90,7 @@
           @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMutedPosts }"
             :aria-hidden="true"
           />{{ $t('settings.hide_all_muted_posts') }}
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 00955d4c..e93dd8e0 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -18,7 +18,7 @@
             @click="conversationDisplay = 'tree'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :aria-hidden="true"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
             /><FAIcon
@@ -33,7 +33,7 @@
             @click="conversationDisplay = 'linear'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
               :aria-hidden="true"
             /><FAIcon
@@ -53,7 +53,7 @@
           @click="showUserAvatars = !showUserAvatars"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': showUserAvatars }"
             :aria-hidden="true"
           />{{ $t('settings.mention_link_show_avatar_quick') }}
@@ -66,7 +66,7 @@
           @click="autoUpdate = !autoUpdate"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': autoUpdate }"
             :aria-hidden="true"
           />{{ $t('settings.auto_update') }}
@@ -79,7 +79,7 @@
           @click="collapseWithSubjects = !collapseWithSubjects"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
             :aria-hidden="true"
           />{{ $t('settings.collapse_subject') }}
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 38bcc954..3e421bd4 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -6,13 +6,5 @@ export default {
     'Modals',
     'Popover',
     'TopBar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    }
   ]
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index ee253ffe..efc52335 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -43,8 +43,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
   }
 
   .reset-button {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index ed2283a5..4fefaee1 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -293,16 +293,14 @@
         linear-gradient(-45deg, transparent 75%, #666 75%);
       background-size: 20px 20px;
       background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: $fallback--inputRadius;
-      border-radius: var(--inputRadius, $fallback--inputRadius);
+      border-radius: var(--roundness);
 
       .preview-block {
         width: 33%;
         height: 33%;
         background-color: $fallback--bg;
         background-color: var(--bg, $fallback--bg);
-        border-radius: $fallback--panelRadius;
-        border-radius: var(--panelRadius, $fallback--panelRadius);
+        border-radius: var(--roundness);
       }
     }
   }
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index a7013469..9278c141 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -128,8 +128,7 @@
     img {
       height: 24px;
       width: 24px;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       margin-right: 0.5em;
       margin-top: 0.25em;
     }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0f4a9434..600c98f7 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -247,7 +247,7 @@
   }
 
   .repeater-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     margin-left: 28px;
     width: 20px;
     height: 20px;
@@ -363,7 +363,6 @@
 
   .avatar-row {
     flex: 1;
-    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -421,7 +420,7 @@
   .quoted-status {
     margin-top: 0.5em;
     border: 1px solid var(--border, $fallback--border);
-    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+    border-radius: var(--roundness);
 
     &.-unavailable-prompt {
       padding: 0.5em;
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 311ca099..b3bd423f 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -47,12 +47,9 @@
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
   /* TODO cleanup this */
   .Status.Status {
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 4371947d..64c7de76 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,22 +10,19 @@
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
-    background-color: var(--badgeNeutral);
   }
 
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
     text-align: right;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
     position: absolute;
     left: calc(50% - 0.5em);
     top: calc(50% - 0.4em);
     padding: 0.2em;
     margin-left: 0.7em;
     margin-top: -1em;
-    background-color: var(--badgeNeutral);
-    color: var(--badgeNeutralText);
   }
 
   .loadmore-button {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 2f2ba25a..755346b2 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -43,16 +43,14 @@
   &.-compact {
     width: 32px;
     height: 32px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
   }
 
   .avatar {
     width: 100%;
     height: 100%;
     box-shadow: var(--_avatarShadowBox);
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
 
     &.-better-shadow {
       box-shadow: var(--_avatarShadowInset);
@@ -64,13 +62,11 @@
     }
 
     &.-compact {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
     }
 
     &.-placeholder {
-      background-color: $fallback--fg;
-      background-color: var(--fg, $fallback--fg);
+      background-color: var(--background);
     }
   }
 
@@ -87,7 +83,7 @@
     padding: 0.2em;
     background: rgb(127 127 127 / 50%);
     color: #fff;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
   }
 }
 </style>
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 62861570..a1ac81a6 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -153,8 +153,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       opacity: 0;
       transition: opacity 0.2s ease;
 
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 812f812e..b6bf8b42 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -14,7 +14,7 @@
             @click="toggleList(list.id)"
           >
             <span
-              class="menu-checkbox"
+              class="input menu-checkbox"
               :class="{ 'menu-checkbox-checked': list.inList }"
             />
             {{ list.title }}
diff --git a/src/panel.scss b/src/panel.scss
index d3d339ee..8fd772cf 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -10,8 +10,7 @@
 
   &::after,
   & {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
   }
 
   &::after {
@@ -77,8 +76,7 @@
   &.-stub {
     &,
     &::after {
-      border-radius: $fallback--panelRadius;
-      border-radius: var(--panelRadius, $fallback--panelRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -126,16 +124,15 @@
 // TODO Should refactor panels into separate component and utilize slots
 
 .panel-heading {
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
 
   &::after {
     background-color: var(--background);
     z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     box-shadow: var(--shadow);
   }
 
@@ -179,8 +176,8 @@
 }
 
 .panel-footer {
-  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   align-items: center;
   border-width: 1px 0 0;
   border-style: solid;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b86f241a..4e18bbb0 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -24,7 +24,7 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
+  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
   // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
   // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 3210c678..6ab1b24a 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -484,9 +484,20 @@ export const init = (extraRuleset, palette) => {
         })
       } else {
         computed[selector] = computed[selector] || {}
+        let addRuleNeeded = false
+
+        // TODO: DEFAULT TEXT COLOR
+        const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
+
+        if (
+          computedDirectives.shadow != null ||
+          computedDirectives.roundness != null
+        ) {
+          addRuleNeeded = true
+        }
 
-        // TODO make background non-mandatory
         if (computedDirectives.background) {
+          addRuleNeeded = true
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
           const lastVariantRule = variantRules[variantRules.length - 1]
@@ -501,9 +512,6 @@ export const init = (extraRuleset, palette) => {
           const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
           const inheritedBackground = computed[inheritSelector].background
 
-          // TODO: DEFAULT TEXT COLOR
-          const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
-
           dynamicVars.inheritedBackground = inheritedBackground
 
           const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
@@ -520,16 +528,25 @@ export const init = (extraRuleset, palette) => {
             }
             stacked[selector] = blend
             computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
-
-            addRule({
-              selector,
-              component: component.name,
-              ...combination,
-              parent,
-              directives: computedDirectives
-            })
           }
         }
+
+        if (!stacked[selector]) {
+          computedDirectives.background = 'transparent'
+          computedDirectives.opacity = 0
+          stacked[selector] = lowerLevelComputedBackground
+          computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
+        }
+
+        if (addRuleNeeded) {
+          addRule({
+            selector,
+            component: component.name,
+            ...combination,
+            parent,
+            directives: computedDirectives
+          })
+        }
       }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
@@ -566,6 +583,11 @@ export const init = (extraRuleset, palette) => {
       if (rule.component !== 'Root') {
         directives = Object.entries(rule.directives).map(([k, v]) => {
           switch (k) {
+            case 'roundness': {
+              return '  ' + [
+                '--roundness: ' + v + 'px'
+              ].join(';\n  ')
+            }
             case 'shadow': {
               return '  ' + [
                 '--shadow: ' + getCssShadow(v),
@@ -574,6 +596,12 @@ export const init = (extraRuleset, palette) => {
               ].join(';\n  ')
             }
             case 'background': {
+              if (v === 'transparent') {
+                return [
+                  'background-color: ' + v,
+                  '  --background: ' + v
+                ].join(';\n')
+              }
               const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
               return [
                 'background-color: ' + color,
-- 
cgit v1.2.3-70-g09d2


From fe93717d47792eef88f4ec6200260f457d1e0bd2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 01:23:43 +0200
Subject: consistent menu-items

---
 src/App.scss                                       | 29 +++++++++++
 src/components/account_actions/account_actions.vue | 14 +++---
 src/components/emoji_input/emoji_input.js          |  2 +-
 src/components/emoji_input/emoji_input.vue         | 20 ++++----
 .../moderation_tools/moderation_tools.vue          | 22 ++++-----
 src/components/navigation/navigation_entry.vue     | 56 ++++++++++------------
 src/components/popover/popover.vue                 | 32 ++++---------
 src/components/user_list_menu/user_list_menu.vue   |  2 +-
 8 files changed, 92 insertions(+), 85 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/App.scss b/src/App.scss
index 61ab44e6..2476791c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -366,17 +366,42 @@ nav {
 }
 
 .menu-item {
+  display: block;
+  box-sizing: border-box;
   border: none;
   outline: none;
   text-align: initial;
   font-size: inherit;
   font-family: inherit;
+  font-weight: 400;
   cursor: pointer;
   color: inherit;
+  clear: both;
   position: relative;
   border-bottom: 1px solid;
+  white-space: nowrap;
   border-color: var(--border);
   width: 100%;
+  line-height: var(--__line-height);
+  padding: var(--__vertical-gap) var(--__horizontal-gap);
+
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
+  a,
+  button {
+    text-align: initial;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+    display: inline;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: unset;
+    color: var(--text);
+  }
 
   &:first-child {
     border-top-right-radius: var(--roundness);
@@ -693,6 +718,10 @@ option {
   &.iconLetter {
     font-size: 1.1em;
   }
+
+  &.svg-inline--fa {
+    vertical-align: -0.15em;
+  }
 }
 
 .fa-old-padding {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 1c3c1419..cca7121c 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -11,14 +11,14 @@
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -31,34 +31,34 @@
           <UserListMenu :user="user" />
           <button
             v-if="relationship.followed_by"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="removeUserFromFollowers"
           >
             {{ $t('user_card.remove_follower') }}
           </button>
           <button
             v-if="relationship.blocking"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 9baf63f2..3cc58bd1 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -270,7 +270,7 @@ const EmojiInput = {
       if (newValue) {
         this.$refs.suggestorPopover.showPopover()
       } else {
-        this.$refs.suggestorPopover.hidePopover()
+        // this.$refs.suggestorPopover.hidePopover()
       }
     },
     textAtCaret: async function (newWord) {
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 8c18ec7b..e016aff1 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -185,23 +185,21 @@
     position: absolute;
   }
 
-  &-item {
+  &-item.menu-item {
     display: flex;
-    cursor: pointer;
-    padding: 0.2em 0.4em;
-    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
 
     .image {
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
+      width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      line-height: var(--__line-height);
       text-align: center;
-      font-size: 32px;
-      margin-right: 4px;
+      margin-right: var(--__horizontal-gap);
 
       img {
-        width: 32px;
-        height: 32px;
+        width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
         object-fit: contain;
       }
     }
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index e1c77160..91d87b69 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleRight(&quot;admin&quot;)"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -31,14 +31,14 @@
           </span>
           <button
             v-if="canChangeActivationState"
-            class="menu-item dropdown-item"
+            class="menu-item dropdown-item menu-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
             v-if="canDeleteAccount"
-            class="menu-item dropdown-item"
+            class="menu-item dropdown-item menu-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
@@ -60,7 +60,7 @@
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
@@ -70,7 +70,7 @@
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
@@ -80,7 +80,7 @@
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
@@ -91,7 +91,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
@@ -102,7 +102,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
@@ -113,7 +113,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ac4a0c47..4ea54ee3 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -62,59 +62,53 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+  --__line-height: 2.5em;
+  --__horizontal-gap: 0.5em;
+  --__vertical-gap: 0.4em;
 
-.NavigationEntry {
+  padding: 0;
   display: flex;
-  box-sizing: border-box;
   align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
-  padding: 0;
-  width: 100%;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
 
   &[aria-expanded] {
-    padding-right: 1em;
-  }
-
-  .timelines-chevron {
-    margin-right: 0;
+    padding-right: var(--__horizontal-gap);
   }
 
   .main-link {
-    background: none;
-    border: none;
-    outline: none;
-    display: inline;
-    text-align: initial;
-    font-size: 100%;
-    font-family: inherit;
-    line-height: unset;
-    cursor: pointer;
-    box-sizing: content-box;
-    color: var(--text);
+    line-height: var(--__line-height);
+    box-sizing: border-box;
     flex: 1;
-    padding: 0 1em;
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
   }
 
   .menu-icon {
-    color: var(--icon);
-    margin-right: 0.8em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: var(--__horizontal-gap);
+  }
+
+  .timelines-chevron {
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: 0;
   }
 
   .extra-button {
-    width: 3em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
     text-align: center;
 
     &:last-child {
-      margin-right: -0.8em;
+      margin-right: calc(-1 * var(--__horizontal-gap));
     }
   }
 
   .badge {
-     margin: 0 0.8em;
+    margin: 0 var(--__horizontal-gap);
   }
 }
 </style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 7aec4404..00d9c3cd 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -94,26 +94,12 @@
   }
 
   .dropdown-item {
-    line-height: 21px;
-    overflow: hidden;
-    display: block;
-    padding: 0.5em 0.75em;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: nowrap;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    border-bottom: none;
 
     &-icon {
       svg {
-        width: 22px;
-        margin-right: 0.75rem;
+        width: var(--__line-height);
+        margin-right: var(--__horizontal-gap);
       }
     }
 
@@ -127,15 +113,15 @@
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
-      min-width: 22px;
-      max-width: 22px;
-      min-height: 22px;
-      max-height: 22px;
-      line-height: 22px;
+      min-width: calc(var(--__line-height) + 1px);
+      max-width: calc(var(--__line-height) + 1px);
+      min-height: calc(var(--__line-height) + 1px);
+      max-height: calc(var(--__line-height) + 1px);
+      line-height: var(--__line-height);
       text-align: center;
       border-radius: 0;
       box-shadow: var(--shadow);
-      margin-right: 0.75em;
+      margin-right: var(--__horizontal-gap);
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index b6bf8b42..39ee2451 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -22,7 +22,7 @@
         </div>
       </template>
       <template #trigger>
-        <button class="btn button-default dropdown-item -has-submenu">
+        <button class="menu-item dropdown-item -has-submenu">
           {{ $t('lists.manage_lists') }}
           <FAIcon
             class="chevron-icon"
-- 
cgit v1.2.3-70-g09d2


From 28c7fac9f0b740473575200051bc2983ec5c9be9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 17:49:56 +0200
Subject: implement list item styles

---
 src/App.scss                                       | 32 +++++++++++++--
 src/components/basic_user_card/basic_user_card.vue |  1 -
 src/components/chat_list_item/chat_list_item.scss  | 12 ++----
 src/components/list/list.vue                       | 22 +++-------
 src/components/list/list_item.style.js             | 48 ++++++++++++++++++++++
 src/components/menu_item.style.js                  |  2 +-
 src/components/nav_panel/nav_panel.vue             | 13 ++----
 src/components/panel.style.js                      |  3 +-
 src/components/popover/popover.vue                 |  7 +---
 src/components/selectable_list/selectable_list.vue | 27 ++++--------
 10 files changed, 103 insertions(+), 64 deletions(-)
 create mode 100644 src/components/list/list_item.style.js

(limited to 'src/components/popover/popover.vue')

diff --git a/src/App.scss b/src/App.scss
index 8c60a05d..219269a1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -384,7 +384,8 @@ nav {
   }
 }
 
-.menu-item {
+.menu-item,
+.list-item {
   display: block;
   box-sizing: border-box;
   border: none;
@@ -397,9 +398,11 @@ nav {
   color: inherit;
   clear: both;
   position: relative;
-  border-bottom: 1px solid;
   white-space: nowrap;
   border-color: var(--border);
+  border-style: solid;
+  border-width: 0;
+  border-top-width: 1px;
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
@@ -408,8 +411,28 @@ nav {
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  &.-active,
+  &:hover {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
+
+  &.-active + &,
+  &:hover + & {
+    border-top-width: 0;
+  }
+
+  &:hover + .menu-item-collapsible:not(.-expanded) + &,
+  &.-active + .menu-item-collapsible:not(.-expanded) + & {
+    border-top-width: 0;
+  }
+
+  &[aria-expanded="true"] {
+    border-bottom-width: 1px;
+  }
+
   a,
-  button {
+  button:not(.button-default) {
     text-align: initial;
     padding: 0;
     background: none;
@@ -425,12 +448,13 @@ nav {
   &:first-child {
     border-top-right-radius: var(--roundness);
     border-top-left-radius: var(--roundness);
+    border-top-width: 0;
   }
 
   &:last-child {
     border-bottom-right-radius: var(--roundness);
     border-bottom-left-radius: var(--roundness);
-    border: none;
+    border-bottom-width: 0;
   }
 }
 
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 705e20f5..9e2b0295 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -47,7 +47,6 @@
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding: 0.6em 1em;
 
   --emoji-size: 14px;
 
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index af28e1c0..04bec8dd 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -1,8 +1,6 @@
 .chat-list-item {
   display: flex;
   flex-direction: row;
-  padding: 0.75em;
-  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -12,7 +10,6 @@
   }
 
   &:hover {
-    background-color: var(--selectedPost, $fallback--lightBg);
     box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
   }
 
@@ -29,7 +26,7 @@
 
   .heading {
     width: 100%;
-    display: inline-flex;
+    display: flex;
     justify-content: space-between;
     line-height: 1em;
   }
@@ -47,18 +44,17 @@
   }
 
   .chat-preview {
-    display: inline-flex;
+    display: flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: $fallback--text;
-    color: var(--faint, $fallback--text);
+    color: var(--faintText);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink, $fallback--link);
+    color: var(--faintLink);
     text-decoration: none;
     pointer-events: none;
   }
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index a3562c5d..b8fcaf9d 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -7,6 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
+      :class="getClass(item)"
       role="listitem"
     >
       <slot
@@ -33,24 +34,11 @@ export default {
     getKey: {
       type: Function,
       default: item => item.id
+    },
+    getClass: {
+      type: Function,
+      default: item => ''
     }
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../variables";
-
-.list {
-  &-item:not(:last-child) {
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
-}
-</style>
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
new file mode 100644
index 00000000..ae8dc5f4
--- /dev/null
+++ b/src/components/list/list_item.style.js
@@ -0,0 +1,48 @@
+export default {
+  name: 'ListItem',
+  selector: '.list-item',
+  states: {
+    active: '.-active',
+    hover: ':hover'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover', 'active'],
+      directives: {
+        background: '--inheritedBackground, 20',
+        opacity: 1
+      }
+    }
+  ]
+}
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 29376e5e..51388155 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -12,7 +12,7 @@ export default {
   ],
   states: {
     hover: ':hover',
-    active: '.active'
+    active: '.-active'
   },
   defaultRules: [
     {
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 074d9f83..6380deac 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -37,8 +37,8 @@
         </NavigationEntry>
         <div
           v-show="showTimelines"
-          class="timelines-background"
-          :class="{ expanded: showTimelines }"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -75,8 +75,8 @@
         </NavigationEntry>
         <div
           v-show="showLists"
-          class="timelines-background"
-          :class="{ expanded: showTimelines }"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showLists }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -132,11 +132,6 @@
     padding: 0 0 0 0.6em;
   }
 
-  .timelines-background.expanded + .NavigationEntry {
-    border-top: 1px solid;
-    border-color: var(--border);
-  }
-
   .nav-panel-heading {
     // breaks without a unit
     // stylelint-disable-next-line length-zero-no-unit
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d9b27667..d7459549 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -17,7 +17,8 @@ export default {
     'UserCard',
     'Chat',
     'Attachment',
-    'Tab'
+    'Tab',
+    'ListItem'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 00d9c3cd..f4e399bf 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -42,8 +42,6 @@
 <script src="./popover.js" />
 
 <style lang="scss">
-@import "../../variables";
-
 .popover-trigger-button {
   display: inline-block;
 }
@@ -89,12 +87,11 @@
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   .dropdown-item {
-    border-bottom: none;
+    border: none;
 
     &-icon {
       svg {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 14910fc5..e54132d6 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -23,6 +23,7 @@
     <List
       :items="items"
       :get-key="getKey"
+      :get-class="item => isSelected(item) ? '-active' : ''"
     >
       <template #item="{item}">
         <div
@@ -51,9 +52,11 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .selectable-list {
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
   &-item-inner {
     display: flex;
     align-items: center;
@@ -63,24 +66,12 @@
     }
   }
 
-  &-item-selected-inner {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
-  }
-
   &-header {
     display: flex;
     align-items: center;
-    padding: 0.6em 0;
-    border-bottom: 2px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
+    border-bottom: 1px solid;
+    border-bottom-color: var(--border);
 
     &-actions {
       flex: 1;
@@ -88,7 +79,7 @@
   }
 
   &-checkbox-wrapper {
-    padding: 0 10px;
+    padding-right: var(--__horizontal-gap);
     flex: none;
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 78dcc0423e17c72b5f301cc55cb2f09ad9bdc4ee Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 17:50:11 +0200
Subject: improve popover shadows (to not overlap with border)

---
 src/components/popover/popover.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index f4e399bf..0cc0949c 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -58,11 +58,11 @@
   &::after {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 3;
+    top: -1px;
+    bottom: -1px;
+    left: -1px;
+    right: -1px;
+    z-index: -1px;
     box-shadow: var(--shadow);
     pointer-events: none;
   }
-- 
cgit v1.2.3-70-g09d2


From c0010d0f484a2800c3f453beafc0b07c5f24c918 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Apr 2024 22:45:13 +0300
Subject: fix transparent popovers

---
 src/App.scss                       | 7 ++++---
 src/components/popover/popover.vue | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/App.scss b/src/App.scss
index 77d761dd..6e0aabca 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -14,14 +14,14 @@
   --ZI_navbar_popovers: 7500;
   --ZI_navbar: 7000;
   --ZI_popovers: 6000;
+
+  // Fallback for when stuff is loading
+  --background: var(--bg);
 }
 
 html {
   font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
-
-  // Fallback for when stuff is loading
-  --background: var(--bg);
 }
 
 body {
@@ -410,6 +410,7 @@ nav {
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
+  background: transparent;
 
   --__line-height: 1.5em;
   --__horizontal-gap: 0.75em;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 0cc0949c..0c5b372e 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -71,6 +71,7 @@
   border-color: var(--border);
   border-style: solid;
   border-width: 1px;
+  background-color: var(--background);
 }
 
 .dropdown-menu {
@@ -82,6 +83,7 @@
   max-width: 100vw;
   z-index: var(--ZI_popover_override, var(--ZI_popovers));
   white-space: nowrap;
+  background-color: var(--background);
 
   .dropdown-divider {
     height: 0;
-- 
cgit v1.2.3-70-g09d2