Skip to content

Instantly share code, notes, and snippets.

@mzhang28
Last active April 10, 2021 13:46
Show Gist options
  • Save mzhang28/c3e37bc4d951c506f58a8768d5456b3b to your computer and use it in GitHub Desktop.
Save mzhang28/c3e37bc4d951c506f58a8768d5456b3b to your computer and use it in GitHub Desktop.

This userscript changes some styles on the osu website
If u have tampermonkey or greasemonkey installed, hit the "raw" button of the script to install automatically
Or create a new script and copy-paste the below in
There's some options in the code, modify stuff to customize but it may break on different zooms/phones, not fully tested

// ==UserScript==
// @name OsuStyle
// @version 1
// @grant none
// @include https://osu.ppy.sh/*
// ==/UserScript==
//=================================================================
// CHANGE THESE VARIABLES TO WHATEVER VALUSE U WANT
//
// alwaysShowStats determines whether stats are always shown
// can either be true or false
let alwaysShowStats = true;
// infoOpacity determines how much the faded part of the bg show fade
// should be a decimal number between 0 and 1
// website default is 0.8
let infoOpacity = 0.8;
// alwaysShowDownload determines whether the menu on the right side of a beatmap panel that includes the download button should always be visible
// either true or false
let alwaysShowDownload = false;
// alwaysHidePlayBtn determines whether the little square box on the left that contains the play button should always be hidden
// either true or false
let alwaysHidePlayBtn = false;
//=================================================================
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
let statsRule = alwaysShowStats ? `--stats-opacity: 1 !important;` : "";
let infoRule = `--info-bg: linear-gradient(0.25turn,hsl(var(--hsl-b2)),hsla(var(--hsl-b2),${infoOpacity})) !important;`;
let downloadRule = alwaysShowDownload ? `--menu-opacity: 1 !important; --menu-container-width: 30px !important;` : "";
addGlobalStyle(`.beatmapset-panel { ${statsRule} ${infoRule} ${downloadRule} }`);
if (alwaysHidePlayBtn) {
addGlobalStyle(`.beatmapset-panel__play-container { display: none; }`);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment