☰

Greasy Fork is available in English.

Meduza.io – Dark [Ath]

Dark theme for Meduza.io (Медуза.io). Supports all types of articles.

  1. /* ==UserStyle==
  2. @name           Meduza.io – Dark [Ath]
  3. @namespace      athari
  4. @version        1.0.1
  5. @description    Dark theme for Meduza.io (Медуза.io). Supports all types of articles.
  6. @author         Athari (https://github.com/Athari)
  7. @homepageURL    https://github.com/Athari/AthariUserCSS
  8. @supportURL     https://github.com/Athari/AthariUserCSS/issues
  9. @license        MIT
  10. @preprocessor   default
  11. ==/UserStyle== */
  12.  
  13. @-moz-document domain("meduza.io") {
  14.   :root {
  15.     color-scheme: dark;
  16.   }
  17.  
  18.   /* Promo */
  19.   .Layout-module-banner {
  20.     display: none;
  21.   }
  22.  
  23.   /* Main: News */
  24.   .Grid-module-container {
  25.     background: #111;
  26.   }
  27.   .SimpleBlock-module-root,
  28.   .EpisodeBlock-module-root,
  29.   .TopicBlock-module-root,
  30.   .RichBlock-module-root {
  31.     background: #222;
  32.     color: #eee;
  33.     box-shadow: inset 0 0 0 1px #000;
  34.   }
  35.   .TopicBlockItem-module-footer,
  36.   .RichBlock-module-meta {
  37.     color: #999;
  38.   }
  39.   .RichBlock-module-withTheme {
  40.     background: #222 !important;
  41.     --bgColor: #222 !important;
  42.     --textColor: #eee !important;
  43.     --metaColor: #999 !important;
  44.   }
  45.  
  46.   .Modal-module-isAuth .Modal-module-container {
  47.     background: #333;
  48.   }
  49.   .Header-module-itemAuth,
  50.   .Header-module-itemSearch {
  51.     filter: drop-shadow(0 0 1px #fff);
  52.   }
  53.  
  54.   /* Main: Chronology */
  55.   .Chronology-module-footer,
  56.   .Chronology-module-container {
  57.     background: #111;
  58.   }
  59.   .ChronologyItem-module-root {
  60.     background: #222;
  61.     color: #eee;
  62.     box-shadow: inset 0 0 0 1px #000;
  63.   }
  64.   .Chronology-module-timestamp {
  65.     color: #eee;
  66.   }
  67.   .ChronologyItem-module-footer {
  68.     color: #999;
  69.   }
  70.   .ChronologyItem-module-figure {
  71.     margin: 1px; /* border fix */
  72.   }
  73.  
  74.   /* Main: Loading skeleton */
  75.   .Skeleton-module-root.Skeleton-module-root:before {
  76.     background: #111;
  77.   }
  78.   .Skeleton-module-layout.Skeleton-module-layout,
  79.   .Skeleton-module-section.Skeleton-module-section:after {
  80.     background: #111;
  81.     border-color: #000;
  82.   }
  83.   .Skeleton-module-wrapper {
  84.     background: #777;
  85.   }
  86.   .Skeleton-module-wrapper:before {
  87.     background: #555;
  88.   }
  89.   .Skeleton-module-card:not(#\0) {
  90.     box-shadow: inset 0 0 0 1px #000;
  91.     border: none;
  92.     &:before {
  93.       background-color: #333;
  94.     }
  95.   }
  96.   .Skeleton-module-animation {
  97.     border-color: #222;
  98.     span:nth-child(2n+1)::before,
  99.     span:nth-child(2n) {
  100.       background: #222;
  101.     }
  102.     span:nth-child(2n+1)::after {
  103.       box-shadow: 0 0 0 10px #222;
  104.     }
  105.   }
  106.  
  107.   /* Material */
  108.   .GeneralMaterial-module-root {
  109.     background: #111;
  110.   }
  111.   [class^='Meta-module_root__'] {
  112.     color: #999;
  113.   }
  114.   [class^='RelatedBlock-module_root__'] {
  115.     background: #222;
  116.     color: #eee;
  117.     a {
  118.       color: #eee;
  119.     }
  120.   }
  121.   .TopBar-module-stuck .TopBar-module-container {
  122.     background: #111;
  123.     box-shadow: 0 1px #000;
  124.   }
  125.  
  126.   /* Material: Card */
  127.   .CardMaterial-module-root,
  128.   .CardMaterial-module-head {
  129.     background: #111;
  130.   }
  131.   .CardMaterial-module-header {
  132.     color: #eee;
  133.   }
  134.   .CardMaterial-module-card {
  135.     background: #181818;
  136.     box-shadow: inset 0 0 0 1px #080808;
  137.   }
  138.   [class^='CardTitle-module_title__'] {
  139.     color: #eee;
  140.   }
  141.   .ChaptersModalWindow-module-modalContent {
  142.     background: #111;
  143.   }
  144.   .ChaptersModalWindow-module-itemChapterFirst,
  145.   .ChaptersModalWindow-module-itemChapterSecond {
  146.     color: #eee;
  147.   }
  148.  
  149.   /* Material: Slide */
  150.   .SlidesMaterial-module-root,
  151.   .SlidesMaterial-module-bg {
  152.     background: #181818 !important;
  153.   }
  154.   .Slide-module-slide {
  155.     background: #222;
  156.     color: #eee;
  157.   }
  158.  
  159.   /* Material: Audio */
  160.   .AudioPanel-module-root {
  161.     background: #222;
  162.   }
  163.   [class^='Dropdown-module_root__Wv7S-'] ul {
  164.     background: #222;
  165.     a {
  166.       color: #eee;
  167.     }
  168.   }
  169.  
  170.   /* Material: Content */
  171.   [class^='SimpleBlock-module_blockquote__'] {
  172.     background: #330;
  173.   }
  174.   [class^='Image-module_root__'] {
  175.     background: #0000;
  176.   }
  177.   span[data-body] { /* footnote text */
  178.     background: #333;
  179.     &:hover {
  180.       background: #555;
  181.     }
  182.   }
  183.   [class^='Footnote-module_root__'] {
  184.     background: #222;
  185.   }
  186.   mark {
  187.     background: #440;
  188.     color: #eee;
  189.   }
  190.  
  191.   /* Inverted images */
  192.   button,
  193.   .SupportPanel-module-root,
  194.   .SupportBlock-module-richPromoImage {
  195.     filter: hue-rotate(180deg) invert() hue-rotate(180deg);
  196.   }
  197. }