Rule34.xxx – Dark Enhanced [Ath]

Dark theme for Rule34.xxx. Includes ad blocking, fixed pagination at the bottom, search and back/next navigation at the top.

  1. /* ==UserStyle==
  2. @name Rule34.xxx – Dark Enhanced [Ath]
  3. @namespace athari
  4. @version 1.0.0
  5. @description Dark theme for Rule34.xxx. Includes ad blocking, fixed pagination at the bottom, search and back/next navigation at the top.
  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. @-moz-document domain("rule34.xxx") {
  13. :root {
  14. color-scheme: dark;
  15. color: #ccc;
  16. }
  17. #gdprconsent,
  18. .exo-native-widget,
  19. .sidebarRight,
  20. .image-list ~ br,
  21. [class^="exo-native-"],
  22. [src="/images/r34chibi.png"],
  23. [data-nosnippet] {
  24. display: none !important;
  25. }
  26. body, div, h1, h2, h3, h4, h5, h6, p, ul, li, dd, dt {
  27. font-family: Segoe UI, sans-serif;
  28. }
  29. h1, h2, h3, h4, h5, h6 {
  30. color: #aaa;
  31. }
  32. body {
  33. background: #111;
  34. }
  35. a {
  36. text-decoration: none;
  37. &:link {
  38. color: #88d;
  39. }
  40. &:visited {
  41. color: #77d;
  42. }
  43. &:active,
  44. &:hover {
  45. color: #aad;
  46. }
  47. &.last-page {
  48. color: #666;
  49. }
  50. &.spoiler {
  51. color: #666;
  52. background: #666;
  53. :hover {
  54. color: #ccc;
  55. }
  56. }
  57. &.blacklisted-tags-disabled {
  58. color: #666;
  59. }
  60. }
  61. dt.bad {
  62. color: red;
  63. }
  64. h2.wiki-title {
  65. color: #003dd8;
  66. }
  67. input {
  68. background: revert !important;
  69. border: revert !important;
  70. &:focus {
  71. background: revert !important;
  72. border: revert !important;
  73. }
  74. }
  75.  
  76. span.author {
  77. color: #aaa
  78. }
  79.  
  80. span.date {
  81. color: #aaa
  82. }
  83.  
  84. span.locked-topic {
  85. color: #666
  86. }
  87.  
  88. span.post-count {
  89. color: #aaa
  90. }
  91.  
  92. span.spoiler {
  93. color: #666;
  94. background: #666;
  95. }
  96.  
  97. span.spoiler:hover {
  98. color: #ccc;
  99. }
  100.  
  101. strong.divider {
  102. color: gray
  103. }
  104.  
  105. textarea:focus {
  106. background: #ffc
  107. }
  108.  
  109. div.auto_complete {
  110. background: #fff
  111. }
  112.  
  113. div.auto_complete ul {
  114. border-color: #888
  115. }
  116.  
  117. div.auto_complete ul li.selected {
  118. background-color: #ffb
  119. }
  120.  
  121. div.auto_complete ul strong.highlight {
  122. color: #800
  123. }
  124.  
  125. div.blocked {
  126. border-color: red;
  127. background: #fcc;
  128. color: red
  129. }
  130.  
  131. div#footer {
  132. color: #ccc
  133. }
  134.  
  135. div#footer > .footer-disabled {
  136. color: #777
  137. }
  138.  
  139. div#footer > #label {
  140. color: #777
  141. }
  142.  
  143. div.has-mail {
  144. border-color: #afa;
  145. background: #efe
  146. }
  147.  
  148. div.help div.code {
  149. border-color: green;
  150. background: #eee
  151. }
  152.  
  153. div.help h4 {
  154. color: #060
  155. }
  156.  
  157. div.mail .received {
  158. color: #060
  159. }
  160.  
  161. div.mail .sent {
  162. color: #600
  163. }
  164.  
  165. div.notice {
  166. color: red
  167. }
  168.  
  169. div.quote {
  170. background: #f6f6f6 url(./counter/quote.gif) no-repeat top right;
  171. border-color: #bababa
  172. }
  173.  
  174. a.original-file-changed#highres {
  175. color: #0030fa
  176. }
  177.  
  178. div#user-record > table > tbody > tr.positive-record {
  179. background: #efe
  180. }
  181.  
  182. div#user-record > table > tbody > tr.negative-record {
  183. background: #fee
  184. }
  185.  
  186. div.tips {
  187. background: url(topban00.jpg);
  188. border-bottom-color: #c9def8
  189. }
  190.  
  191. a.original-file-changed#highres {
  192. color: #0030fa
  193. }
  194.  
  195. div.status-notice {
  196. border-color: #555;
  197. background: #333;
  198. }
  199.  
  200. div#user-record > table > tbody > tr.positive-record {
  201. background: #efe
  202. }
  203.  
  204. div#user-record > table > tbody > tr.negative-record {
  205. background: #fee
  206. }
  207.  
  208. div#wiki-show > div#body > div#byline {
  209. color: #666
  210. }
  211.  
  212. div#wiki-diff del {
  213. background-color: #f88
  214. }
  215.  
  216. div#wiki-diff ins {
  217. background-color: #8f8
  218. }
  219.  
  220. .obsolete-tag-change {
  221. color: #000
  222. }
  223.  
  224. .tag-type-artist > a, .tag-type-artist {
  225. color: #a00
  226. }
  227.  
  228. .tag-type-artist > a:hover, .tag-type-artist:hover {
  229. color: #9093ff
  230. }
  231.  
  232. .tag-type-character > a, .tag-type-character {
  233. color: #0a0
  234. }
  235.  
  236. .tag-type-character > a:hover, .tag-type-character:hover {
  237. color: #9093ff
  238. }
  239.  
  240. .tag-type-copyright > a, .tag-type-copyright {
  241. color: #a0a
  242. }
  243.  
  244. .tag-type-copyright > a:hover, .tag-type-copyright:hover {
  245. color: #9093ff
  246. }
  247.  
  248. .tag-type-metadata > a, .tag-type-metadata {
  249. color: #f80
  250. }
  251.  
  252. .tag-type-metadata > a:hover, .tag-type-metadata:hover {
  253. color: #fa6
  254. }
  255.  
  256. .tag-count {
  257. color: #666;
  258. }
  259.  
  260. .added-tags {
  261. color: #0c0
  262. }
  263.  
  264. .removed-tags {
  265. color: red
  266. }
  267.  
  268. .added-tags {
  269. color: #0c0
  270. }
  271.  
  272. .removed-tags {
  273. color: red
  274. }
  275.  
  276. tr.tableheader, thead tr {
  277. background: url(topban00.jpg)!important
  278. }
  279.  
  280. table.form th {
  281. color: #000
  282. }
  283.  
  284. table.highlightable > tbody > tr:hover {
  285. background: #7fb17e
  286. }
  287.  
  288. table.highlightable th {
  289. color: #fff
  290. }
  291.  
  292. table.highlightable td {
  293. border-color: #eee
  294. }
  295.  
  296. table tr.good {
  297. background: #e6ffe6
  298. }
  299.  
  300. table tr.selected {
  301. background: #aee!important
  302. }
  303.  
  304. table tr.highlight {
  305. background: #ffd
  306. }
  307.  
  308. table tr.pending-tag {
  309. background: #dcf6dc
  310. }
  311.  
  312. table tr:nth-child(odd) {
  313. background: rgba(50, 50, 50, .1)
  314. }
  315.  
  316. img.flagged {
  317. border-color: red
  318. }
  319.  
  320. img.has-children {
  321. border-color: #0f0
  322. }
  323.  
  324. img.has-parent {
  325. border-color: #cc0
  326. }
  327.  
  328. img.pending {
  329. border-color: #00f
  330. }
  331.  
  332. img.video {
  333. border-color: #00f
  334. }
  335.  
  336. div#post-add p#scale {
  337. color: #999
  338. }
  339.  
  340. div#note-container > div.note-body {
  341. background: #ffe;
  342. border-color: #000;
  343. color: #000
  344. }
  345.  
  346. div#note-container > div.note-body > p.tn {
  347. color: gray
  348. }
  349.  
  350. tn {
  351. color: gray
  352. }
  353.  
  354. div#note-container > div.note-box {
  355. border-color: #000;
  356. background: #ffe
  357. }
  358.  
  359. div#note-container > div.note-box > div.note-corner {
  360. background: #000
  361. }
  362.  
  363. div#note-container > div.unsaved {
  364. background: #fff;
  365. border-color: red
  366. }
  367.  
  368. div#note-container > div.unsaved > div.note-corner {
  369. background: red
  370. }
  371.  
  372. div#edit-box {
  373. background: #fff
  374. }
  375.  
  376. div.response-list > div.post > div.content > div.footer {
  377. color: #ccc
  378. }
  379.  
  380. div.response-list > div.post > div.content > div.footer a {
  381. color: #666
  382. }
  383.  
  384. #navbar li.current-page a {
  385. color: #fff
  386. }
  387.  
  388. hr {
  389. border-color: hsla(114, 56%, 33%, .3)
  390. }
  391.  
  392. hr.light {
  393. border-color: hsla(114, 56%, 66%, .2)
  394. }
  395.  
  396. div.mailbody {
  397. background-color: hsl(0, 100%, 100%, .3);
  398. border-color: hsla(0, 0%, 93%, .5)
  399. }
  400.  
  401. .awesomeplete > ul > li {
  402. color: #009
  403. }
  404.  
  405. .awesomplete > ul > li:hover, .awesomplete > ul > li[aria-selected=true] {
  406. background: #d2ffcd;
  407. color: #009
  408. }
  409.  
  410. .awesomplete mark {
  411. background: rgba(255, 255, 0, .7);
  412. color: #000
  413. }
  414.  
  415. .awesomplete > ul {
  416. background: #fff
  417. }
  418.  
  419. .awesomplete > ul {
  420. background: linear-gradient(to bottom right, hsla(114, 55%, 80%, 1), hsla(114, 55%, 80%, 0.8));
  421. border: 1px solid rgba(0, 0, 0, .3);
  422. box-shadow: .05em .2em .6em rgba(0, 0, 0, .2)
  423. }
  424.  
  425. table.highlightable > tbody > tr:hover {
  426. background: #fff2;
  427. }
  428. tr.tableheader, thead tr {
  429. background: #fff4 !important;
  430. }
  431.  
  432. div.quote {
  433. background: #fff2;
  434. border-color: #fff3;
  435. }
  436.  
  437. div#header {
  438. ul:is(#navbar, #subnavbar) {
  439. li.current-page {
  440. background: #448;
  441. a {
  442. color: #eee;
  443. }
  444. }
  445. }
  446. ul#subnavbar {
  447. background: #222;
  448. }
  449. }
  450. div.sidebar {
  451. color: #668;
  452. }
  453.  
  454. #status-notices {
  455. display: flex;
  456. flex-flow: row wrap;
  457. > br {
  458. display: none;
  459. }
  460. }
  461.  
  462. #post-list div#paginator {
  463. position: fixed;
  464. inset: auto 0 0 auto;
  465. margin: 0;
  466. padding: 8px;
  467. background: #222;
  468. border-radius: 4px 0 0 0;
  469. }
  470. div#paginator {
  471. a, b {
  472. display: inline-block;
  473. margin: 0 4px;
  474. padding: 4px 8px;
  475. min-width: 2ch;
  476. }
  477. a:hover {
  478. background: #aad4;
  479. color: #aad;
  480. }
  481. .manual-page-chooser {
  482. input {
  483. padding: 4px 8px;
  484. background: revert;
  485. }
  486. }
  487. }
  488.  
  489. div.tag-search {
  490. position: absolute;
  491. inset: 8px auto auto 400px;
  492. width: auto;
  493. display: flex;
  494. flex-flow: row;
  495. align-items: baseline;
  496. align-content: center;
  497. gap: 10px;
  498. form {
  499. display: contents;
  500. }
  501. input {
  502. padding: 3px 6px !important;
  503. }
  504. input[type=text] {
  505. width: 500px;
  506. }
  507. br {
  508. display: none;
  509. }
  510. }
  511. #post-view {
  512. img {
  513. max-width: calc(100vw - 270px);
  514. width: auto;
  515. height: auto;
  516. }
  517. }
  518.  
  519. #navlinksContainer {
  520. position: absolute;
  521. inset: 47px 0 auto auto;
  522. display: flex;
  523. flex-flow: row;
  524. align-items: baseline;
  525. gap: 10px;
  526. background: none;
  527. border: none;
  528. [style="text-align: center"] {
  529. max-width: 200px;
  530. overflow: hidden;
  531. white-space: nowrap;
  532. text-overflow: ellipsis;
  533. }
  534. a {
  535. margin: 0;
  536. padding: 8px;
  537. background: #222;
  538. border-radius: 4px 0 0 0;
  539. }
  540. }
  541. }