Rule34.xxx – Dark Enhanced [Ath] by Athari

/* ==UserStyle==
@name           Rule34.xxx – Dark Enhanced [Ath]
@namespace      athari
@version        1.0.0
@description    Dark theme for Rule34.xxx. Includes ad blocking, fixed pagination at the bottom, search and back/next navigation at the top.
@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("rule34.xxx") {
  :root {
    color-scheme: dark;
    color: #ccc;
  }
  #gdprconsent,
  .exo-native-widget,
  .sidebarRight,
  .image-list ~ br,
  [class^="exo-native-"],
  [src="/images/r34chibi.png"],
  [data-nosnippet] {
    display: none !important;
  }
  body, div, h1, h2, h3, h4, h5, h6, p, ul, li, dd, dt {
    font-family: Segoe UI, sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #aaa;
  }
  body {
    background: #111;
  }
  a {
    text-decoration: none;
    &:link {
      color: #88d;
    }
    &:visited {
      color: #77d;
    }
    &:active,
    &:hover {
      color: #aad;
    }
    &.last-page {
      color: #666;
    }
    &.spoiler {
      color: #666;
      background: #666;
      :hover {
        color: #ccc;
      }
    }
    &.blacklisted-tags-disabled {
      color: #666;
    }
  }
  dt.bad {
    color: red;
  }
  h2.wiki-title {
    color: #003dd8;
  }
  input {
    background: revert !important;
    border: revert !important;
    &:focus {
      background: revert !important;
      border: revert !important;
    }
  }

  span.author {
    color: #aaa
  }

  span.date {
    color: #aaa
  }

  span.locked-topic {
    color: #666
  }

  span.post-count {
    color: #aaa
  }

  span.spoiler {
    color: #666;
    background: #666;
  }

  span.spoiler:hover {
    color: #ccc;
  }

  strong.divider {
    color: gray
  }

  textarea:focus {
    background: #ffc
  }

  div.auto_complete {
    background: #fff
  }

  div.auto_complete ul {
    border-color: #888
  }

  div.auto_complete ul li.selected {
    background-color: #ffb
  }

  div.auto_complete ul strong.highlight {
    color: #800
  }

  div.blocked {
    border-color: red;
    background: #fcc;
    color: red
  }

  div#footer {
    color: #ccc
  }

  div#footer > .footer-disabled {
    color: #777
  }

  div#footer > #label {
    color: #777
  }

  div.has-mail {
    border-color: #afa;
    background: #efe
  }

  div.help div.code {
    border-color: green;
    background: #eee
  }

  div.help h4 {
    color: #060
  }

  div.mail .received {
    color: #060
  }

  div.mail .sent {
    color: #600
  }

  div.notice {
    color: red
  }

  div.quote {
    background: #f6f6f6 url(./counter/quote.gif) no-repeat top right;
    border-color: #bababa
  }

  a.original-file-changed#highres {
    color: #0030fa
  }

  div#user-record > table > tbody > tr.positive-record {
    background: #efe
  }

  div#user-record > table > tbody > tr.negative-record {
    background: #fee
  }

  div.tips {
    background: url(topban00.jpg);
    border-bottom-color: #c9def8
  }

  a.original-file-changed#highres {
    color: #0030fa
  }

  div.status-notice {
    border-color: #555;
    background: #333;
  }

  div#user-record > table > tbody > tr.positive-record {
    background: #efe
  }

  div#user-record > table > tbody > tr.negative-record {
    background: #fee
  }

  div#wiki-show > div#body > div#byline {
    color: #666
  }

  div#wiki-diff del {
    background-color: #f88
  }

  div#wiki-diff ins {
    background-color: #8f8
  }

  .obsolete-tag-change {
    color: #000
  }

  .tag-type-artist > a, .tag-type-artist {
    color: #a00
  }

  .tag-type-artist > a:hover, .tag-type-artist:hover {
    color: #9093ff
  }

  .tag-type-character > a, .tag-type-character {
    color: #0a0
  }

  .tag-type-character > a:hover, .tag-type-character:hover {
    color: #9093ff
  }

  .tag-type-copyright > a, .tag-type-copyright {
    color: #a0a
  }

  .tag-type-copyright > a:hover, .tag-type-copyright:hover {
    color: #9093ff
  }

  .tag-type-metadata > a, .tag-type-metadata {
    color: #f80
  }

  .tag-type-metadata > a:hover, .tag-type-metadata:hover {
    color: #fa6
  }

  .tag-count {
    color: #666;
  }

  .added-tags {
    color: #0c0
  }

  .removed-tags {
    color: red
  }

  .added-tags {
    color: #0c0
  }

  .removed-tags {
    color: red
  }

  tr.tableheader, thead tr {
    background: url(topban00.jpg)!important
  }

  table.form th {
    color: #000
  }

  table.highlightable > tbody > tr:hover {
    background: #7fb17e
  }

  table.highlightable th {
    color: #fff
  }

  table.highlightable td {
    border-color: #eee
  }

  table tr.good {
    background: #e6ffe6
  }

  table tr.selected {
    background: #aee!important
  }

  table tr.highlight {
    background: #ffd
  }

  table tr.pending-tag {
    background: #dcf6dc
  }

  table tr:nth-child(odd) {
    background: rgba(50, 50, 50, .1)
  }

  img.flagged {
    border-color: red
  }

  img.has-children {
    border-color: #0f0
  }

  img.has-parent {
    border-color: #cc0
  }

  img.pending {
    border-color: #00f
  }

  img.video {
    border-color: #00f
  }

  div#post-add p#scale {
    color: #999
  }

  div#note-container > div.note-body {
    background: #ffe;
    border-color: #000;
    color: #000
  }

  div#note-container > div.note-body > p.tn {
    color: gray
  }

  tn {
    color: gray
  }

  div#note-container > div.note-box {
    border-color: #000;
    background: #ffe
  }

  div#note-container > div.note-box > div.note-corner {
    background: #000
  }

  div#note-container > div.unsaved {
    background: #fff;
    border-color: red
  }

  div#note-container > div.unsaved > div.note-corner {
    background: red
  }

  div#edit-box {
    background: #fff
  }

  div.response-list > div.post > div.content > div.footer {
    color: #ccc
  }

  div.response-list > div.post > div.content > div.footer a {
    color: #666
  }

  #navbar li.current-page a {
    color: #fff
  }

  hr {
    border-color: hsla(114, 56%, 33%, .3)
  }

  hr.light {
    border-color: hsla(114, 56%, 66%, .2)
  }

  div.mailbody {
    background-color: hsl(0, 100%, 100%, .3);
    border-color: hsla(0, 0%, 93%, .5)
  }

  .awesomeplete > ul > li {
    color: #009
  }

  .awesomplete > ul > li:hover, .awesomplete > ul > li[aria-selected=true] {
    background: #d2ffcd;
    color: #009
  }

  .awesomplete mark {
    background: rgba(255, 255, 0, .7);
    color: #000
  }

  .awesomplete > ul {
    background: #fff
  }

  .awesomplete > ul {
    background: linear-gradient(to bottom right, hsla(114, 55%, 80%, 1), hsla(114, 55%, 80%, 0.8));
    border: 1px solid rgba(0, 0, 0, .3);
    box-shadow: .05em .2em .6em rgba(0, 0, 0, .2)
  }

  table.highlightable > tbody > tr:hover {
    background: #fff2;
  }
  tr.tableheader, thead tr {
    background: #fff4 !important;
  }

  div.quote {
    background: #fff2;
    border-color: #fff3;
  }

  div#header {
    ul:is(#navbar, #subnavbar) {
      li.current-page {
        background: #448;
        a {
          color: #eee;
        }
      }
    }
    ul#subnavbar {
      background: #222;
    }
  }
  div.sidebar {
    color: #668;
  }

  #status-notices {
    display: flex;
    flex-flow: row wrap;
    > br {
      display: none;
    }
  }

  #post-list div#paginator {
    position: fixed;
    inset: auto 0 0 auto;
    margin: 0;
    padding: 8px;
    background: #222;
    border-radius: 4px 0 0 0;
  }
  div#paginator {
    a, b {
      display: inline-block;
      margin: 0 4px;
      padding: 4px 8px;
      min-width: 2ch;
    }
    a:hover {
      background: #aad4;
      color: #aad;
    }
    .manual-page-chooser {
      input {
        padding: 4px 8px;
        background: revert;
      }
    }
  }

  div.tag-search {
    position: absolute;
    inset: 8px auto auto 400px;
    width: auto;
    display: flex;
    flex-flow: row;
    align-items: baseline;
    align-content: center;
    gap: 10px;
    form {
      display: contents;
    }
    input {
      padding: 3px 6px !important;
    }
    input[type=text] {
      width: 500px;
    }
    br {
      display: none;
    }
  }
  
  #post-view {
    img {
      max-width: calc(100vw - 270px);
      width: auto;
      height: auto;
    }
  }

  #navlinksContainer {
    position: absolute;
    inset: 47px 0 auto auto;
    display: flex;
    flex-flow: row;
    align-items: baseline;
    gap: 10px;
    background: none;
    border: none;
    [style="text-align: center"] {
      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    a {
      margin: 0;
      padding: 8px;
      background: #222;
      border-radius: 4px 0 0 0;
    }
  }
}