/* ==UserStyle==
@name           Medium Dark
@version        1.0.2
@author         Hussein Esmail
@description    `A dark theme for the website Medium.com`
@license        CC0-1.0
@namespace      https://github.com/hussein-esmail7/userstyles
@homepageURL    https://github.com/hussein-esmail7/userstyles
@supportURL     https://github.com/hussein-esmail7/userstyles/issues
@updateURL      https://raw.githubusercontent.com/hussein-esmail7/userstyles/main/src/dark_medium.user.css
==/UserStyle== */

/* Parially based off of Woratana Perth's theme, "Enhanced Medium.com Developer Theme" */

@-moz-document 
domain("arlogilbert.com"), 
domain("blog.0day.rocks"), 
domain("blog.discordapp.com/"), 
domain("blog.ettic.ca/"), 
domain("blog.insightdatascience.com"), 
domain("blog.usejournal.com"), 
domain("engineering.salesforce.com"),
domain("hackernoon.com"), 
domain("medium.com"), 
domain("medium.freecodecamp.org"), 
domain("posts.specterops.io"), 
domain("theascent.pub"), 
domain("towardsdatascience.com") {

    :root {
        --color-bg: #141414;            /* Default background color */
        --color-fg: #f8f8f8;            /* Default text color */
        --color-bg-button-social-media: lightblue;
        --color-fg-logo: #f8f8f8;
        --color-bg-highlight: #272712;
        color-scheme: dark;                 /* Used to get dark scroll bars */
    }

    body, .meteredContent, div, li *, button {
        /* Background color */
        background-color: var(--color-bg) !important; 
    }
    
    body, div.u-textColorNormal, h1.u-textColorDark, p, span, div, figcaption, li, a, h1, h2, h3, h4, button, a[rel="noopener"] {
        /* Text color */
       color: var(--color-fg) !important; 
    }
    
    a {
        text-decoration: underline !important;
    }
    
    div.uq, .overlay, .u-fixed, .metabar--spacer, .overlay, .postMeterBar, div.buttonSet.buttonSet--wide {
        /* Elements to get rid of */
        display: none;
    }

    .u-overflowHidden {
        overflow:visible !important;
    }
    .u-transition--fadeIn300 {
        visibility : hidden !important;
    }
      div.u-xs-hide.js-metabarLogoLeft {
        margin-left:47% !important;
    }
    
    .section-inner {
        max-width: 1100px !important;
    }

    html.u-overflowHidden {
        overflow: auto !important;
    }
    
    .mo path  {
        fill: var(--color-bg-button-social-media) !important;
    }
    
    .bp {
        /* Popup */
        background-color: #282a36 !important;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px !important;
    } 
    
    svg, .aw, .ax {
        /* Logo */
        fill: var(--color-fg-logo) !important;
    }
    
    div:not(.ty) {
        /* Elements to disable */
        background: transparent !important;
        background-color: transparent;
    }
    
    nav {
        /* Navigation */
        background-color: #6a737d33 !important;
        backdrop-filter: blur(10px) saturate(125%);
        padding-bottom: 5px;
    }
    
    .gist .highlight {
        background: #333;
    }

    .gist .blob-code, .gist .blob-num {
        color: #7a81a9;
    }
    
    button {
        border-color: #f8f8f2 !important;
    }
    
    button:selected {
        color: #f8f8f2 !important;
    }
    
    div.qy.s.qu.qv.qw.qs.qx.jh.qf * {
        background-color: none !important;
        color: none !important;
        fill: none !important;
    }
    
    mark {
        /* Top highlights */
        background-color: var(--color-bg-highlight) !important;
    }
    
}