overcast.fm Dark Mode

darkmode.css

:root {
	--font: "SF Pro Display", "Inter", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
	--mono-font: "SF Mono", monospace;

	--bg-color: #000;
	--bg-color1: #1c1c1e;
	--bg-color2: #3d3d41;

	--fg-color: #fff;
	--fg-color1: #98989e;
	--fg-color2: #5a5a5e;

	--brand-color: #fc7e0f;
	--brand-color-highlight: #fc7e0f26;

	--red: #fc1b0f;
}

html, input, select, textarea, .pure-g [class *= "pure-u"] {
	font-family: var(--font);
}

body {
	background: var(--bg-color);
	color: var(--fg-color);
	display: block;
	font-feature-settings: "tnum";
	font-size: 18px;
	margin: 0 auto;
	max-width: 700px;
	padding: 1em;
}
code, kbd, pre, samp {
	font-family: var(--mono-font);
}

/* Hide now-useless padding blocks next to the main column, as well as empty divs */
*[class="pure-u-1-5"], div[class=""] {
	display: none;
}

.nav {
	border-bottom-color: var(--bg-color2);
}

h1, h2, h3, h4, h5, h6, .title { 
	font-family: var(--font); 
	font-weight: 500; 
}

a, .linkcolor, .extendedepisodecell.usernewepisode .title {
	color: var(--brand-color);
}

code {
	background-color: var(--bg-color2);
}

.pure-g {
	display: flex;
	justify-content: center;
}
.pure-u-sm-3-5 {
	width: 75%;
}

.titlestack div {
	padding-right: 0.5em;
}

.feedcell, .episodecell, .extendedepisodecell {
	border-radius: 15px;
	color: inherit;
	overflow: hidden;
}
.feedcell:not(:first-of-type), .episodecell:not(:first-of-type) {
	margin-top: 0.5em;
}
.feedcell:hover, .episodecell:hover, .extendedepisodecell:hover {
	background-color: var(--brand-color-highlight);
}

.smallcaps, .navlink, .ocbutton, .ocborderedbutton, .ocsegmentedbutton, .caption2 {
	font-family: var(--font);
	font-variant: small-caps;
}
.caption2 {
	color: var(--fg-color1);
	font-weight: 500;
}

.ocbutton, .ocborderedbutton, .ocsegmentedbutton {
	color: var(--brand-color);
}
.ocborderedbutton, .ocsegmentedbutton {
	border: 1px solid var(--brand-color);
}
.ocborderedbutton:active, .ocsegmentedbuttonselected {
	background-color: var(--brand-color);
}

.destructivebutton, .controller_admin .destructivebutton, .alert, .errors { color: var(--red); border-color: var(--red); } 
.destructivebutton:active, .controller_admin .destructivebutton:active { background-color: var(--red); color: var(--bg-color); }

input.podcastsearchbox {
	box-shadow: none !important;
    border: none !important;
    background: var(--bg-color2);
    color: var(--fg-color);
    height: 26px;
}

#autocomplete_results {
	background-color: var(--bg-color1);
	border: 1px solid var(--bg-color2);
	border-radius: 10px;
	box-shadow: 0 8px 20px black;
	color: #fff;
	padding: 20px;
}
#autocomplete_container {
	margin-top: 0.25em;
}
a.autocomplete_result {
	color: var(--fg-color1);
	height: 74px;

	display: flex;
	align-items: center;

	margin: 0;
}
a.autocomplete_result img.art {
	border-radius: 20%;

	border: none;
	width: 68px;
	height: 68px;

	position: relative;
}
a.autocomplete_result div {
	margin: 0 0 0 0.5em;

	top: unset;
	transform: unset;
	overflow: hidden;
}
a.autocomplete_result div h4 {
	color: var(--fg-color);
}

#progressbar {
	margin-bottom: 0;
}
#progressbar > span {
	color: var(--fg-color1);
}

#progresssliderbackground, #progressslider { position: absolute; left: 0; top: 0; width: 100%; height: 20px; }
#progresssliderbackground::-webkit-progress-value { background-color: #fdbe87; }
#progresssliderbackground::-moz-progress-bar { background-color: #fdbe87; /*! width: calc(100% - 2px); */ }
#progresssliderbackground::-webkit-progress-bar { background-color: transparent; }

#progressslidercontainer {
	--height: 20px;
	
	background: #3d3d41;
	border-radius: calc(var(--height) / 2);
	height: var(--height);
	overflow: hidden;
}
#progresssliderbackground, #progressslider {
	border: 0;
	height: 100%;
	width: 100%;
}
#progresssliderbackground::-moz-progress-bar {
	width: 100%;
}

#progressslider::-webkit-slider-runnable-track {
	height: 100%;
}
#progressslider::-webkit-slider-thumb { 
	margin-top: 0;
	height: 100%; 
}
#progressslider::-moz-range-track { 
	width: 100%; 
	height: 100%; 
}
#progressslider::-moz-range-thumb { 
	height: 100%; 
}

.progresssliderloadedrange {
	height: 100%;
	opacity: .33;
}

.fullart_container {
	margin-top: 2em;
}
.art {
	background: var(--bg-color2);
	border: none;
	border-radius: 15px;
	width: 100%;
}
.fullart {
	border-radius: 20px;
}

#seekbackbutton svg, #seekforwardbutton svg, #playpausebutton svg { 
	font-family: var(--font);
	font-weight: 500; 
}

#speedcontrolcontainer {
	--height: 24px;

	height: var(--height);
}
#speedcontrolbackground {
	display: flex;
	align-items: stretch;

	color: #000;
	height: 100%;
	margin-top: 0;
}
#speedcontrolcontainer .speedlabel {
	flex: 1 1 0px;

	width: unset;
}

#speedcontrol { height: 100%; }
#speedcontrol::-webkit-slider-runnable-track { 
	border-radius: calc(var(--height) / 2);
	height: 100%; 
}
#speedcontrol::-webkit-slider-thumb { width: calc(100%/9); }
#speedcontrol::-moz-range-track { 
	border-radius: calc(var(--height) / 2);
	height: 100%; 
}
#speedcontrol::-moz-range-thumb { height: 100%; width: calc(100%/9); }

.adpreview_imgbox img {
	border: none;
}
table.adrates {
	background-color: var(--bg-color1);
}

table.adrates td, table.adrates th {
	border: 1px solid var(--fg-color2);
}
table.adrates th {
	background-color: var(--bg-color2);
}

table.adrates td.altrowcolor {
	background-color: var(--bg-color1);
}

table.adrates .light, table.adrates .nodata { color: var(--fg-color1); }
table.adrates th.estimated { background-color: var(--bg-color2); width: 20%; color: var(--fg-color); }

.footer {
	padding: 44px 0;
}
.footer, .lighttext { color: var(--fg-color2); }
.footer a { color: var(--fg-color1); }