MediaWiki:Timeless.css: Difference between revisions

From NOISZ Wiki
(removing changes list margin for smaller resolutions so it all shows up)
No edit summary
 
(48 intermediate revisions by the same user not shown)
Line 2: Line 2:
/* ==UserStyle==
/* ==UserStyle==
@name          NOISZ Wiki Anarch - Timeless
@name          NOISZ Wiki Anarch - Timeless
@namespace      github.com/openstyles/stylus
@version        2.5.6
@description    the style for alpha testing the Timeless theme for the NOISZ Official Wiki
@description    the style for alpha testing the Timeless theme for the NOISZ Official Wiki
@author        angeldeluxe
@author        angeldeluxe
Line 52: Line 50:
             display: none !important;
             display: none !important;
         }
         }
         /* This is the colour for links on the sidebar. */
         /* This is the colour for links on the sidebar. */
         #mw-site-navigation .sidebar-chunk a:visited,
         #mw-site-navigation .sidebar-chunk a:visited,
Line 62: Line 61:
             color: #ffabdf
             color: #ffabdf
         }
         }
         .sl-story-gallery .row-2 img,
         .sl-story-gallery .row-2 img,
         .sl-story-gallery .row-4 img,
         .sl-story-gallery .row-4 img,
Line 86: Line 86:
             color: #ffabdf
             color: #ffabdf
         }
         }
         .sl-story-gallery .row-2 img,
         .sl-story-gallery .row-2 img,
         .sl-story-gallery .row-4 img,
         .sl-story-gallery .row-4 img,
Line 94: Line 95:
             color: unset   
             color: unset   
         }
         }
        .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        } 
         .mainpage-leftcolumn,
         .mainpage-leftcolumn,
         #mainpage-leftcolumn {
         #mainpage-leftcolumn {
Line 126: Line 130:
             color: unset   
             color: unset   
         }
         }
        .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        } 


         #rightcolumn-spacer {
         #rightcolumn-spacer {
Line 155: Line 162:
        margin-left: 0px;
        margin-left: 0px;
         }
         }
        .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        }


     }
     }
Line 172: Line 183:
        margin-left: 0px;
        margin-left: 0px;
         }
         }
        .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        } 
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
        display: block !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
        display: none !important
        }
     }
     }
     @media only screen and (max-width: 580px) and (min-width:480px) {
     @media only screen and (max-width: 580px) and (min-width:480px) {
Line 185: Line 205:
        margin-left: 0px;
        margin-left: 0px;
         }
         }
        .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        }
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
        display: none !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
        display: block !important
        }
     }
     }
     @media only screen and (max-width: 480px) and (min-width:280px) {
     @media only screen and (max-width: 480px) and (min-width:280px) {
Line 198: Line 227:
        margin-left: 0px;
        margin-left: 0px;
         }
         }
        .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        }
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
        display: none !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
        display: block !important
        }
     }
     }
     @media only screen and (max-width: 280px) {
     @media only screen and (max-width: 280px) {
Line 211: Line 249:
        margin-left: 0px;
        margin-left: 0px;
         }
         }
        .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        }
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
        display: none !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
        display: block !important
        }
     }
     }


