news.ycombinator.com by cpanelricky

/* ==UserStyle==
@name         news.ycombinator.com
@version      20211014.19.22
@namespace    userstyles.world/user/cpanelricky
@description  Dark Mode for Hackernews
@author       cpanelricky
@license      No License
==/UserStyle== */

/* ==UserStyle==
@name         hackernews theme
@namespace    github.com/gpmcadam/hn-theme
@version      1.0.0
@license      unlicense
@preprocessor default
==/UserStyle== */

@-moz-document domain("news.ycombinator.com") {
@media (prefers-color-scheme: dark) {
    :root {
      --primary: #ff6600;
      --dark-bg: #323232;
      --dark-fg: #cfcfcf;
      --dark-fg-lighter: #e7e7e7;
      --font-primary: 'Triplicate C3p', sans-serif;
      --font-size-base: 18px;
      --font-size-sm: 16px;
      --color-link: #f89100;
      --color-link-visited: #a5a5a5;
    }
          html[op='newest'] .pagetop a[href^='newest']:link,
          html[op='newest'] .pagetop a[href^='newest']:visited {
            color: white;
          }
          html[op='threads'] .pagetop a[href^='threads']:link,
          html[op='threads'] .pagetop a[href^='threads']:visited {
            color: white;
          }
          html[op='front'] .pagetop a[href^='front']:link,
          html[op='front'] .pagetop a[href^='front']:visited {
            color: white;
          }
          html[op='newcomments'] .pagetop a[href^='newcomments']:link,
          html[op='newcomments'] .pagetop a[href^='newcomments']:visited {
            color: white;
          }
          html[op='ask'] .pagetop a[href^='ask']:link,
          html[op='ask'] .pagetop a[href^='ask']:visited {
            color: white;
          }
          html[op='show'] .pagetop a[href^='show']:link,
          html[op='show'] .pagetop a[href^='show']:visited {
            color: white;
          }
          html[op='jobs'] .pagetop a[href^='jobs']:link,
          html[op='jobs'] .pagetop a[href^='jobs']:visited {
            color: white;
          }
      html[op='news'] *, html[op='item'] *, html[op='reply'] *, html[op] * {
        font-family: var(--font-primary);
        font-size: var(--font-size-sm);
        color: var(--dark-fg);
      }

      html[op='news'] .pagetop a,
      html[op='news'] .pagetop a:visited,
      html[op='item'] .pagetop a,
      html[op='item'] .pagetop a:visited,
      html[op='reply'] .pagetop a,
      html[op='reply'] .pagetop a:visited,
      html[op] .pagetop a,
      html[op] .pagetop a:visited {
        color: var(--dark-fg);
      }

      html[op='news'] button,
      html[op='news'] input[type='submit'],
      html[op='item'] button,
      html[op='item'] input[type='submit'],
      html[op='reply'] button,
      html[op='reply'] input[type='submit'],
      html[op] button,
      html[op] input[type='submit'] {
        background-image: linear-gradient(-180deg, #656565 0%, #656565 100%);
        border: 1px solid #333;
        border-radius: 4px;
        padding: 0.6rem;
        font-size: 0.9rem;
      }
        html[op="news"] .c00,
    html[op="news"] .c00 a:link, 
    html[op="item"] .c00 a:link, html[op="reply"] .c00 a:link, html[op] .c00 a:link {
          background: orangered;
          color: white;
        }

      html[op='news'] input[type='text'],
      html[op='news'] textarea,
      html[op='item'] input[type='text'],
      html[op='item'] textarea,
      html[op='reply'] input[type='text'],
      html[op='reply'] textarea,
      html[op] input[type='text'],
      html[op] textarea {
        border: 1px solid #4f4f4f;
        border-bottom: 1px solid #6d6d6d;
        background-image: linear-gradient(-180deg, #424242 0%, #454545 100%);
      }
        html[op='news'] .itemlist .athing .title a:link, html[op='item'] .itemlist .athing .title a:link, html[op='reply'] .itemlist .athing .title a:link, html[op] .itemlist .athing .title a:link {
          color: var(--color-link);
          font-weight: bold;
        }

        html[op='news'] .itemlist .athing .title a:visited, html[op='item'] .itemlist .athing .title a:visited, html[op='reply'] .itemlist .athing .title a:visited, html[op] .itemlist .athing .title a:visited {
          color: var(--color-link-visited);
          font-weight: bold;

        }

      html[op='news'] .c00 a:link,
      html[op='item'] .c00 a:link,
      html[op='reply'] .c00 a:link,
      html[op] .c00 a:link {
        color: var(--color-link);
      }

      html[op='news'] body, html[op='item'] body, html[op='reply'] body, html[op] body {
        background: #201f1f;
        background-repeat: no-repeat;
        background-image: linear-gradient(-180deg, #424242 0, #222121 60px);
      }

      html[op='news'] table,
      html[op='news'] tr,
      html[op='news'] td,
      html[op='item'] table,
      html[op='item'] tr,
      html[op='item'] td,
      html[op='reply'] table,
      html[op='reply'] tr,
      html[op='reply'] td,
      html[op] table,
      html[op] tr,
      html[op] td {
        background: transparent !important;
      }

      html[op='news'] .sitebit,
      html[op='news'] .sitebit a,
      html[op='news'] .sitestr,
      html[op='news'] .subtext,
      html[op='news'] .subtext *,
      html[op='item'] .sitebit,
      html[op='item'] .sitebit a,
      html[op='item'] .sitestr,
      html[op='item'] .subtext,
      html[op='item'] .subtext *,
      html[op='reply'] .sitebit,
      html[op='reply'] .sitebit a,
      html[op='reply'] .sitestr,
      html[op='reply'] .subtext,
      html[op='reply'] .subtext *,
      html[op] .sitebit,
      html[op] .sitebit a,
      html[op] .sitestr,
      html[op] .subtext,
      html[op] .subtext * {
        font-size: 0.9rem;
        color: var(--dark-fg);
      }

      html[op='news'] .itemlist tr.athing td, html[op='item'] .itemlist tr.athing td, html[op='reply'] .itemlist tr.athing td, html[op] .itemlist tr.athing td {
        padding-top: 0.25rem;
      }

      html[op='news'] .athing > .title:first-child, html[op='item'] .athing > .title:first-child, html[op='reply'] .athing > .title:first-child, html[op] .athing > .title:first-child {
        vertical-align: top;
        position: relative;
        top: 6px;
      }

      html[op='news'] .rank, html[op='item'] .rank, html[op='reply'] .rank, html[op] .rank {
        text-align: right;
        font-size: 1.0rem;
        font-weight: bold;
        color: var(--dark-fg-lighter);
      }

      html[op='news'] .votelinks, html[op='item'] .votelinks, html[op='reply'] .votelinks, html[op] .votelinks {
        padding: 0 0.25rem;
      }
  }
}