/* ==UserStyle==
@name           Tumblr Transparent to Opaque
@namespace      github.com/openstyles/stylus
@version        2.1.0
@description    Makes all transparent or translucent backgrounds opaque
@author         wac
@preprocessor   less
@var checkbox no-invert "Force same colour as posts" 0
==/UserStyle== */
/* 
Update: added stuff to make the blocking users dialog box visible. If I need to 
   add more dialogboxes I'll just update it again

Important: I recently rewrote the code and republished the old version
   here: https://userstyles.world/style/9652/legacy-tumblr-transparent-to-opaque */
@-moz-document domain("www.tumblr.com") {

    @black: RGB(var(--black));
    @border-in-post: 1px solid rgba(var(--black), .13);
    @follow: RGB(var(--follow));
    @secondary-accent: RGB(var(--secondary-accent));
    @navy: RGB(var(--navy));
    @white-on-dark: RGB(var(--white-on-dark));
    @white: RGB(var(--white));
    @accent: RGB(var(--accent));
    @br: 3px;
    :root {
        --color-title: @black;
    }
    .postlike {
        color: RGB(var(--black));
        background: RGB(var(--white));
        border-radius: @br;
        --white-on-dark: var(--black);
    }
    .invert-postlike when (@no-invert =1) {
        .postlike();
    }
    .invert-postlike when (@no-invert =0) {
        border-radius: @br;
        background-color: @navy;
        color: @white-on-dark;
    }
    .no-bottom-border-radius {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .no-top-border-radius {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .headinglike {
        border-bottom: @border-in-post;
        margin: 0;
        padding: 10px;
        .no-bottom-border-radius();
    }
    .dialogbox {
        background-color: rgb(var(--white));
        padding: var(--post-padding);
        border-radius: 8px;
        box-shadow: 0 0 3px rgb(var(--accent));
    }
    .behind-dialogbox {
        background-color: rgba(var(--navy), 0.7);
        backdrop-filter: blur(8px);
    }


    /* --- Dashboard Sidebar --- */
    .e1knl .FZkjV {
        /* Check out these blogs AND
           Radar */
        .postlike();
    }
    .hF8Wr {
        /* Check out these blogs - heading AND
           Radar - heading */
        padding: 10px;
        border-bottom: @border-in-post;
    }
    .I_SFh {
        /* Check out these blogs - Explore all of Tumblr */
        margin-top: -5px;
        padding: 10px;
        padding-top: 0;
    }
    .Ut4iZ:not(.veU9u) .gLEkw,
    .Ut4iZ:not(.veU9u) .fTJAC {
        /* Check out these blogs - Blog name
                                 - Blog description */
        color: @black;
    }
    .QfN0z,
    .oNZY7 {
        /* Radar - post wrapper */
        padding: 0;
        max-width: unset;
    }
    .eIaSl .m5KTc:not(:first-of-type) {
        /* Radar - notes */
        /* Removing border to match post look */
        border-top: none;
    }
    footer.m8mN_._qHCt {
        /* About Apps Legal Privacy */
        .invert-postlike();
        padding: 10px;
    }
    .xkit-sidebar-item {
        .postlike();
        padding-top: 10px;
        /* I think xkit's own CSS is overriding anything I write
           so this is the best I can do. */
    }

    /* --- Dashboard Middle --- */
    .KO5EN svg {
        /* "Following For you..." control bar - Arrow */
        --icon-color-primary: @white-on-dark;
    }
    @media (min-width: 541px) {
        .WVvBo {
            /* "Following For you..." control bar */
            border-radius: @br;
        }
    }
    .TRX6J.PY8Tb.jIdvc {
        /* Pagination - Previous */
        background-color: @black !important;
        /* This was the quickest way to fix it;
           Idk why tumblr put white on top of white-on-dark
           when they're the same colour in the default theme... */
    }
    .KDoiW.rR_oZ {
        /* Check out these blogs (inline) */
        .headinglike();
        .invert-postlike();
        color: @white-on-dark;
    }


    /* --- Explore Sidebar -- */
    .Wlk_Y,
    .B15CE {
        /* Tags you follow
           Check out these blogs */
        .postlike();
    }
    .Vp1Z_,
    .Etu_4,
    .auLT4 {
        /* Tags you follow - heading */
        /*                 - name 
                           - recent posts */
        color: @black;
    }
    /* --- Explore Middle --- */
    .p4DiZ {
        /* Top bar aka Controls */
        .invert-postlike();
    }
    /* --- Inbox --- */
    .cQqe6 {
        .invert-postlike();
    }

    /* --- Activity Middle --- */
    .RRPPS,
    .WWBSO.zMYLJ,
    .xrsGX {
        /* Graph
           Notes, New followers, Total followers - unselected
           Top post */
        .postlike();
    }
    .WWBSO.zMYLJ[style^="background:"] {
        /* Notes, New followers, Total followers - selected */
        background-color: @secondary-accent !important;
    }
    .FRX9k {
        /* Top post - heading AND Latest Notes */
        .headinglike();
        .postlike()
    }
    .Exysv {
        /* Latest Notes - Today */
        .no-top-border-radius();
    }


    .RRPPS {
        /* Graph */
        --navy: var(--white);
        padding-bottom: 10px;
        .no-top-border-radius();
    }
    .sw6Ng {
        /* Graph controls */
        .headinglike();
        .postlike()
    }

    /* --- Likes --- */
    .KyK5m {
        /* Likes count and view toggle (control) */
        .invert-postlike();
        padding: 10px;
    }

    /* --- Following --- */
    .IiZ2z {
        /* Following count */
        .postlike();
        .headinglike();
    }
    .Il4T7 {
        /* Enter a username or URL to follow */
        .postlike();
        padding: 10px;
        margin-top: 0;
        .no-top-border-radius();
    }
    ._45C1 {
        /* Your Tumblr crushes */
        .postlike();
        padding: 10px;
    }

    /* --- Payment & purchases, 
           Subscriptions, 
           Apps,
           Privacy, 
           Labs,
           Gifts --- */
    .s9s8Q {
        /* Body */
        .postlike();
    }
    .weO3d,
    .qJDLB,
    div[class=""] > .b9fH3 {
        /* Payment & purchases,
           Subscriptions,
           Gifts*/
        .headinglike();
        .postlike();
        border: none;
    }
    .s9s8Q :is(.p4DiZ, .uM3pd) {
        /* Subscriptions control bar */
        .postlike();
        color: RGBA(var(--black), .65);
        .no-top-border-radius();
        /* I don't like how it's stacked but oh well... */
    }
    .xINW8 {
        /* Gifts control bar */
        padding-right: 10px;
    }

    /* --- Making things work with the toggle --- */
    .WVvBo when (@no-invert =1) {
        /* Control bar */
        --navy: var(--white);
    }
    /* --- Tagged --- */
    .YOf31 {
        /* Tagged page sidebar */
        .postlike();
        border-radius: 0;
    }
    .ovT1K {
        /* Related tags */
        .postlike();
        .no-top-border-radius();
    }

    /* --- Compatibility with Tumblr Color Tweaks --- */
    .LnVVz,
    .vT7_j {
        /* Tag cards (for you, staff picks),
           Trending tag cards */
        .invert-postlike();
    }
    .LnVVz {
        /* Tag cards (for you, staff picks) */
        border-radius: 6px;
    }

    /* --- Search --- */
    .MV1bs {
        /* Related tags */
        .postlike();
    }
    .eCMVP {
        /* Search name is headinglike */
        .headinglike();
        .postlike();
        .no-top-border-radius();
    }
    .TVEoH {
        /* Search controls */
        .postlike();
        .no-top-border-radius();
        padding: 10px;
    }
    .Y_M3_ {
        /* Try one of these */
        .invert-postlike();
        padding-top: 10px;
        padding-left: 10px;
    }
    /* --- Blog view --- */
    .gJ6yV .FZkjV {
        /* More like this */
        .postlike();
    }
    .Q05ZE {
        /* Background of blog when not viewed on top of dashboard */
        background-color: @navy;
    }
    .uYpYy {
        /* Blog header/bio when not viewed on top of dashboard, wide screen variant */
        .invert-postlike();
    }

    /* --- The floating video thing --- */
    .GDWdm {
        opacity: 0 !important;
    }
    
    /* --- Blocking users --- */

    .RgTaQ {
        /* Block user dialog box */
        .dialogbox()
    }
    .yKniX {
        /* Behind the block user dialog box */
        .behind-dialogbox
    }
}