Line 218: Line 265:
     .mainpage-game-video {
     .mainpage-game-video {
         padding: 10px;
         padding: 10px;
         min-width: 390px;
         min-width: 300px;
         max-width: 65%;
         max-width: 65%;
         justify-content: center;
         justify-content: center;
Line 244: Line 291:
             display: block;
             display: block;
             float: left;
             float: left;
            max-width: 100%;
         }
         }
         .desktop-spoiler {
         .desktop-spoiler {
Line 265: Line 313:
      
      


     code, pre, .mw-code {
     code, pre, .mw-code,
  .mw-search-form-wrapper #powersearch #mw-searchoptions {
         color: #fff;
         color: #fff;
         background: unset
         background: unset
Line 664: Line 713:
         filter: blur(0px)
         filter: blur(0px)
     }
     }
.page-Category_Music_releases .album-gallery .gallerybox:nth-child(9) .thumb::after, .page-Category_Music_releases .album-gallery .gallerybox:nth-child(11) .thumb::after, .spoiler-blur::after {
content: 'SPOILER';
font-family: 'Vipnagorgialla';
font-weight: bold;
font-size: 30px;
position: relative;
top: -140px;
text-shadow: 0 0 4px white;
}
    .page-Category_Music_releases .album-gallery .gallerybox:nth-child(9) img, .page-Category_Music_releases .album-gallery .gallerybox:nth-child(11) img {
        filter: blur(20px)
    }


     button.tabber__header__prev, button.tabber__header__next {
     button.tabber__header__prev, button.tabber__header__next {
Line 841: Line 903:
     .style-table > tbody > tr:hover,
     .style-table > tbody > tr:hover,
     .lost-data > tbody > tr:hover,
     .lost-data > tbody > tr:hover,
    .sl-area-convos > tbody > tr:hover,
     .modules-table > tbody > tr:hover {
     .modules-table > tbody > tr:hover {
         background-color: #6f027c;
         background-color: #6f027c;
Line 1,305: Line 1,368:
     .song-table tr:nth-child(2n + 1),
     .song-table tr:nth-child(2n + 1),
     .sl-song-table tr:nth-child(2n + 1),
     .sl-song-table tr:nth-child(2n + 1),
    .noisz-character-navigation tr:nth-child(2n + 1),
     .artists-table tr:nth-child(2n + 1) {
     .artists-table tr:nth-child(2n + 1) {
         background-color: #7B4F7C;
         background-color: #7B4F7C;
Line 1,320: Line 1,384:
     /* For the diamonds around the SL story LV requirements */
     /* For the diamonds around the SL story LV requirements */
     .gracelv:after {
     .gracelv:after {
         content: url(https://anarch.games/noisz/wiki/images/4/4a/Gracediamondempty.png);
         content: url(https://anarch.games/noisz/wiki/images/c/c0/Gracediamondempty_small.png);
     }
     }
     .seralv:after {
     .seralv:after {
         content: url(https://anarch.games/noisz/wiki/images/a/a3/Seradiamondempty.png);
         content: url(https://anarch.games/noisz/wiki/images/4/49/Seradiamondempty_small.png);
     }
     }
     .sumirelv:after {
     .sumirelv:after {
         content: url(https://anarch.games/noisz/wiki/images/9/96/Sumirediamondempty.png);
         content: url(https://anarch.games/noisz/wiki/images/5/50/Sumirediamondempty_small.png);
     }
     }
     .hakunolv:after {
     .hakunolv:after {
         content: url(https://anarch.games/noisz/wiki/images/a/ac/Hakunodiamondempty.png);
         content: url(https://anarch.games/noisz/wiki/images/0/09/Hakunodiamondempty_small.png);
         filter: brightness(0.85);
         filter: brightness(0.85);
     }
     }
     .jokerlv:after {
     .jokerlv:after {
         content: url(https://anarch.games/noisz/wiki/images/8/88/Jokerdiamondempty.png);
         content: url(https://anarch.games/noisz/wiki/images/5/56/Jokerdiamondempty_small.png);
     }
     }


Line 1,350: Line 1,414:
         top: -34px;
         top: -34px;
         left: 9px;
         left: 9px;
     }
     }
     .gracelv b,
     .gracelv b,
Line 1,503: Line 1,568:
     /* Animation for the "What" the Cat page. Currently inactive and not working but leaving the code for wheneve */
     /* Animation for the "What" the Cat page. Currently inactive and not working but leaving the code for wheneve */
     .meowfly img:after,
     .meowfly img:after,
    .mw-wiki-logo:after,
     .meowfly:after {
     .meowfly:after {
         bottom: 200px;
         bottom: 200px;
Line 1,514: Line 1,580:
     .meowfly:hover::after,
     .meowfly:hover::after,
     .meowfly img:active::after,
     .meowfly img:active::after,
     .meowfly:active::after {
     .meowfly:active::after,
    .mw-wiki-logo:hover::after,
    .mw-wiki-logo::after {
         position: fixed;
         position: fixed;
         left: 40000px;
         left: 40000px;
Line 1,564: Line 1,632:
div#site-tools.sidebar-chunk {
div#site-tools.sidebar-chunk {
     display: none  
     display: none  
}
/* This is so text doesn't overflow awkwardly for the Forge Builds page galleries. */
.forge-modules-gallery .gallerytext p {
    word-wrap: normal
}
.forge-modules-gallery .gallerytext {
    overflow: visible
}
.forge-modules-gallery .gallerybox {
    padding-left: 5px;
    padding-right: 5px;
}
/* The actual gallerybox hallucinates a max-width of 395px so i have to do this */
.forge-modules-gallery .gallery {
    max-width: 450px !important
}
/* To make the wiki logo look as it is instead of a huge what watching you */
.mw-wiki-logo {
    background-size: contain;
}
.mw-wiki-logo::before{
    content: '';
    display: inline-block;
    background: url("https://anarch.games/noisz/wiki/images/e/e6/Site-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 100%;
    height: 100%;
}
}

Latest revision as of 17:13, 8 January 2026

/* All CSS here will be loaded for users of the Timeless skin */
/* ==UserStyle==
@name           NOISZ Wiki Anarch - Timeless
@description    the style for alpha testing the Timeless theme for the NOISZ Official Wiki
@author         angeldeluxe
==/UserStyle== */
@-moz-document domain("https://anarch.games/") {
    /* Insert code here... */
}

/* Let's import the fonts first */
    
     @font-face {
         font-family: 'Exo';
         font-style: normal;
         src: url(https://fonts.gstatic.com/s/exo/v24/4UaOrEtFpBISc36j.woff2) format('woff2');
     }
     
/* This is the responsive design section, and alters elements as needed for different screen sizes. */

     @media only screen and (min-width: 1099px) {
         .mainpage-rightcolumn,
         #mainpage-rightcolumn {
             display: block;
             float: right; 
             position: initial;
             right: 0px;
             top: 0px;
             width: 27%;
             padding: 2%;
             border: 1px solid #fff;
             box-shadow: 0 0 5px 2px #f249b1, inset 0 0 5px 1px #f249b1;
             border-radius: 10px
         }

         .mainpage-leftcolumn,
         #mainpage-leftcolumn {
             display: block;
             float: left;
             width: 63%;
             padding: 2%;
             border: 1px solid #fff;
             box-shadow: 0 0 5px 2px #f249b1, inset 0 0 5px 1px #f249b1;
             border-radius: 10px
         }
         .desktop-spoiler {
             display: block !important;
         }
         .album-spoiler {
             display: none !important;
         }

         /* This is the colour for links on the sidebar. */
         #mw-site-navigation .sidebar-chunk a:visited,
         #mw-related-navigation .sidebar-chunk .sidebar-inner a:visited {
             color: #fff
         }

         #mw-site-navigation .sidebar-chunk a,
         #mw-related-navigation .sidebar-chunk .sidebar-inner a {
             color: #ffabdf
         }

        .sl-story-gallery .row-2 img,
        .sl-story-gallery .row-4 img,
        .sl-story-gallery .row-6 img {
            bottom: unset
        }
     }

     @media only screen and (min-width: 1024px) and (max-width: 1099px) {
         .desktop-spoiler {
             display: block !important;
         }
         .album-spoiler {
             display: none !important;
         }
         /* This is the colour for links on the sidebar. */
         #mw-site-navigation .sidebar-chunk a:visited,
         #mw-related-navigation .sidebar-chunk .sidebar-inner a:visited {
             color: #f533db
         }

         #mw-site-navigation .sidebar-chunk a,
         #mw-related-navigation .sidebar-chunk .sidebar-inner a {
             color: #ffabdf
         }

        .sl-story-gallery .row-2 img,
        .sl-story-gallery .row-4 img,
        .sl-story-gallery .row-6 img {
            bottom: unset
        }
        #mw-site-navigation .sidebar-chunk .sidebar-inner .mw-portlet-body a  {
            color: unset   
        }
        .sidebar-inner {
	        background: rgba(14, 25, 26, 0.8)
        }  
         .mainpage-leftcolumn,
         #mainpage-leftcolumn {
            padding: 2%   
        }
        
        
    }
     @media only screen and (min-width: 851px) and (max-width: 1023px) {
         .desktop-spoiler {
             display: block !important;
         }
         .album-spoiler {
             display: none !important;
         }
         /* This is the colour for links on the sidebar. */
         #mw-site-navigation .sidebar-chunk a:visited,
         #mw-related-navigation .sidebar-chunk .sidebar-inner a:visited {
             color: #f533db
         }

         #mw-site-navigation .sidebar-chunk a,
         #mw-related-navigation .sidebar-chunk .sidebar-inner a {
             color: #ffabdf
         }
        .sl-story-gallery .row-2 img,
        .sl-story-gallery .row-4 img,
        .sl-story-gallery .row-6 img {
            bottom: unset
        }
        #mw-site-navigation .sidebar-chunk .sidebar-inner .mw-portlet-body a  {
            color: unset   
        }
        .sidebar-inner {
	        background: rgba(14, 25, 26, 0.8)
        }  

        #rightcolumn-spacer {
            display: block !important
         }
         
        .mainpage-leftcolumn,
         #mainpage-leftcolumn {
            padding: 2%   
        }
    }

     @media only screen and (max-width: 851px) and (min-width: 600px) {
         .mainpage-rightcolumn,
         #mainpage-rightcolumn {
             display: block;
             float: right;
             position: initial;
             right: 0px;
             top: 0px;
             width: 100%;
             max-width: -moz-available;
         }
         .mainpage-leftcolumn,
         #mainpage-leftcolumn {
            padding-left: unset   
         }
         .client-js .mw-changeslist table.mw-enhanced-rc {
	        margin-left: 0px;
         }
        .sidebar-inner {
	        background: rgba(14, 25, 26, 0.8)
        }


     }
         
    @media only screen and (max-width: 840px) and (min-width: 580px) {
        .sl-story-gallery .row-2 img,
        .sl-story-gallery .row-4 img,
        .sl-story-gallery .row-6 img {
            bottom: unset
        }
        .mainpage-leftcolumn,
         #mainpage-leftcolumn {
            padding-left: unset;
            max-width: -moz-available;
         }
         .client-js .mw-changeslist table.mw-enhanced-rc {
	        margin-left: 0px;
         }
        .sidebar-inner {
	        background: rgba(14, 25, 26, 0.8)
        }  
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
	        display: block !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
	        display: none !important
        }
     }
     @media only screen and (max-width: 580px) and (min-width:480px) {
        .sl-story-gallery .row-2 img, .sl-story-gallery .row-4 img, .sl-story-gallery .row-6 img {
            padding-top: 20px
         }
         .mainpage-leftcolumn,
         #mainpage-leftcolumn {
            padding-left: unset;   
            max-width: -moz-available;
         }
         .client-js .mw-changeslist table.mw-enhanced-rc {
	        margin-left: 0px;
         }
        .sidebar-inner {
	        background: rgba(14, 25, 26, 0.8)
        }
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
	        display: none !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
	        display: block !important
        }
     }
    @media only screen and (max-width: 480px) and (min-width:280px) {
        .sl-story-gallery .row-2 img, .sl-story-gallery .row-4 img, .sl-story-gallery .row-6 img {
            padding-top: 35px  
         }
        .mainpage-leftcolumn,
         #mainpage-leftcolumn {
            padding-left: unset;
            max-width: -moz-available;  
         }
         .client-js .mw-changeslist table.mw-enhanced-rc {
	        margin-left: 0px;
         }
        .sidebar-inner {
	        background: rgba(14, 25, 26, 0.8)
        } 
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
	        display: none !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
	        display: block !important
        }
     }
    @media only screen and (max-width: 280px) {
        .sl-story-gallery .row-2 img, .sl-story-gallery .row-4 img, .sl-story-gallery .row-6 img {
            padding-top: 50px  
         }
        .mainpage-leftcolumn,
         #mainpage-leftcolumn {
            padding-left: unset;   
            max-width: -moz-available;
         }
         .client-js .mw-changeslist table.mw-enhanced-rc {
	        margin-left: 0px;
         }
        .sidebar-inner {
	        background: rgba(14, 25, 26, 0.8)
        } 
        .mw-collapsible.noisz-story-navbar.mw-made-collapsible {
	        display: none !important
        }
        .mw-collapsible.noisz-story-navbar-mobile.mw-made-collapsible {
	        display: block !important
        }
     }

         
