☰

Greasy Fork 还支持 简体中文。

ManyVids responsive + customizations

ManyVids website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           ManyVids responsive + customizations
  3. @version        1.0.2
  4. @description    ManyVids 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/manyvids
  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    bigmedias   "Big medias"        1
  13. @var    text        fontsize    "Custom font size"  1.2rem
  14. @var    checkbox    widemode    "Wide mode"         1
  15. ==/UserStyle== */
  16.  
  17. /* === Credits ===
  18. Website         https://breat.fr
  19. facebook        https://www.facebook.com/breatfroff
  20. mastodon        https://mastodon.social/@breat_fr
  21. telegram        https://t.me/breatfr
  22. vk              https://vk.com/breatfroff
  23. X (twitter)     https://x.com/breatfroff
  24. === Credits === */
  25.  
  26. @-moz-document domain("manyvids.com") {
  27.     :root {
  28.         --fontsize: fontsize;
  29.     }
  30.     
  31.     /* Custom font size */
  32.     :root,
  33.     a[class^="CardCreatorHeaderUI_creatorLink__"],
  34.     a[class^="SubNav_menuItem__"],
  35.     div,
  36.     input,
  37.     label,
  38.     p:not(.mav-badge),
  39.     pre,
  40.     span:not([class^="CardCreatorHeaderUI_topMvRank__"],[class^="CardCreatorHeaderUI_topClubEarner__"]),
  41.     strong,
  42.     textarea {
  43.         font-size: fontsize !important;
  44.         line-height: 1.5 !important;
  45.     }
  46.     [aria-label="Twitter Icon"] svg {
  47.         height: auto !important;
  48.         width: calc(var(--fontsize) - .2rem) !important;
  49.     }
  50.     a.mav-button-primary,
  51.     button:not([value="Send application"]),
  52.     .banner-info p,
  53.     [class^="ViewMore_viewMore__"],
  54.     [class^="SubNavUI_container__"] a,
  55.     [class^="CardCreatorHeaderUI_topClubEarner__"],
  56.     [class^="CardCreatorHeaderUI_topMvRank__"] {
  57.         font-size: calc(var(--fontsize) - .3rem) !important;
  58.         line-height: 1.2 !important;
  59.     }
  60.     a#uploadButton,
  61.     a[value="Download application"],
  62.     button:not(.rmp-button),
  63.     div#photoIDImageBtn,
  64.     [class^="ViewMore_viewMore__"],
  65.     .nav-title {
  66.         padding: 0 10px !important;
  67.         width: max-content !important;
  68.     }
  69.     a.mav-button-primary,
  70.     .banner-info p {
  71.         padding: 0 10px !important;
  72.         white-space: wrap !important;
  73.     }
  74.     
  75.     .card-media * {
  76.         border-radius: .5em !important;
  77.     }
  78.     
  79.     if bigmedias {
  80.         [class^="post_body__"],
  81.         [class^="image_container__"],
  82.         [class^="MessagesBroadcast_container-message-image__"],
  83.         [class^="MVPlayer_mv_container__"],
  84.         [class^="post_container__"],
  85.         [class^="single_image__"],
  86.         [class^="single_imageContent__"],
  87.         [class^="videoAuto_postType___"],
  88.         #main-video-player,
  89.         img[style="color: transparent;"]:not([class^="post_avatar__"],[data-testid="search-container"] [alt="avatar"],[alt="Google logo"],[alt="X logo"]),
  90.         video {
  91.             height: auto !important;
  92.             max-height: 100% !important;
  93.             max-width: 100% !important;
  94.             object-fit: contain !important;
  95.             width: 100% !important;
  96.         }
  97.         [class^="post_content__"] {
  98.             padding-right: 20px !important;
  99.         }
  100.     }
  101.     
  102.     if widemode {
  103.         [data-testid="search-container"] {
  104.             margin-top: 20px;
  105.         }
  106.         [class^="avatar_avatar__"] {
  107.             aspect-ratio: 1 / 1;
  108.             height: auto;
  109.             width: auto;
  110.         }
  111.         [class^="CardFooter_container__"],
  112.         [class^="VideoCardUI_footerContent__"] {
  113.             height: auto !important;
  114.         }
  115.         [class^="VideoCardUI_videoTitle__"] a {
  116.             text-overflow: initial;
  117.             white-space: normal;
  118.         }
  119.     }
  120. }
  121.  
  122. @-moz-document url("https://www.manyvids.com/Vids/"), regexp("https://www\\.manyvids\\.com/Vids/\\?[^/]*") {
  123.     if widemode {
  124.         .vids-page,
  125.         .wrapper.is-filter-visible {
  126.             margin-top: 10px !important;
  127.             max-width: 100% !important;
  128.             width: 100% !important;
  129.         }
  130.         .wrapper.is-filter-visible {
  131.             grid-column-gap: 20px !important;
  132.         }
  133.         
  134.         body:not(:has(.nav-bar.collapsed)) .vids-page {
  135.             margin-left: 240px !important;
  136.         }
  137.         body:has(.nav-bar.collapsed) .vids-page {
  138.             margin-left: 75px !important;
  139.         }
  140.         .video-card-list {
  141.             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  142.         }
  143.         .filter-panel {
  144.             width: auto !important;
  145.         }
  146.     }
  147. }
  148.  
  149. @-moz-document regexp("https://www\\.manyvids\\.com/results\\?[^/]*") {
  150.     if widemode {
  151.         body>div:nth-of-type(1)>div:nth-of-type(1) {
  152.             max-width: 100% !important;
  153.             width: 100% !important;
  154.         }
  155.         .content_wrapper__IMR_j.content_collapsed__QvzFk>main>div {
  156.             margin-left: 50px !important;
  157.             max-width: 100% !important;
  158.             width: 100% !important;
  159.         }
  160.         .content_wrapper__IMR_j.content_collapsed__QvzFk>main>div>section {
  161.             margin-left: -30px;
  162.             padding-right: 140px;
  163.         }
  164.         .content_wrapper__IMR_j.content_notCollapsed__c9BAb>main>div {
  165.             margin-left: 50px !important;
  166.             max-width: 100% !important;
  167.             width: 100% !important;
  168.         }
  169.         .content_wrapper__IMR_j.content_notCollapsed__c9BAb>main>div>section {
  170.             margin-left: -30px;
  171.             padding-right: 30px;
  172.         }
  173.         .filter-panel {
  174.             width: auto !important;
  175.         }
  176.     }
  177. }
  178.  
  179. @-moz-document url-prefix("https://www.manyvids.com/Video/") {
  180.     if widemode {
  181.         [class^="videoPage_playerActivity__zPeds"] {
  182.             max-width: 100% !important;
  183.             padding: 0 20px;
  184.             width: 100% !important;
  185.         }
  186.         
  187.         [class^="videoPage_playerActivityContent__"] {
  188.             box-sizing: border-box !important;
  189.             grid-template-areas: "player activity_right" "activity_right";
  190.             grid-template-columns: auto 300px !important;
  191.         }        
  192.         body:has(aside[class^="bigSideBar_big_sidebar__"]) [class^="videoPage_playerActivityContent__"] {
  193.             margin-left: 225px !important;            
  194.         }
  195.         body:not(:has(aside[class^="bigSideBar_big_sidebar__"])) [class^="videoPage_playerActivityContent__"] {
  196.             margin-left: 0 !important;
  197.         }
  198.         .rmp-control-bar-hint {
  199.             border-radius: 10px !important;
  200.             height: auto !important;
  201.             width: auto !important;
  202.         }
  203.         .rmp-large .rmp-module-overlay,
  204.         .rmp-overlay-levels-area * {
  205.             height: auto !important;
  206.             width: auto !important;
  207.         }
  208.         
  209.         [data-testid="overlay"] {
  210.             display: none !important;
  211.         }
  212.         .wrapper.is-filter-visible {
  213.             grid-column-gap: 20px !important;
  214.         }
  215.         [class^="banner_banner__"] {
  216.             height: auto;
  217.         }
  218.     }
  219. }
  220.  
  221. @-moz-document regexp("https://www\\.manyvids\\.com/Profile/[^/]+/[^/]+/Store/Videos"), regexp("https://www\\.manyvids\\.com/Profile/[^/]+/[^/]+/Store/Videos\\?[^/]*") {
  222.     if widemode {
  223.         body>div>div:nth-of-type(1)>div:nth-of-type(1),
  224.         body>div>div:nth-of-type(1)>div:nth-of-type(2),
  225.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div {
  226.             max-width: 100% !important;
  227.             padding: 0 20px;
  228.             width: 100% !important;
  229.         }
  230.         .wrapper.is-filter-visible {
  231.             grid-column-gap: 20px !important;
  232.         }
  233.         
  234.         [class^="ProfileTabGrid_grid__"],
  235.         [class^="ProfileTabGrid_itemsGrid__"] {
  236.             gap: 20px!important;
  237.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  238.         }
  239.     }
  240. }
  241.  
  242. @-moz-document regexp("https://www\\.manyvids\\.com/Profile/[^/]+/[^/]+/Store/Items"), regexp("https://www\\.manyvids\\.com/Profile/[^/]+/[^/]+/Store/Items\\?[^/]*") {
  243.     if widemode {
  244.         body>div>div:nth-of-type(1)>div:nth-of-type(1),
  245.         body>div>div:nth-of-type(1)>div:nth-of-type(2),
  246.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div {
  247.             max-width: 100% !important;
  248.             padding: 0 20px;
  249.             width: 100% !important;
  250.         }
  251.         .wrapper.is-filter-visible {
  252.             grid-column-gap: 20px !important;
  253.         }
  254.         
  255.         [class^="ProfileTabGrid_grid__"],
  256.         [class^="ProfileTabGrid_itemsGrid__"] {
  257.             gap: 20px!important;
  258.             grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)) !important;
  259.         }
  260.     }
  261. }
  262.  
  263. @-moz-document regexp("https://www\\.manyvids\\.com/Profile/[^/]+/[^/]+/Store/Custom") {
  264.     if widemode {
  265.         body>div>div:nth-of-type(1)>div:nth-of-type(1),
  266.         body>div>div:nth-of-type(1)>div:nth-of-type(2),
  267.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div {
  268.             max-width: 100% !important;
  269.             padding: 0 20px;
  270.             width: 100% !important;
  271.         }
  272.     }
  273. }
  274.  
  275. @-moz-document regexp("https://www\\.manyvids\\.com/Activity/[^/]+/[^/]+/club"), regexp("https://www\\.manyvids\\.com/Activity/[^/]+/[^/]+/club\\?[^/]*") {
  276.     if widemode {
  277.         body>div>div:nth-of-type(1)>div:nth-of-type(1),
  278.         body>div>div:nth-of-type(1)>div:nth-of-type(2),
  279.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div,
  280.         body>div>div:nth-of-type(1)>div:nth-of-type(2)>nav,
  281.         body>div>div:nth-of-type(1)>div:nth-of-type(2)>div,
  282.         body>div>div:nth-of-type(1)>div:nth-of-type(2)>div>div {
  283.             max-width: 100% !important;
  284.             padding: 20px;
  285.             width: 100% !important;
  286.         }
  287.         body>div>div:nth-of-type(1)>div:nth-of-type(1) {
  288.             margin: 0 auto !important;
  289.         }
  290.         body>div>div:nth-of-type(1)>div:nth-of-type(2),
  291.         body>div>div:nth-of-type(1)>div:nth-of-type(2)>nav {
  292.             padding: 0 20px !important;
  293.         }
  294.         .wrapper.is-filter-visible {
  295.             grid-column-gap: 20px !important;
  296.         }
  297.     }
  298. }
  299.  
  300. @-moz-document regexp("https://www\\.manyvids\\.com/Profile/[^/]+/[^/]+/live") {
  301.     if widemode {
  302.         body>div>div:nth-of-type(1)>div:nth-of-type(1),
  303.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div,
  304.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div>div {
  305.             max-width: 100% !important;
  306.             padding: 20px;
  307.             width: 100% !important;
  308.         }
  309.         body>div>div:nth-of-type(1)>div:nth-of-type(1) {
  310.             margin: 0 auto !important;
  311.         }
  312.         [class^="ticker_container__"],
  313.         [class^="ticker_tickerContainer__"] {
  314.             max-width: 100% !important;
  315.             overflow: hidden;
  316.         }
  317.     }
  318. }
  319.  
  320. @-moz-document regexp("https://www\\.manyvids\\.com/Profile/[^/]+/[^/]+/Purchased") {
  321.     if widemode {
  322.         body>div>div:nth-of-type(1)>div:nth-of-type(1),
  323.         body>div>div:nth-of-type(1)>div:nth-of-type(2),
  324.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div {
  325.             max-width: 100% !important;
  326.             padding: 0 20px;
  327.             width: 100% !important;
  328.         }
  329.         .wrapper.is-filter-visible {
  330.             grid-column-gap: 20px !important;
  331.         }
  332.         
  333.         [class^="ProfileTabGrid_grid__"],
  334.         [class^="ProfileTabGrid_itemsGrid__"] {
  335.             gap: 20px!important;
  336.             grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)) !important;
  337.         }
  338.     }
  339. }
  340.  
  341. @-moz-document regexp("https://www\\.manyvids\\.com/Social/[^/]+/[^/]+/Followers/"), regexp("https://www\\.manyvids\\.com/Social/[^/]+/[^/]+/Following/") {
  342.     if widemode {
  343.         #social-app>div:nth-of-type(2),
  344.         .description {
  345.             max-width: 100% !important;
  346.             padding: 0 20px;
  347.             width: 100% !important;
  348.         }
  349.         #social-app>div:nth-of-type(2)>div:nth-of-type(2) {
  350.             grid-template-columns: 300px 1fr !important;
  351.             max-width: 100% !important;
  352.         }
  353.     }
  354. }
  355.  
  356. @-moz-document url("https://www.manyvids.com/Create-Free-Account"), url("https://www.manyvids.com/Login") {
  357.     if widemode {
  358.         [class^="page_page__"],
  359.         [class^="page_fullHeight__"],
  360.         [class^="page_contentContainer__"],
  361.         [class^="SignupFooter_footer__"] {
  362.             max-width: 100% !important;
  363.             padding: 0 20px;
  364.             width: 100% !important;
  365.         }
  366.         main {
  367.             max-width: 60% !important;
  368.         }
  369.         [class^="SignupAccountTypeSelection_accountType__"] {
  370.             justify-content: center;
  371.         }
  372.     }
  373. }
  374.  
  375. @-moz-document url("https://www.manyvids.com/forgot-password") {
  376.     if widemode {
  377.         body>div>div:nth-of-type(2),
  378.         body>div>div:nth-of-type(2)>div {
  379.             max-width: 100% !important;
  380.             padding: 0 20px;
  381.             width: 100% !important;
  382.         }
  383.     }
  384. }
  385.  
  386. @-moz-document url-prefix("https://www.manyvids.com/Post/") {
  387.     if widemode {
  388.         body>div>div:nth-of-type(1)>div:nth-of-type(1),
  389.         body>div>div:nth-of-type(1)>div:nth-of-type(2),
  390.         body>div>div:nth-of-type(1)>div:nth-of-type(1)>div {
  391.             max-width: 100% !important;
  392.             padding: 0 20px;
  393.             width: 100% !important;
  394.         }
  395.         [class^="breadcrumbs_container__"] {
  396.             justify-content: flex-start !important;
  397.             margin-top: 20px;
  398.         }
  399.     }
  400. }
  401.  
  402. @-moz-document url("https://www.manyvids.com/notifications") {
  403.     if widemode {
  404.         body>div>div:nth-of-type(1)>div>div>div {
  405.             max-width: 100% !important;
  406.             padding: 0 20px;
  407.             width: 100% !important;
  408.         }
  409.         [class^="breadcrumbs_container__"] {
  410.             justify-content: flex-start !important;
  411.             margin-top: 20px;
  412.         }
  413.     }
  414. }
  415.  
  416. @-moz-document url-prefix("https://www.manyvids.com/Inbox/") {
  417.     if widemode {
  418.         .fixed-wrapper {
  419.             max-width: 100% !important;
  420.             padding: 0 20px;
  421.             width: 100% !important;
  422.         }
  423.         .fixed-wrapper>div>div>div>div:nth-of-type(2)>div,
  424.         li#conversation-card,
  425.         .media-body {
  426.             height: auto !important;
  427.             max-width: 100% !important;
  428.             overflow: hidden !important;
  429.             width: 100% !important;
  430.         }
  431.         .scroll-element_outer {
  432.             display: none !important;
  433.             height: 0;
  434.             width: 0;
  435.         }
  436.         .notes-tabs {
  437.             left: 0;
  438.         }
  439.     }
  440. }
  441.  
  442. @-moz-document url("https://www.manyvids.com/inbox/broadcast") {
  443.     if widemode {
  444.         [class^="Conversation_container-options-date__"] {
  445.             height: auto !important;
  446.         }
  447.     }
  448. }
  449.  
  450. @-moz-document url("https://www.manyvids.com/Account-settings/"), url("https://www.manyvids.com/Security-center/") {
  451.     if widemode {
  452.         .fixed-wrapper {
  453.             max-width: 100% !important;
  454.             padding: 0 20px;
  455.             width: 100% !important;
  456.         }
  457.         [class^="breadcrumbs_container__"] {
  458.             justify-content: flex-start !important;
  459.             margin-top: 20px;
  460.         }
  461.     }
  462. }
  463.  
  464. @-moz-document url("https://www.manyvids.com/View-my-history/1/") {
  465.     if widemode {
  466.         .fixed-wrapper {
  467.             max-width: 100% !important;
  468.             padding: 0 20px;
  469.             width: 100% !important;
  470.         }
  471.         [class^="breadcrumbs_container__"] {
  472.             justify-content: flex-start !important;
  473.             margin-top: 20px;
  474.         }
  475.     }
  476.     form>div>input {
  477.         height: fontsize !important;
  478.     }
  479.     form>div button {
  480.         height: auto !important;
  481.     }
  482.     #btn_download_all_vids {
  483.         right: 20px;
  484.     }
  485. }