Various tweaks for WaifuGame.com
WaifuGame Tweaks by kaorinite
Details
Authorkaorinite
LicenseMIT License
Categorywaifugame
Created
Updated
Size121 kB
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 WaifuHelper Tweaks [WaifuGame]
@version 2024.5.11
@namespace userstyles.world/user/kaorinite
@description Various tweaks for WaifuGame.com
@author WaifuHelper
@license MIT License
@preprocessor stylus
@var checkbox sidebarMenu "Permanent Sidebar" 0
//var checkbox itemTraits "Food Natures" 1
@var checkbox glowEffects "Performant Glow Effects" 0
@var select detailedView "Cards Detailed Veiw" {
"Classic": "0",
"Wide Screen*": "1"
}
@var range contentWidth "Content Width" [50, 50, 100, 10, ""]
@var checkbox horizontalTeam "Horizontal Team (Home Page)" 0
@var checkbox showStats "Show stats (Hotel Pictures view)" 1
//var checkbox lightMode "I am feeling sick" 0
@var checkbox displayC "Cards: Show Common" 1
@var checkbox displayU "Cards: Show Uncommon" 1
@var checkbox displayR "Cards: Show Rare" 1
@var checkbox displayE "Cards: Show Epic" 1
@var checkbox displayL "Cards: Show Legendary" 1
@var checkbox displayM "Cards: Show Mythic" 1
@var checkbox tradeGrid "Trade: Grid View" 0
@var checkbox tradeItems "Trade: Show Items" 1
@var checkbox tradeCards "Trade: Show Cards" 1
==/UserStyle== */
/*
From Despair with <3
Features:
-Food Traits
-Better Cards view
-Better Search view
-Removed Perament Sidebar
*/
@-moz-document url-prefix("https://waifugame.com/") {
lightMode=0:root {
--darkest-black: #0f1117;
--popup-black: #171a1f;
--darker-black: #1b1d21;
--dark-black: #21252a;
/*
--darkest-black: #574240;
--darker-black: #9a6b73;
--dark-black: #bfa5a3;*/
--white-bg: #f4f4f4;
--waif-chart-header: #f81b02;
--waifu-chart-text: #ca5703;
--waifu-chart-odd: #fee7e7;
--waifu-chart-even: #fccccb;
--waifu-red4: #d46e78;
--waifu-red3: #ED5565;
--waifu-red2: #dc3545;
/*brand*/
--waifu-red4: #c82333;
/*hover*/
--waifu-red: #C02130;
--waifu-red7: #C63F4D;
--waifu-aqua: #21b590;
--waifu-yellow: #b59021;
--waifu-magenta: #b521b5;
--waifu-green3: #28a745;
--waifu-green2: #8cc152;
--waifu-green: #107321;
--waifu-blue2: #4a89dc;
--waifu-blue: #3464A3;
--waifu-grey: #6c757d;
--waifu-gray: #434a54;
--r1: #3dd20b;
--r2: #2f78ff;
--r3: #9132c8;
--r4: #ffb400;
--r5: #CF4747;
if contentWidth <=90 {
--waifu-width: (contentWidth)rem;
}
else {
--waifu-width: 100%;
}
scrollbar-width: thin;
/*scrollbar-color: #d0368a var(--darkest-black);*/
scrollbar-color: var(--waifu-red2) var(--darkest-black);
}
/*scrollbars suggested by Daineze*/
::-webkit-scrollbar,
::-webkit-scrollbar-button {
width: 0.5rem;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
border-radius: 1rem;
background-color: var(--darkest-black);
}
/* FULL PAGE */
/*.page-content {}*/
/* COLORS */
.color-gray-dark {
color: #effa!important;
}
.color-green-dark {
color: var(--waifu-green2)!important;
}
a {
color: #80BDFF;
text-decoration: underline;
}
a:hover {
color: #D1E7FF;
}
.card.card-style.mx-2.rounded-2.pt-3.pb-0.bg-dark-dark > .row.mx-2 > .col-12 a {
text-decoration: underline!important;
}
/*
a:hover {
color: #D1E7FF;
}
tbody#shardsTable a,
.list-group a,
a#reportCardButton,
a.fa,
a.actionShowItemSheet,
a[data-tab^="tab"] {
text-decoration: none!important;
}
*/
#footer-bar {
/*diff dark*/
}
/*
.theme-dark .card .input-style-2 span, .theme-dark .card.input-style span, .theme-dark .bg-theme,
.theme-dark .footer, .theme-dark .card, .theme-dark #preloader {
background-color: var(--darkest-black)!important;
}
.theme-dark .polaroid-effect, .theme-dark .timeline-item-content, .theme-dark .tab-controls, .theme-dark .timeline-item-content-full {
background-color: var(--darkest-black)!important;
}
.theme-dark, .theme-dark .page-bg, .theme-dark #page, .theme-dark .loader-main, .theme-dark .instant-article, .theme-dark .divider-icon i, .theme-dark .table tr.even td, .theme-dark .timeline-body, .theme-dark table, .theme-dark td {
background-color: var(--darker-black)!important;
}*/
.page-title-icon.shadow-xl.bg-theme.color-theme {
background-color: var(--waifu-gray)!important;
}
.theme-dark .bg-theme {
background-color: var(--popup-black)!important;
/*background-color: var(--waifu-gray)!important;*/
}
/*form#collapse11 {
background-color: var(--waifu-gray)!important;
}*/
/* PAGE WIDTH CONSISTENCY
body.theme-dark.is-not-ios.modal-open {
width: 100%;
}*/
/* ACTIVE MENUS */
/*div#partyFormation,
div#partyFormationSave,
div#emeraldsPage,
div#subscriberPage,
div#autoLevelMenu,
div#waifuMenu,
div#serverManage,
div#itemPurchaseSheet,
div#itemPurchaseSheetEmeralds,
div#sheetItemDetails,
div#hoteledWaifuMenu*/
#menu-main .card-overlay.bg-gradient {
background: linear-gradient(to top, var(--popup-black) 12.5%, transparent 50%);
}
.menu.menu-box-bottom.rounded-m:not(div#cardInfo):not(div#imageViewer) {
height: max(auto, 100vh)!important;
overflow-y: auto;
overflow-x: hidden;
max-width: var(--waifu-width);
width: auto;
padding: 0 0 1rem 0;
margin-left: auto!important;
margin-right: auto!important;
}
div#imageViewer {
overflow-y: auto;
overflow-x: hidden;
max-width: var(--waifu-width);
width: auto;
padding: 0 0 1rem 0;
margin-left: auto!important;
margin-right: auto!important;
}
.menu.menu-box-bottom.rounded-m.menu-active:not(div#cardInfo) {
bottom: 2rem!important;
}
/* BUTTONS */
.btn.font-14.shadow-l.btn-full.rounded-s.font-600.btn-secondary.text-center.mb-2,
.btn {
padding: 0.75rem!important;
border-radius: 0.25rem!important;
font-size: 1rem!important;
line-height: 1rem!important;
}
/* SOLID */
/* WHITE */
/*.btn.btn-outline-secondary.btn-sm.mt-2.border-white {}*/
/* RED */
.btn.btn-danger,
.btn.bg-red-dark {
background-color: var(--waifu-red)!important;
border-color: var(--waifu-red);
}
/* GREEN */
.color-white > .btn.btn-outline-secondary.btn-sm.btn-block:not(.eBuyBtn):not(.buyBtn),
.btn.btn-success {
background-color: var(--waifu-green);
border-color: var(--waifu-green);
}
/* GREY */
#btnSponsor,
.btn.actionUndo,
.btn.actionDisenchantAll,
.btn.actionProtectCard,
.btnAutoLevel.btn.font-14.shadow-l.btn-full.rounded-s.font-600.btn-secondary.text-center.mb-2,
.btnOpenStats.btn.font-14.shadow-l.btn-full.rounded-s.font-600.btn-secondary.text-center.mb-2 {
border-color: var(--waifu-grey)!important;
}
/* BLUE */
.btn.btn-sm.btn-primary,
.btn.bg-blue-dark.btn-block.btn-sm {
border-color: var(--waifu-blue);
background-color: var(--waifu-blue)!important;
}
/* YELLOW
.btnDeb.btn.font-14.shadow-l.btn-full.rounded-s.font-600.btn-secondary.text-center.mb-2 {
border-color: var(--waifu-yellow);
background-color: var(--waifu-yellow)!important;
}*/
a.btn.btn-primary.btn-block.btn-sm.mt-2 {
width: auto;
}
/* BORDER */
/* WHITE */
/*.btn.btn-center-s.btn-sm.text-uppercase.font-600.mt-4.bg-white.color-black {}*/
/* RED */
.btnReport.btn.font-14.shadow-l.btn-full.rounded-s.font-600.btn-secondary.text-center.mb-2,
.btn-block.btn.btn-sm.btn-outline-secondary.opacity-50,
.btn.btn-outline-secondary.btn-block.btn-sm.border-red-dark {
border-color: var(--waifu-red)!important;
}
.btnReport.btn.font-14.shadow-l.btn-full.rounded-s.font-600.btn-secondary.text-center.mb-2:hover,
.btn-block.btn.btn-sm.btn-outline-secondary.opacity-50:hover,
.btn.btn-outline-secondary.btn-block.btn-sm.border-red-dark:hover {
background-color: var(--waifu-red)!important;
}
.btnReport.btn.font-14.shadow-l.btn-full.rounded-s.font-600.btn-secondary.text-center.mb-2 {
background-color: transparent;
}
button.btn.btn-sm.btn-block.btn-outline-secondary:hover i {
color: white!important;
}
button.buyBtn.btn.btn-sm.btn-block.btn-outline-secondary.border-red-dark {
border-color: var(--waifu-red)!important;
}
button.buyBtn.btn.btn-sm.btn-block.btn-outline-secondary.border-red-dark:hover {
color: white;
background-color: var(--waifu-red)!important;
}
/* GREEN */
#cardInfo .content #addCardToWish {
border-color: var(--waifu-green)!important;
}
#cardInfo .content #remCardToWish {
background-color: var(--waifu-green3)!important;
border-color: var(--waifu-green3)!important;
}
#cardInfo .content #remCardToWish:disabled,
#cardInfo .content #addCardToWish:disabled {
background-color: transparent!important;
border-color: var(--waifu-green3)!important;
color: var(--waifu-green3)!important;
opacity: .75;
}
#cardInfo .content #remCardToWish:hover,
#cardInfo .content #addCardToWish:hover {
background-color: var(--waifu-green)!important;
border-color: var(--waifu-green)!important;
color: white!important;
}
#cardInfo .content #remCardToWish:active,
#cardInfo .content #addCardToWish:active {
background-color: var(--waifu-green);
border-color: var(--waifu-green);
}
#cardInfo .content #remCardToWish:focus,
#cardInfo .content #addCardToWish:focus {
background-color: var(--waifu-green);
border-color: var(--waifu-green);
}
button.buyBtn.btn.btn-sm.btn-block.btn-outline-secondary[value$="_emeralds"],
.eBuyBtn.btn.btn-sm.btn-block.btn-outline-secondary.border-green-dark {
border-color: var(--waifu-green)!important;
}
button.buyBtn.btn.btn-sm.btn-block.btn-outline-secondary[value$="_emeralds"]:hover,
.eBuyBtn.btn.btn-sm.btn-block.btn-outline-secondary.border-green-dark:hover {
color: white;
background-color: var(--waifu-green)!important;
}
/* BLUE */
#creditTable tr:first-child .btn.btn-block.btn-outline-secondary {
border-color: var(--waifu-blue)!important;
}
#creditTable tr:first-child .btn.btn-block.btn-outline-secondary:hover {
background-color: var(--waifu-blue)!important;
}
/* BADGE TEXT */
.list-menu .badge,
.badge {
border-radius: 0.25rem;
color: white;
font-size: .7rem;
padding: 0.25rem!important;
font-variant: small-caps;
}
/* RED */
.badge.bg-highlight,
.badge.badge-danger {
bord...