Google Podcasts | Dark by michaelokgb

/* ==UserStyle==
@name         Google Podcasts | Dark
@version      20240131.08.55
@namespace    userstyles.world/user/michaelokgb
@description  Dark style for Google Podcasts based on YouTube's dark style.
@author       michaelokgb
@license      No License
==/UserStyle== */

@-moz-document domain("podcasts.google.com") {
/* TODO: Cleanup and organize classes to logical blocks */
html {
    background-color: #181818;
    
    --primary-text-color: #fff;
    --secondary-text-color: #aaa;
    --secondary-text-active-color: #fff;
    --secondary-text-disabled-color: #717171;
    
    --popup-background-color: #212121;
}

body {
    color: var(--primary-text-color);
}

.KL4X6e {
    background-color: #181818;
}



/* separators */
.GdsSec {
    background-color: #303030;
}

.p6eBid,
.pyK9td,
.voeS2b {
    background-color: #303030;
    border-color: #303030;
}

.UV82ob,
.pyK9td {
    border-color: #303030;
}

.PZpPge,
.J7uqcb {
    color: #70757a;
}

.ugPjk,
.oFMWrf {
    color: var(--primary-text-color);
}

/* header */
header#gb {
    background: rgba(33, 33, 33, 0.98) !important;
}


/*
 * Profile/account popup - start
 * No longer works, since they switched to iframe used by other google apps
 */
.gb_C {
    background: #181818;
}
.gb_i .gb_lb {
    color: var(--primary-text-color);
}
.gb_i .gb_mb {
    color: var(--secondary-text-color);
}
/* manage your account button */
.gb_qb.gb_qb {
    background-color: #181818;
    border-color: #dadce0;
    color: var(--secondary-text-color);
}
.gb_qb.gb_qb:hover {
    color: var(--secondary-text-active-color);
}
.gb_qb.gb_qb:active {
    background-color: #373737;
    border-color: #dadce0;
}
/* top line separator */
.gb_Hb {
    border-top: 1px solid #303030;
}
/* account selector */
.gb_Lb > .gb_Kb:hover,
.gb_Lb > .gb_Kb:focus {
    background-color: #202020;
}
.gb_Lb > .gb_Kb:active,
.gb_Lb > .gb_Kb:focus:active {
    background-color: #101010;
}
/* account name */
.gb_Zb {
    color: var(--primary-text-color);
}
/* e-mail address */
.gb_1b {
    color: var(--secondary-text-color);
}
/* add another account */
.gb_ub.gb_ub {
    border-top: 1px solid #303030;
    background-color: #101010;
    color: var(--primary-text-color);
}
.gb_tb:active,
.gb_tb:focus:active {
    background-color: #373737;
}
/* sign out wrapper */
.gb_Ab {
    border-top-color: #303030;
    border-bottom-color: #303030;
}
/* sign out button */
.gb_Bb.gb_Bb {
    color: var(--primary-text-color);
}
.gb_Bb.gb_Bb,
.gb_Cb.gb_Cb {
    background-color: #202020;
    border-color: #303030;
}
.gb_Bb:active,
.gb_Bb:active:focus {
    background-color: #373737;
}
/* footer links (privacy policy, terms of service) */
.gb_sb.gb_sb {
    color: var(--secondary-text-color);
}
.gb_sb:hover {
    background-color: #202020;
    color: var(--secondary-text-active-color);
}
.gb_sb:focus,
.gb_sb:hover:focus {
    background-color: #202020;
}
.gb_sb:active,
.gb_sb:active:focus {
    background-color: #373737;
    color: var(--secondary-text-active-color);
}
/*
 * Profile/account popup - end
 */


/* search bar */
/* classes of form element (not focused and focused) */
.gb_0d,
.gb_Ie.gb_ve {
    background: #101010;
}

.gb_Ie.gb_ve {
    box-shadow: none;
}

.Ax4B8 {
    background: #101010;
    color: #fff;
}

/* nav */
.fIqyif {
    color: var(--primary-text-color);
}

.iYUinf .MdgzLb,
.fIqyif:hover {
    color: var(--primary-text-color);

    background: rgba(255, 255, 255, 0.149);
    border-radius: 0 50px 50px 0;
    margin-right: 8px;
}

.z80M1.FwR7Pc {
    outline: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.1);
}



/* 
 * body
 */
/* main text colors */
.tsXz9,
.ldf2Je,
.k2p4Ef,
.ZhPnbc,

.wv3SK,
.PRPYJc,

.rnO6,

