☰

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.11
  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.         * {
  44.             aspect-ratio: auto !important;
  45.         }
  46.         header {
  47.             height: 417px !important;
  48.         }
  49.         .dofSdt img {
  50.             min-width: 100% !important;
  51.             object-fit: cover !important;
  52.         }        
  53.         div[elevation="subtle"] div:not([data-tag="post-details"] div,[data-tag="content-card-comment-thread-container"] div,div[width="fluid"] div,[data-tag="locked-badge-button"] div) {
  54.             display: flex !important;
  55.             flex-basis: 100% !important;
  56.             flex-direction: column !important;
  57.         }
  58.         img,
  59.         div[elevation="subtle"] > div,
  60.         .djipQD > .image-grid {
  61.             display: block !important;
  62.             height: auto !important;
  63.             max-height: 100% !important;            
  64.             min-width: 100% !important;
  65.             object-fit: contain !important;
  66.         }
  67.         img[loading="eager"] {
  68.             width: auto !important;
  69.         }
  70.         .image-grid + .image-grid {
  71.             margin-top: 2px;
  72.         }
  73.         
  74.         .image-carousel {
  75.             height: 112px;
  76.             object-fit: contain;
  77.             width: auto !important;
  78.         }
  79.         /* Little unblur */
  80.         .dgyaSI {
  81.             background: transparent !important;
  82.             opacity: 0 !important;
  83.         }
  84.         .image-grid > img {
  85.             background: transparent !important;
  86.             object-fit: contain !important;
  87.             min-width: 100% !important;
  88.         }
  89.         .jQZWvF > div > div,
  90.         .image-grid div {
  91.             display: none !important;
  92.             height: 0 !important;
  93.             width: 0 !important;
  94.         }        
  95.         [data-tag="locked-badge-button"] p {
  96.             padding-right: 3em;
  97.         }
  98.     }
  99.     
  100.     /* Custom font size */
  101.     :root,
  102.     button,
  103.     div,
  104.     li,
  105.     p,
  106.     .cLOyGt,
  107.     .cuiKYE,
  108.     .cQjDCC,
  109.     .fxePXf,
  110.     .jYEggK {
  111.         font-size: fontsize !important;
  112.     }    
  113.     .vWGl {
  114.         font-size: calc(var(--fontsize) - .2rem)!important;
  115.     }
  116.     span > .vWGl {
  117.         font-size: inherit !important;
  118.     } 
  119.     .gxOVkK {
  120.         font-size: calc(var(--fontsize) - .4rem)!important;
  121.     }
  122.     
  123.     if nocomments {
  124.         [data-tag="content-card-comment-thread-container"],
  125.         .bmnjsr {
  126.             display: none !important;
  127.         }
  128.     }
  129.     
  130.     if nojump {
  131.         .sc-jrQzAO.bAzCwM,
  132.         .sc-o4u8m1-2 > div > div:nth-child(2),
  133.         [data-tag="upgrade-free-membership-button"],
  134.         [data-tag="free-membership-upgrade-cta"] {
  135.             display: none !important;
  136.             height: 0 !important;
  137.             max-height: 0 !important;
  138.         }
  139.     }
  140.     
  141.     if widemode {
  142.         section.fZbiny>div,
  143.         .bNdQpa,
  144.         .bnFcNI,
  145.         .cuHeCZ,
  146.         .gSEDWh,
  147.         .hGVSIy,
  148.         .idaEYe,
  149.         .kYRjdn,
  150.         .lghRlU,
  151.         .McnWk,
  152.         .PSylB {
  153.             max-width: 100% !important;
  154.         }
  155.         .gwGwhu {
  156.             padding: 0;
  157.         }
  158.  
  159.         .bcGqVn {
  160.             grid-template-columns: 80% 20%;
  161.         }
  162.  
  163.         .jwWBqC {
  164.             grid-column-end: span 1;
  165.         }
  166.         
  167.         .leSNuf:nth-child(odd)> .dGdDmr {
  168.             flex-direction: row-reverse !important;
  169.         }
  170.         
  171.         .sc-o4u8m1-4.hBubtn > div > div > h2 {
  172.             margin-top: 1rem;
  173.         }        
  174.         .dzWUmz,
  175.         .cgDWfu {
  176.             max-width: max-content !important;
  177.         }
  178.     }
  179. }
  180.  
  181. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/posts") {
  182.     div[elevation="subtle"] div:not(div:nth-child(2)>div,[data-tag="post-details"] div,[data-tag="content-card-comment-thread-container"] div,div[width="fluid"] div,[data-tag="locked-badge-button"] div) {
  183.         display: flex !important;
  184.         flex-basis: 100% !important;
  185.         flex-direction: column !important;
  186.     }
  187.     div[elevation="subtle"] div:nth-child(2) > div {
  188.         justify-content: center;
  189.     }
  190.     .sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
  191.         padding-right: 2em;
  192.     }
  193. }