Dark theme for Meduza.io (Медуза.io). Supports all types of articles.
/* ==UserStyle==
@name Meduza.io – Dark [Ath]
@namespace athari
@version 1.0.1
@description Dark theme for Meduza.io (Медуза.io). Supports all types of articles.
@author Athari (https://github.com/Athari)
@homepageURL https://github.com/Athari/AthariUserCSS
@supportURL https://github.com/Athari/AthariUserCSS/issues
@license MIT
@preprocessor default
==/UserStyle== */
@-moz-document domain("meduza.io") {
:root {
color-scheme: dark;
}
/* Promo */
.Layout-module-banner {
display: none;
}
/* Main: News */
.Grid-module-container {
background: #111;
}
.SimpleBlock-module-root,
.EpisodeBlock-module-root,
.TopicBlock-module-root,
.RichBlock-module-root {
background: #222;
color: #eee;
box-shadow: inset 0 0 0 1px #000;
}
.TopicBlockItem-module-footer,
.RichBlock-module-meta {
color: #999;
}
.RichBlock-module-withTheme {
background: #222 !important;
--bgColor: #222 !important;
--textColor: #eee !important;
--metaColor: #999 !important;
}
.Modal-module-isAuth .Modal-module-container {
background: #333;
}
.Header-module-itemAuth,
.Header-module-itemSearch {
filter: drop-shadow(0 0 1px #fff);
}
/* Main: Chronology */
.Chronology-module-footer,
.Chronology-module-container {
background: #111;
}
.ChronologyItem-module-root {
background: #222;
color: #eee;
box-shadow: inset 0 0 0 1px #000;
}
.Chronology-module-timestamp {
color: #eee;
}
.ChronologyItem-module-footer {
color: #999;
}
.ChronologyItem-module-figure {
margin: 1px; /* border fix */
}
/* Main: Loading skeleton */
.Skeleton-module-root.Skeleton-module-root:before {
background: #111;
}
.Skeleton-module-layout.Skeleton-module-layout,
.Skeleton-module-section.Skeleton-module-section:after {
background: #111;
border-color: #000;
}
.Skeleton-module-wrapper {
background: #777;
}
.Skeleton-module-wrapper:before {
background: #555;
}
.Skeleton-module-card:not(#\0) {
box-shadow: inset 0 0 0 1px #000;
border: none;
&:before {
background-color: #333;
}
}
.Skeleton-module-animation {
border-color: #222;
span:nth-child(2n+1)::before,
span:nth-child(2n) {
background: #222;
}
span:nth-child(2n+1)::after {
box-shadow: 0 0 0 10px #222;
}
}
/* Material */
.GeneralMaterial-module-root {
background: #111;
}
[class^='Meta-module_root__'] {
color: #999;
}
[class^='RelatedBlock-module_root__'] {
background: #222;
color: #eee;
a {
color: #eee;
}
}
.TopBar-module-stuck .TopBar-module-container {
background: #111;
box-shadow: 0 1px #000;
}
/* Material: Card */
.CardMaterial-module-root,
.CardMaterial-module-head {
background: #111;
}
.CardMaterial-module-header {
color: #eee;
}
.CardMaterial-module-card {
background: #181818;
box-shadow: inset 0 0 0 1px #080808;
}
[class^='CardTitle-module_title__'] {
color: #eee;
}
.ChaptersModalWindow-module-modalContent {
background: #111;
}
.ChaptersModalWindow-module-itemChapterFirst,
.ChaptersModalWindow-module-itemChapterSecond {
color: #eee;
}
/* Material: Slide */
.SlidesMaterial-module-root,
.SlidesMaterial-module-bg {
background: #181818 !important;
}
.Slide-module-slide {
background: #222;
color: #eee;
}
/* Material: Audio */
.AudioPanel-module-root {
background: #222;
}
[class^='Dropdown-module_root__Wv7S-'] ul {
background: #222;
a {
color: #eee;
}
}
/* Material: Content */
[class^='SimpleBlock-module_blockquote__'] {
background: #330;
}
[class^='Image-module_root__'] {
background: #0000;
}
span[data-body] { /* footnote text */
background: #333;
&:hover {
background: #555;
}
}
[class^='Footnote-module_root__'] {
background: #222;
}
mark {
background: #440;
color: #eee;
}
/* Inverted images */
button,
.SupportPanel-module-root,
.SupportBlock-module-richPromoImage {
filter: hue-rotate(180deg) invert() hue-rotate(180deg);
}
}