.a5ZoJ,
.xTNr6,
.xkvzpc,

.rmnyUd,

.FyxyKd,
.SuNkYe,
.tdELcf,
.kMNxad,
.ZTClBb,

.eWeGpe,
.ZfMIwb,
.e3ZUqe,
.OTAikb,
.LrApYe,
.eI5bkf {
    color: var(--primary-text-color);
}

.yFWEIe,
.TzqEyd,
.f4Rf5b,
.OTz6ee,
.QpaWg,
.pcNKmc,
.J3Ov7d,
.yuTZxb,
.tX5qm,
.Mji2k,
.u0Mk7d,
.c5Vdrc,
.yJLqZc,
.gUJ0Wc {
    color: var(--secondary-text-color);
}

.z80M1 {
    color: var(--primary-text-color);
}

.YDJ1Jc:hover {
    color: var(--secondary-text-color);
}

.iIDD2e {
    fill: none;
}

/* buttons */
.JSLBqe,
.jcGgqc,
.JRtysb,
.bPsqDc,
.wBiEg.DPvwYc {
    color: var(--secondary-text-color);
}

.J0Qtec:hover .gUJ0Wc,
.JSLBqe:hover,
.jcGgqc:hover,
.JRtysb:hover,
.bPsqDc:hover,
.wBiEg.DPvwYc:hover {
    color: var(--secondary-text-active-color);
}

.g7gLob, .jkKDid {
    color: var(--secondary-text-disabled-color);
    border-color: #2a2a2a;
}

.nCP5yc:disabled {
    background-color: #2a2a2a;
    color: var(--secondary-text-disabled-color);
}

.uwjJFd {
    border-color: #303030;
}

.zJw79d {
    background-color: #212121;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 4px 0px;
    border-color: transparent;
}

.zJw79d:hover {
    color: var(--secondary-text-color);
}


/* 
 * bottom play bar 
 */
.d5Ncgc {
    background: #212121;
}

.JPdR6b {
    background: #212121;
}

.z80M1.N2RpBe::before {
    border-right-color: #909090;
    border-bottom-color: #909090;
}

.Ut8Gr {
    color: var(--primary-text-color);
}

/* buttons */
.fKz7Od,
.mUbCce.RDPZE {
    color: var(--secondary-text-color);
}

.fKz7Od:hover,
.mUbCce.RDPZE:hover {
    color: var(--secondary-text-active-color);
}

/* texts (time etc.) */
.oG0wpe,
.MBPL8b,
.symow,
.Kgg2W {
    color: var(--secondary-text-color);
}



/*
 * Privacy notice popup - start
 */

/* body wrapper */
.cC1eCc .VfPpkd-P5QLlc {
    background: var(--popup-background-color);
}

/* h2 */
.cC1eCc .VfPpkd-k2Wrsb {
    color: var(--primary-text-color);
}

/* text wrapper */
.cC1eCc .VfPpkd-cnG4Wd, 
.cC1eCc .VfPpkd-zMU9ub {
    color: var(--secondary-text-color);
}

/* buttons */
.ksBjEc:not(:disabled) {
    color: var(--secondary-text-color);
}
/* active button color */
.ksBjEc:hover:not(:disabled),
.ksBjEc:focus:not(:disabled),
.ksBjEc.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe:not(:disabled),
.ksBjEc:not(.VfPpkd-ksKsZd-mWPk3d):focus:not(:disabled) {
    color: var(--secondary-text-active-color);
}
/* button ripple background */
.ksBjEc .VfPpkd-Jh9lGc::before,
.ksBjEc .VfPpkd-Jh9lGc::after {
    background-color: #dedede;
}

/*
 * Privacy notice popup - end
 */



/*
 * Error popup - start
 */

/* body wrapper */
.g3VIld {
    background: var(--popup-background-color);
}

/* info icon */
.gVR3Bf {
    color: var(--secondary-text-color);
}

/* title */
.N5rZAc {
    color: var(--primary-text-color);
}

/* text wrapper */
.VQkZ5c {
    color: var(--secondary-text-color);
}

/* button */
.AtqPN {
    color: var(--secondary-text-color);
}
/* active button color */
.AtqPN:hover,
.AtqPN:focus,
.AtqPN:active {
    color: var(--secondary-text-active-color);
}
/* button ripple background */
.HQ8yf .Vwe4Vb {
    background-image: radial-gradient(circle farthest-side,rgba(222,222,222,0.251),rgba(222,222,222,0.251) 80%,rgba(222,222,222,0) 100%);
}

/*
 * Error popup - end
 */

}