Various tweaks for WaifuGame.com
WaifuGame Tweaks by kaorinite
Details
Authorkaorinite
LicenseMIT License
Categorywaifugame
Created
Updated
Code size84 kB
Code checksum34b59e5f
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Better Cards view
6 Cards per row in search results
Backstage dark mode
Shrinked most of the pages to 2/3 of screen width
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name (UPD) WaifuHelper Tweaks [WaifuGame]
@namespace userstyles.world/user/kaorinite
@version 2025.4.7.5
@description Various tweaks for WaifuGame.com
@author your mom
@license MIT License
@preprocessor less
@var color rarity-common "Rarity: Common" #ccc
@var color rarity-uncommon "Rarity: Uncommon" #3dd20b
@var color rarity-rare "Rarity: Rare" #2f78ff
@var color rarity-epic "Rarity: Epic" #9132c8
@var color rarity-legendary "Rarity: Legendary" #ffb400
@var color rarity-mythic "Rarity: Mythic" #cf4747
==/UserStyle== */
@dark-0: #0b0e12;
/* header footer */
@dark-1: #0f1117;
/* content cards */
@dark-2: #171a1f;
/* sidebar detailed view*/
@dark-3: #1b1d21;
/* background table cell */
@dark-4: #21252a;
/* table header */
@dark-5: #434A54;
/* event */
.generate-rarity-class(@background-color, @text-color: #adb5bd) {
@lightness-text: lightness(@text-color);
@hue-background: hue(@background-color);
@saturation-background: saturation(@background-color);
@contrast-ratio: 7;
@new-lightness-background: (@lightness-text / 7 + 5%);
border-color: @background-color;
background-color: @background-color;
--rarity-dark: hsl(@hue-background, @saturation-background, @new-lightness-background);
}
@-moz-document domain("waifugame.com") {
@dark-card: #0f1117;
@muted: #A2A9AE;
/* == GLOBAL == */
:root {
/* empty space on right fix */
--maxwidth: 100%;
/*
--rarity-mythic-dark: #4D1414;
--rarity-legendary-dark: #332400;
--rarity-epic-dark: #3C1551;
--rarity-rare-dark: #002466;
--rarity-uncommon-dark: #0D2D06;
--rarity-common-dark: #292929;
*/
}
a:not(.btn) {
color: #47A0FF;
&:hover {
color: #61ADFF;
}
&[href="#"] {
color: white;
&:hover {
color: var(--red);
}
}
}
.text-muted {
color: muted!important;
}
.theme-dark p {
color: #9E9E9E;
}
.raffle-row:has(.btn.btn-danger.btn-sm.btn-block.buybtn),
.poll-row:has(.votebtn.btn.btn-sm.btn-block.btn-success),
.alert.alert-secondary,
.glow-0 {
--rarity-color: @rarity-common;
.generate-rarity-class(@rarity-common);
}
.bg-green-dark,
.raffle-row:has(.btn.btn-outline-secondary),
.poll-row:has(.color-yellow-dark),
.poll-row:has(.votebtn.btn.btn-sm.btn-block.btn-secondary),
.alert.alert-success,
.glow-1 {
--rarity-color: @rarity-uncommon;
.generate-rarity-class(@rarity-uncommon);
}
.bg-blue-dark,
.alert.alert-info,
.glow-2 {
--rarity-color: @rarity-rare;
.generate-rarity-class(@rarity-rare);
}
.bg-magenta-dark,
.glow-3 {
--rarity-color: @rarity-epic;
.generate-rarity-class(@rarity-epic);
}
.bg-yellow-dark,
.raffle-row:has(.btn.btn-danger.btn-sm.btn-block.buybtn):hover,
.poll-row:has(.votebtn.btn.btn-sm.btn-block.btn-success):hover,
.alert.alert-warning,
.glow-4 {
--rarity-color: @rarity-legendary;
.generate-rarity-class(@rarity-legendary);
}
.bg-red-dark,
.alert.alert-danger,
.glow-5,
.glow-6,
.glow-7,
.glow-8 {
--rarity-color: @rarity-mythic;
.generate-rarity-class(@rarity-mythic);
}
.header {
background-color: transparent!important;
pointer-events: none;
backdrop-filter: none;
border: none;
> .header-title {
display: none;
}
> .header-icon.header-icon-1 {
border-radius: 1rem;
background-color: @dark-5 !important;
margin: 13.33333px;
height: 2.375rem;
width: 2.375rem;
line-height: 39px;
pointer-events: auto;
}
> .header-icon.header-icon-4 {
display: none;
}
}
.card-style {
box-shadow: none;
}
#preloader:not(.preloader-hide) {
opacity: .5;
}
#infoModalContent {
padding: 0!important;
margin-bottom: 1rem!important;
}
@content-height: calc(100svh - 4rem);
@content-width: calc(@content-height*4/3);
@media screen and (min-width: @content-width) {
#cardInfo.menu-active {
transform: translateY(0%)!important;
top: 0!important;
overflow: hidden!important;
min-height: @content-height;
}
#cardInfo {
height: 100svh;
width: @content-width;
max-width: unset;
margin-left: auto;
margin-right: auto;
max-height: calc(1200px + 7rem);
overflow: hidden;
border-radius: 1rem!important;
/* 2.425 */
pointer-events: none;
backdrop-filter: blur(5px);
> .menu-title {
height: 4rem;
}
> .card.card-style {
padding: 1rem;
margin: 0!important;
background: transparent;
width: 50%;
position: fixed;
> #cardInfoImg {
border-radius: 1rem!important;
}
}
> .content {
height: @content-height!important;
position: fixed;
width: 50%;
right: 0;
margin: 0;
padding: 1rem 1rem 2rem 0;
overflow-y: scroll;
> table {
> colgroup {
> col:nth-of-type(1),
> col:nth-of-type(3) {
width: 0;
}
}
> tbody {
> tr {
> th {
min-width: 8rem!important;
border-bottom: @dark-3 solid 1px;
padding: 0 0.5rem!important;
}
> td {
border-bottom: @dark-2 solid 1px;
padding: 0 0.5rem!important;
> .btn {
padding: 0.5rem 0.25rem;
margin: 0.25rem 0;
&[href^=http] {
border-color: var(--blue)!important;
&:hover {
background-color: var(--blue);
}
}
}
&:last-child {
min-width: 8rem!important;
}
}
&:hover {
> th {
background-color: @dark-5!important;
}
> td {
background-color: @dark-4!important;
}
}
}
}
margin-bottom: 0.5rem!important;
border: none;
background: transparent!important;
tr:first-child th:first-child {
border-top-left-radius: 0.5rem;
}
tr:first-child td:last-child {
border-top-right-radius: 0.5rem;
}
tr:last-child th:first-child {
border-bottom-left-radius: 0.5rem;
}
tr:last-child td:last-child {
border-bottom-right-radius: 0.5rem;
}
}
> #wishlistButtons > button,
> #reportCardButton,
> .btn.close-menu {
color: white;
height: 3rem;
margin-bottom: 0.5rem!important;
padding: 0.75rem!important;
font-size: 1rem;
line-height: 1.25rem;
}
> .btn.close-menu {
margin: 0!important;
background-color: transparent!important;
border-color: var(--red);
&:hover, &:focus, &:active {
background-color: var(--red)!important;
}
}
> #wishlistButtons {
> #addCardToWish {
border-color: var(--green);
&:hover, &:focus, &:active {
background-color: var(--green);
}
}
> #remCardToWish {
border-color: var(--green);
background-color: var(--green);
&:hover, &:focus, &:active {
opacity: 0.75;
}
}
> #remCardToWish:disabled,
> #addCardToWish:disabled {
background-color: transparent !important;
color: var(--green);
opacity: 0.75;
}
}
}
}
}
#sheetItemDetails,
#itemPurchaseSheet,
#itemPurchaseSheetEmeralds,
#sheetTagManage,
#serverManage,
#waifuMenu,
#autoSpinMenu,
#autoLevelMenu,
#elementReportMenu,
#hoteledWaifuMenu,
#swiperMenu,
#autoPlayMenu,
#emeraldsPa...