☰

Patreon responsive + customizations

Patreon website is more suitable for wide screens.

当前为 2024-06-28 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Patreon responsive + customizations
  3. @version        1.0.10
  4. @description    Patreon website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/patreon
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    checkbox    bigimages   "Big images"            1
  13. @var    text        fontsize    "Custom font size"      1.2rem
  14. @var    checkbox    nojump      "No Jump to level up"   1
  15. @var    checkbox    nocomments  "No comments"           0
  16. @var    checkbox    widemode    "Wide mode"             1
  17. ==/UserStyle== */
  18.  
  19. /* === Credits ===
  20. Website         https://breat.fr
  21. facebook        https://www.facebook.com/breatfroff
  22. mastodon        https://mastodon.social/@breat_fr
  23. telegram        https://t.me/breatfr
  24. vk              https://vk.com/breatfroff
  25. X (twitter)     https://x.com/breatfroff
  26. === Credits === */
  27. @-moz-document domain("patreon.com") {
  28.     :root {
  29.         --fontsize: fontsize;
  30.     }
  31.     
  32.     /* Loved */
  33.     [data-tag="like-button"][aria-checked="true"] > div > svg path {
  34.         fill: #c6374d;
  35.     }
  36.     
  37.     /* No double scrollbar */
  38.     #__next > .sc-uiqay7-0.cnwZin {
  39.         overflow: hidden;
  40.     }
  41.     
  42.     if bigimages {
  43.         .dKhesY,
  44.         .iYigLd {
  45.             aspect-ratio: auto;
  46.         }
  47.         .dlPwPr,
  48.         .ekfOSd,
  49.         .eBNJwE,
  50.         .fJakeo,
  51.         .gFIRbI,
  52.         .gFlvxH,
  53.         .grHANt,
  54.         .kBqPDk,
  55.         .kZrqiR {
  56.             display: block;
  57.             height: auto;
  58.             max-height: 100%;
  59.             min-width: 100%;
  60.             object-fit: contain !important;
  61.         }
  62.         .kZrqiR img {
  63.             margin-bottom: 2px;
  64.             object-fit: contain;
  65.         }
  66.         .image-carousel {
  67.             height: 112px;
  68.             object-fit: contain;
  69.             width: auto !important;
  70.         }
  71.         /* Little unblur */
  72.         .dgyaSI {
  73.             background: transparent !important;
  74.             opacity: 0 !important;
  75.         }
  76.         .image-grid > img {
  77.             background: transparent !important;
  78.         }
  79.         .jQZWvF > div > div,
  80.         .image-grid div {
  81.             display: none !important;
  82.             height: 0 !important;
  83.             width: 0 !important;
  84.         }
  85.     }
  86.     
  87.     /* Custom font size */
  88.     :root,
  89.     button,
  90.     div,
  91.     li,
  92.     p,
  93.     .cLOyGt,
  94.     .cuiKYE,
  95.     .cQjDCC,
  96.     .fxePXf,
  97.     .jYEggK {
  98.         font-size: fontsize !important;
  99.     }    
  100.     .vWGl {
  101.         font-size: calc(var(--fontsize) - .2rem)!important;
  102.     }
  103.     span > .vWGl {
  104.         font-size: inherit !important;
  105.     } 
  106.     .gxOVkK {
  107.         font-size: calc(var(--fontsize) - .4rem)!important;
  108.     }
  109.     
  110.     if nocomments {
  111.         [data-tag="content-card-comment-thread-container"],
  112.         .bmnjsr {
  113.             display: none !important;
  114.         }
  115.     }
  116.     
  117.     if nojump {
  118.         .sc-jrQzAO.bAzCwM,
  119.         .sc-o4u8m1-2 > div > div:nth-child(2),
  120.         [data-tag="upgrade-free-membership-button"],
  121.         [data-tag="free-membership-upgrade-cta"] {
  122.             display: none !important;
  123.             height: 0 !important;
  124.             max-height: 0 !important;
  125.         }
  126.     }
  127.     
  128.     if widemode {
  129.         section.fZbiny>div,
  130.         .bNdQpa,
  131.         .bnFcNI,
  132.         .cuHeCZ,
  133.         .gSEDWh,
  134.         .hGVSIy,
  135.         .idaEYe,
  136.         .kYRjdn,
  137.         .lghRlU,
  138.         .McnWk,
  139.         .PSylB {
  140.             max-width: 100% !important;
  141.         }
  142.         .gwGwhu {
  143.             padding: 0;
  144.         }
  145.  
  146.         .bcGqVn {
  147.             grid-template-columns: 80% 20%;
  148.         }
  149.  
  150.         .jwWBqC {
  151.             grid-column-end: span 1;
  152.         }
  153.         
  154.         .leSNuf:nth-child(odd)> .dGdDmr {
  155.             flex-direction: row-reverse !important;
  156.         }
  157.         
  158.         .sc-o4u8m1-4.hBubtn > div > div > h2 {
  159.             margin-top: 1rem;
  160.         }        
  161.         .dzWUmz,
  162.         .cgDWfu {
  163.             max-width: max-content !important;
  164.         }
  165.     }
  166. }