/* ==UserStyle==
@name Medium Modern Dark
@description Dark mode/style/theme for Medium.com
@namespace github.com/CoreyVidal/Medium.com-Modern-Dark
@homepageURL https://github.com/CoreyVidal/Medium.com-Modern-Dark
@supportURL https://github.com/CoreyVidal/Medium.com-Modern-Dark/issues
@updateURL https://raw.githubusercontent.com/CoreyVidal/Medium.com-Modern-Dark/master/medium-modern-dark.user.css
@author Corey Vidal
@version 1.2.0
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("medium.com") {
/*
White text:
F5F5F5
a.k.a.
rgba(255, 255, 255, 0.95);
High text:
E8E8E8
aka
rgba(255, 255, 255, 0.87)
Medium text:
D5D5D5
aka
rgba(255, 255, 255, 0.76);
Low text:
ACACAC
aka
rgba(255, 255, 255, 0.6);
*/
/* dark-dark */
.u-backgroundTransparentWhiteDarkest,
.u-backgroundGrayLightest,
.extremePromo,
.u-background--brandSageLighter,
.metabar-block,
.textInput,
.metabar,
.h
/* .ky */ {
background-color: #292929 !important;
color: #d5d5d5;
}
/* light-dark */
body,
html,
article,
.cardChromeless,
.screenContent,
/* .a, */
.c,
.h,
.canvas-renderer,
.u-backgroundColorWhite {
background-color: #2f2f2f !important;
color: #d5d5d5;
}
/* transparent overlay */
.overlay--lighter,
.overlay {
background-color: #2f2f2fd6
}
/*---------------COREY BEGINS---------------*/
/* PROFILES */
/* (This is the border for the below dropshadow) */
.fx {
border-color: rgba(37, 37, 37, 1);
}
/* Drop shadow for articles on profile page
EXAMPLE: https://medium.com/@WorldBrain */
.fz {
box-shadow: 0 1px 4px rgba(37, 37, 37, 1);
}
.fe {
border-bottom-color: rgba(37, 37, 37, 1);
}
.fk {
border-bottom-color: rgba(185, 185, 185, 1);
}
/* END OF PROFILES */
/* CHIPS */
/* EXAMPLE: https://medium.com/@WorldBrain/storexhub-an-offline-first-open-source-zapier-f8841810fd9c */
.pp {
background: rgba(242, 242, 242, 0.1);
}
/* END OF CHIPS */
/* HEADER */
/* This drop shadow (.x) overrides everything. Don't touch it. */
/*
.x {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
border-color: transparent;
}
*/
/*
.p {
box-shadow: 0 15px 0px 0 rgba(0, 0, 255, 0);
border-color: transparent;
}
*/
/* .dt is the hover card that appears on top of articles */
.dt {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
/*
.ah {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
border-color: transparent;
}
*/
.dg, .cz {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
/* END OF HEADER */
/* BUTTONS */
/* The "UPGRADE" button in the header */
.de, .cu {
border-color: rgba(3, 168, 124, 1);
}
/* Notification icon */
/* CONFLICT! With another .ri */
.ri {
background-color: rgb(3, 168, 124);
}
/* END OF BUTTONS */
/*
.c {
border-color: transparent !important;
}
*/
/* Front page top bar with transparency */
.l {
background-color: rgba(47, 47, 47, 0.95)
}
/* Front page top bar Medium logo */
.an,
.q,
.ew,
.aj {
fill: rgba(255, 255, 255, 0.95);
}
/*
#lo-homepage-no-ads-title {
color: rgba(255, 255, 255, 0.87);
}
#lo-homepage-no-ads-sub-title {
color: rgba(255, 255, 255, 0.76);
}
*/
.au {
color: rgba(255, 255, 255, 0.87);
}
.h1 {
color: rgba(255, 255, 255, 0.87);
}
.h2 {
color: rgba(255, 255, 255, 0.87);
}
.h3 {
color: rgba(255, 255, 255, 0.76);
}
/*Front page chips background colour*/
.de {
background-color: #292929;
}
/* Front page chips background colour selected */
/* But also footer table colour when you're locked out */
.fs {
background-color: /* This is intentionally left blank */
}
/* Front page chips hover overlay */
.do:hover {
background-color: rgba(255, 255, 255, 0.04);
}
/* Front page chips icon shadow */
.dp {
box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.08);
}
/* Front page chips font colour */
.dg {
color: rgba(255, 255, 255, 0.87);
}
/* Front page footer alternate text colour */
.ke {
color: rgba(255, 255, 255, 0.6) !important;
}
/* text */
/* text general */
.uiScale .ui-captionStrong,
.uiScale .ui-caption,
/*
h1,
h2,
h3,
h4,
*/
.imageCaption,
.button--chromeless:active,
.button--chromeless:focus,
.button--chromeless:hover,
.button--link:active,
.button--link:focus,
.button--link:hover,
.button,
p,
span,
.uiScale .ui-body,
.uiScale .ui-brand1,
.uiScale .ui-brand2,
.markup--mixtapeEmbed-strong,
.markup--mixtapeEmbed-em,
.u-textColorDark,
.uiScale .ui-h2,
.uiScale .ui-summary,
.uiScale .ui-h4,
.u-textColorNormal,
.ai,
.uiScale .ui-h3 {
color: #d5d5d5 !important;
/* background-image: none !important; */
}
/* text header */
.extremeAdaptiveSection-imageHeader {
color: #292929 !important;
}
/* blocks & codeboxes */
blockquote {
border-color: #d5d5d5 !important;
color: #d5d5d5 !important;
}
/* links */
a,
a:hover {
color: #06e988 !important;
}
/* bottom banner delete */
.u-backgroundWhite {
display: none;
}
/* light green */
.u-textColorLighter {
color: #73d085c9 !important;
}
/* stars */
.uiScale .ui-caption,
.u-textColorNormal,
.u-fillTransparentBlackDarker,
.y {
fill: #06e988 !important;
}
/* Transparency hole */
.metabar-block div {
background-color: transparent !important;
}
/* Search and Notification icon */
svg.svgIcon-use {
fill: rgba(240, 240, 240, .54)
}
svg.svgIcon-use:hover {
fill: rgba(250, 250, 250, .75)
}
/* Button on top be more noticeable */
a.button--upsellNav {
border-color: rgba(240, 240, 240, .54)
}
a.button--upsellNav:hover {
border-color: rgba(250, 250, 250, .75)
}
/* Darken the mouse over popup message box of the writer or publisher */
div.extremePostPreview-post > span.ui-capsSubtle,
div.extremePostPreview-post > div.u-flex > a.ui-capsSubtle {
color: rgba(250, 250, 250, .54) !important;
}
div.popover-inner,
div.popover-arrow:after {
background-color: #2f2f2f !important;
border: 1px solid rgba(240, 240, 240, .54) !important;
}
div.u-borderTopLighter {
border-top: 1px solid rgba(240, 240, 240, .54) !important;
}
.popover--bottom .popover-arrow {
top: 1.5px;
clip: rect(0px 18px 15px -4px);
z-index: 1000;
}
/* Front page sign in modal, but also mid-article scrim */
.lr {
background-color: transparent;
}
/* Front page sign in modal */
.lh {
background-color: #292929;
}
/* Front page sign in social media buttons */
.v {
color: rgba(255, 255, 255, 0.87);
}
/* Article title */
.cs, .cy, .cz {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt title */
.og {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt title */
.gu {
color: rgba(255, 255, 255, 0.87);
}
/* Article pre-footer */
.rj {
background-color: #292929;
}
/* Article alt pre-footer */
.vl {
background-color: #292929;
}
/* Article alt pre-footer */
/* CONFLICT! */
/* Behind text at bottom of article before pre-footer */
/* EXAMPLE: https://medium.com/@WorldBrain/storexhub-an-offline-first-open-source-zapier-f8841810fd9c */
.qc {
background-color: #2F2F2F;
}
/* Pre-footer background color */
.qo {
background-color: #292929;
}
/* Article alt pre-footer header text */
.fu {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt pre-footer header text */
.fo {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt pre-footer body text */
.da {
color: rgba(255, 255, 255, 0.87);
}
/* Article pre-footer title backgrounds */
.ch {
background-color: transparent;
}
/* Mid-article random background colour blocks */
.ld {
background-color: #2f2f2f;
}
/* Article footer title backgrounds */
/* CONFLICT */
/*
.ri {
background-color: #050505;
}
*/
/* Scrim gradient when locked out of article */
.ml {
background: linear-gradient(rgba(47, 47, 47, 0), rgba(47, 47, 47, 0.5), rgba(47, 47, 47, 1));
}
/* Text header locked out of article */
.fw {
color: rgba(255, 255, 255, 0.6);
}
/* Profile/Settings pop-out in top-right corner */
.u-resetSpectrum .u-baseColor--buttonDark {
color: rgba(255, 255, 255, 0.6) !important;
}
.button--chromeless:hover, .button--link:active {
color: rgba(255, 255, 255, 0.87) !important;
}
}