Twitter/X Goodie Bag by o_o

/* ==UserStyle==
@name           Twitter/X Goodie Bag
@namespace      dabric.xyz/post/twitter-goodie-bag
@version        1.11.1
@description    Several tweaks to Twitter/X, all disabled by default
@author         dabric
@preprocessor   stylus
@var checkbox show-views-inline "Feed: Show views" 1
@var checkbox show-bookmark-inline "Feed: Show bookmark button" 1
@var select show-likes-inline "Feed: Like count" ["show:Show*", "stub:Obscure", "hide:Hide"]
@var select show-retweets-inline "Feed: Repost count" ["show:Show*", "stub:Obscure", "hide:Hide"]
@var select show-replies-inline "Feed: Reply count" ["show:Show*", "stub:Obscure", "hide:Hide"]
@var checkbox show-new-post-popup "Feed: Show new post pop-up" 1
@var select show-likes "Posts: Like count" ["show:Show*", "stub:Obscure", "hide:Hide"]
@var select show-retweets "Posts: Repost count" ["show:Show*", "stub:Obscure", "hide:Hide"]
@var select show-replies "Posts: Reply count" ["show:Show*", "stub:Obscure", "hide:Hide"]
@var select show-bookmarks "Posts: Show bookmark count" ["show:Show*", "stub:Obscure", "hide:Hide"]
@var checkbox show-blue-checkmarks "X: Show blue (individual) checkmarks" 1
@var checkbox show-gold-checkmarks "X: Show gold (buisness) checkmarks" 1
@var checkbox show-gray-checkmarks "X: Show gray (politician) checkmarks" 1
@var checkbox card-title-under-image "Cards: Show website title under thumbnail" 0
@var checkbox show-for-you "Home: Show For You tab" 1
@var checkbox show-following "Home: Show Following tab" 1
@var checkbox only-show-trends "Explore: Only show trends" 0
@var checkbox search-only "Explore: Only show search" 0
@var checkbox more-profile-buttons-on-nav "📱 Profile: Show more buttons on the top bar upon scroll" 0
@var checkbox show-home "Navigation: Show Home tab" 1
@var checkbox show-home-notification "Navigation: Show Home notification badge" 1
@var checkbox show-explore "Navigation: Show Explore/Search tab" 1
@var checkbox show-grok "Navigation: Show Grok tab" 1
@var checkbox show-notification-tab "Navigation: Show notifications tab" 1
@var select notification-tab-badge "Navigation: Notification tab badge" ["show:Show*", "tiny:Show without number", "hide:Hide"]
@var checkbox show-messages "Navigation: Show messages tab" 1
@var checkbox show-communities "Navigation: Show communities tab" 1
@var checkbox show-premium-tab "Navigation: Show Premium" 1
@var checkbox top-bar-blur "Top bar: Blur behind top bar" 1
@var checkbox show-spaces "🚧 Top bar: Show Spaces" 1
@var checkbox show-broadcasts "🚧 Top bar: Show Broadcasts" 1
@var checkbox fade-bottom-bar "📱 Top bar: Fade bottom bar on scroll" 1
@var checkbox hide-top-bar-on-scroll "📱 Top bar: Hide top bar on scroll" 1
@var select compact-mobile-topbar "📱 Top bar: Compact top bar" ["false:Disabled*", "settings:With timeline settings", "nosettings:Without timeline settings"]
@var select theme "Theme compatibility: Theme" ["vanilla:Vanilla", "mocha:Catppuccin Mocha", "custom:Custom"]
@var color custom-background-color "Theme compatability: Custom Background" #000
@var color custom-text-color "Theme compatability: Custom Text" #fff
@var color custom-metrics-color "Theme compatability: Custom Metrics Color" #71767b
==/UserStyle== */

