Skip to content

Wuffles' EMQ Style Script v1.4 by Wuffles

Screenshot of Wuffles' EMQ Style Script v1.4

Details

AuthorWuffles

LicenseMIT License

Categoryemq.up.railway.app

Created

Updated

Size20 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A customizable theme for erogemusicquiz.com

Notes

dm me at wuffles on discord for requests or issues

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Wuffles' EMQ Style Script
@version      1.4
@namespace    userstyles.world/user/Wuffles
@description  A customizable theme for erogemusicquiz.com for dark theme
@author       Wuffles
@license      MIT License
==/UserStyle==*/
/*=============================================================================================

Changelog:
  1.4 
	- added styling for Profile page (also fixed vndb imported images stretching)
    - added styling for Erodle page
    - added contrast/shadow to rig information so its visible on white backgrounds
    - added styling for volume bar and default green/red text for correct/incorrect answers
  1.3
	- removed custom vndb avatar stretch for preview
	- fixed styling for review queue page
	- added lobby ready/not ready state coloring
  1.2.5
	- fixed answered color state for other players
	- redid chat box styling and opacity
  1.2
	- added styling for spaced repetition card
	- added styling for my song stats card
	- removed custom vndb avatar stretch > changed to cover / positioned to top
	- added no-answer/correct/wrong/guessed coloring state for VNDB avatars
  1.1
	- reorganized and cleaned up :root
	- changed video to only be translucent during guess phase
	- removed scroll bar when lobby of 8+ players (NEEDS TESTING)
	- added optional image overlay for video
  1.0
    - updated to the new domain
    - fixed looting game mode to work with distance marker
	- added styling for settings and preference menu

=============================================================================================*/

