☰

Patreon responsive + customizations

Patreon website is more suitable for wide screens.

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

  1. /* ==UserStyle==
  2. @name           Patreon responsive + customizations
  3. @version        1.1.3
  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.     /* Custom font size */
  43.     :root,
  44.     button,
  45.     div,
  46.     input,
  47.     label,
  48.     [data-tag*="settings"],
  49.     li,
  50.     p,
  51.     p span,
  52.     [data-tag="chats-send-message-form"] textarea,
  53.     .cuiKYE,
  54.     .cQjDCC,
  55.     .fxePXf,
  56.     .jYEggK {
  57.         font-size: fontsize !important;
  58.     }    
  59.     .vWGl {
  60.         font-size: calc(var(--fontsize) - .2rem)!important;
  61.     }
  62.     span > .vWGl {
  63.         font-size: inherit !important;
  64.     } 
  65.     .gxOVkK {
  66.         font-size: calc(var(--fontsize) - .4rem)!important;
  67.     }
  68.     
  69.     if nocomments {
  70.         [data-tag="content-card-comment-thread-container"],
  71.         .bmnjsr {
  72.             display: none !important;
  73.         }
  74.     }
  75.     
  76.     if nojump {
  77.         .sc-jrQzAO.bAzCwM,
  78.         .sc-o4u8m1-2 > div > div:nth-child(2),
  79.         [data-tag="upgrade-incentive-description"],
  80.         [data-tag="upgrade-free-membership-button"],
  81.         [data-tag="free-membership-upgrade-cta"] {
  82.             display: none !important;
  83.             height: 0 !important;
  84.             max-height: 0 !important;
  85.         }
  86.     }
  87. }
  88.  
  89. @-moz-document url("https://www.patreon.com/home") {
  90.     if bigimages {
  91.         * {
  92.             aspect-ratio: auto !important;
  93.         }
  94.         .dofSdt img {
  95.             min-width: 100% !important;
  96.             object-fit: cover !important;
  97.         }  
  98.         [data-tag="launcher-post-card"] > div > div > 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,[data-tag="chip-container"],.jhLQmG,.jhLQmG div,.dgQBHC) {
  99.             display: flex !important;
  100.             flex-basis: 100% !important;
  101.             flex-direction: column !important;
  102.             max-width: 100% !important;
  103.         }
  104.         img,
  105.         div[elevation="subtle"] > div,
  106.         .djipQD > .image-grid {
  107.             display: block !important;
  108.             height: auto !important;
  109.             max-height: 100% !important;
  110.             min-width: 100% !important;
  111.             object-fit: contain !important;
  112.         }
  113.         img[loading="eager"] {
  114.             width: auto !important;
  115.         }
  116.         .image-grid + .image-grid {
  117.             margin-top: 2px;
  118.         }
  119.         
  120.         .image-carousel {
  121.             height: 112px;
  122.             object-fit: contain;
  123.             width: auto !important;
  124.         }
  125.         /* Little unblur */
  126.         .dgyaSI {
  127.             background: transparent !important;
  128.             opacity: 0 !important;
  129.         }
  130.         .image-grid > img {
  131.             background: transparent !important;
  132.             object-fit: contain !important;
  133.             min-width: 100% !important;
  134.         }
  135.         [data-tag="locked-badge-button"] p {
  136.             padding-right: 3em;
  137.         }
  138.         [width="fluid"] a {
  139.             max-width: 96% !important;
  140.             overflow: hidden !important;
  141.         }
  142.         
  143.         header {
  144.             height: 0 !important;
  145.         }
  146.         
  147.         a,
  148.         img,
  149.         .jQZWvF {
  150.             overflow: hidden !important;
  151.         }
  152.     }
  153.     
  154.     if widemode {
  155.         main > div > section > div {
  156.             max-width: 100% !important;
  157.         }
  158.     }
  159. }
  160.  
  161. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/posts") {
  162.     if bigimages {
  163.         * {
  164.             aspect-ratio: auto !important;
  165.         }
  166.         .dofSdt img {
  167.             min-width: 100% !important;
  168.             object-fit: cover !important;
  169.         }  
  170.         [data-tag="post-card"] > div > 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,[data-tag="chip-container"],.jhLQmG,.jhLQmG div,.dgQBHC) {
  171.             display: flex !important;
  172.             flex-basis: 100% !important;
  173.             flex-direction: column !important;
  174.             max-width: 100% !important;
  175.         }
  176.         img,
  177.         div[elevation="subtle"] > div,
  178.         .djipQD > .image-grid {
  179.             display: block !important;
  180.             height: auto !important;
  181.             max-height: 100% !important;
  182.             max-width: 100% !important;
  183.             min-width: 100% !important;
  184.             object-fit: contain !important;
  185.         }
  186.         
  187.         img[loading="eager"] {
  188.             aspect-ratio: 1 / 1 !important;
  189.             height: 100% !important;
  190.             object-fit: cover !important;
  191.         }
  192.         .image-grid + .image-grid {
  193.             margin-top: 2px;
  194.         }
  195.         
  196.         .image-carousel {
  197.             height: 112px;
  198.             object-fit: contain;
  199.             width: auto !important;
  200.         }
  201.         /* Little unblur */
  202.         .dgyaSI {
  203.             background: transparent !important;
  204.             opacity: 0 !important;
  205.         }
  206.         .image-grid > img {
  207.             background: transparent !important;
  208.             object-fit: contain !important;
  209.             min-width: 100% !important;
  210.         }
  211.         [data-tag="locked-badge-button"] p {
  212.             padding-right: 3em;
  213.         }
  214.         [width="fluid"] a {
  215.             max-width: 96% !important;
  216.             overflow: hidden !important;
  217.         }
  218.         
  219.         header {
  220.             height: 417px !important;
  221.         }
  222.         
  223.         a,
  224.         img,
  225.         .jQZWvF {
  226.             overflow: hidden !important;
  227.         }
  228.     }
  229.     
  230.     if widemode {
  231.         main > div > div > div > div > div:nth-of-type(4) > div:nth-of-type(2) {
  232.             max-width: 100% !important;
  233.         }
  234.             
  235.         main > div > div > div > div > div > div:nth-of-type(2) > div > div {
  236.             grid-template-columns: 1fr auto auto !important;
  237.         }
  238.     }
  239. }
  240.  
  241. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/collections") {
  242.     if widemode {
  243.         main > div > div > div > div > div:nth-of-type(4) > div {
  244.             max-width: 100% !important;
  245.         }
  246.     }
  247. }
  248.  
  249. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/membership") {
  250.     if widemode {
  251.         main > div > div > div > div > div:nth-of-type(4) > div {
  252.             max-width: 100% !important;
  253.         }
  254.     }
  255. }
  256.  
  257. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/about") {
  258.     div.sc-xac35p-1.jhLQmG {
  259.         display: flex !important;
  260.         flex-direction: row !important;
  261.         justify-content: space-between !important;
  262.         width: 100% !important;
  263.     }
  264.     header {
  265.         height: 417px !important;
  266.     }
  267.     .sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
  268.         padding-right: 2em;
  269.     }
  270.     
  271.     if widemode {
  272.         main > div > div > div > div > div:nth-of-type(4) > div {
  273.             max-width: 100% !important;
  274.         }
  275.     }
  276. }
  277.  
  278. @-moz-document regexp("https://www\\.patreon\\.com/messages/[^?]+\\?mode=user&tab=direct-messages") {
  279.     if widemode {
  280.         [data-tag="chat-message"] > div {
  281.             max-width: 100% !important;
  282.         }
  283.         [data-tag="chat-message"] > div > div {
  284.             max-width: 100% !important;
  285.         }
  286.     }
  287. }
  288.  
  289. @-moz-document url-prefix("https://www.patreon.com/notifications") {
  290.     if widemode {
  291.         #__next > div:nth-child(5) > div {
  292.             max-width: 100% !important;
  293.         }
  294.     }
  295. }
  296.  
  297. @-moz-document url-prefix("https://www.patreon.com/settings") {
  298.     if widemode {
  299.         #__next > div:nth-child(5) > div,
  300.         main > div > div > div {
  301.             max-width: 100% !important;
  302.         }
  303.     }
  304. }
  305.  
  306. @-moz-document url-prefix("https://www.patreon.com/posts") {
  307.     if bigimages {
  308.         * {
  309.             aspect-ratio: auto !important;
  310.         }
  311.         .dofSdt img {
  312.             min-width: 100% !important;
  313.             object-fit: cover !important;
  314.         }  
  315.         [data-tag="post-card"] > div > 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,[data-tag="chip-container"],.jhLQmG,.jhLQmG div,.dgQBHC) {
  316.             display: flex !important;
  317.             flex-basis: 100% !important;
  318.             flex-direction: column !important;
  319.             max-width: 100% !important;
  320.         }
  321.         img,
  322.         div[elevation="subtle"] > div,
  323.         .djipQD > .image-grid {
  324.             height: auto !important;
  325.             max-height: 100% !important;
  326.             max-width: 100% !important;
  327.             min-width: 100% !important;
  328.             object-fit: contain !important;
  329.         }
  330.         
  331.         img[loading="eager"] {
  332.             aspect-ratio: 1 / 1 !important;
  333.             height: 100% !important;
  334.             object-fit: cover !important;
  335.         }
  336.         .image-grid + .image-grid {
  337.             margin-top: 2px;
  338.         }
  339.         
  340.         .image-carousel {
  341.             height: 112px;
  342.             object-fit: contain;
  343.             width: auto !important;
  344.         }
  345.         
  346.         /* Little unblur */
  347.         .dgyaSI {
  348.             background: transparent !important;
  349.             opacity: 0 !important;
  350.         }
  351.         .image-grid > img {
  352.             background: transparent !important;
  353.             object-fit: contain !important;
  354.             min-width: 100% !important;
  355.         }
  356.         [data-tag="locked-badge-button"] p {
  357.             padding-right: 3em;
  358.         }
  359.         [width="fluid"] a {
  360.             max-width: 96% !important;
  361.             overflow: hidden !important;
  362.         }
  363.         
  364.         header {
  365.             height: 0 !important;
  366.         }
  367.         
  368.         a,
  369.         img,
  370.         .jQZWvF {
  371.             overflow: hidden !important;
  372.         }
  373.     
  374.         if widemode {
  375.             main > div > div > div > div > div {
  376.                 max-width: 100% !important;
  377.             }
  378.             
  379.             main > div > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(3) {
  380.                 grid-template-columns: 1fr auto auto !important;
  381.             }
  382.             [data-tag="post-card"] p {
  383.                 padding-right: 20px !important;
  384.                 white-space: break-spaces !important;
  385.             }
  386.             [data-tag="content-card-comment-thread-container"] {
  387.                 padding-right: 50px !important;
  388.             }
  389.         }
  390.     }
  391.     if nojump {
  392.         main > div > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > div > div:first-child {
  393.             display: none;
  394.             height: 0;
  395.             margin-top: 0;
  396.             z-index: -9999;
  397.         }
  398.     }
  399. }