☰

HoYoLAB responsive

HoYoLAB website is more suitable for wide screens

  1. /* ==UserStyle==
  2. @name           HoYoLAB responsive
  3. @description    HoYoLAB website is more suitable for wide screens
  4. @version        1.0.2
  5. @author         BreatFR
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/hoyolab
  8. @supportURL     https://www.hoyolab.com/article/23010773
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. ==/UserStyle== */
  11.  
  12. /* === Credits ===
  13. Website     https://breat.fr
  14. facebook    https://www.facebook.com/breatfroff
  15. mastodon    https://mastodon.social/@breat_fr
  16. telegram    https://t.me/breatfr
  17. vk          https://vk.com/breatfroff
  18. X (twitter) https://x.com/breatfroff
  19. === Credits === */
  20. @-moz-document domain("hoyolab.com") {
  21.     ::-webkit-scrollbar {
  22.       width: 5px !important;
  23.     }
  24.  
  25.     ::-webkit-scrollbar:horizontal {
  26.         height: 5px !important;
  27.     }
  28.  
  29.     ::-webkit-scrollbar-track {
  30.         box-shadow: inset 0 0 5px grey !important;
  31.         border-radius: 20px !important;
  32.         color-scheme: dark !important;
  33.     }
  34.  
  35.     ::-webkit-scrollbar-thumb {
  36.         box-shadow: inset 0 0 5px grey !important;
  37.         border-radius: 20px !important;
  38.     }
  39.  
  40.     ::-webkit-scrollbar-thumb:hover {
  41.         background: white !important;
  42.     }
  43.  
  44.     * {
  45.         scrollbar-color: grey white !important;
  46.         scrollbar-width: thin !important;
  47.     }
  48.  
  49.     #anchor_spiral_abyss > div.container,
  50.     body > div.pc-root-layout > div.pc-root-layout__container > div > div {
  51.         max-width: 100% !important;
  52.     }
  53.  
  54.     .root-page-container__content {
  55.         max-width: 100% !important;
  56.     }
  57.  
  58.     .mhy-article-card__cover img {
  59.         max-height: 100% !important;
  60.     }
  61.  
  62.     .mhy-article-card__cover {
  63.         left: 15% !important;
  64.     }
  65.  
  66.     .mhy-article-card__img {
  67.         left: 25% !important;
  68.     }
  69.  
  70.     .mhy-article-card__video {
  71.         left: 20% !important;
  72.     }
  73.  
  74.     .root-page-container__left {
  75.         margin-left: 10px;
  76.         max-width: 100% !important;
  77.     }
  78.  
  79.     .root-page-container__right {
  80.         margin-right: 10px;
  81.     }
  82.  
  83.     body > div.app-root > div > div.scroll-container.main-wrapper > div,
  84.     body > div.app-root > div > div.scroll-container.main-wrapper > div > div.page-body.body {
  85.         border-radius: 16px !important;
  86.         width: 100% !important;
  87.     }
  88.  
  89.     .pc-root-layout__container {
  90.         max-width: 100% !important;
  91.         padding-left: 10px;
  92.         padding-right: 10px;
  93.     }
  94.  
  95.     #anchor_character > div.pc-swiper-block-layout__content > div.container {
  96.         width: 50% !important;
  97.     }
  98.  
  99.     #anchor_character > div.pc-swiper-block-layout__content > div.pc-role-container {
  100.         height: 450px !important;
  101.     }
  102.  
  103.     .rpg-role-detail {
  104.         height: 450px !important;
  105.         left: 110% !important;
  106.         position: absolute !important;
  107.         top: 0px !important;
  108.     }
  109.  
  110.     .hsr-rtn-container {
  111.         margin-left: 25% !important;
  112.     }
  113.  
  114.     .article-menu-fix-layout {
  115.         margin-left: 10px !important;
  116.     }
  117.  
  118.     .hsr-rtn-btm {
  119.         margin-left: 1.2% !important;
  120.     }
  121.  
  122.     .activity-header.mb-2.flex.items-center {
  123.         margin-left: -47.5% !important;
  124.     }
  125.  
  126.     .activity-header.mb-2.flex.items-center > div {
  127.         margin-left: 32.5% !important;
  128.     }
  129.  
  130.     .world-exploration > div {
  131.         max-width: 100% !important;
  132.     }
  133.  
  134.     .hsr-home-main,
  135.     .hsr-home-main-container,
  136.     .pc-home-banner {
  137.         margin-left: 5px;
  138.         width: calc(100% - 60px) !important;
  139.     }
  140.  
  141.     .menu-outline {
  142.         right: 0px !important;
  143.     }
  144. }