@-moz-document domain("erogemusicquiz.com") {
	:root {
		/* ====================================== feel free to edit these ====================================== */
		
		/* Background Image and Side Bar */
		--mainBackground: url(https://i.imgur.com/Wvnejk6.jpeg);
		--backgroundColorOverlay: rgba(0, 0, 0, .25); /* background color/dim overlay for bright backgrounds, set alpha to 0 if not needed */ 
		--sideBar: linear-gradient(180deg, rgba(49, 40, 255, .8) 0%, rgba(134, 19, 255, .8) 50%, rgba(0,0,0,0.2) 85%, rgb(2, 0, 91) 100%);
		
		/* Optional Image Overlaying the Video Player, Gifs might work idr */
		/* uncomment the line below for an example, you can put emotes or anything really */
		/*--videoImage: url(https://i.imgur.com/jOaXs4O.png);*/
		--videoImageSize: 15%;
		--videoImagePos: bottom 7px left 7px;
		
		/* Main Colors */
		--accentColor: #f086ff; 
		--secondaryAccentColor: #c33eff;
		--tertiaryAccentColor: #5dbaff;
		
		/* Main Text */
		--mainTextColor: #fff;
		--secondaryTextColor: #000;
		--textShadowColor: #82ebff;
        --correctAnswerTextColor: #0f0;; 
        --wrongAnswerTextColor: #f00;
        --textContrast: #f086ff;
		
		/* Main Box & Backgrounds */
		--boxGlowColor: #f086ff; 
		--boxBackgroundColor: #000;
		--boxBackgroundColorTranslucent: #000c;
		--borderRadius: 10px;
		
		/* Button Borders & Hover */
		--borderColor: #fff;
		--hoverColor: #fff;
		--hoverTextColor: #000;
		
		/* Lobby Ready State */
		--readyColor: #0f0;
		--notReadyColor: #f00;
        
		/* Avatar Answer Glow */
		--noAnswerColor: #00c8ff00;
		--waitingAnswerColor: #ff0;
		--correctAnswerColor: #0f0;
		--wrongAnswerColor: #f00;
        
		/* Avatar Replacement: basically same as AMQ but 'thinking' and 'no answer' states are merged */
		/* preferably in .webp or .png  and with a 1:1 ratio and at least 160x160 resolution */
		--baseAvatar: url('https://files.catbox.moe/pdf0jk.webp'); /*in lobby and looting character icon*/
		--thinkingAvatar: url('https://files.catbox.moe/00uv7a.webp'); /*no answer in guess phase*/
		--waitingAvatar: url('https://files.catbox.moe/kwv6ag.webp'); /*answered in guess phase*/
		--correctAvatar: url('https://files.catbox.moe/lyh620.webp'); /*correct answer in results phase*/
		--wrongAvatar: url('https://files.catbox.moe/gdi570.webp'); /*wrong answer in results phase*/
		
		--vndbAvatarPosition: 0px 0px; /* change the second number: decrease value to move down */
	}
	
	/* =================== if you do not know what you're doing, no need to edit beyond this point ==================*/
	
	/* Main Background */
	body {
		background:
			linear-gradient(
          var(--backgroundColorOverlay), 
          var(--backgroundColorOverlay)
			),  
			var(--mainBackground);
		/*  you may want to mess with size/positioning to get your desired effect */
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	
	.sidebar[b-0e082mtxss] {
		background-image: var(--sideBar);
	}
	
	/* Home Section */
	h1 {
		color: var(--mainTextColor);
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor);
	}
	
    /* Profile Page Section */
    article.px-4 > img {
        object-fit: cover;
		object-position: var(--vndbAvatarPosition);
        border-radius: var(--borderRadius);
    }
    
    span[b-hvcinh912u], ul[b-hvcinh912u]:not(ul ul), h4[b-hvcinh912u], div[b-hvcinh912u] > div.paginator, div[b-hvcinh912u] > table.quickgrid[b-vznuo5fmpv] {
        background-color: var(--boxBackgroundColorTranslucent);
        border-radius: var(--borderRadius);
    }
    
	/* Hotel Section */
	.roomCard {
		background-color: var(--boxBackgroundColor);
    	color: var(--mainTextColor);
		opacity:  85%;
    	border-radius: var(--borderRadius);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor),  0 0 10px var(--boxGlowColor), 0 0 10px var(--boxGlowColor);
	}
	
	/* Lobby Section */
	div#roomInfo {
		background-color: var(--boxBackgroundColor);
		border-radius: var(--borderRadius);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor),  0 0 10px var(--boxGlowColor), 0 0 10px var(--boxGlowColor);
		padding: 0px 5px 0px 5px;
		opacity:  85%;
	}
	
	/* Lobby Buttons Section */
	.btn-primary {
		color: var(--mainTextColor);
    	background-color: var(--accentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
	}
	
	.btn-secondary {
		color: var(--mainTextColor);
    	background-color: var(--tertiaryAccentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
	}
	
	.btn-warning {
		color: var(--mainTextColor);
    	background-color: var(--secondaryAccentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
	}
    
    .btn-success {
        color: var(--mainTextColor);
    	background-color: var(--accentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
    }
    
    .btn-danger {
        color: var(--mainTextColor);
    	background-color: var(--secondaryAccentColor);
    	border-color: var(--borderColor);
		--bs-btn-hover-color: var(--hoverTextColor);
    	--bs-btn-hover-bg: var(--hoverColor);
    	--bs-btn-hover-border-color: var(--hoverTextColor);
		--bs-btn-disabled-color: var(--mainTextColor);
    	--bs-btn-disabled-bg: rgba(0, 0, 0, 0);
    	--bs-btn-disabled-border-color: var(--borderColor);
    }
    
    input#QPVolumeMaster::-webkit-slider-thumb, input#QPVolumeMaster::-moz-range-thumb {
        background-color: var(--accentColor);
    }
    
    input#QPVolumeMaster::-webkit-slider-runnable-track, input#QPVolumeMaster::-moz-range-track {
        background-color: var(--boxBackgroundColorTranslucent);
    }
	
	/* Settings and Preferences Menu */
	a.nav-link {
		background-color: var(--boxBackgroundColorTranslucent);
	}
	
	a.nav-link.active {
		--bs-nav-tabs-link-active-color: var(--mainTextColor);
		--bs-nav-tabs-link-active-bg: var(--boxBackgroundColor);
		--bs-nav-tabs-link-active-border-color: var(--borderColor);
		opacity: 100%;
	}
	
	.form-check-input:checked {
		background-color: var(--accentColor);
		border-color: var(--borderColor);
	}
	
	tr.tag > th > [type=button] {
		outline : 1px solid red;
		border-radius: 5px;
	}
	
	.valid {
		outline: 1px solid var(--accentColor);
		border-radius: 5px;
	}
	
	.valid.modified:not([type=checkbox]) {
		outline: 1px solid var(--tertiaryAccentColor);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor);
		border-radius: 5px;
	}
	
	/* Looting Gamemode Section  */
	#treasureRoomMainDiv {
		background-color: var(--boxBackgroundColorTranslucent) !important;
		opacity:  95%;
    	border-radius: var(--borderRadius);
		box-shadow: 0 0 5px var(--boxGlowColor), 0 0 5px var(--boxGlowColor),  0 0 10px var(--boxGlowColor), 0 0 10px var(--boxGlowColor);
	}
	
	#countdownDiv {
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor);
		color: var(--mainTextColor);
	}
	
	#treasureRoomInventoryDiv {
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor);
		color: var(--mainTextColor);
		padding: 0px 5px 0px 5px;
	}
	
	#treasureRoomCoordsDiv {
		text-shadow: 0 0 3px var(--textShadowColor), 0 0 3px var(--textShadowColor), 0...

Reviews

No reviews yet.