A custom theme for animemusicquiz.com
HoiBoi's amq theme by BoredMrM8
Details
AuthorBoredMrM8
LicenseMIT License
Categoryanimemusicquiz.com
Created
Updated
Size101 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Elodie's AMQ Style Script ☾ Midnight ☽
@version 10.1
@namespace userstyles.world/user/melodyelodie
@description A custom theme for animemusicquiz.com
@author melodyelodie
@homepageURL https://userstyles.world/user/melodyelodie
@license MIT License
==/UserStyle== */
/*=============================================================================================
Additional code credits: Klem, Juvian, Reborn, Tsukassa, LolCats, Husa, Kempanator
You can pretty much change any element here. Feel free to message me if you want to find a certain thing to change.
- MelodyElodie
V10 rewrite by kempanator [July 2023]
- More complete styling
- Midnight and Twilight scripts merged
- All colors are now controlled by variables
Installing:
1. Install the Stylus browser extension
2. Go to one of these links
https://userstyles.world/style/1435/elodies-amq-script-midnight
https://userstyles.world/style/7990/elodies-amq-script-twilight
3. A Stylus window should pop up
4. Click "Install"
Editing:
1. After installing, click "Edit"
2. Change variables in :root to whatever color scheme you want
Finding the edit menu after closing this window:
1. Click the Stylus extension icon
2. Click "Manage"
3. Click "Elodie's AMQ Style Script"
Color Variable Explanations:
mainBackground url of background image
gameChatBackground background color of game chat
nexusChatBackground background color of nexus chat
dmBackground background color of private messages
windowBackground background color of modals and draggable windows
containerBackground background color of main menu buttons and quiz side windows
videoBackground background color of quiz video player
answerInputBackground background color answer input bar
avatarBackground background color of avatars in quiz and avatar store
lobbyAvatarNameBackground background color of player name in lobby
textColor text color of <body>
textShadowColor shadow color for text
boxShadowColor shadow color for all windows and containers
borderRadius: border radius for all windows and containers
primaryColor top/bottom menu bars
secondaryColor gray stuff in default AMQ
accentColor blue stuff in default AMQ
glowColor correct answer highlight, particles, lives
correctAnswerColor avatar border color for correct answers in quiz
wrongAnswerColor avatar border color for wrong answers in quiz
waitingAnswerColor avatar border color for answers during guess phase in quiz
statusWatchingColor line color of watching status after answer reveal
statusCompletedColor line color of completed status after answer reveal
statusHoldColor line color of hold status after answer reveal
statusDroppedColor line color of dropped status after answer reveal
statusPlanningColor line color of planning status after answer reveal
songHistoryCorrectColor table row color for correct answers in song history window
songHistoryWrongColor table row color for wrong answers in song history window
rankedChallengerColor player name color in chat if they are a ranked challenger
*DO NOT TOUCH THE VARIABLES AFTER THIS
Other recommended scripts:
Joseph's Song List UI: https://github.com/TheJoseph98/AMQ-Scripts/raw/master/amqSongListUI.user.js
Klem's Expand Library Player: https://github.com/Klemkinis/AMQ-Expand-Library-Radio/raw/main/Expand%20Library%20Radio.user.js
Kempanator's Chat Plus: https://github.com/kempanator/amq-scripts/raw/main/amqChatPlus.user.js
Link for development:
https://github.com/kempanator/amq-scripts/raw/main/elodieStyleScript.user.css
=============================================================================================*/
@-moz-document domain("animemusicquiz.com") {
:root {
--mainBackground: url(https://wallpaperaccess.com/full/6238289.jpg);
--gameChatBackground: #00000085;
--nexusChatBackground: #1b1b1bdd;
--dmBackground: #1b1b1bdd;
--windowBackground: #000000b3;
--containerBackground: #0000009e;
--videoBackground: #000000d4;
--answerInputBackground: #000000d6;
--avatarBackground: rgba(0, 0, 0, 0);
--lobbyAvatarNameBackground: #0001;
--textColor: #d9d9d9;
--textShadowColor: #00000080;
--boxShadowColor: #00000080;
--borderRadius: 10px;
--primaryColor: #000;
--secondaryColor: #000000c2;
--accentColor: #362fff;
--glowColor: #57bee0;
--correctAnswerColor: #2b86ca;
--wrongAnswerColor: #db2d2d;
--waitingAnswerColor: #61c1ff;
--statusWatchingColor: #3cff4e;
--statusCompletedColor: #2e69ff;
--statusHoldColor: #f7ff32;
--statusDroppedColor: #ff070c;
--statusPlanningColor: #ffffff;
--songHistoryCorrectColor: #144314;
--songHistoryWrongColor: #4c1111;
--rankedChallengerColor: #0cd5f7;
--colorMod: black;
--colorModOpposite: white;
--brightnessMod: 1;
--textColorTransparent: color-mix(in srgb, var(--textColor), transparent 50%);
--primaryColorContrast: color-mix(in srgb, var(--primaryColor), var(--colorModOpposite) 5%);
--primaryColorContrast2: color-mix(in srgb, var(--primaryColor), var(--colorModOpposite) 12%);
--primaryColorTransparent: color-mix(in srgb, var(--primaryColor), transparent 20%);
--secondaryColorDark: color-mix(in srgb, var(--secondaryColor), black 50%);
--accentColorLight: color-mix(in srgb, var(--accentColor), white 40%);
--accentColorDark: color-mix(in srgb, var(--accentColor), black 20%);
--accentColorContrast: color-mix(in srgb, var(--accentColor), var(--colorModOpposite) 40%);
--accentColorTransparent: color-mix(in srgb, var(--accentColor), transparent 50%);
--songHistoryCorrectColorHover: color-mix(in srgb, var(--songHistoryCorrectColor), white 5%);
--songHistoryWrongColorHover: color-mix(in srgb, var(--songHistoryWrongColor), white 5%);
}
/* Basic Defaults */
body {
color: var(--textColor);
}
a {
color: var(--accentColorContrast);
}
a:visited {
color: var(--accentColorContrast);
}
a:hover {
color: var(--accentColor);
}
textarea {
background-color: var(--primaryColor);
}
.button:hover {
box-shadow: 0 0 10px 2px var(--accentColor);
}
.floatingContainer {
background-color: var(--secondaryColor);
box-shadow: 0 0 10px 2px var(--boxShadowColor);
}
.tabContainer {
border-bottom: 1px solid var(--secondaryColor);
}
.tabContainer .tab::before {
background-color: var(--primaryColor);
box-shadow: 1px -3px 10px var(--boxShadowColor);
}
.tabContainer .tab.selected::before {
background-color: var(--secondaryColor);
}
.leftRightButtonTop {
box-shadow: 1px -3px 10px var(--boxShadowColor);
}
.leftRightButtonBottom {
box-shadow: 1px 3px 10px var(--boxShadowColor);
}
.rightLeftTopBottom {
box-shadow: 0 -3px 10px var(--boxShadowColor);
}
.rightLeftButtonBottom {
box-shadow: -1px 3px 10px var(--boxShadowColor);
}
.leftShadowBorder {
box-shadow: -1px 0 10px var(--boxShadowColor);
}
.rightShadowBorder {
box-shadow: 1px 0 10px var(--boxShadowColor);
}
/* JQuery */
.context-menu-list {
box-shadow: 0 2px 5px var(--boxShadowColor);
}
.context-menu-list.context-menu-root {
background-color: var(--primaryColor);
}
.context-menu-item {
background-color: var(--primaryColor);
color: var(--textColor);
}
.context-menu-item.context-menu-hover {
color: var(--textColor);
background-color: var(--accentColor);
}
.context-menu-item.context-menu-disabled {
background-color: var(--primaryColor);
color: var(--textColor);
opacity: .5;
}
/* Bootstrap */
.form-control:focus {
border-color: var(--accentColor);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--accentColorTransparent);
}
.popover {
background-color: var(--primaryColor);
}
.popover-title {
border-bottom: none;
}
.popover.top > .arrow:after {
border-top-color: var(--primaryColor);
}
.popover.bottom > .arrow:after {
border-bottom-color: var(--primaryColor);
}
.popover.left > .arrow:after {
border-left-color: var(--primaryColor);
}
.popover.right > .arrow:after {
border-right-color: var(--primaryColor);
}
.popover > .arrow:after {
opacity: 1;
}
.tooltip.top .tooltip-arrow {
border-top-color: var(--primaryColor);
}
.tooltip-inner {
color: var(--textColor);
background-color: var(--primaryColor);
opacity: 1;
}
.btn-primary {
color: #ffffff;
background-color: var(--accentColor);
border-color: var(--accentColorDark);
box-shadow: none;
}
.btn-primary:hover {
color: #ffffff;
background-color: var(--accentColor);
border-color: var(--accentColorDark);
box-shadow: none;
opacity: .8;
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover {
background-color: var(--accentColor);
border-color: var(--accentColorDark);
}
.customCheckbox label {
...