☰

Galaxy CSS (Beta!)

Applies a video background to the splash-ui element on suroi.io and changes the color of various elements to shades of blue

  1. // ==UserScript==
  2. // @name         Galaxy CSS (Beta!)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2(Beta)
  5. // @description  Applies a video background to the splash-ui element on suroi.io and changes the color of various elements to shades of blue
  6. // @author       You
  7. // @match        https://suroi.io/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     document.getElementById('splash-ui').style.backgroundImage = 'none';
  15.  
  16.     var video = document.createElement('video');
  17.     video.src = 'https://cdn.discordapp.com/attachments/1129277020661100605/1228264588596744263/vecteezy_small-particles-and-stars-moving-on-galaxy_2017224.mp4?ex=662b6989&is=6618f489&hm=81319591c10452d2c6f274c13a0db2fc1c4e8535e3cdd0e8493bd8b5b592b29e';
  18.     video.loop = true;
  19.     video.muted = true;
  20.     video.autoplay = true;
  21.     video.style.position = 'fixed';
  22.     video.style.top = '0';
  23.     video.style.left = '0';
  24.     video.style.width = '100%';
  25.     video.style.height = '100%';
  26.     video.style.objectFit = 'cover';
  27.     video.style.zIndex = '-1';
  28.     video.style.pointerEvents = 'none';
  29.  
  30.     document.getElementById('splash-ui').appendChild(video);
  31.  
  32.     var normalColor = '#0077cc';
  33.     var settingsColor = '#006699';
  34.  
  35.     function applyButtonStyles(btn) {
  36.         btn.style.backgroundColor = normalColor;
  37.         btn.style.color = '#ffffff';
  38.         btn.style.borderColor = normalColor;
  39.  
  40.         btn.addEventListener('mousedown', function() {
  41.             btn.style.backgroundColor = normalColor;
  42.         });
  43.  
  44.         btn.addEventListener('mouseup', function() {
  45.             btn.style.backgroundColor = normalColor;
  46.         });
  47.     }
  48.  
  49.     var btnPlaySolo = document.getElementById('btn-play-solo');
  50.     var btnPlayDuo = document.getElementById('btn-play-duo');
  51.     var btnSettings = document.getElementById('btn-settings');
  52.     var btnCustomize = document.getElementById('btn-customize');
  53.  
  54.     applyButtonStyles(btnPlaySolo);
  55.     applyButtonStyles(btnPlayDuo);
  56.     applyButtonStyles(btnSettings);
  57.     applyButtonStyles(btnCustomize);
  58.  
  59.     applyButtonStyles(btnSettings);
  60.  
  61.     var dialogHeader = document.querySelector('.dialog-header');
  62.     dialogHeader.style.backgroundColor = settingsColor;
  63.  
  64.     // Define the colors for the health bar based on health percentage
  65.     function updateHealthBarColor() {
  66.         var healthBar = document.getElementById('health-bar');
  67.         var healthPercentage = document.getElementById('health-bar-percentage');
  68.         var percentage = parseInt(healthPercentage.textContent);
  69.         var healthBarColor;
  70.  
  71.         if (percentage <= 25) { // Dark blue for low health
  72.             healthBarColor = '#00204d';
  73.         } else if (percentage <= 50) { // Medium dark blue for moderate health
  74.             healthBarColor = '#003366';
  75.         } else { // Light blue for full health
  76.             healthBarColor = '#0077cc';
  77.         }
  78.  
  79.         healthBar.style.backgroundColor = healthBarColor;
  80.     }
  81.  
  82.     updateHealthBarColor();
  83.  
  84. })();