/* ==UserStyle==
@name           Reddit Mod
@namespace      https://github.com/chawyehsu
@version        0.1.1
@description    Flattened and minimalist theme for Reddit, with dark mode support.
@author         chawyehsu
@homepageURL  https://github.com/chawyehsu/reddit-mod
@supportURL   https://github.com/chawyehsu/reddit-mod/issues
@license        CC0-1.0
@preprocessor   uso
@advanced dropdown color-scheme "Dark Mode" {
  system "System" <<<EOT
    :root {
      --color-gray-1: #aaaaaa;
      --color-gray-2: #bbbbbb;
      --color-gray-3: #cccccc;
      --color-gray-4: #dddddd;
      --color-gray-5: #eeeeee;
      --color-gray-6: #ffffff;
      --color-text-primary: #828282;
      --color-link: #000000;
      --color-sr-header-bg: #ff6600;
      --color-sr-header-text-selected: var(--color-link);
      --color-background: #f6f6ef;
      --color-flairlabel: var(--color-gray-5);
      --color-border: var(--color-gray-4);
      --color-border-lighter: var(--color-gray-5);
      --color-scrollbar: #828282;
      --color-scrollbar-hover: #424242;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --color-gray-1: #555555;
        --color-gray-2: #444444;
        --color-gray-3: #333333;
        --color-gray-4: #222222;
        --color-gray-5: #111111;
        --color-gray-6: #000000;
        --color-text-primary: #828282;
        --color-link: #d5d5d5;
        --color-sr-header-bg: #1a1a1a;
        --color-sr-header-text-selected: var(--color-link);
        --color-background: #202124;
        --color-flairlabel: var(--color-gray-2);
        --color-border: var(--color-gray-3);
        --color-border-lighter: var(--color-gray-2);
        --color-scrollbar: #828282;
        --color-scrollbar-hover: #acacac;
      }
      #header-img,
      #mail,
      .sidebox.create .spacer a,
      .linkinfo.snoovatar-link:before,
      .multi-details button.remove-sr.add,
      .filtered-details button.remove-sr.add,
      .multi-details button.add.add,
      .filtered-details button.add.add {
        filter: invert(80%) hue-rotate(180deg) !important;
      }
      .expando-button {
        filter: brightness(45%) contrast(180%);
        background-color: transparent !important;
      }
    }
  EOT;
  light "Light" <<<EOT
    :root {
      --color-gray-1: #aaaaaa;
      --color-gray-2: #bbbbbb;
      --color-gray-3: #cccccc;
      --color-gray-4: #dddddd;
      --color-gray-5: #eeeeee;
      --color-gray-6: #ffffff;
      --color-text-primary: #828282;
      --color-link: #2a2a2a;
      --color-sr-header-bg: #ff6600;
      --color-sr-header-text-selected: var(--color-link);
      --color-background: #f6f6ef;
      --color-flairlabel: var(--color-gray-5);
      --color-border: var(--color-gray-4);
      --color-border-lighter: var(--color-gray-5);
      --color-scrollbar: #828282;
      --color-scrollbar-hover: #424242;
    }
  EOT;
  dark "Dark" <<<EOT
    :root {
      --color-gray-1: #555555;
      --color-gray-2: #444444;
      --color-gray-3: #333333;
      --color-gray-4: #222222;
      --color-gray-5: #111111;
      --color-gray-6: #000000;
      --color-text-primary: #828282;
      --color-link: #d5d5d5;
      --color-sr-header-bg: #1a1a1a;
      --color-sr-header-text-selected: var(--color-link);
      --color-background: #202124;
      --color-flairlabel: var(--color-gray-2);
      --color-border: var(--color-gray-3);
      --color-border-lighter: var(--color-gray-2);
      --color-scrollbar: #828282;
      --color-scrollbar-hover: #acacac;
    }
    #header-img,
    #mail,
    .sidebox.create .spacer a,
    .linkinfo.snoovatar-link:before,
    .multi-details button.remove-sr.add,
    .filtered-details button.remove-sr.add,
    .multi-details button.add.add,
    .filtered-details button.add.add {
      filter: invert(80%) hue-rotate(180deg) !important;
    }
    .expando-button {
      filter: brightness(45%) contrast(180%);
      background-color: transparent !important;
    }
  EOT;
}
@advanced dropdown layout "Toggle layout" {
  stretched "Stretched" <<<EOT
  EOT;
  boxed "Boxed" <<<EOT
  body {
    max-width: 1024px;
    margin: 0 auto;
  }
  EOT;
}
@advanced dropdown sr-topbar "Subreddits topbar" {
  hide "Hide" <<<EOT
    .sr-list > .separator,
    .sr-list > .separator + .sr-bar,
    #sr-more-link {
      display: none !important;
    }
    .sr-bar,
    .dropdown.srdrop {
      float: right !important;
      margin-left: 1em;
    }
    .drop-choices.srdrop.inuse {
      left: unset !important;
      right: 0;
    }
  EOT;
  show "Show" <<<EOT
  EOT;
}
==/UserStyle== */
@-moz-document domain("reddit.com") {
  /* Dark Mode */
  /*[[color-scheme]]*/
  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar:horizontal {
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-background);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-hover);
  }
  /* Reset */
  *, *:before, *:after {
    background: none;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
  a {
    color: var(--color-text-primary);
  }
  button,
  input,
  select,
  textarea {
    color: var(--color-text-primary);
  }
  input,
  select {
      outline: none;
  }
  textarea {
    background: var(--color-gray-5);
    border: 1px solid var(--color-border);
    outline: none;
  }
  hr {
    height: 1px;
  }
  body {
    background: var(--color-background);
    color: var(--color-text-primary);
  }
  select {
    border: 1px solid;
  }
  /* Toggle layout */
  /*[[layout]]*/
  /* Hide items */
  .give-gold-button,
  .goldvertisement,
  .listing-chooser,
  .giftgold {
    display: none !important;
  }
  .side .spacer:has(.premium-banner-outer) {
    display: none;
  }
  /* Top bar subreddits */
  /*[[sr-topbar]]*/
  /* Basic */
  .c-btn {
    border-radius: 0;
  }
  .c-btn-primary {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
  }
  .c-btn-primary:hover,
  .c-btn-primary:focus,
  .c-btn-primary:active,
  .c-btn-primary.disabled,
  .c-btn-primary[disabled] {
    background: var(--color-gray-3);
  }
  .stamp {
    border-radius: 0;
  }
  /* Header */
  #sr-header-area .separator {
    color: var(--color-sr-header-text-selected);
  }
  #sr-header-area .redesign-beta-optin,
  #sr-header-area .redesign-beta-optin:before,
  #sr-more-link {
    background: var(--color-sr-header-bg);
  }
  #sr-header-area {
    background: var(--color-sr-header-bg);
    border: none;
  }
  .flat-list li.selected a,
  #sr-header-area .selected a {
    color: var(--color-sr-header-text-selected);
  }
  .selected, .choice.primary {
    font-weight: normal;
  }
  .drop-choices {
    background: var(--color-background);
    border-color: var(--color-border);
  }
  .drop-choices a.choice:hover {
    background: var(--color-background);
    color: var(--color-link);
  }
  .srdrop .choice.bottom-option {
    border-color: var(--color-border-lighter);
  }
  .dropdown.srdrop .selected {
    background: none;
    margin: 0 2px;
    padding-right: 5px;
  }
  .dropdown.srdrop .selected:after {
    content: '▽';
    margin-left: 4px;
  }
  .dropdown.srdrop .selected,
  #sr-more-link,
  .sr-bar a {
    color: var(--color-sr-header-text-selected);
  }
  #header {
    background: var(--color-background);
    border: none;
  }
  .tabmenu li {
    font-weight: normal;
  }
  .tabmenu li a {
    background: var(--color-background);
    color: var(--color-link);
  }
  .tabmenu li.selected a {
    background: var(--color-background);
    border: none;
    color: var(--color-text-primary);
  }
  #header-bottom-right {
    background: var(--color-background);
    border: none;
  }
  .pagename,
  .pref-lang {
    font-weight: normal;
  }
  .pagename a {
    color: inherit;
  }
  /* Main content */
  .content {
    background: var(--color-background);
    margin: 0 !important;
    padding: 5px;
  }
  .link .usertext-body .md {
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .deepthread a {
    color: var(--color-text-primary);
  }
  .deepthread:after {
    filter: grayscale(1);
  }
  .comment .author {
    font-weight: normal;
  }
  .comment .child,
  .comment .showreplies {
    border-color: var(--color-border);
  }
  .morecomments a {
    color: var(--color-text-primary);
  }
  .usertext.grayed .usertext-body {
    background: var(--color-gray-5);
  }
  .usertext.border .usertext-body {
    background: var(--color-gray-5);
  }
  .md {
    color: #828282;
  }
  .md a {
    color: var(--color-link);
  }
  .md code,
  .md pre {
    background: var(--color-gray-5);
    border-color: var(--color-border);
  }
  .md hr {
    background: var(--color-gray-3);
    height: 1px;
  }
  .md textarea,
  .md .-text,
  .md p,
  .md pre > code,
  .md th,
  .md td,
  .md li {
    font-size: 13px;
  }
  .md td, .md th {
    border-color: var(--color-border);
  }
  .md .md-spoiler-text:not(.revealed) {
    background: var(--color-gray-5);
  }
  .panestack-title {
    border: none;
  }
  .menuarea {
    border: none;
  }
  /* Main content: List */
  .link .midcol {
    font-weight: normal;
  }
  .link.last-clicked {
    border-color: var(--color-border);
  }
  .thing .title {
    color: var(--color-link);
  }
  .thing .title .title {
    font-size: 14px;
    line-height: 1.3;
    vertical-align: middle;
  }
  .thing .title:visited {
    color: var(--color-text-primary);
  }
  .thing.stickied.link a.title {
    font-weight: normal;
  }
  .entry .buttons li a,
  .buttons .give-gold.gold-give-gold {
    color: var(--color-text-primary);
    font-weight: normal;
  }
  .crosspost-preview {
    background: var(--color-background);
    border-color: var(--color-border);
    border-radius: 0;
  }
  .expando-button.collapsed.video:hover,
  .expando-button.collapsed.selftext:hover,
  .expando-button.collapsed.crosspost:hover,
  .expando-button.expanded.video:hover,
  .expando-button.expanded.selftext:hover,
  .expando-button.expanded.crosspost:hover {
    filter: grayscale(1)
  }
  .tagline a,
  .search-result-meta a {
    color: var(--color-text-primary);
  }
  .tagline .subreddit-subscribe:before,
  .search-result-meta .subreddit-subscribe:before {
    filter: grayscale(1)
  }
  .tagline .subreddit-subscribe:hover ~ .subreddit,
  .tagline .subreddit-subscribe[disabled] ~ .subreddit,
  .search-result-meta .subreddit-subscribe:hover ~ .subreddit,
  .search-result-meta .subreddit-subscribe[disabled] ~ .subreddit {
    color: var(--color-link);
  }
  .oc-tag,
  .linkflairlabel {
    font-size: 12px;
    font-weight: normal;
    height: unset;
    padding: 0 4px;
    line-height: 1.3;
    vertical-align: middle;
  }
  .oc-tag,
  .flair,
  .linkflairlabel,
  .flairrichtext {
    background: var(--color-flairlabel) !important;
    border-color: var(--color-flairlabel) !important;
    border-radius: 0;
    color: var(--color-text-primary);
  }
  .link .flair {
    font-size: 0;
    margin: 0;
  }
  .flairemoji {
    height: 14px;
    width: 14px;
    line-height: 1.3;
  }
  .domain {
    line-height: 1.3;
    vertical-align: middle;
  }
  .nextprev a,
  .next-suggestions a {
    background: none;
    border: none;
    border-radius: 0;
    font-weight: normal;
  }
  .nextprev a:hover,
  .next-suggestions a:hover {
    background: none;
    border: none;
    text-decoration: underline;
  }
  /* Sidebar */
  .side {
    background: var(--color-background);
    margin: 0;
    padding: 0 5px;
  }
  #search input[type=text] {
    border-color: var(--color-border);
  }
  .infobar {
    background: none;
    border: none;
  }
  .linkinfo {
    background: var(--color-background);
    border-color: var(--color-border);
    border-radius: 0;
  }
  .linkinfo .shortlink input {
    border-color: var(--color-border-lighter);
  }
  .linkinfo.snoovatar-link {
    border-radius: 0;
  }
  .sidebox .spacer {
    background: var(--color-background);
  }
  .morelink,
  .morelink:hover,
  .morelink .nub,
  .morelink:hover .nub,
  .mlh,
  .mlhn {
    background: none;
    border-color: var(--color-border);
    font-weight: normal;
  }
  .morelink a {
    color: var(--color-text-primary);
  }
  .morelink:hover a {
    color: var(--color-link);
  }
  .titlebox form.toggle,
  .leavemoderator {
    background: none;
  }
  .fancy-toggle-button .active {
    background: var(--color-gray-5);
    border-color: var(--color-border);
    border-radius: 0;
    color: var(--color-text-primary);
    font-weight: normal;
  }
  .sidecontentbox .content {
    border-color: var(--color-border);
  }
  .titlebox .bottom {
    border: none;
  }
  .titlebox h1 a {
    color: var(--color-text-primary);
  }
  .subscription-box .title {
    color: var(--color-text-primary);
    font-size: 14px;
  }
  .subscription-box .box-separator {
    border: none;
  }
  .trophy-area .content {
    background: none;
  }
  .trophy-name {
    color: var(--color-text-primary) !important;
  }
  .multi-details form.add-sr .sr-name,
  .filtered-details form.add-sr .sr-name {
    border-color: var(--color-border);
  }
  /* Message */
  .message .subject {
    font-size: 16px;
    font-weight: normal;
  }
  .message .tagline,
  .message .search-result-meta {
    color: var(--color-text-primary);
  }
  .tagline .admin,
  .search-result-meta .admin,
  .tagline a.author.admin,
  .search-result-meta a.author.admin,
  .message .recipient a.author,
  .message .sender a.author,
  .message .subreddit {
    font-weight: normal;
  }
  /* /submit */
  .tabmenu.formtab .selected a {
    background: var(--color-gray-4);
    color: var(--color-text-primary);
  }
  .tabmenu.formtab a {
    border-color: var(--color-border);
    color: var(--color-link);
  }
  .formtabs-content {
    border-color: var(--color-border);
  }
  #newlink-with-image-upload .image-upload-drop-target {
    background: var(--color-gray-6);
    border: var(--color-border);
  }
  .submit_text h1 {
    color: var(--color-text-primary);
  }
  .content.submit .info-notice {
    background: var(--color-gray-5);
    border-color: var(--color-border);
  }
  /* /subreddits */
  .searchpane {
    background: none;
  }
  .raisedbox {
    border: none;
  }
  .subreddit .usertext .md {
    background: none;
    border-color: var(--color-border);
    border-radius: 0;
  }
  .subreddit-rule-item:hover {
    background: none;
  }
  .linefield {
    background: none;
  }
  .linefield.mobile {
    background: none;
    border-color: var(--color-border);
  }
  /* Footer */
  .footer-parent {
    background: var(--color-background);
    margin: 0 !important;
  }
  .footer {
    border: none;
    color: var(--color-text-primary);
  }
  .flat-vert.title {
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 16px;
  }
  .bottommenu {
    color: var(--color-text-primary);
  }
  .buygold {
    color: var(--color-text-primary);
    font-weight: normal;
  }
  .footer .col {
    border-color: var(--color-text-primary);
  }
  .debuginfo {
    background: var(--color-background);
    color: var(--color-text-primary);
  }
  /* Preferences */
  .preftable .details {
    color: var(--color-text-primary);
  }
  .developed-app,
  .authorized-app {
    border-color: var(--color-border);
  }
  .private-feeds.instructions .feedlink {
    border: none;
  }
  .reddit-infobar {
    background: none;
    border-color: var(--color-border-lighter);
  }
  .rounded {
    border-radius: 0;
  }
  .roundfield {
    background: none;
    border-radius: 0;
  }
  .white-field,
  .delete-field {
    background: none;
  }
  /* Other */
  .pinnable-content.pinned {
    background: var(--color-background) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--color-border);
  }
  .hover-bubble {
    color: var(--color-text-primary);
    border-color: var(--color-border);
  }
  .author-tooltip {
    background: var(--color-gray-6);
    border-color: var(--color-border);
    border-radius: 0;
  }
  .author-tooltip__credentials-list {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .author-tooltip.hover-bubble.anchor-top-left::before,
  .author-tooltip.hover-bubble.anchor-top-right::before {
    border-bottom-color: var(--color-border);
    top: -18px;
  }
  .author-tooltip.hover-bubble.anchor-top-left.author-tooltip_common::after,
  .author-tooltip.hover-bubble.anchor-top-right.author-tooltip_common::after {
    border-bottom-color: var(--color-gray-6);
    top: -17px;
  }
  .author-tooltip.hover-bubble.anchor-bottom-left::before,
  .author-tooltip.hover-bubble.anchor-bottom-right::before {
    border-top-color: var(--color-border);
    bottom: -18px;
  }
  .hover-bubble.anchor-bottom-left:after {
    border-top-color: var(--color-gray-6);
    bottom: -17px;
  }
  .author-tooltip__head {
    background: var(--color-gray-6);
    border-color: var(--color-border);
  }
  .author-tooltip__head h3,
  .author-tooltip__head a {
    color: var(--color-text-primary);
  }
  .author-tooltip__head a:hover {
    color: var(--color-link);
  }
  .author-tooltip__credentials-list li {
    border-color: var(--color-border);
  }
  .author-tooltip__credentials-list strong {
    color: var(--color-text-primary);
  }
  .author-tooltip__link-list a {
    color: var(--color-text-primary);
    font-weight: normal;
  }
  .author-tooltip__link-list a:hover {
    color: var(--color-text-primary);
  }
  .author-tooltip__icon.i-follow {
    filter: grayscale(1);
  }
  .linefield textarea,
  .linefield input[type=text],
  .linefield input[type=password] {
    border-color: var(--color-border);
  }
  .roundfield textarea,
  .roundfield input[type=text],
  .roundfield input[type=url],
  .roundfield input[type=password],
  .roundfield input[type=number],
  #compose-message .roundfield select {
    border-color: var(--color-border);
  }
}