☰

Nutaku Web Games responsive + customizations

Nutaku Web Games are more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           Nutaku Web Games responsive + customizations
  3. @version        1.0.0
  4. @description    Nutaku Web Games are more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/nutaku-web-games
  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    noheader        "No header"         1
  13. @var    checkbox    widemode        "Wide mode"         0
  14. @var    checkbox    widemodeplus    "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 regexp("https://www\\.nutaku\\.net/.+/games/.+/play/") {
  27.     if noheader {
  28.         header {
  29.             display: none !important;
  30.             height: 0 !important;
  31.         }
  32.         .main-content,
  33.         .main-content.play {
  34.             padding: 0 !important;
  35.             
  36.         }
  37.         .game-play-full {
  38.             margin: 0 !important;
  39.             position: absolute !important;
  40.             bottom: 0;
  41.             top: 0;
  42.             left: 0;
  43.             right: 0;
  44.             height: 100vh !important;
  45.             max-height: 100vh !important;
  46.             min-height: 100vh !important;
  47.         }
  48.         div[style*="height:"],
  49.         iframe[style*="height:"] {
  50.             height: 100vh !important;
  51.             max-height: 100vh !important;
  52.         }
  53.     }
  54.     
  55.     if (widemode || widemodeplus) {
  56.         body {
  57.             overflow-y: hidden;
  58.         }
  59.     }
  60. }
  61.  
  62. @-moz-document regexp("https://osapi\\.nutaku\\.com/gadgets/ifr.*") {
  63.     :root {
  64.         --themeversion: 'Theme v1.0.0';
  65.         --author: 'by BreatFR (https://breat.fr)';
  66.         --link: ' https://gitlab.com/breatfr/nutaku-web-games ';        
  67.     }
  68.     #loader-wrapper::after {
  69.         background-color: rgba(211,211,211,0.5);
  70.         border-radius: .5em;
  71.         color: white;
  72.         content: var(--themeversion) ' · ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==");
  73.         bottom: 20px;
  74.         display: flex;
  75.         flex-direction: column;
  76.         font-size: 18px;
  77.         left: 10px;
  78.         padding: 10px;
  79.         position: absolute;
  80.         text-align: center;
  81.         width: max-content;
  82.         white-space: pre-line;
  83.     }
  84.     
  85.     if (widemode || widemodeplus) {
  86.         .main-container,
  87.         #game-container,
  88.         #loader-wrapper,
  89.         #unity-container,
  90.         #unityContainer,
  91.         #unityContainer > video,
  92.         #unityContainerCanvas,
  93.         #unity-canvas {
  94.             border: none !important;
  95.             bottom: 0 !important;
  96.             height: 100vh !important;
  97.             max-height: 100vh !important;
  98.             left: 0 !important;
  99.             margin: 0 !important;
  100.             right: 0 !important;
  101.             top: 0 !important;
  102.             transform: none !important;
  103.             z-index: 999999 !important;
  104.         }
  105.         .social-icon,
  106.         #left-banner,
  107.         #right-banner {
  108.             display: none !important;
  109.             width: 0 !important;
  110.         }
  111.         .main {
  112.             position: initial !important;
  113.         }
  114.         .column,
  115.         .columns {
  116.             margin: 0 !important;
  117.             padding: 0 !important;
  118.         }
  119.     }
  120.     if widemode {
  121.         .main-container,
  122.         #game-container,
  123.         #loader-wrapper,
  124.         #unity-container,
  125.         #unityContainer,
  126.         #unityContainer > video,
  127.         #unityContainerCanvas,
  128.         #unity-canvas {
  129.             margin: 0 auto !important;
  130.             max-width: 100% !important;
  131.             width: auto !important;
  132.         }
  133.     }
  134.     
  135.     if widemodeplus {
  136.         .main-container,
  137.         #game-container,
  138.         #loader-wrapper,
  139.         #unity-container,
  140.         #unityContainer,
  141.         #unityContainer > video,
  142.         #unityContainerCanvas,
  143.         #unity-canvas {
  144.             max-width: 100% !important;
  145.             min-width: 100% !important;
  146.             width: 100% !important;
  147.         }
  148.     }
  149. }