☰

Patreon responsive + customizations

Patreon website is more suitable for wide screens.

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

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