Patreon responsive + customizations

Patreon website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name Patreon responsive + customizations
  3. @version 1.1.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. /* 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. [data-tag="comment-field"],
  54. .cuiKYE,
  55. .cQjDCC,
  56. .fxePXf,
  57. .jYEggK {
  58. font-size: fontsize !important;
  59. }
  60. .vWGl {
  61. font-size: calc(var(--fontsize) - .2rem)!important;
  62. }
  63. span > .vWGl {
  64. font-size: inherit !important;
  65. }
  66. .gxOVkK {
  67. font-size: calc(var(--fontsize) - .4rem)!important;
  68. }
  69.  
  70. if nocomments {
  71. [data-tag="content-card-comment-thread-container"],
  72. .bmnjsr {
  73. display: none !important;
  74. }
  75. }
  76.  
  77. if nojump {
  78. .sc-jrQzAO.bAzCwM,
  79. .sc-o4u8m1-2 > div > div:nth-child(2),
  80. [data-tag="upgrade-incentive-description"],
  81. [data-tag="upgrade-free-membership-button"],
  82. [data-tag="free-membership-upgrade-cta"] {
  83. display: none !important;
  84. height: 0 !important;
  85. max-height: 0 !important;
  86. }
  87. }
  88.  
  89. if widemode {
  90. main > section > div,
  91. main > div:nth-of-type(2),
  92. main > div:nth-of-type(2) > div > div,
  93. main > div > div > section > div {
  94. max-width: 100% !important;
  95. }
  96. [data-tag="account-menu"] {
  97. max-width: max-content;
  98. }
  99. }
  100. }
  101.  
  102. @-moz-document url("https://www.patreon.com/home") {
  103. if bigimages {
  104. * {
  105. aspect-ratio: auto !important;
  106. }
  107. .dofSdt img {
  108. min-width: 100% !important;
  109. object-fit: cover !important;
  110. }
  111. [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) {
  112. display: flex !important;
  113. flex-basis: 100% !important;
  114. flex-direction: column !important;
  115. max-width: 100% !important;
  116. }
  117. img,
  118. div[elevation="subtle"] > div,
  119. .djipQD > .image-grid {
  120. display: block !important;
  121. height: auto !important;
  122. max-height: 100% !important;
  123. min-width: 100% !important;
  124. object-fit: contain !important;
  125. }
  126. img[loading="eager"] {
  127. width: auto !important;
  128. }
  129. .image-grid + .image-grid {
  130. margin-top: 2px;
  131. }
  132.  
  133. .image-carousel {
  134. height: 112px;
  135. object-fit: contain;
  136. width: auto !important;
  137. }
  138. /* Little unblur */
  139. .dgyaSI {
  140. background: transparent !important;
  141. opacity: 0 !important;
  142. }
  143. .image-grid > img {
  144. background: transparent !important;
  145. object-fit: contain !important;
  146. min-width: 100% !important;
  147. }
  148. [data-tag="locked-badge-button"] p {
  149. padding-right: 3em;
  150. }
  151. [width="fluid"] a {
  152. max-width: 96% !important;
  153. overflow: hidden !important;
  154. }
  155.  
  156. header {
  157. height: 0 !important;
  158. }
  159.  
  160. a,
  161. img,
  162. .jQZWvF {
  163. overflow: hidden !important;
  164. }
  165. }
  166.  
  167. if widemode {
  168. main > div > section > div {
  169. max-width: 100% !important;
  170. }
  171. }
  172. }
  173.  
  174. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/home"), regexp("https://www\\.patreon\\.com/[^/]+/home\\?[^/]*") {
  175. if widemode {
  176. [data-tag="about-patron-view"] {
  177. max-width: 100% !important;
  178. }
  179. }
  180. }
  181.  
  182. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/posts") {
  183. if bigimages {
  184. * {
  185. aspect-ratio: auto !important;
  186. }
  187. .dofSdt img {
  188. min-width: 100% !important;
  189. object-fit: cover !important;
  190. }
  191. [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) {
  192. display: flex !important;
  193. flex-basis: 100% !important;
  194. flex-direction: column !important;
  195. max-width: 100% !important;
  196. }
  197. img,
  198. div[elevation="subtle"] > div,
  199. .djipQD > .image-grid {
  200. display: block !important;
  201. height: auto !important;
  202. max-height: 100% !important;
  203. max-width: 100% !important;
  204. min-width: 100% !important;
  205. object-fit: contain !important;
  206. }
  207.  
  208. img[loading="eager"] {
  209. aspect-ratio: 1 / 1 !important;
  210. height: 100% !important;
  211. object-fit: cover !important;
  212. }
  213. .image-grid + .image-grid {
  214. margin-top: 2px;
  215. }
  216.  
  217. .image-carousel {
  218. height: 112px;
  219. object-fit: contain;
  220. width: auto !important;
  221. }
  222. /* Little unblur */
  223. .dgyaSI {
  224. background: transparent !important;
  225. opacity: 0 !important;
  226. }
  227. .image-grid > img {
  228. background: transparent !important;
  229. object-fit: contain !important;
  230. min-width: 100% !important;
  231. }
  232. [data-tag="locked-badge-button"] p {
  233. padding-right: 3em;
  234. }
  235. [width="fluid"] a {
  236. max-width: 96% !important;
  237. overflow: hidden !important;
  238. }
  239.  
  240. header {
  241. height: 417px !important;
  242. }
  243.  
  244. a,
  245. img,
  246. .jQZWvF {
  247. overflow: hidden !important;
  248. }
  249. }
  250.  
  251. if widemode {
  252. main > div > div > div > div > div:nth-of-type(4) > div:nth-of-type(2) {
  253. max-width: 100% !important;
  254. }
  255.  
  256. main > div > div > div > div > div > div:nth-of-type(2) > div > div {
  257. grid-template-columns: 1fr auto auto !important;
  258. }
  259. }
  260. }
  261.  
  262. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/collections") {
  263. if widemode {
  264. main > div > div > div > div > div:nth-of-type(4) > div {
  265. max-width: 100% !important;
  266. }
  267. }
  268. }
  269.  
  270. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/membership") {
  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/[^/]+/about") {
  279. div.sc-xac35p-1.jhLQmG {
  280. display: flex !important;
  281. flex-direction: row !important;
  282. justify-content: space-between !important;
  283. width: 100% !important;
  284. }
  285. header {
  286. height: 417px !important;
  287. }
  288. .sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
  289. padding-right: 2em;
  290. }
  291.  
  292. if widemode {
  293. main > div > div > div > div > div:nth-of-type(4) > div {
  294. max-width: 100% !important;
  295. }
  296. }
  297. }
  298.  
  299. @-moz-document regexp("https://www\\.patreon\\.com/messages/[^?]+\\?mode=user&tab=direct-messages") {
  300. if widemode {
  301. [data-tag="chat-message"] > div {
  302. max-width: 100% !important;
  303. }
  304. [data-tag="chat-message"] > div > div {
  305. max-width: 100% !important;
  306. }
  307. }
  308. }
  309.  
  310. @-moz-document url-prefix("https://www.patreon.com/notifications") {
  311. if widemode {
  312. #__next > div:nth-child(5) > div {
  313. max-width: 100% !important;
  314. }
  315. }
  316. }
  317.  
  318. @-moz-document url-prefix("https://www.patreon.com/settings") {
  319. if widemode {
  320. #__next > div:nth-child(5) > div,
  321. main > div > div > div {
  322. max-width: 100% !important;
  323. }
  324. }
  325. }
  326.  
  327. @-moz-document url-prefix("https://www.patreon.com/posts") {
  328. if bigimages {
  329. * {
  330. aspect-ratio: auto !important;
  331. }
  332. .dofSdt img {
  333. min-width: 100% !important;
  334. object-fit: cover !important;
  335. }
  336. [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) {
  337. display: flex !important;
  338. flex-basis: 100% !important;
  339. flex-direction: column !important;
  340. max-width: 100% !important;
  341. }
  342. img,
  343. div[elevation="subtle"] > div,
  344. .djipQD > .image-grid {
  345. height: auto !important;
  346. max-height: 100% !important;
  347. max-width: 100% !important;
  348. min-width: 100% !important;
  349. object-fit: contain !important;
  350. }
  351.  
  352. img[loading="eager"] {
  353. aspect-ratio: 1 / 1 !important;
  354. height: 100% !important;
  355. object-fit: cover !important;
  356. }
  357. .image-grid + .image-grid {
  358. margin-top: 2px;
  359. }
  360.  
  361. .image-carousel {
  362. height: 112px;
  363. object-fit: contain;
  364. width: auto !important;
  365. }
  366.  
  367. /* Little unblur */
  368. .dgyaSI {
  369. background: transparent !important;
  370. opacity: 0 !important;
  371. }
  372. .image-grid > img {
  373. background: transparent !important;
  374. object-fit: contain !important;
  375. min-width: 100% !important;
  376. }
  377. [data-tag="locked-badge-button"] p {
  378. padding-right: 3em;
  379. }
  380. [width="fluid"] a {
  381. max-width: 96% !important;
  382. overflow: hidden !important;
  383. }
  384.  
  385. header {
  386. height: 0 !important;
  387. }
  388.  
  389. a,
  390. img,
  391. .jQZWvF {
  392. overflow: hidden !important;
  393. }
  394.  
  395. if widemode {
  396. main > div > div > div > div > div {
  397. max-width: 100% !important;
  398. }
  399.  
  400. main > div > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(3) {
  401. grid-template-columns: 1fr auto auto !important;
  402. min-width: 100% !important;
  403. }
  404. [data-tag="post-card"] p {
  405. padding-right: 20px !important;
  406. white-space: break-spaces !important;
  407. }
  408. [data-tag="content-card-comment-thread-container"] {
  409. padding-right: 50px !important;
  410. }
  411. }
  412. }
  413. if nojump {
  414. 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 {
  415. display: none;
  416. height: 0;
  417. margin-top: 0;
  418. z-index: -9999;
  419. }
  420. }
  421. }
  422.  
  423. @-moz-document url("https://www.patreon.com/posts/published"), url("https://www.patreon.com/posts/drafts") {
  424. if widemode {
  425. body > div > div > div:last-child > div:first-child,
  426. main > div,
  427. main > div > div,
  428. main > div > div > div {
  429. max-width: 100% !important;
  430. }
  431. main > div > div {
  432. padding-left: 0 !important;
  433. margin-left: 0 !important;
  434. max-width: 100% !important;
  435. width: 100% !important;
  436. }
  437. main > div > div > div {
  438. margin-top: 100px !important;
  439. }
  440. [data-cardlayout-edgeless="true"] > div > div > div:last-child {
  441. padding-right: 40px !important;
  442. }
  443. }
  444. }
  445.  
  446. @-moz-document url("https://www.patreon.com/collections") {
  447. if widemode {
  448. body > div > div > div:last-child > div:first-child,
  449. main > div,
  450. main > div > div,
  451. main > div > div > div {
  452. max-width: 100% !important;
  453. }
  454. main > div > div {
  455. padding-left: 0 !important;
  456. margin-left: 0 !important;
  457. max-width: 100% !important;
  458. width: 100% !important;
  459. }
  460. [data-cardlayout-edgeless="true"] > div > div > div:last-child {
  461. padding-right: 40px !important;
  462. }
  463. }
  464. }
  465.  
  466. @-moz-document regexp("^https://www\\.patreon\\.com/posts/[^/]+/edit$") {
  467. if widemode {
  468. body > div:first-child > div:first-child > div:nth-of-type(4),
  469. body > div:first-child > div:first-child > div:nth-of-type(4) > div:first-child {
  470. max-width: 100% !important;
  471. }
  472. main > div > div > div > div > div,
  473. main > div > div > div > div > div > div {
  474. margin-left: -150px !important;
  475. margin-right: 0 !important;
  476. padding-left: 0 !important;
  477. padding-right: 0 !important;
  478. max-width: 100% !important;
  479. }
  480. [data-cardlayout-edgeless="true"] > div > div > div:last-child {
  481. padding-right: 40px !important;
  482. }
  483. }
  484. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址