Tumblr - Mobile Tweaks by wac

/* ==UserStyle==
@name         Tumblr - Mobile Tweaks
@version      20221016.22.25
@namespace    userstyles.world/user/wac
@description  Tweaks for Tumblr intended for narrow screens
@author       wac
@license      MIT
@var number font-scaling "Font scaling on blog settings" [1.3, 0.1, 5, 0.1]
@var number switch-height "Switch height on blog settings" [14, "px"]
@var select underline "Underline on legacy" ["block", "none"]
@var number keyboard-offset "Keyboard Offset" 50px
==/UserStyle== */
@-moz-document domain("www.tumblr.com") {
    /* General tweaks and fixes */
    @media (max-width: 650px) {
        /* Removes "Everything okay?" paragraphs
       because my phone browser won't let me scroll to the buttons */
        .rDKIp {
            display: none;
        }

        /* Tumblr notes update */
        [aria-label="Post Activity"] {
            /* Makes the notes box only as tall as the amount of notes it has */
            height: fit-content;
            max-height: 500px;
        }
        .jj46W p {
            /* Makes emojis normal size */
            font-size: inherit;
            line-height: inherit;
        }
    }
    /* "Unsupported browser" on dashboard */
    .s0qqG,
    /* This one is for Tumblr's "get the app" banner */
    .y8Hml,
    /* Adblock warning -- is too big on a mobile screen, can't see the X button */
    .I6Lwl {
        display: none !important;
    }
}

@-moz-document domain("tumblr.com") {
    /* Blogs around Tumblr */
    
    /* "Get The App" banner on blogs */
    .tmblr-iframe--app-cta-button,
    /* "See what the app is for" on blogs*/
    .show-app-nag .app-nag {
        display: none;
    }
}
@-moz-document url-prefix("https://www.tumblr.com/settings/blog") {
    /* Legacy settings pages tweaks */
    @media screen and (max-width: 1000px) {
        .l-container.l-container--two-column-dashboard .left_column,
        .l-container.l-container--two-column .left_column,
        .l-container.l-container--two-column,
        .l-container.l-container--two-column-dashboard,
        .l-container {
            float: none !important;
            width: 100%;
            max-width: 90vw;
        }
        .l-container.l-container--two-column-dashboard .right_column,
        .l-container.l-container--two-column .right_column,
        #tabs_outer_container {
            display: none;
        }
        .tumblr_settings .settings_group .group_label,
        .featured_tags_group .group_label.flex {
            width: unset;
        }
        
        .blog {
            max-width: 100%;
            flex-wrap: wrap;
        }
        
        .blog :is(div, button) {
            margin: calc(10px*var(--font-scaling));
        }
        
        .binary_switch {
            height: var(--switch-height);
            /* It's ugly, but it's easier to press */
        }
        .tumblr_settings .settings_group {
            display: flex;
            flex-direction: column;
        }
        .tumblr_settings .settings_subheading,
        .accordion_trigger_wrapper .accordion_label,
        .indash_header_wrapper .global_options .option_label,
        a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video,
        button, input, select, textarea {
            font-size: calc(14px*var(--font-scaling));
        }
        .chrome.big, 
        .tumblr_settings .blocked_blogs .blog .name {
            font-size: calc(13px*var(--font-scaling));            
        }
        .tumblr_settings .help_text, 
        .tumblr_settings .help_text a,
        .tumblr_settings .setting.text label, 
        .tumblr_settings .setting.password label, 
        .tumblr_settings .setting.textarea label {
            font-size: calc(12px*var(--font-scaling));
        }
        .indash_header_wrapper .description {
            line-height: calc(20px*var(--font-scaling));
        }
        .indash_header_wrapper .title .editable_text {
            line-height: calc(1.1*var(--font-scaling));
        }
        .indash_header_wrapper .editable_text .line {
            height: calc(40px*var(--font-scaling)) !important;
            display: var(--underline);
        }
    }
}



@-moz-document domain("example.com") {
    /* Removed Content */
    /* This code has been removed, but you can
       re-enable it by changing example.com to tumblr.com */
    /* Ensures keyboard does not cover new post screen and reblog stuff */
    /* Removed: Some time ago, Tumblr updated their mobile web thing
       so that this no longer happens, or if it does, you can now at least scroll */
    .RuIGO {
        max-height: calc(90vh - var(--keyboard-offset));
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Fix for XKit Rewritten Quick reblogs being off-screen with the new post footer layout */
    /* Pasted in the same code as the desktop stuff because that's what works 
           Update: that no longer works. The container just goes off-screen for some reason, so I set the translate horizontal thing to 0.*/
    /* Removed: This no longer works, and makes the reblog thing go off-screen */
    /* I did try fixing it with a variable but I couldn't reproduce the behaviour on
       desktop so I scrapped it. */
    #quick-reblog.above {
        bottom: unset;
        right: var(--xkit-offset);
        transform: translate(var(--xkit-offset), -50%);
    }
    #quick-reblog.below {
        top: 100%;
        right: var(--xkit-offset);
        transform: translate(var(--xkit-offset), 0);
    }
}