☰

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.9
  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.         .kZrqiR,
  44.         .gFIRbI,
  45.         .ekfOSd,
  46.         .dlPwPr,
  47.         .kBqPDk {
  48.             height: 100%;
  49.             max-height: 100%;
  50.         }
  51.         .gFIRbI,
  52.         .ekfOSd,
  53.         .kZrqiR {
  54.             display: block;
  55.         }
  56.         .kZrqiR img {
  57.             margin-bottom: 2px;
  58.             object-fit: cover;
  59.         }
  60.         .image-carousel {
  61.             height: 112px;
  62.             object-fit: cover;
  63.             width: auto;
  64.         }
  65.         /* Little unblur */
  66.         .dgyaSI {
  67.             background: transparent !important;
  68.             opacity: 0 !important;
  69.         }
  70.         .image-grid > img {
  71.             background: transparent !important;
  72.         }
  73.         .jQZWvF > div > div,
  74.         .image-grid div {
  75.             display: none !important;
  76.             height: 0 !important;
  77.             width: 0 !important;
  78.         }
  79.     }
  80.     
  81.     /* Custom font size */
  82.     :root,
  83.     button,
  84.     div,
  85.     li,
  86.     p,
  87.     .cuiKYE,
  88.     .cQjDCC,
  89.     .fxePXf,
  90.     .jYEggK {
  91.         font-size: fontsize !important;
  92.     }    
  93.     .vWGl {
  94.         font-size: calc(var(--fontsize) - .2rem)!important;
  95.     }
  96.     span > .vWGl {
  97.         font-size: inherit !important;
  98.     } 
  99.     .gxOVkK {
  100.         font-size: calc(var(--fontsize) - .4rem)!important;
  101.     }
  102.     
  103.     if nocomments {
  104.         [data-tag="content-card-comment-thread-container"],
  105.         .bmnjsr {
  106.             display: none !important;
  107.         }
  108.     }
  109.     
  110.     if nojump {
  111.         .sc-jrQzAO.bAzCwM,
  112.         .sc-o4u8m1-2 > div > div:nth-child(2),
  113.         [data-tag="upgrade-free-membership-button"],
  114.         [data-tag="free-membership-upgrade-cta"] {
  115.             display: none !important;
  116.             height: 0 !important;
  117.             max-height: 0 !important;
  118.         }
  119.     }
  120.     
  121.     if widemode {
  122.         section.fZbiny>div,
  123.         .bNdQpa,
  124.         .bnFcNI,
  125.         .cuHeCZ,
  126.         .hGVSIy,
  127.         .idaEYe,
  128.         .kYRjdn,
  129.         .lghRlU,
  130.         .McnWk,
  131.         .PSylB {
  132.             max-width: 100% !important;
  133.         }
  134.         .gwGwhu {
  135.             padding: 0;
  136.         }
  137.  
  138.         .bcGqVn {
  139.             grid-template-columns: 80% 20%;
  140.         }
  141.  
  142.         .jwWBqC {
  143.             grid-column-end: span 1;
  144.         }
  145.         
  146.         .leSNuf:nth-child(odd)> .dGdDmr {
  147.             flex-direction: row-reverse !important;
  148.         }
  149.         
  150.         .sc-o4u8m1-4.hBubtn > div > div > h2 {
  151.             margin-top: 1rem;
  152.         }        
  153.         .dzWUmz,
  154.         .cgDWfu {
  155.             max-width: max-content !important;
  156.         }
  157.     }
  158. }