/* This section is for the new main page sections. */

     .mainpage-game-video {
         padding: 10px;
         min-width: 300px;
         max-width: 65%;
         justify-content: center;
         align-self: center;

     }

     .pc-game-info-wrapper {
         width: 100%;
         display: -webkit-flex;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
     }

     .pc-game-buttons-container {
         display: -webkit-flex;
         display: flex;
         flex-direction: column;
         justify-content: center;
         width: fit-content
     }
     .mainpage-leftcolumn,
     #mainpage-leftcolumn {
             display: block;
             float: left;
             max-width: 100%;
         }
         .desktop-spoiler {
             display: none;
         }
         .album-spoiler {
             display: block;
         }
        #upcoming-birthdays > p:first-of-type, #upcoming-birthdays > p:nth-of-type(3){
            display: none    
        }
    
/* From here, the elements of the UI are altered. */
         

    #mw-site-navigation .sidebar-chunk a,
    #mw-related-navigation .sidebar-chunk .sidebar-inner a {
             color: #ffabdf
    }

     

    code, pre, .mw-code,
   .mw-search-form-wrapper #powersearch #mw-searchoptions {
        color: #fff;
        background: unset
     }
     .mw-plusminus-pos {
        color: #2ec817
     }
     
     .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
        color: #fff;
        background-color: unset
     }
     
     .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
    .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
        background-color: #000   
     }
     




     .timeless-logo img,
     #p-banner {
         content: url(https://anarch.games/noisz/wiki/images/e/e6/Site-logo.png);
         position: relative;
         width: 50%
     }



     .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
     #mw-header-container, .sl-gameplay-navbox-header {
         background: #6f027c
     }

     #mw-content {
         border: 1px solid #f533db;
         margin-bottom: 2em
     }

     #mw-content-container {
         padding: 0px
     }

     .ts-inner {
         max-width: initial
     }

     .diff-addedline {
         border-color: #f533db
     }

     .diff-addedline .diffchange {
         background-color: #6f027c
     }

     #mw-site-navigation .sidebar-chunk,
     #mw-related-navigation .sidebar-chunk {
         background: rgba(155, 48, 140, 0.61);
         box-shadow: 0 0 20px 1px rgba(255, 79, 249, 0.3);
         color: #f533db;
         font-family: 'Exo';
         border-radius: 10px;
         border: 1px solid #f533db;
     }


     #mw-site-navigation h2,
     #mw-related-navigation h2 {
         font-family: 'Exo'
     }

     #mw-content-block {
         background-image: url(https://anarch.games/starlivht/images/bg.jpg);
         background-attachment: fixed;
         background-size: 1000px;
         background-position: 50% 50%;
         background-clip: border-box;
     }

     #mw-site-navigation .sidebar-chunk h3,
     #p-banner {
         font-family: 'Exo', sans serif
     }

     .cosmos-bannerOption * {
         fill: #fff;
         stroke: #fff
     }
     .tools-inline li[id^="ca-nstab-"] a, .tools-inline li[id^="ca-nstab-"] span, .tools-inline li[id^="ca-talk"] a, .tools-inline li[id^="ca-talk"] span {
        filter: invert(1)   
     }
    .mw-scribunto-console-fieldset {
        color: #fff;
        background: #000
    }
    .mw-scribunto-message {
        background: #000;
        color: #cc8b12
    }


     /* This covers pretty much all text I can find. */
   
     .mw-body h1,
     .mw-body h2,
     .mw-body h3,
     .mw-body h4,
     .mw-body h5,
     .mw-capiunto-infobox,
     .editOptions,
     .editOptions .oo-ui-fieldLayout-body .oo-ui-labelElement-label,
     .oo-ui-fieldLayout-body,
     .oo-ui-labelWidget.oo-ui-inline-help,
     #firstHeading,
     .ve-ce-contentBranchNode,
     .cosmos-header__sitename a:any-link,
     .cosmos-header .wds-dropdown__content .wds-list.wds-is-linked li > a:not(.wds-button),
     .cosmos-header__counter *,
     #cosmos-footer-footerContent *,
     body #mw-content,
     .cosmos-dropdown-list > ul > li > :only-child *,
     body .mw-changeslist-line,
     .oo-ui-fieldLayout-header,
     body .wikitable > * > tr > td,
     table.mw-datatable,
     .oo-ui-radioSelectInputWidget .oo-ui-labelElement-label,
     #personal h2,
     .thumbcaption,
     textarea,
     #wpSummary,
     #wpDestFile,
     .oo-ui-textInputWidget .oo-ui-inputWidget-input,
     .mw-widget-dateInputWidget.oo-ui-textInputWidget .oo-ui-labelElement-label,
     code,
     pre,
     #mw_metadata *,
     .diff-context,
     .mw-body-content .mw-number-text h3,
     .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
     #contentSub,
     #content #mw-editpage-minoredit .oo-ui-labelElement-label,
     #content #mw-editpage-watch .oo-ui-labelElement-label {
         color: #fff;
         font-family: 'Exo';
     }
     
     
     /* This is the reference citation highlight text. */
     ol.references li:target, sup.reference:target {
    background-color: #A86D00
     }


    /* This is so icons in slider galleries show up. */
     .oo-ui-icon-previous,
     .oo-ui-icon-imageGallery,
     .oo-ui-icon-next {
         filter: invert(1)
     }
     .oo-ui-popupWidget-popup .oo-ui-popupWidget-head .oo-ui-labelElement-label,
     .oo-ui-popupWidget-popup .oo-ui-popupWidget-body p,
     #ooui-52 .oo-ui-tool-title,
     #ooui-116 .oo-ui-labelElement .oo-ui-labelElement-label{
        color: #000   
     }
