☰

Patreon responsive + customizations

Patreon website is more suitable for wide screens.

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

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