@-moz-document domain("twitter.com"), domain("x.com") {
  // all of twitter.com
    if theme == "vanilla" {
      // the paranthesis in the selector seeems to conflict
      // with stylus's parser
      @css {
        /*lights out*/
        body[style*="background-color: rgb(0, 0, 0)"] {
          --goodie-background-color: black;
          --goodie-text-color: white;
          --goodie-metrics-color: #71767b;
        }
        
        /*dim*/
        body[style*="background-color: rgb(21, 32, 43)"] {
          --goodie-background-color: rgb(21, 32, 43);
          --goodie-text-color: white;
          --goodie-metrics-color: rgb(139, 152, 165)
        }
        
        /*default*/
        body[style*="background-color: rgb(255, 255, 255)"] {
          --goodie-background-color: white;
          --goodie-text-color: black;
          --goodie-metrics-color: rgb(83, 100, 113)
        }
      }
    } else if theme == "mocha" {
      :root {
        --goodie-text-color: #cdd6f4;
        --goodie-background-color: #1e1e2e; 
        --goodie-metrics-color: #7f849c;
      }
    } else if theme == "custom" {
      :root {
        --goodie-text-color: custom-text-color;
        --goodie-background-color: custom-background-color;
        --goodie-metrics-color: custom-metrics-color;
      }
    }
  
  
  background-color = var(--goodie-background-color);
  text-color = var(--goodie-text-color);
  
  
  
  div[role="group"] {
    
    unless show-views-inline {
      > div:has(> [aria-label*="View post analytics"]:is(a, button)) {
        display: none;
      }
    }
    
    unless show-bookmark-inline {
      > div:has(> button[aria-label="Bookmark"]) {
        display: none;
      }
    }
  }
  
  unless show-gold-checkmarks {
    svg:has([fill="#d18800" i]) {
      display: none
    }
    
    div[style*="#shape-square-rx-16"], div[style*="#shape-square"] {
      border-radius: 9999px;
      overflow: hidden;
    }
  }
  
  unless show-blue-checkmarks {
    svg[aria-label="Verified account"]:not(:has([fill="#829AAB" i])):not(:has([fill="#d18800" i])) {
      display: none;
    }
  }
  
  unless show-gray-checkmarks {
    svg:has([fill="#829AAB" i]) {
      display: none;
    }
  }
  
 
  set-top-padding-without-tabs() {
    header[role="banner"] > div { 
    // for some reason, this varies? 
     &[style*="height: 106px"]{
       height: 53px !important;
     }
          
     &[style*="height: 100px"] {
       height: 50px !important;
     }
   }
  }
  
  hide-tab($number) {
    // the tab
    div:nth-child({$number}):has(> a[role="tab"][href="/home"]) {
      // just `display: none`ing it makes twitter think there is overflow,
      // so we have to get a bit more creative
      position: absolute;
      pointer-events: none;
      opacity: 0;
      
      > a {
        display: none;
      }
      
    }
  
    // when the tab is selected
    body:has(div:nth-child({$number}) > a[role="tab"][href="/home"][aria-selected="true"]) {
      section {
        > div[aria-label="Timeline: Your Home Timeline"] {
          visibility: hidden;
          height: 0px
          overflow: hidden;
        }
        &::before {
          content: "Select a tab from above"
          text-align: center;
          font-family: "TwitterChirp", -apple-system, BlinkMacSystemFont,   "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          padding: 16px;
          font-weight: bold;
          font-size: 1.5em      
        }
      } 
    }
    
    // passes when there isn't more than two tabs
    body:not(:has(div:nth-child(3) > a[role="tab"][href="/home"])) {
      
      // passes when the for you tab isn't selected
      &:has(div:nth-child({$number}) > a[role="tab"][href="/home"][aria-selected="false"]) {
        
        
        // desktop
        [aria-label="Home timeline"] nav:has(> div > [data-testid="ScrollSnap-SwipeableList"]):has(a[href="/home"]) {
          > div {
            display: none
          }
          
          display: flex;
          align-items: center;
          padding-left: 16px;
          height: 53px;
          
          &::after {
            content: "Home";
            font-family: "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            font-size: 20px;
            font-weight: 700;
          }
        }
        
        // mobile
        [data-testid="TopNavBar"] nav > div {
          display: none;
        }
        
        // mobile actually uses some padding in the feed for the nav, so lets correct it   
       set-top-padding-without-tabs()
        
      }
    }
  }
  
  unless show-for-you {
    hide-tab(1)
  }
  
  unless show-following {
    hide-tab(2)  
  }
  
  // hide "select a tab from above" text if there's no tabs at all
  if (not show-for-you) and (not show-following) {
    body:not(:has(div:nth-child(3) > a[role="tab"][href="/home"])) {
      section::before {    
        display: none;
      }
    }
  }
  
  if only-show-trends {
    div[aria-label="Timeline: Explore"] {
     > div > div:not(:has([data-testid="trend"])) {
        display: none;
        height: 0px;
      }
    }
  }
  
  unless fade-bottom-bar {
    [data-testid="FloatingActionButtonBase"], [data-testid="BottomBar"] {
      opacity: 1 !important;
    }
  }
  
  unless hide-top-bar-on-scroll {
    [data-testid="TopNavBar"] {
      transform: unset !important;
    }
    
   
  }
  
  unless compact-mobile-topbar == false {
    // passes when home has tabs
    body:has(div:nth-child(1) > a[role="tab"][href="/home"]) {
      [data-testid="TopNavBar"] > div {
        flex-direction: row;
        // pfp, x, and timeline settings
        > div:nth-child(1) {
          position: absolute;
          overflow: auto;
        
          > div >div> div > div {
            // remove logo
            > div:nth-child(2) {
              display: none;
            }
          
            // the pfp
            > div:nth-child(1) {
              min-width: unset;
            }
            
            // settings
             > div:nth-child(3) {
               if compact-mobile-topbar == "settings" {
                 position: fixed;
                 right: 0;
                 top: 0px;
                 width: 64px;
                 padding: 0px 16px;
                 height: 53px;
               } else {
                 display: none;
               }
            }
          }
        }
      
        // tabs
        > div:nth-child(2) {
          flex-grow: 1;
          max-width: 100%;
        
          nav {
            width: 100%;
            if compact-mobile-topbar == "settings" {
              padding: 0 64px;
            } else {
              padding-left: 64px;
            }
          }
        }
      ...