Meatballs util: Fix blog menu item styling (#1059)

AprilSylph · May 4, 2023 · 8477b53 · 8477b53
1 parent 8cb12dd
commit 8477b53
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/content_scripts/meatballs.css b/src/content_scripts/meatballs.css
@@ -1,4 +1,4 @@
-[data-xkit-meatball-button] {
+.xkit-meatball-button {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -16,15 +16,15 @@
   text-decoration: none;
 }
 
-[data-xkit-meatball-button][hidden] {
+.xkit-meatball-button[hidden] {
   display: none;
 }
 
-[data-xkit-meatball-button]:not([hidden]) ~ [data-xkit-meatball-button] {
+.xkit-meatball-button:not([hidden]) ~ .xkit-meatball-button {
   border-top: none;
 }
 
-[data-xkit-meatball-button]:hover,
-[data-xkit-meatball-button]:focus {
+.xkit-meatball-button:hover,
+.xkit-meatball-button:focus {
   background-color: rgb(var(--secondary-accent));
 }
diff --git a/src/util/meatballs.js b/src/util/meatballs.js
@@ -82,6 +82,7 @@ const addPostMeatballItem = async meatballMenu => {
     const { label, onclick, postFilter } = meatballItems[id];
 
     const meatballItemButton = dom('button', {
+      class: 'xkit-meatball-button',
       'data-xkit-meatball-button': id,
       hidden: true
     }, {
@@ -127,6 +128,7 @@ const addBlogMeatballItem = async meatballMenu => {
     const { label, onClick, blogFilter } = blogMeatballItems[id];
 
     const meatballItemButton = dom('button', {
+      class: 'xkit-meatball-button',
       'data-xkit-blog-meatball-button': id,
       hidden: true
     }, {