/* This section is for the editor interfaces. */
    
     #mw-header-nav-hack {
        background: #000
     }
     #ooui-17 .oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-scrollable.oo-ui-panelLayout-padded.oo-ui-panelLayout-expanded,
     #ooui-17 .ve-ce-branchNode.ve-ce-documentNode.ve-ce-attachedRootNode.ve-ce-rootNode.mw-content-ltr.mw-parser-output.mw-show-empty-elt,
     #ooui-19 .oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-scrollable.oo-ui-panelLayout-padded.oo-ui-panelLayout-expanded,
     #ooui-19 .ve-ce-branchNode.ve-ce-documentNode.ve-ce-attachedRootNode.ve-ce-rootNode.mw-content-ltr.mw-parser-output.mw-show-empty-elt,
    .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
        background: #000   
     }
     .ve-ce-branchNode.ve-ce-documentNode.ve-ce-attachedRootNode.ve-ce-rootNode.mw-content-ltr.mw-parser-output.mw-show-empty-elt a,
     #ooui-17 .ve-ui-mwMediaDialog-description-link,
     .oo-ui-window-body .ve-ui-mwMediaInfoFieldWidget-text a,
     .oo-ui-window-body #ooui-45 a,
     .ve-ui-mwSaveDialog-viewer a,
    .oo-ui-fieldLayout-field .oo-ui-labelWidget a,
    .oo-ui-tool-link:hover,
    #ooui-44 .oo-ui-labelElement-label .ve-ui-mwMediaDialog-description-link,
    .ve-ui-mwMediaDialog-description-link,
    .mw-confirmEdit-captchaInputWidget a {
         color: #37fcff
     }
     #ooui-17 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
     #ooui-19 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
     #ooui-3,
     #ooui-17 .ve-ui-mwGalleryDialog-imageListMenuLayout-desktop > .oo-ui-menuLayout-menu,
    .oo-ui-processDialog-navigation,
    #ooui-19,
    #ooui-19 .oo-ui-fieldLayout-header .oo-ui-labelElement-label,
    .ve-ui-mwSaveDialog-savePanel,
    .oo-ui-window-foot .oo-ui-processDialog-actions-other,
    #editpage-copywarn .oo-ui-window-foot .oo-ui-processDialog-actions-other,
    #ooui-19 #ooui-7.oo-ui-labelElement-label,
    #editpage-copywarn .ve-ui-mwSaveDialog-summary .ve-ui-mwSaveDialog-options,
    .oo-ui-window-body,
    .oo-ui-window-body .oo-ui-toolbar-bar,
     #content .oo-ui-toolbar-bar,
     .oo-ui-popupToolGroup-tools,
     .ve-ui-targetWidget:not(.oo-ui-pendingElement-pending),
     .oo-ui-window-body .ve-ce-contentBranchNode .ve-ce-branchNode-inlineSlug,
     .oo-ui-window-body .ve-ui-mwSaveDialog-options,
     .oo-ui-window-foot {
        background: #000;
        color: #fff
     }
     #ooui-17 .ve-ui-mwGalleryDialog-highlighted-image {
        background: #000;
        background-repeat: no-repeat;
        background-position: center
     }
     #ooui-17 .ve-ui-mwGalleryDialog-imageListMenuLayout-desktop > .oo-ui-menuLayout-menu .oo-ui-panelLayout-padded .oo-ui-buttonElement-button span,
     #ooui-17 .oo-ui-labelElement-label,
     #ooui-19 .ve-ce-branchNode-slug,
     .ve-ui-mwSaveDialog-license #editpage-copywarn,
     .oo-ui-processDialog-actions-primary .oo-ui-buttonElement-button .oo-ui-labelElement-label,
     .ve-ce-paragraphNode.ve-ce-generated-wrapper,
     .oo-ui-window-foot .oo-ui-buttonElement-button .oo-ui-labelElement-label,
     .oo-ui-window-body .oo-ui-buttonElement-button .oo-ui-labelElement-label,
     .oo-ui-window-body .oo-ui-messageDialog-text .oo-ui-messageDialog-message.oo-ui-labelElement-label,
     .oo-ui-window-body .oo-ui-messageDialog-text .oo-ui-messageDialog-title.oo-ui-labelElement-label,
     .oo-ui-fieldLayout-field .oo-ui-labelWidget p,
     .ve-ui-fragmentInspector-form #ooui-3 .oo-ui-labelElement-label,
     .ve-ui-fragmentInspector-form #ooui-5 .oo-ui-labelElement-label,
     .mw-special-Movepage #ooui-3.oo-ui-menuSelectWidget .oo-ui-labelElement-label,
     .mw-confirmEdit-captchaInputWidget,
     #ooui-6 .oo-ui-flaggedElement-error .oo-ui-labelElement-label
    {
        color: #fff
     }
     #ooui-19 .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
     .oo-ui-processDialog-navigation .oo-ui-icon-close,
     .mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
     .mw-rcfilters-ui-row .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
     .mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator,
     .mw-rcfilters-ui-row .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator,
     .oo-ui-window-body .oo-ui-toolbar-bar .oo-ui-iconElement,
     .oo-ui-window-body .oo-ui-toolbar-bar .oo-ui-popupToolGroup-handle,
     .oo-ui-window-body .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle,
     .ve-ui-mwMediaDialog-panel-settings .oo-ui-icon-textStyle,
     .oo-ui-window-body .oo-ui-icon-textStyle,
     .oo-ui-window-body .oo-ui-listToolGroup[title="Style text"] .oo-ui-indicator-down,
     .ve-ui-specialCharacterPage .ve-ui-specialCharacterPage-character,
     .oo-ui-window[aria-labelledby="ooui-93"] .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-title,
     #ooui-4 .oo-ui-iconElement-icon.oo-ui-icon-search,
     .ve-ui-fragmentInspector-content .oo-ui-icon-linkExternal {
         filter: invert(1)
     }
    .ve-ui-mwMediaDialog-panel-settings .oo-ui-toolbar .oo-ui-popupToolGroup-handle .oo-ui-indicator-down,
    .oo-ui-window[aria-labelledby="ooui-93"] .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-icon-imageGallery{
        filter: invert(0)   
    }
     #ooui-17 .oo-ui-toolbar-bar,
     #ooui-19 .oo-ui-toolbar-bar,
     #ooui-17.oo-ui-iconElement-icon.oo-ui-icon-add.oo-ui-image-progressive {
         filter:invert(1)
     }
     .ve-ui-linearContextItem-title .oo-ui-icon-imageGallery {
        filter:invert(0)   
     }
     .oo-ui-processDialog-actions-safe .oo-ui-icon-close {
        filter: invert(1)   
     }
     .oo-ui-processDialog-actions-primary .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
        background: #6f027c   
     }
     .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
     .oo-ui-processDialog-actions-primary .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover,
     .oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:hover,
     .oo-ui-menuLayout-menu .oo-ui-decoratedOptionWidget:hover,
     .ve-ui-linkAnnotationWidget .oo-ui-labelElement:hover,
     .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
     .mw-special-Movepage #ooui-3.oo-ui-menuSelectWidget .oo-ui-optionWidget-selected,
     .mw-special-Movepage #ooui-3.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget:hover {
        background:#f533db
     }
     a.oo-ui-tool-link:hover {
        background:#f533db;
        filter: invert(0)
    }
     #ooui-52 a.oo-ui-tool-link:hover,
    .oo-ui-window[aria-labelledby="ooui-93"] .oo-ui-popupToolGroup-tools .oo-ui-tool-link:hover {
        background:#f533db;
        filter: invert(1)
    }
    ul.fileupload-results li.ful-success a {
        color: unset !important
    }
    ul.fileupload-results li.ful-success {
        color: darkgreen
    }
    ul.fileupload-results li.ful-error {
        color: darkred
    }
     
     /* This is for the visual editor toolbar. */
    
     #content .oo-ui-toolGroup-tools .oo-ui-iconElement-icon,
     #content .oo-ui-iconElement-icon .oo-ui-icon-link,
     .oo-ui-popupToolGroup-handle,
     #content .oo-ui-image-progressive,
     .mw-rcfilters-head .oo-ui-icon-article,
     .mw-rcfilters-head .oo-ui-icon-tag,
     .client-js #ca-edit a,
     .client-js #ca-edit a span,
     .client-js #ca-history a,
     .client-js #ca-history a span,
     .client-js #t-contributions a,
     .client-js #t-contributions a span,
     .client-js #ca-ve-edit a,
     .client-js #ca-ve-edit a span,
     .oo-ui-window-body .ve-ui-specialCharacterPage-characters,
     .oo-ui-window-body .oo-ui-fieldsetLayout-header .oo-ui-iconElement-icon,
     .mw-rcfilters-ui-row .mw-rcfilters-ui-filterTagItemWidget .oo-ui-buttonElement-button,
     #ooui-44 .oo-ui-toolGroup-tools .oo-ui-tool-title,
     #ooui-116 {
        filter: invert(1)   
     }
     #content .oo-ui-icon-undo.oo-ui-image-progressive, 
     #content .oo-ui-icon-redo.oo-ui-image-progressive,
     #content .oo-ui-icon-link.oo-ui-image-progressive,
     #content .oo-ui-icon-help.oo-ui-image-progressive,
     #content .oo-ui-icon-window.oo-ui-image-progressive,
     #content .oo-ui-icon-tag.oo-ui-image-progressive,
     #content .oo-ui-icon-pageSettings.oo-ui-image-progressive,
     #content .oo-ui-icon-settings.oo-ui-image-progressive,
     #content .oo-ui-icon-textLanguage.oo-ui-image-progressive,
     #content .oo-ui-icon-puzzle.oo-ui-image-progressive,
     #content .oo-ui-icon-textDirRTL.oo-ui-image-progressive,
     #content .oo-ui-icon-articleSearch.oo-ui-image-progressive {
        filter: invert(0)   
     }

     #content .ve-ui-toolbar-group-format .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label,
     #content .ve-ui-toolbar-group-cite .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label,
     #content .ve-ui-toolbar-group-insert .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label,
     .ve-ui-linearContextItem-body,
     #content .ve-ce-tableCellNode-header p,
     .oo-ui-window-body .oo-ui-menuLayout-menu .oo-ui-indexLayout-tabPanel .oo-ui-optionWidget .oo-ui-labelElement-label,
     .oo-ui-popupWidget-popup .ve-ui-mwHelpPopupTool-items .ve-ui-mwHelpPopupTool-item {
        color: #000
     }
     .oo-ui-popupWidget-popup .ve-ui-mwHelpPopupTool-items .ve-ui-mwHelpPopupTool-item .oo-ui-buttonElement a:not(new) .oo-ui-labelElement-label {
        color: #009E9E !important   
     }
     .oo-ui-popupWidget-popup .ve-ui-mwHelpPopupTool-items .ve-ui-mwHelpPopupTool-item .oo-ui-buttonElement a:visited .oo-ui-labelElement-label {
        color: #f533db !important   
     } 
     #content .oo-ui-tool.oo-ui-widget-enabled:hover > .oo-ui-tool-link:hover {
        background: #f533db;
        color: #000000
     }
     #ooui-44 .oo-ui-tool-link:hover,
     #ooui-116 .oo-ui-labelElement:hover {
        filter: invert(1);
        background: #f533db;
        color: #000000
    }
     #content .oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-labelElement-label,
     #content .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top-title .oo-ui-labelElement-label,
     .oo-ui-window-body .oo-ui-fieldLayout-header .oo-ui-labelElement-label,
     .oo-ui-window-body .oo-ui-optionWidget .oo-ui-labelElement-label,
     .oo-ui-window-head .oo-ui-processDialog-navigation .oo-ui-labelElement-label,
     .oo-ui-window-body .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label,
     .oo-ui-window-body .ve-ui-mwMediaDialog-panel-imageinfo-info .ve-ui-mwMediaDialog-panel-imageinfo-details .oo-ui-labelElement-label,
     .oo-ui-window-body .ve-ui-mwMediaDialog-panel-imageinfo-main .oo-ui-labelElement-label,
     #content .ve-ce-branchNode .ve-ce-tableCellNode-header p,
     .oo-ui-window-body .oo-ui-menuLayout-menu .oo-ui-indexLayout-tabPanel #ooui-54.oo-ui-optionWidget .oo-ui-labelElement-label,
     .oo-ui-window-body .oo-ui-menuLayout-menu .oo-ui-indexLayout-tabPanel #ooui-56.oo-ui-optionWidget .oo-ui-labelElement-label
    {
         color: #fff
     }
     code,
     .mbox.notice.hidden {
         background-color: #808080 !important
     }

     #pagehistory li.selected a {
         color: #A86D00
     }
     
     
