☰

Rule34.Paheal.net – Dark Enhanced [Ath]

Dark theme for Paheal Rule 34 (Rule34.Paheal.net). All pages fully redesigned. Highly customizable: choosing controls below thumbnail, fonts, colors etc.

  1. /* ==UserStyle==
  2. @name           Rule34.Paheal.net – Dark Enhanced [Ath]
  3. @namespace      athari
  4. @version        1.0.0
  5. @description    Dark theme for Paheal Rule 34 (Rule34.Paheal.net). All pages fully redesigned. Highly customizable: choosing controls below thumbnail, fonts, colors etc.
  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.  
  12. @var            select   ath-thumb-image-fit      "Thumbnail: fit image"            ["contain:Letterboxed", "cover:Clip to square", "fill:Stretch to square"]
  13. @var            checkbox ath-thumb-show-type      "Thumbnail: show content type"    1
  14. @var            checkbox ath-thumb-show-download  "Thumbnail: show download button" 1
  15. @var            checkbox ath-thumb-show-tags      "Thumbnail: Tags: Show"           0
  16. @var            range    ath-thumb-tags-max-lines "Thumbnail: Tags: Max lines"      [3, 1, 8, 1]
  17. @var            select   ath-color-scheme         "Controls color scheme"           ["light:Light", "dark:Dark*"]
  18. @var            range    ath-sidebar-width        "Sidebar: Width"                  [250, 200, 400, 10, 'px']
  19. @var            text     ath-font-main-family     "Font: Main: Family"              "Segoe UI, Open Sans, Ubuntu, Arial, sans-serif"
  20. @var            number   ath-font-main-size       "Font: Main: Size"                [15, 'px']
  21. @var            text     ath-font-mono-family     "Font: Code: Monospace"           "Cascadia Code, Consolas, monospace"
  22. @var            text     ath-font-small-family    "Font: Small: Family"             "Montserrat, Ubuntu, Segoe UI, Arial, sans-serif"
  23. @var            number   ath-font-small-size      "Font: Small: Size"               [10, 'px']
  24.  
  25. @var            range    l "Lightness base"     [1.2, -2.0, 2.0, 0.02]
  26. @var            range    m "Lightness contrast" [-1.1, -2.0, 2.0, 0.02]
  27. @var            range    c "Chroma base"        [0.0, 0.0, 0.37, 0.01]
  28. @var            range    d "Chroma contrast"    [0.6, -2.0, 2.0, 0.02]
  29. @var            range    h "Hue base"           [0, 0, 360, 2]
  30. @var            range    i "Hue contrast"       [1.0, -2.0, 2.0, 0.05]
  31. @var            checkbox y "Invert images"      0
  32. ==/UserStyle== */
  33.  
  34. @-moz-document domain("rule34.paheal.net") {
  35.   /*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400;1,600&display=swap');*/
  36.   @font-face {
  37.     font-family: 'Montserrat';
  38.     font-style: normal;
  39.     font-weight: 400;
  40.     font-display: swap;
  41.     src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2'); /* latin-1 */
  42.   }
  43.   /*
  44.    * generated
  45.    * formula: dark-full
  46.    * site-name: rule34.paheal.net
  47.    * file-name: rule34v2.css
  48.    * url: https://rule34.paheal.net/data/cache/style/rule34v2.1739310587.b3d6ca90457f42ae26e6de657c233f7f.css
  49.    * file-name: menuh.css
  50.    * url: https://rule34.paheal.net/themes/rule34v2/menuh.css
  51.    */
  52.   :root {
  53.     /* color #ace4a3 n=12 rgb(172, 228, 163) oklch(0.86 0.11 141.12) */
  54.     --c-ace4a3: oklch(from #ace4a3 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  55.     /* color #7eb977 n=10 rgb(126, 185, 119) oklch(0.73 0.11 141.86) */
  56.     --c-7eb977: oklch(from #7eb977 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  57.     /* color black n=8 rgb(0, 0, 0) oklch(0 0 0) */
  58.     --c-black: oklch(from #000000 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  59.     /* color red n=6 rgb(255, 0, 0) oklch(0.63 0.26 29.23) */
  60.     --c-red: oklch(from #ff0000 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  61.     /* color #000099 n=5 rgb(0, 0, 153) oklch(0.31 0.21 264.05) */
  62.     --c-000099: oklch(from #000099 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  63.     /* color #ccc n=3 rgb(204, 204, 204) oklch(0.85 0 164.06) */
  64.     --c-ccc: oklch(from #ccc calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  65.     /* color blue n=2 rgb(0, 0, 255) oklch(0.45 0.31 264.05) */
  66.     --c-blue: oklch(from #0000ff calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  67.     /* color #882 n=2 rgb(136, 136, 34) oklch(0.61 0.12 109.48) */
  68.     --c-882: oklch(from #882 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  69.     /* color #9cd493 n=2 rgb(156, 212, 147) oklch(0.81 0.11 141.10) */
  70.     --c-9cd493: oklch(from #9cd493 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  71.     /* color #ddd n=2 rgb(221, 221, 221) oklch(0.90 0 156.04) */
  72.     --c-ddd: oklch(from #ddd calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  73.     /* color #dedede n=2 rgb(222, 222, 222) oklch(0.90 0 180) */
  74.     --c-dedede: oklch(from #dedede calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  75.     /* color #ff7 n=2 rgb(255, 255, 119) oklch(0.97 0.16 109.00) */
  76.     --c-ff7: oklch(from #ff7 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  77.     /* color #555 n=2 rgb(85, 85, 85) oklch(0.45 0 169.69) */
  78.     --c-555: oklch(from #555 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  79.     /* color green n=1 rgb(0, 128, 0) oklch(0.52 0.18 142.50) */
  80.     --c-green: oklch(from green calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  81.     /* color rosybrown n=1 rgb(188, 143, 143) oklch(0.69 0.05 18.57) */
  82.     --c-rosybrown: oklch(from #bc8f8f calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  83.     /* color #cc00cc n=1 rgb(204, 0, 204) oklch(0.59 0.27 328.36) */
  84.     --c-cc00cc: oklch(from #cc00cc calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  85.     /* color white n=1 rgb(255, 255, 255) oklch(1 0 180) */
  86.     --c-white: oklch(from #fff calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  87.     /* color #444 n=1 rgb(68, 68, 68) oklch(0.39 0 180) */
  88.     --c-444: oklch(from #444 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  89.   }
  90.   .admin {
  91.     background-color: var(--c-green);
  92.   }
  93.   .admin.protected {
  94.     background-color: var(--c-red);
  95.   }
  96.   .bbcode PRE.code {
  97.     background-color: var(--c-dedede);
  98.   }
  99.   .bbcode BLOCKQUOTE {
  100.     border: 1px solid var(--c-black);
  101.     background-color: var(--c-ddd);
  102.   }
  103.   .comment .info {
  104.     background-color: var(--c-ddd);
  105.     border: 1px solid var(--c-ccc);
  106.     box-shadow: 0 0 4px var(--c-black);
  107.   }
  108.   .command_example pre {
  109.     border: dashed 2px var(--c-black);
  110.   }
  111.   #flash {
  112.     background-color: var(--c-ff7);
  113.     color: var(--c-444);
  114.     border: 1px solid var(--c-882);
  115.   }
  116.   .autocomplete_completions {
  117.     border: 1px solid var(--c-ccc);
  118.     color: var(--c-black);
  119.     background-color: var(--c-white);
  120.   }
  121.   .autocomplete_completions .selected {
  122.     background-color: var(--c-ccc);
  123.   }
  124.   .bulk_selected {
  125.     outline: 3px solid var(--c-blue);
  126.   }
  127.   .tnc_bg {
  128.     background-color: var(--c-ace4a3);
  129.   }
  130.   .tnc {
  131.     background-color: var(--c-ace4a3);
  132.     border: 1px solid var(--c-7eb977);
  133.   }
  134.   :root {
  135.     --page: var(--c-ace4a3);
  136.     --text: var(--c-black);
  137.     --block: var(--c-ace4a3);
  138.     --block-border: var(--c-7eb977);
  139.   }
  140.   #header {
  141.     border-bottom: 1px solid var(--c-7eb977);
  142.     background-color: var(--c-ace4a3);
  143.   }
  144.   H1 A {
  145.     color: var(--c-black);
  146.   }
  147.   #flash {
  148.     background-color: var(--c-ff7);
  149.     border: 1px solid var(--c-882);
  150.   }
  151.   TABLE.zebra {
  152.     background-color: var(--c-ace4a3);
  153.     border: 1px solid var(--c-7eb977);
  154.   }
  155.   TABLE.zebra TD {
  156.     border-top: 1px solid var(--c-7eb977);
  157.   }
  158.   TABLE.zebra TR:nth-child(odd) {
  159.     background-color: var(--c-9cd493);
  160.   }
  161.   TABLE.zebra TR:nth-child(even) {
  162.     background-color: var(--c-ace4a3);
  163.   }
  164.   FOOTER {
  165.     border-top: 1px solid var(--c-7eb977);
  166.     background-color: var(--c-ace4a3);
  167.   }
  168.   A {
  169.     color: var(--c-000099);
  170.   }
  171.   A:hover {
  172.     color: var(--c-000099);
  173.   }
  174.   A:visited {
  175.     color: var(--c-000099);
  176.   }
  177.   A:active {
  178.     color: var(--c-000099);
  179.   }
  180.   CODE {
  181.     background-color: var(--c-dedede);
  182.   }
  183.   .comment .info {
  184.     background-color: var(--c-ace4a3);
  185.     border: 1px solid var(--c-7eb977);
  186.   }
  187.   SECTION > .blockbody,
  188.   .comment,
  189.   .setupblock {
  190.     background-color: var(--c-ace4a3);
  191.     border: 1px solid var(--c-7eb977);
  192.   }
  193.   SECTION > H3 {
  194.     background-color: var(--c-9cd493);
  195.     border: 1px solid var(--c-7eb977);
  196.   }
  197.   .thumb IMG {
  198.     border: 1px solid var(--c-7eb977);
  199.     background-color: var(--c-ace4a3);
  200.   }
  201.   .unread {
  202.     color: var(--c-red);
  203.   }
  204.   [data-tags~="ai-generated"] > A > IMG {
  205.     background-color: var(--c-rosybrown);
  206.   }
  207.   [data-tags~="animated"] > A > IMG {
  208.     background-color: var(--c-cc00cc);
  209.   }
  210.   [data-ext="mp4"] > A > IMG,
  211.   [data-ext="webm"] > A > IMG {
  212.     background-color: var(--c-blue);
  213.   }
  214.   @media (max-width: 750px) {
  215.     #nav-toggle A {
  216.       border: 1px solid var(--c-black);
  217.     }
  218.   }
  219.   a:link.menu {
  220.     color: var(--c-red);
  221.   }
  222.   a:visited.menu {
  223.     color: var(--c-red);
  224.   }
  225.   a:hover.menu {
  226.     color: var(--c-red);
  227.   }
  228.   a:active.menu {
  229.     color: var(--c-red);
  230.   }
  231.   #menuh a.sub_option {
  232.     border: 1px solid var(--c-555);
  233.   }
  234.   #menuh a {
  235.     background-color: var(--c-ace4a3);
  236.   }
  237.   #menuh a,
  238.   #menuh a:visited {
  239.     color: var(--c-000099);
  240.   }
  241.   #menuh a:hover {
  242.     color: var(--c-black);
  243.   }
  244.   #menuh a.parent,
  245.   #menuh a.parent:hover {
  246.     border: 1px solid var(--c-555);
  247.   }
  248.  
  249.   /* layout */
  250.  
  251.   /* crap */
  252.   #Friends_of_Pahealleft,
  253.   section[id$=main]:has( > div.blockbody > span[style*="font-size"] > a[href$="/bad_ads"]),
  254.   section[id$=main]:has( > div.blockbody > div[align="center"] > script[src$="/ad-provider.js"]),
  255.   section[id$=main]:has( > div.blockbody > div[style] > script[src$="/ad-provider.js"]),
  256.   section[id$=main]:has( > div.blockbody > div[style] > a[href$="/wiki/rules"]) {
  257.     display: none !important;
  258.   }
  259.  
  260.   nav,
  261.   #ImageInfo,
  262.   #comment-list-image,
  263.   #header {
  264.     table, thead, tbody, tfoot, tr, td, th {
  265.       display: contents;
  266.     }
  267.   }
  268.   table#header {
  269.     display: contents;
  270.   }
  271.  
  272.   body {
  273.     display: grid;
  274.     grid-template-areas:
  275.       "logo    menu     upload  "
  276.       "logo    login    upload  "
  277.       "logo    search   find    "
  278.       "sidebar image    image   "
  279.       "sidebar comments comments"
  280.       "footer  footer   footer  ";
  281.     grid-template-columns: var(--ath-sidebar-width) 1fr auto;
  282.     grid-template-rows: auto auto auto 1fr auto auto;
  283.   }
  284.  
  285.   #big-logo a {
  286.     grid-area: logo;
  287.     height: 104px !important;
  288.   }
  289.   .headbox input[name="search"] {
  290.     grid-area: search;
  291.     width: auto !important;
  292.     margin: 0 0 0 10px !important;
  293.     border-radius: 10px 0 0 10px !important;
  294.   }
  295.   .headbox input#submit:not(#\0) {
  296.     grid-area: find;
  297.     width: auto !important;
  298.     margin: 0 10px 0 0 !important;
  299.     border-left: none !important;
  300.     border-radius: 0 10px 10px 0 !important;
  301.   }
  302.   #Uploadhead {
  303.     grid-area: upload;
  304.     margin: 10px 10px 0 0;
  305.     border-radius: 10px !important;
  306.     h3 {
  307.       display: none;
  308.     }
  309.     .blockbody {
  310.       display: contents;
  311.       a:not(#\0) {
  312.         text-decoration: none;
  313.         --ph: 15px;
  314.         --pt: 5px;
  315.         --pb: 10px;
  316.         border-radius: 10px !important;
  317.       }
  318.     }
  319.   }
  320.   #mini-logo,
  321.   #nav-toggle {
  322.     display: none !important;
  323.   }
  324.   #Loginhead,
  325.   #UserBlockhead {
  326.     grid-area: login;
  327.     display: flex;
  328.     flex-flow: row;
  329.     vertical-align: baseline;
  330.     gap: 15px;
  331.     h3 {
  332.       display: contents;
  333.     }
  334.     .blockbody {
  335.       display: contents;
  336.       form {
  337.         display: flex;
  338.         flex-flow: row;
  339.         align-items: baseline;
  340.         gap: 15px;
  341.         margin: auto;
  342.       }
  343.       br {
  344.         display: none;
  345.       }
  346.     }
  347.   }
  348.   #Loginhead h3 {
  349.     display: none;
  350.   }
  351.   .headcol:has(#UserBlockhead) {
  352.     grid-area: login;
  353.     flex-flow: row;
  354.     vertical-align: baseline;
  355.     display: flex !important;
  356.     width: auto !important;
  357.     margin: auto !important;
  358.     padding: 4px 10px !important;
  359.     background: var(--block) !important;
  360.     border: solid 1px var(--block-border) !important;
  361.     border-radius: 10px;
  362.   }
  363.   nav {
  364.     grid-area: sidebar;
  365.     float: none !important;
  366.     width: auto !important;
  367.     margin: 0 !important;
  368.   }
  369.   article {
  370.     grid-area: image;
  371.     height: auto !important;
  372.     margin: 0 !important;
  373.   }
  374.   footer {
  375.     grid-area: footer;
  376.   }
  377.  
  378.   #comment-list-image {
  379.     grid-area: comments;
  380.     max-width: 1000px;
  381.     margin-inline: auto;
  382.     .comment:not(.comment_add) {
  383.       display: grid;
  384.       grid-template-areas:
  385.         "avatar name meta "
  386.         "avatar text reply";
  387.       grid-template-columns: minmax(calc(80px + 15px), max-content) 1fr auto;
  388.       grid-template-rows: calc(1rem + 10px) 1fr;
  389.       padding: 10px;
  390.       border-radius: 10px;
  391.       font-size: 0;
  392.       * {
  393.         z-index: 0;
  394.       }
  395.       .username,
  396.       .bbcode,
  397.       .info :is(img, time, a) {
  398.         font-size: 1rem;
  399.       }
  400.       .username {
  401.         grid-area: name;
  402.       }
  403.       .bbcode {
  404.         grid-area: text;
  405.       }
  406.       .info {
  407.         grid-area: 1 / 1 / span all / span all;
  408.         position: static;
  409.         visibility: visible;
  410.         display: grid;
  411.         grid-template-columns: subgrid;
  412.         grid-template-rows: subgrid;
  413.         box-shadow: none;
  414.         border: none;
  415.         padding: 0;
  416.         img {
  417.           grid-area: avatar;
  418.         }
  419.         time {
  420.           grid-area: meta;
  421.         }
  422.         a[href*=replyTo] {
  423.           grid-area: reply;
  424.           align-self: end;
  425.           justify-self: end;
  426.           padding-inline: 30px !important;
  427.           font-weight: normal;
  428.           text-decoration: none;
  429.         }
  430.         br {
  431.           display: none;
  432.         }
  433.       }
  434.     }
  435.     .comment_add {
  436.       border-radius: 10px;
  437.       form {
  438.         display: flex !important;
  439.         flex-flow: column;
  440.         gap: 10px;
  441.       }
  442.       textarea {
  443.         box-sizing: content-box;
  444.         min-height: 2lh;
  445.         max-height: 80vh;
  446.         width: auto !important;
  447.         field-sizing: content;
  448.         resize: none;
  449.       }
  450.       br {
  451.         display: none;
  452.       }
  453.     }
  454.   }
  455.   #comment-list-recent {
  456.     .comment {
  457.       margin: 0;
  458.       border-top-width: 0;
  459.     }
  460.     .more {
  461.       display: block;
  462.       padding: 5px;
  463.       border: solid 1px var(--block-border);
  464.       border-top-width: 0;
  465.       background: var(--block);
  466.       border-radius: 0 0 10px 10px !important;
  467.     }
  468.   }
  469.  
  470.   #menuh-container {
  471.     grid-area: menu;
  472.     width: auto !important;
  473.   }
  474.   #menuh {
  475.     width: auto !important;
  476.     display: flex !important;
  477.     flex-flow: row wrap !important;
  478.     gap: 10px;
  479.     float: none !important;
  480.     a[target="_top"], /* "Web Chat" (dead link), "Live webcams!" (ad) */
  481.     a[href^="mailto:dmca"] /* "DMCA/Abuse" */ { 
  482.       background: red !important;
  483.       display: none !important;
  484.     }
  485.     a {
  486.       background: none !important;
  487.     }
  488.     a.top_parent,
  489.     ul:has(> li > a[target="_top"] b),
  490.     li:has(> a.parent[target="_top"]),
  491.     li:has(> a.parent[href="#"]) {
  492.       display: none !important;
  493.     }
  494.     ul {
  495.       position: static !important;
  496.       width: auto !important;
  497.       display: flex !important;
  498.       flex-flow: row !important;
  499.       gap: 10px;
  500.       float: none !important;
  501.       margin: 0 !important;
  502.       padding: 0 !important;
  503.       li {
  504.         a {
  505.           border: none !important;
  506.         }
  507.       }
  508.     }
  509.     > ul {
  510.       padding: 4px 10px !important;
  511.       background: var(--block);
  512.       border: solid 1px var(--block-border);
  513.       border-radius: 10px;
  514.     }
  515.   }
  516.  
  517.   #Popular_Tagsleft,
  518.   #Refine_Searchleft,
  519.   #Tagsleft {
  520.     table.tag_list {
  521.       display: grid;
  522.       grid-template-columns: auto 1fr auto;
  523.       gap: 2px 10px;
  524.       tr {
  525.         display: grid;
  526.         grid-area: auto / 1 / span 1 / span all;
  527.         grid-template-columns: subgrid;
  528.       }
  529.       th, td {
  530.         display: block;
  531.       }
  532.       colgroup {
  533.         display: none;
  534.       }
  535.       a {
  536.         font-weight: normal;
  537.       }
  538.       .tag_name_cell {
  539.         text-align: left;
  540.       }
  541.       .tag_count_cell {
  542.         text-align: right;
  543.       }
  544.       .tag_count::before,
  545.       .tag_count::after {
  546.         content: none !important;
  547.       }
  548.     }
  549.   }
  550.  
  551.   #Navigationleft {
  552.     position: relative;
  553.     z-index: 100;
  554.     a {
  555.       display: inline-block !important;
  556.       font-weight: normal !important;
  557.       height: auto !important;
  558.       vertical-align: baseline !important;
  559.     }
  560.     input[type=search] {
  561.       anchor-name: --ath-anchor-search-nav;
  562.     }
  563.     .autocomplete_completions {
  564.       display: block !important;
  565.       position-anchor: --ath-anchor-search-nav;
  566.       inset: anchor(bottom) auto auto anchor(left) !important;
  567.     }
  568.   }
  569.   .autocomplete_completions {
  570.     min-width: 200px !important;
  571.     max-width: 400px !important;
  572.   }
  573.  
  574.   form[action="/numeric_score_vote"] {
  575.     position: relative;
  576.     box-sizing: border-box;
  577.     display: inline-block;
  578.     width: 40px;
  579.     margin: 0 3px !important;
  580.     &::after {
  581.       position: absolute;
  582.       inset: 0 0 0 0;
  583.       font-size: 15px;
  584.       line-height: 22px;
  585.       pointer-events: none;
  586.     }
  587.     &:has(input[name="vote"][value="1"])::after {
  588.       content: "👍";
  589.     }
  590.     &:has(input[name="vote"][value="0"])::after {
  591.       content: "⭕";
  592.     }
  593.     &:has(input[name="vote"][value="-1"])::after {
  594.       content: "👎";
  595.     }
  596.     &:has(input[type=submit]:active)::after {
  597.       margin: 1px -1px -1px 1px;
  598.     }
  599.     input[type=submit]:not(#\0) {
  600.       color: #0000 !important;
  601.       padding: 4px 10px !important;
  602.       &:active {
  603.         padding: 4px 10px !important;
  604.       }
  605.     }
  606.     + form[action="/numeric_score_vote"] {
  607.       margin-left: 5px;
  608.     }
  609.   }
  610.  
  611.   .shm-image-list {
  612.     display: grid !important;
  613.     grid-template-columns: repeat(auto-fit, calc(var(--thumb-width) + 20px));
  614.     align-items: center;
  615.     justify-content: center;
  616.     gap: 4px;
  617.     .shm-thumb {
  618.       grid-row-end: span 3;
  619.       display: grid !important;
  620.       grid-template-columns: subgrid;
  621.       grid-template-rows: subgrid;
  622.       margin: 0 10px 10px 0;
  623.       .shm-thumb-link {
  624.         display: contents;
  625.         img {
  626.           grid-row: 1;
  627.           display: block;
  628.           margin: auto;
  629.           object-fit: var(--ath-thumb-image-fit);
  630.           @container not style(--ath-thumb-image-fit: contain) {
  631.             width: var(--thumb-width);
  632.             height: var(--thumb-height);
  633.           }
  634.         }
  635.         @container style(--ath-thumb-show-tags: 1) {
  636.           &::after {
  637.             grid-row: 2;
  638.             content: " ";
  639.             display: block;
  640.             background: var(--block);
  641.             border: solid 1px var(--block-border);
  642.             border-radius: 4px;
  643.           }
  644.         }
  645.       }
  646.       @container style(--ath-thumb-show-tags: 1) {
  647.         &::after {
  648.           --ath-thumb-tags-max-lines: 4;
  649.           grid-row: 2;
  650.           content: attr(data-tags);
  651.           display: block;
  652.           display: -webkit-box;
  653.           display: box;
  654.           max-height: var(--ath-thumb-tags-max-lines) * 1lh;
  655.           margin: auto;
  656.           padding: 2px 4px 5px;
  657.           overflow: hidden;
  658.           text-overflow: ellipsis;
  659.           -webkit-line-clamp: var(--ath-thumb-tags-max-lines);
  660.           line-clamp: var(--ath-thumb-tags-max-lines);
  661.           -webkit-box-orient: vertical;
  662.           text-align: center;
  663.           font-family: var(--ath-font-small-family);
  664.           font-size: var(--ath-font-small-size);
  665.           line-height: 1.1;
  666.         }
  667.       }
  668.       @container style(--ath-thumb-show-download: 1) {
  669.         a:not([class]) {
  670.           --pt: 0px;
  671.           --pb: 2px;
  672.           --ph: 8px;
  673.           grid-row: 3;
  674.           font-size: 0;
  675.           font-weight: normal;
  676.           margin: 0 0 0 auto;
  677.           &::before {
  678.             content: "Download";
  679.             font-size: 1rem;
  680.           }
  681.         }
  682.       }
  683.       @container style(--ath-thumb-show-type: 1) {
  684.         &::before {
  685.           grid-row: 3;
  686.           content: attr(data-ext);
  687.           margin: 0 auto auto 0;
  688.           padding: 0px 5px 1px;
  689.           background: var(--block);
  690.           border: solid 1px var(--block-border);
  691.           border-radius: 4px;
  692.           text-transform: uppercase;
  693.           z-index: 1;
  694.         }
  695.       }
  696.       @container style(--ath-thumb-show-download: 0) {
  697.         a:not([class]) {
  698.           display: none;
  699.         }
  700.         &::before {
  701.           margin-left: auto;
  702.         }
  703.       }
  704.       @container style(--ath-thumb-show-type: 0) {
  705.         a:not([class]) {
  706.           margin-right: auto;
  707.         }
  708.       }
  709.       br {
  710.         display: none;
  711.       }
  712.     }
  713.   }
  714.  
  715.   #paginator {
  716.     font-size: 0;
  717.     .blockbody {
  718.       a, b {
  719.         box-sizing: border-box;
  720.         font-size: 1rem;
  721.         font-weight: normal;
  722.         text-decoration: none;
  723.       }
  724.       a {
  725.         --pv: 5px;
  726.         --ph: 20px;
  727.         display: inline-block;
  728.         min-width: 55px;
  729.         margin: 5px 0;
  730.         border-radius: 10px 0 0 10px !important;
  731.         &:active {
  732.           z-index: 100;
  733.           margin-top: 0 !important; /* workaround for resize bug */
  734.         }
  735.       }
  736.       :is(a, b) + a {
  737.         border-radius: 0 !important;
  738.       }
  739.       a:has(+ br),
  740.       a:not(:has(+ :is(a, b))) {
  741.         border-radius: 0 10px 10px 0 !important;
  742.       }
  743.       b a {
  744.         border: none !important;
  745.         background: none !important;
  746.         font-weight: bold;
  747.         &:is(:hover, :active, :focus) {
  748.           border: none !important;
  749.           background: none !important;
  750.           outline: none !important;
  751.         }
  752.       }
  753.     }
  754.   }
  755.  
  756.   section#ImageInfo {
  757.     justify-self: center;
  758.   }
  759.   .image_info {
  760.     --row-gap: 5px;
  761.     --column-gap: 15px;
  762.     width: auto !important;
  763.     max-width: none !important;
  764.     margin-left: var(--column-gap);
  765.     display: grid !important;
  766.     grid-template-areas:
  767.       "user-h user   avatar"
  768.       ".      info   avatar"
  769.       ".      lock   avatar"
  770.       "tags-h tags   tags  "
  771.       "link-h link   link  "
  772.       ".      submit submit"
  773.     ;
  774.     grid-template-columns: auto minmax(500px, auto) 80px;
  775.     justify-items: start;
  776.     justify-content: center;
  777.     gap: var(--row-gap) var(--column-gap);
  778.     tr {
  779.       grid-area: 1 / 1 / span all / span all;
  780.       display: grid !important;
  781.       grid-template-columns: subgrid;
  782.       grid-template-rows: subgrid;
  783.       pointer-events: none;
  784.       * {
  785.         pointer-events: all;
  786.       }
  787.     }
  788.     th, a {
  789.       width: auto !important;
  790.       max-width: none !important;
  791.       padding: 0 !important;
  792.       font-weight: normal !important;
  793.     }
  794.     div[style*="overflow: hidden"] {
  795.       display: contents !important;
  796.     }
  797.     [data-row="Uploader"] {
  798.       font-size: 0;
  799.       th, td > * {
  800.         font-size: 1rem;
  801.       }
  802.       .avatar {
  803.         grid-area: avatar;
  804.         background-color: #0005 !important;
  805.         filter: drop-shadow(1px 1px 3px #000);
  806.       }
  807.       th {
  808.         grid-area: user-h;
  809.         display: block !important;
  810.         &::after {
  811.           content: ":";
  812.         }
  813.       }
  814.       td:has(.username) {
  815.         grid-area: user;
  816.         display: block !important;
  817.         time::before {
  818.           content: " on ";
  819.         }
  820.       }
  821.     }
  822.     [data-row="Info"] {
  823.       th {
  824.         display: none !important;
  825.       }
  826.       td {
  827.         grid-area: info;
  828.         display: block !important;
  829.       }
  830.     }
  831.     [data-row="Locked"] {
  832.       grid-area: lock;
  833.       display: block !important;
  834.       th {
  835.         &::after {
  836.           content: ": ";
  837.         }
  838.       }
  839.     }
  840.     [data-row="Tags"] {
  841.       th a {
  842.         grid-area: tags-h;
  843.         &::after {
  844.           content: ":";
  845.         }
  846.       }
  847.       td {
  848.         grid-area: tags;
  849.         display: block !important;
  850.         span {
  851.           display: block !important;
  852.         }
  853.       }
  854.       textarea {
  855.         display: block !important;
  856.         height: auto !important;
  857.         min-height: 1rem !important;
  858.         margin: var(--row-gap) 0 0 0;
  859.         field-sizing: content;
  860.         resize: none;
  861.       }
  862.     }
  863.     [data-row="Source Link"] {
  864.       th a {
  865.         grid-area: link-h;
  866.         &::after {
  867.           content: ":";
  868.         }
  869.       }
  870.       td {
  871.         grid-area: link;
  872.         display: block !important;
  873.         span {
  874.           display: block !important;
  875.         }
  876.       }
  877.       input {
  878.         display: block !important;
  879.         margin: var(--row-gap) 0 0 0;
  880.       }
  881.     }
  882.     tr:not([data-row]):has(.edit[type="submit"]) {
  883.       td {
  884.         grid-area: submit;
  885.         display: block !important;
  886.         justify-self: center;
  887.         input:not(#\0) {
  888.           margin: 0;
  889.           padding-inline: 40px !important;
  890.         }
  891.       }
  892.     }
  893.     tr:not([data-row]):not(:has(.edit[type="submit"])) /* unknown rows */ {
  894.       display: none !important;
  895.     }
  896.   }
  897.  
  898.   #Tagsmain {
  899.     .blockbody {
  900.       text-align: left;
  901.       * {
  902.         font-weight: normal;
  903.       }
  904.       p {
  905.         margin: 0;
  906.         font-family: var(--ath-font-mono-family);
  907.         a {
  908.           font-family: var(--ath-font-main-family);
  909.           text-align: left;
  910.           margin-left: 10px;
  911.         }
  912.         a::before, a::after {
  913.           white-space: pre;
  914.         }
  915.         br + a {
  916.           margin-left: 0;
  917.           &::before {
  918.             content: ":  ";
  919.             color: var(--text);
  920.             text-decoration-color: var(--block);
  921.           }
  922.         }
  923.         a:has(+ a)::after {
  924.           content: ",";
  925.         }
  926.         br {
  927.           display: none;
  928.         }
  929.       }
  930.     }
  931.   }
  932.  
  933.   /* color fixes */
  934.   :root {
  935.     color-scheme: var(--ath-color-scheme);
  936.     --c-000099-t: oklch(0.77 0.12 110);
  937.     --c-000099-x: oklch(from var(--c-000099-t) calc((l - var(--l)) / var(--m)) calc((c - var(--c)) / var(--d)) calc((h - var(--h)) / var(--i)));
  938.     --c-000099: oklch(from var(--c-000099-x) calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  939.     --c-black-t: oklch(1.0 0.03 110);
  940.     --c-black-x: oklch(from var(--c-black-t) calc((l - var(--l)) / var(--m)) calc((c - var(--c)) / var(--d)) calc((h - var(--h)) / var(--i)));
  941.     --c-black: oklch(from var(--c-black-x) calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h));
  942.     --text: var(--c-black);
  943.     font-size: var(--ath-font-main-size);
  944.     font-family: var(--ath-font-main-family);
  945.   }
  946.   body {
  947.     --gradient-main: oklch(from var(--block) calc(l * (1 + var(--m) * 0.3)) c h);
  948.     --gradient-line: oklch(from var(--block-border) calc(l * (1 + var(--m) * 0.3)) c h);
  949.     color: var(--text);
  950.     /*background-image: repeating-linear-gradient(
  951.       calc(-1turn / 8),
  952.       var(--gradient-main) calc(sqrt(2) / 2 * -1 * 1px),
  953.       var(--gradient-main) calc(sqrt(2) / 2 * 3 * 1px),
  954.       var(--gradient-line) calc(sqrt(2) / 2 * 3 * 1px),
  955.       var(--gradient-line) calc(sqrt(2) / 2 * 4 * 1px)
  956.     );*/
  957.     background: oklch(from var(--block) calc(l * (1 + var(--m) * 0.25)) c h);
  958.   }
  959.  
  960.   hr {
  961.     border-color: var(--block-border);
  962.   }
  963.   blockquote {
  964.     border-color: oklch(from #8888 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h)) !important;
  965.     background-color: oklch(from #ddd8 calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h)) !important;
  966.     margin: 0.5em 0 0.5em 2em !important;
  967.   }
  968.  
  969.   h3 {
  970.     border-radius: 8px !important;
  971.     margin: 10px !important;
  972.     /*box-shadow: 1px 1px 3px 3px #000;*/
  973.     filter: drop-shadow(1px 1px 3px #000);
  974.     &:has(+ .blockbody:not([style*="display: none"])) {
  975.       border-radius: 8px 8px 0 0 !important;
  976.       margin-bottom: 0 !important;
  977.     }
  978.   }
  979.   .blockbody {
  980.     border-radius: 8px !important;
  981.     margin: 10px !important;
  982.     /*box-shadow: 1px 1px 3px 3px #000;*/
  983.     filter: drop-shadow(1px 1px 3px #000);
  984.     h3 + &:not([style*="display: none"]) {
  985.       border-radius: 0 0 8px 8px !important;
  986.       border-top-width: 0 !important;
  987.       margin-top: 0 !important;
  988.     }
  989.   }
  990.  
  991.   input:is([type=text], [type=file], [type=search], [type=password]):not(#\0),
  992.   select:not(#\0),
  993.   textarea:not(#\0) {
  994.     padding: 0.3rem 0.6rem;
  995.     border: solid 1px var(--block-border);
  996.     border-radius: 4px;
  997.     color: var(--text);
  998.     accent-color: var(--block-border);
  999.     background-color: oklch(from var(--block) calc(l * (1 + var(--m) * 0.15)) c h);
  1000.     background-image:
  1001.       linear-gradient(0deg, #0000 0%, #0003 90%, #0004 100%),
  1002.       linear-gradient(0deg, #fff0 0%, #fff1 10%, #fff0 80%)
  1003.       !important;
  1004.     border-color: oklch(from var(--block-border) calc(l * (1 + var(--m) * 0.1)) c h);
  1005.     font: 1rem var(--ath-font-main-family);
  1006.     &[type=file] {
  1007.       box-sizing: border-box;
  1008.       padding: 0;
  1009.       border-radius: 5px 4px 4px 5px;
  1010.     }
  1011.     &:is(:focus) {
  1012.       outline: solid 2px oklch(from var(--block-border) calc(l * (1 + var(--m) * -0.4)) c h);
  1013.       filter: drop-shadow(0 0 0 2px #000);
  1014.     }
  1015.     &:is(:hover) {
  1016.       background-color: oklch(from var(--block) calc(l * (1 + var(--m) * 0.4)) c h);
  1017.     }
  1018.     &:is(:focus, :active) {
  1019.       background-color: oklch(from var(--block) calc(l * (1 + var(--m) * 0.4)) c h);
  1020.     }
  1021.     &::placeholder {
  1022.       color: oklch(from var(--text) calc(l * (1 + var(--m) * 0.4)) c h);
  1023.     }
  1024.   }
  1025.   select option:hover,
  1026.   select option:checked {
  1027.     background-color: var(--page) !important;
  1028.   }
  1029.  
  1030.   #Navigationleft a,
  1031.   #paginator a,
  1032.   .comment .info a,
  1033.   .shm-thumb a:not([class]),
  1034.   input[type=file]::-webkit-file-upload-button,
  1035.   a[href="/upload"]:not(#\0),
  1036.   input:is([type=button], [type=submit]):not(#\0),
  1037.   button:not(#\0) {
  1038.     --pv: 0.3rem;
  1039.     --ph: 0.6rem;
  1040.     --pt: var(--pv);
  1041.     --pr: var(--ph);
  1042.     --pb: var(--pv);
  1043.     --pl: var(--ph);
  1044.     padding: var(--pt) var(--pr) var(--pb) var(--pl) !important;
  1045.     border: solid 1px var(--block-border) !important;
  1046.     border-radius: 4px !important;
  1047.     cursor: pointer;
  1048.     color: var(--text);
  1049.     accent-color: var(--block-border);
  1050.     background-color: oklch(from var(--block) calc(l * (1 + var(--m) * -0.4)) c h) !important;
  1051.     background-image:
  1052.       linear-gradient(180deg, #0000 0%, #0003 90%, #0004 100%),
  1053.       linear-gradient(180deg, #fff0 0%, #fff1 20%, #fff0 80%)
  1054.       !important;
  1055.     border-color: oklch(from var(--block-border) calc(l * (1 + var(--m) * -0.2)) c h) !important;
  1056.     text-decoration: none;
  1057.     filter: drop-shadow(0 0 1px #000);
  1058.     &:is(:focus) {
  1059.       outline: solid 2px oklch(from var(--block-border) calc(l * (1 + var(--m) * -0.4)) c h);
  1060.     }
  1061.     &:is(:hover) {
  1062.       background-color: oklch(from var(--block) calc(l * (1 + var(--m) * -0.6)) c h) !important;
  1063.     }
  1064.     &:is(:focus, :active) {
  1065.       background-color: oklch(from var(--block) calc(l * (1 + var(--m) * -0.6)) c h) !important;
  1066.     }
  1067.     &:is(:active) {
  1068.       padding: calc(var(--pt) + 1px) calc(var(--pr) - 1px) calc(var(--pb) - 1px) calc(var(--pl) + 1px) !important;
  1069.       background-image:
  1070.         linear-gradient(0deg, #0000 0%, #0003 90%, #0004 100%),
  1071.         linear-gradient(0deg, #fff0 0%, #fff1 20%, #fff0 80%)
  1072.         !important;
  1073.     }
  1074.   }
  1075.  
  1076.   input:not([type=hidden]) + input,
  1077.   form + form {
  1078.     display: block;
  1079.     margin-top: 10px;
  1080.   }
  1081.  
  1082.   [style*="border: 1px solid #888; height: 22px; border-radius: 2px; background: #EEE;"] {
  1083.     height: auto !important;
  1084.   }
  1085.   [style*="text-align: center; font-weight: bold; font-size: 14px; color: red"] {
  1086.     color: oklch(from red calc(var(--l) + var(--m) * l) calc(var(--c) + var(--d) * c) calc(var(--h) + var(--i) * h)) !important;
  1087.   }
  1088.   #menuh a.sub_option, #menuh a.parent, #menuh a.parent:hover {
  1089.     border-color: var(--block-border);
  1090.   }
  1091.  
  1092.   @container style(--y: 1) {
  1093.     img {
  1094.       filter:
  1095.         hue-rotate(calc(var(--h) * 1deg))
  1096.         invert(calc(0.5 - sign(var(--m)) / 2))
  1097.         contrast(calc(1 + max(0, sign(var(--m))) * (var(--m) - 1)))
  1098.         contrast(calc(1 - max(0, 0 - sign(var(--m))) * (var(--m) + 1)))
  1099.         brightness(calc(pow(2, var(--l))))
  1100.       ;
  1101.     }
  1102.   }
  1103. }
  1104.  
  1105. @-moz-document url("https://rule34.paheal.net/help/search") {
  1106.   article {
  1107.     display: flex !important;
  1108.     flex-flow: row wrap;
  1109.     .blockbody {
  1110.       flex: 100%;
  1111.       padding: 10px 20px;
  1112.       column-width: 600px;
  1113.       column-gap: 40px;
  1114.       text-align: left;
  1115.       * {
  1116.         break-inside: avoid;
  1117.       }
  1118.       h3, p {
  1119.         margin: 0.5em 0;
  1120.         break-after: avoid;
  1121.       }
  1122.       .command_example {
  1123.         display: flex !important;
  1124.         margin: 0.5em 0;
  1125.         p {
  1126.           display: block !important;
  1127.           flex: 1;
  1128.           margin: 0;
  1129.         }
  1130.         pre {
  1131.           color: var(--c-000099);
  1132.           display: block !important;
  1133.           flex: min-content 0;
  1134.           min-width: 25ch;
  1135.           margin: 0;
  1136.           border: none;
  1137.           font-size: 0.9rem;
  1138.         }
  1139.         break-before: avoid;
  1140.       }
  1141.     }
  1142.     section {
  1143.       flex: 50%;
  1144.     }
  1145.     section:has(> .blockbody:only-child > p:first-child) /* header */,
  1146.     section:has(ul) /* file type */,
  1147.     #Generalmain {
  1148.       flex: 100%;
  1149.     }
  1150.   }
  1151. }