Patreon responsive + customizations

Patreon website is more suitable for wide screens.

当前为 2024-07-01 提交的版本,查看 最新版本

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