/* This is to blur boss spoiler images. */
     .desktop-spoiler img {
         filter: blur(20px);
     }

     .desktop-spoiler img:hover,
     .desktop-spoiler img:active {
         filter: blur(0px)
     }
	.page-Category_Music_releases .album-gallery .gallerybox:nth-child(9) .thumb::after, .page-Category_Music_releases .album-gallery .gallerybox:nth-child(11) .thumb::after, .spoiler-blur::after {
			content: 'SPOILER';
			font-family: 'Vipnagorgialla';
			font-weight: bold;
			font-size: 30px;
			position: relative;
			top: -140px;
			text-shadow: 0 0 4px white;
	}
    .page-Category_Music_releases .album-gallery .gallerybox:nth-child(9) img, .page-Category_Music_releases .album-gallery .gallerybox:nth-child(11) img {
         filter: blur(20px)
     }


    button.tabber__header__prev, button.tabber__header__next {
        filter: invert(1)  
     }
     /* you WILL obey. */
     .tocnumber,
     .oo-ui-window-content .oo-ui-labelElement-label .ve-ui-mwGalleryDialog-remove-button {
         color: #fff !important
     }

     /* This is the background colour for the main body. */
     #mw-content,
     #catlinks,
     #toc,
     .mw-datatable tr:hover td,
     .mw-prefs-buttons,
     textarea,
     #wpSummary,
     #wpDestFile,
     .oo-ui-textInputWidget .oo-ui-inputWidget-input,
     .mw-widget-dateInputWidget.oo-ui-textInputWidget .oo-ui-labelElement-label,
     .mw-editform .editOptions,
     pre,
     ul#filetoc,
     .diff-context {
         background-color: rgba(14, 25, 26, 0.8)
     }
     
    /* This is the visual editor gallery input text. */
    .ve-ce-branchNode .ve-ce-contentBranchNode .ve-ce-paragraphNode .ve-ce-generated-wrapper p {
        color: #000 !important
     }

     /* This is the link colour. */
     #mw-content a:not(.new),
     .toctogglelabel {
         color: #37fcff
     }

     /* This is the link colour for datatable headers. */
     .mw-datatable th a,
     #mw-content .oo-ui-popupWidget-popup .ve-ui-context-menu .ve-ui-linearContextItem-body a:not(.new) {
         color: #009E9E !important
     }

     .diff-deletedline .diffchange,
     .mw-message-box-warning {
         background-color: #cc8b12
     }

     body .oo-ui-tabSelectWidget-framed {
         background-color: #ffabdf
     }

     /* This is the background colour for elements designed to blend in with the background, but still provide a readable backdrop for things. */
     li.gallerybox div.thumb,
     .mw-body li.gallerybox div.thumb,
     .mw-capiunto-infobox,
     .cosmos-header *,
     .cosmos-header:before,
     .wds-dropdown__content,
     .cosmos-header .wds-dropdown__content,
     #cosmos-footer-footerContent,
     .cosmos-dropdown-list:not(.cosmos-personalTools-list),
     #cosmos-footer,
     .wikitable:not([style*="background-color"]) > * > tr > td,
     .mw-datatable tr td,
     .thumbinner,
     #mw_metadata,
     .mw-body .mw-search-profile-tabs,
     figure[typeof~="mw:File/Thumb"].mw-halign-right,
     figure[typeof~="mw:File/Frame"].mw-halign-right,
     figure[typeof~="mw:Image/Thumb"].mw-halign-right,
     figure[typeof~="mw:Video/Thumb"].mw-halign-right,
     figure[typeof~="mw:Audio/Thumb"].mw-halign-right,
     figure[typeof~="mw:Image/Frame"].mw-halign-right,
     figure[typeof~="mw:Video/Frame"].mw-halign-right,
     figure[typeof~="mw:Audio/Frame"].mw-halign-right,
     .mw-content-ltr figure[typeof~="mw:File/Thumb"] > figcaption,
     .mw-content-ltr figure[typeof~="mw:File/Frame"] > figcaption,
     .mw-content-ltr figure[typeof~="mw:Image/Thumb"] > figcaption,
     .mw-content-ltr figure[typeof~="mw:Video/Thumb"] > figcaption,
     .mw-content-ltr figure[typeof~="mw:Audio/Thumb"] > figcaption,
     .mw-content-ltr figure[typeof~="mw:Image/Frame"] > figcaption,
     .mw-content-ltr figure[typeof~="mw:Video/Frame"] > figcaption,
     .mw-content-ltr figure[typeof~="mw:Audio/Frame"] > figcaption {
         background: #352432
     }

     thumbinner.cosmos-header .wds-dropdown__content .wds-list.wds-is-linked li:hover > a:not(.wds-button) {
         color: #f533db
     }

     .oo-ui-window-content .oo-ui-labelElement-label,
     .ve-ce-branchNode-slug,
     .ve-ui-linearContextItem-title,
     .mw-datatable th,
     .style-table > * > td,
     .slideshow-current div.gallerytext {
         color: #000
     }

     .headerbox,
     #mw-headline {
         font-family: 'Arial Narrow', Arial, sans serif !important
     }

     .mw-capiunto-infobox,
     .toc {

         border-radius: 10px
     }

     .desktop-spoiler img {
         filter: blur(20px);
     }

     .desktop-spoiler img:hover,
     .desktop-spoiler img:active {
         filter: blur(0px)
     }

     .song-table.Clover > tbody > tr > th,
     .Grace-style > tbody > tr > td > table > tbody > tr > th,
     .Clover-folder {
         background-color: #2ec817 !important;
         background-color: rgba(46, 200, 23, 0.3) !important;
     }
     .song-table.Dia > tbody > tr > th,
     .song-table.Diamond > tbody > tr > th,
     .Sera-style > tbody > tr > td > table > tbody > tr > th,
     .Dia-folder {
         background-color: #52a1fe !important;
         background-color: rgba(82, 161, 254, 0.3) !important;
     }
     .song-table.Heart > tbody > tr > th,
     .Sumire-style > tbody > tr > td > table > tbody > tr > th,
     .Heart-folder {
         background-color: #ff5558 !important;
         background-color: rgba(255, 85, 88, 0.3) !important;
     }
     .Hitori-style > tbody > tr > td > table > tbody > tr > th {
         background-color: #ff5558 !important;
         background-color: rgba(225, 65, 68, 0.3) !important;
     }
     .song-table.Spade > tbody > tr > th,
     .Hakuno-style > tbody > tr > td > table > tbody > tr > th,
     .Spade-folder {
         background-color: #f1f1f1 !important;
         background-color: rgba(241, 241, 241, 0.3) !important;
     }
     .song-table.Joker > tbody > tr > th,
     .Joker-style > tbody > tr > td > table > tbody > tr > th,
     .Joker-folder {
         background-color: #B90000 !important;
         background-color: rgba(185, 0, 0, 0.35) !important;
     }

     .song-table td {
         text-align: center;
     }


     /* Resizing song infobox album art */
     .album-image > .portable-infobox {
         max-width: 200px;
         height: auto;
     }


     /* Sortable table hover highlight */
     .article-table.sortable > tbody > tr:hover,
     .titles-list > tbody > tr:hover,
     .achievements-list > tbody > tr:hover,
     .shop-list > tbody > tr:hover,
     .style-table > tbody > tr:hover,
     .lost-data > tbody > tr:hover,
     .sl-area-convos > tbody > tr:hover,
     .modules-table > tbody > tr:hover {
         background-color: #6f027c;
         left: -10px;
     }

     /* For lyrics, colours indicating who's singing */
     .seratext {
         color: #3090FF;
     }
     .sumiretext {
         color: #FF5252;
     }
     .gracetext {
         color: #248900;
     }
     .hakunotext {
         color: #725B5F;
     }
     .jokertext {
         color: #cb3838;
     }
     .shiontext {
         color: #AF0000;
     }
     .asukatext {
         color: #AF8900;
     }
     .hikaritext {
         color: #35AACE;
     }
     .sltext {
         color: #CB3890;
     }
     .srtext {
         color: #F49B2E;
     }
     .beyondtext {
         color: #4D8AC6;
     }
     .aritext {
         color: #843636;
     }
     /* For lyrics in lines featuring two or more characters, so that the line includes the colours of everyone singing */
     .serashiontext {
         background: -webkit-linear-gradient(.2turn, #52A1FF, #AF0000);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .asukahikaritext {
         background: -webkit-linear-gradient(.3turn, #AF8900, #35AACE);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .asukashiontext {
         background: -webkit-linear-gradient(right, #AF8900 30%, #AF0000);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .hakunosumiretext {
         background: -webkit-linear-gradient(.2turn, #725B5F, #FF5252);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .seragracetext {
         background: -webkit-linear-gradient(.2turn, #3090FF, #248900);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .cottext {
         background: -webkit-linear-gradient(.3turn, #CB3890, #F49B2E);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .jokergracetext {
         background: -webkit-linear-gradient(.2turn, #cb3838, #248900);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .serasumiretext {
         background: -webkit-linear-gradient(.2turn, #3090FF, #FF5252);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .hakunogracetext {
         background: -webkit-linear-gradient(.2turn, #725B5F, #248900);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .gracesumirehakunotext {
         background: -webkit-linear-gradient(.2turn, #248900, #FF5252, #725B5F);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }
     .seragracesumitext {
         background: -webkit-linear-gradient(.2turn, #3090FF, #248900, #FF5252);
         -webkit-text-fill-color: transparent;
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
     }

     /* SL Joker spoiler warning, for SLTH warning */
     .sljokerwarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/3/3f/Gracespoiler.png);
         height: 179px;
         width: 179px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -170px;
         left: 60px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .sljokerboxtext .mbox {
         margin-left: 50px;
         padding-left: 140px;
         background-image: url(https://anarch.games/noisz/wiki/images/2/2f/Dialogue_Box_BG_TH.jpg) !important;
         background-size: cover;
         border: 2px solid #ec625e !important;
         border-left-color: #ec625e !important;
         box-shadow: 0 0 10px #ec625e, inset 0 0 10px #ec625e;
         border-radius: 10px !important;
         background-position: center;
         min-height: 90px;
         color: white;
     }

     /* SL Beyond spoiler warning, for SL spoiler warning */
     .slbeyondwarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/0/02/Beyondspoiler.png);
         height: 80px;
         width: 162px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -167px;
         left: 60px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .slbeyondboxtext .mbox {
         margin-left: 50px;
         padding-left: 50px;
         background-image: url(https://anarch.games/noisz/wiki/images/0/04/Dialogue_Box_BG.jpg) !important;
         background-size: cover;
         border: 2px solid #FCAAE2 !important;
         border-left-color: #FCAAE2 !important;
         box-shadow: 0 0 10px #FC78E2, inset 0 0 10px #FC78E2;
         border-radius: 10px !important;
         background-position: center;
         color: white
     }

     /* Arietta  spoiler warning, for NOISZ Ignition spoiler warning */
     .ariwarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/c/c0/Arispoiler.png);
         height: 150px;
         width: 162px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -149px;
         left: 50px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .ariwarning .mbox {
         margin-left: 50px;
         padding-left: 50px;
         background-color: #525456 !important;
         border: 2px solid #C68281 !important;
         border-left-color: #C68281 !important;
         border-radius: 10px !important;
         box-shadow: 0 0 10px #931010, inset 0 0 10px #931010;
         color: white
     }

     .karinwarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/b/bf/Karindisambiguation.png);
         height: 200px;
         width: 162px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -146px;
         left: 40px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .karinwarning .mbox {
         margin-left: 50px;
         padding-left: 50px;
         background-color: #584F8D !important;
         border: 2px solid #01D3FE !important;
         border-left-color: #01D3FE !important;
         border-radius: 10px !important;
         box-shadow: 0 0 10px #4599FF, inset 0 0 10px #4599FF;
         color: white
     }

     /* Beyond warning, for Needs Information banner */
     .beyondwarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/e/e5/Beyondneedsinfo.png);
         height: 80px;
         width: 162px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -167px;
         left: 55px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .beyondwarning .mbox {
         margin-left: 50px;
         padding-left: 50px;
         background-color: #525456 !important;
         border: 2px solid #ABF6F7 !important;
         border-left-color: #ABF6F7 !important;
         border-radius: 10px !important;
         box-shadow: 0 0 10px #50ABB7, inset 0 0 10px #50ABB7;
         color: white
     }

     /* Stornel spoiler warning, for NOISZ re:VERSE spoiler warning */
     .stornelwarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/d/de/Stornelspoiler.png);
         height: 80px;
         width: 162px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -167px;
         left: 60px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .stornelwarning .mbox {
         margin-left: 50px;
         padding-left: 50px;
         background-color: #525456 !important;
         border: 2px solid #9B9B9B !important;
         border-left-color: #9B9B9B !important;
         border-radius: 10px !important;
         box-shadow: 0 0 10px #828282, inset 0 0 10px #828282;
         color: white
     }

     /* Gaius spoiler warning, for NOISZ episode G spoiler warning */
     .gaiuswarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/0/07/Gaius_Antiphon_EPISODE_G.png);
         height: 150px;
         width: 162px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -172px;
         left: 60px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .gaiuswarning .mbox {
         margin-left: 50px;
         padding-left: 50px;
         background-color: #212121 !important;
         border: 2px solid #87CD92 !important;
         border-left-color: #87CD92 !important;
         border-radius: 10px !important;
         box-shadow: 0 0 10px #109525, inset 0 0 10px #109525;
         color: white
     }

     /* Main Character (NOISZ)  spoiler warning, for NOISZ series spoiler warning */
     .genbuwarning::after {
         content: '';
         background-image: url(https://anarch.games/noisz/wiki/images/8/82/Genbuwarning.png);
         height: 100px;
         max-width: 162px;
         background-size: contain;
         background-repeat: no-repeat;
         display: block;
         position: relative;
         top: -175px;
         left: 55px;
         margin-bottom: -180px;
         padding-top: 80px;
     }
     .genbuwarning .mbox {
         margin-left: 50px;
         padding-left: 50px;
         background-color: #525456 !important;
         border: 3px solid #CA88C3 !important;
         border-left-color: #CA88C3 !important;
         border-radius: 10px !important;
         box-shadow: 0 0 10px #9C158E, 0 0 10px #9C158E;
         background-size: cover;
         background-position: center;
         background-image: url(https://anarch.games/noisz/wiki/images/2/2f/Dialogue_Box_BG_TH.jpg) !important;
         filter: hue-rotate(-145deg) saturate(1.4) brightness(0.9);
         color: white
     }
     



     /* For NOISZ style tables */
     .Arietta > tbody > tr > th {
         background-color: #AE191C !important;
         background-color: rgba(358, 85, 68, 0.5) !important;
     }
     .Beyond > tbody > tr > th {
         background-color: #5BC5EF !important;
         background-color: rgba(91, 197, 239, 0.5) !important;
     }
     .Stornel > tbody > tr > th {
         background-color: white !important;
         background-color: rgba(255, 255, 255, 0.5) !important;
         color: black !important;
     }
     .Gaius > tbody > tr > th {
         background-color: rgba(2, 124, 0, 0.5) !important;
         background-color: green;
         color: white !important;
     }
     /* Transparency to main container */
     .page__main,
     .wikiEditor-ui,
     .page__right-rail {
         background-color: var(--theme-page-background-color);
         background-color: rgba(var(--theme-page-background-color--rgb), 0.7);
     }

     /* For the front page banner */
     .noiszbanner img {
         width: 100%;
         height: auto;
     }

     /* So Bandcamp players fill the whole width and don't look really mispositioned */
     .inline_player {
         display: contents !important;
     }

     /* For the events countdowns headers */
     .sl-events img {
         -webkit-transition: all 0.2s ease;
         transition: all 0.2s ease;
     }
     .sl-events img:hover {
         transform: scale(1.0);
     }

     /*For the headers on the frontpage*/
     h2.headerbox {
         padding-left: 20px;
         padding-bottom: 10px;
         padding-top: 10px;
         background-color: #FFABDF;
         color: #E345A4 !important;
         text-transform: uppercase;
     }
     .headerbox .mw-editsection a,
     .wds-dropdown * {
         color: #E345A4;
     }

     .header-box {
         padding-left: 30px;
         padding-bottom: 10px;
         padding-top: 10px;
         background-color: #FFABDF;
         color: #f533db;
         font-size: 38px;
         font-family: 'Arial Narrow', Arial, sans-serif;
         font-weight: bold;
         text-shadow: 0 0 6px rgba(242, 73, 177, 0.4);
         box-shadow: 0 0 20px 0 #f249b1
     }

     /* For the menu index buttons on the frontpage */
     .main-page-button img,
     #NOISZ_ST--RLIVHT-Gameplay img {
         filter: brightness(1.0);
         -webkit-transition: all 0.2s ease;
         transition: all 0.2s ease;
     }
     .main-page-button img:hover,
     #NOISZ_ST--RLIVHT-Gameplay img:hover {
         filter: brightness(1.5);
         -webkit-filter: brightness(1.5);
     }
     .main-page-button img:active,
     #NOISZ_ST--RLIVHT-Gameplay img:active {
         filter: brightness(0.7);
         -webkit-filter: brightness(0.7);
     }

     /* Normal green is hard on the eyes */
     .Clover-folder,
     .Heart-folder {
         filter: grayscale(0.4);
         -webkit-filter: grayscale(0.4);
     }
     /* Mouseover event when the user hovers over an image in Upcoming */
     .coming-soon-slider img {
         transition: transform 0.6s ease-in-out;
     }
     .coming-soon-slider img:hover {
         transform: scale(1.05);
     }

     /* So SL story table header colours change with theme */
     .sl-header > tbody > tr:nth-child(1),
     .sl-story-navbar,
     .sl-gameplay-navbox > table > tbody > tr > th {
         background-color: rgba(var(--theme-sticky-nav-background-color--rgb), 0.5);
     }
     .noisz-story-navbar {
         background-color: rgba(var(--theme-sticky-nav-background-color--rgb), 0.5);
         filter: hue-rotate(300deg);
     }
     .noisz-story-navbar a {
         filter: hue-rotate(-300deg);
     }

     /* ALternating colours to make tables slightly more readable */
     .sl-chapter-table tr:nth-child(2n + 1),
     .song-table tr:nth-child(2n + 1),
     .sl-song-table tr:nth-child(2n + 1),
     .noisz-character-navigation tr:nth-child(2n + 1),
     .artists-table tr:nth-child(2n + 1) {
         background-color: #7B4F7C;
         background-color: rgba(128, 128, 128, 0.2);
     }

     .song-table th {
         background: rgba(242, 73, 177, 0.3)
     }

     .sl-character-navigation {
         border: 1px solid var(--theme-accent-color);
     }

     /* For the diamonds around the SL story LV requirements */
     .gracelv:after {
         content: url(https://anarch.games/noisz/wiki/images/c/c0/Gracediamondempty_small.png);
     }
     .seralv:after {
         content: url(https://anarch.games/noisz/wiki/images/4/49/Seradiamondempty_small.png);
     }
     .sumirelv:after {
         content: url(https://anarch.games/noisz/wiki/images/5/50/Sumirediamondempty_small.png);
     }
     .hakunolv:after {
         content: url(https://anarch.games/noisz/wiki/images/0/09/Hakunodiamondempty_small.png);
         filter: brightness(0.85);
     }
     .jokerlv:after {
         content: url(https://anarch.games/noisz/wiki/images/5/56/Jokerdiamondempty_small.png);
     }




     .gracelv:after,
     .seralv:after,
     .sumirelv:after,
     .hakunolv:after,
     .jokerlv:after {
        position: relative;
        display: -webkit-flex;
        display: flex;
        height: 35px;
        top: -34px;
        left: 9px;

     }
     .gracelv b,
     .seralv b,
     .sumirelv b,
     .hakunolv b,
     .jokerlv b {
         left: 25%;
         position: relative;
         z-index: 2;
         text-align: center;
         text-shadow: 2px 2px black, 2px 0px black, 0px 2px black, 0px -2px black, -2px 0px black, 2px -2px black, -2px 2px black, -2px 0px black;
     }
     /* I was trying something to auto-update the event images when the timer ran out, but nothing came of it - ignore */
     .nucleardripevent,
     .attitudemintevent {
         transition: .5s ease;
         position: relative;
     }
     .nucleardripevent img {
         height: 0px;
     }
     
        /* For story chapter table */
     /* Grace */
     .sl-chapter-table td:nth-child(4) {
         border: 1px solid #2ec817;
         padding: 0px;
     }
     /* Sera  */
     .sl-chapter-table td:nth-child(5) {
         border: 1px solid #52a1fe;
         padding: 0px;
     }
     /* Sumire  */
     .sl-chapter-table td:nth-child(6) {
         border: 1px solid #ff5558;
         padding: 0px;
     }
     /* Hakuno  */
     .sl-chapter-table td:nth-child(7) {
         border: 1px solid #f1f1f1;
         padding: 0px;
     }
     /* Joker  */
     .sl-chapter-table td:nth-child(8) {
         border: 1px solid #B90000;
         padding: 0px;
     }
     /* Chapter row */
     .sl-chapter-table td:nth-child(1) {
         padding: unset;
     }
     .sl-level-reqs p {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
     }
     

     /* Tweaks for the story character image galleries; transitions are for mouseover and click events */
     .sl-story-gallery img,
     .noisz-story-gallery img {
         padding: 2px;
         transition: .5s ease;
     }
     .sl-story-gallery img:hover,
     .noisz-story-gallery img:hover {
         filter: brightness(1.25);
         transition: .5s ease;
     }
     .sl-story-gallery img:active,
     .noisz-story-gallery img:active {
         filter: brightness(0.75);
         transition: .5s ease;
     }
     .sl-story-gallery {
         display: grid;
         justify-content: center
     }
    .row-1, .row-2, .row-3 {
        width: 100%
        }
     
     .article-table.story-gallery-table td {
         border: none;
     }
     .sl-story-gallery img {
        width: 22%;
         height: 22%
     }
     /* This is to align them half a diamond over so the even rows fit nicely together  */
     .sl-story-gallery .row-2 img,
     .sl-story-gallery .row-4 img,
     .sl-story-gallery .row-6 img {
         position: relative;
         right: -12%;
         bottom: 90px
    }

     .sl-area-convos .row-1 p:nth-child(2),
     .sl-area-convos .row-3,
     .sl-area-convos .row-4,
     .sl-area-convos .row-5,
     .sl-area-convos .row-6 {
         display: none
     }

     .sl-area-convos .row-2 {
         position: relative;
         left: 8px
     }

     .sl-chapter-table .sl-story-gallery {
         position: relative;
         display: table-cell;
     }
     .sl-chapter-table .sl-story-gallery img {
         right: -16px !important;
         top: -20px !important;
     }

     .sl-chapter-table .story-gallery-table > tbody > tr,
     .sl-area-convos .story-gallery-table > tbody > tr {
         background-color: transparent;
         display: table-cell;
     }
     .sl-chapter-table .story-gallery-table {
         width: auto !important;
     }
     /* This moves the entire story gallery up a bit so it's not pushing against the borders */
     .sl-story-gallery-move-up {
         position: relative;
         top: -10px;
     }
     /* To centre the Bandcamp players in song pages */
     #bandcamp {
         position: relative;
         left: 25%;
     }
     /* For the AC Cabinets map */
     .maps-googlemaps3 p {
         text-align: center;
         color: black;
     }
     /* For the images showing what characters are featured in each NOISZ reV/Ignition stage */
     .noisz-story-gallery img {
         border: 1px solid white;
         border-radius: 10px;
         margin: 5px;
     }
     /* Animation for the "What" the Cat page. Currently inactive and not working but leaving the code for wheneve */
     .meowfly img:after,
     .mw-wiki-logo:after,
     .meowfly:after {
         bottom: 200px;
         content: url(https://anarch.games/noisz/wiki/images/4/46/What_the_cat.png);
         position: fixed;
         left: -200px;
         transition: linear 0s;
         transition-delay: 2.0s;
     }
     .meowfly img:hover::after,
     .meowfly:hover::after,
     .meowfly img:active::after,
     .meowfly:active::after,
     .mw-wiki-logo:hover::after,
     .mw-wiki-logo::after {
         position: fixed;
         left: 40000px;
         transition: linear 10.0s;
     }


     /* For the update history page */
     .patch-updates-cell {
         background-color: rgba(143, 185, 252, 0.5);
     }
     .content-updates-cell {
         background-color: rgba(255, 242, 204, 0.5);
     }
}

 .category-select-button {
     display: block;
     width: fit-content;
     filter: brightness(0.5) grayscale(1);
     margin-top: 15px;
     margin-bottom: 15px
 }

 .category-select-button:hover,
 .category-select-button:active {
     box-shadow: 0 0 1px 2px #C51A1A;
     filter: brightness(1) grayscale(0);
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
 }

/* This is for the block pages only. */

.mw-special-Block .oo-ui-selectWidget {
    background: #000   
}
.mw-special-Block .oo-ui-selectWidget .oo-ui-labelElement-label {
    color: #fff
}
.mw-special-Block .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
    background:#f533db !important;
    filter: invert(0)
}
.mw-special-Block .oo-ui-tagMultiselectWidget-handle {
    background: #000   
}
/* We already have the wiki tools in the main bar. */
div#site-tools.sidebar-chunk {
    display: none 
}

/* This is so text doesn't overflow awkwardly for the Forge Builds page galleries. */
.forge-modules-gallery .gallerytext p {
     word-wrap: normal
}
.forge-modules-gallery .gallerytext {
     overflow: visible
}
.forge-modules-gallery .gallerybox {
     padding-left: 5px;
     padding-right: 5px;
}
/* The actual gallerybox hallucinates a max-width of 395px so i have to do this */
.forge-modules-gallery .gallery {
     max-width: 450px !important
}

/* To make the wiki logo look as it is instead of a huge what watching you */

.mw-wiki-logo {
    background-size: contain;
}
.mw-wiki-logo::before{
    content: '';
    display: inline-block;
    background: url("https://anarch.games/noisz/wiki/images/e/e6/Site-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 100%;
    height: 100%;
}