MediaWiki:Timeless.css: Difference between revisions

From NOISZ Wiki
(leftcolumn broken on chrome so adding new max width so it doesn't overflow)
mNo edit summary
 
(42 intermediate revisions by the same user not shown)
Line 50: 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 163: Line 164:
         .sidebar-inner {
         .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        background: rgba(14, 25, 26, 0.8)
         }
         }
 


     }
     }
Line 184: Line 186:
        background: rgba(14, 25, 26, 0.8)
        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 199: Line 207:
         .sidebar-inner {
         .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        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 215: Line 229:
         .sidebar-inner {
         .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        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 231: Line 251:
         .sidebar-inner {
         .sidebar-inner {
        background: rgba(14, 25, 26, 0.8)
        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 239: 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 686: Line 712:
     .desktop-spoiler img:active {
     .desktop-spoiler img:active {
         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 1,345: 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,375: Line 1,414:
         top: -34px;
         top: -34px;
         left: 9px;
         left: 9px;
        max-width: 50px;
 
     }
     }
     .gracelv b,
     .gracelv b,
Line 1,529: 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,540: 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,590: 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%;
}
/* This is for the title icons in the Titles page, for non-Chromium browsers. */
.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td > div {
    height: 1.5em;
    --bevel-size: 12px;
    clip-path: polygon( var(--bevel-size) 0, calc(100% - var(--bevel-size)) 0, 100% var(--bevel-size), 100% calc(100% - var(--bevel-size)), calc(100% - var(--bevel-size)) 100%, var(--bevel-size) 100%, 0          calc(100% - var(--bevel-size)), 0 var(--bevel-size) );
   
}
/* Since non-Chromium browsers need clip-path, which doesn't support box-shadow, this needs to be done to put some space between the title icons. */
.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td:nth-child(1) {
    padding-top: 5px;
    padding-bottom: 5px;
   
}
/* At the time of writing, only Chrome and Edge support corner-shape, so that gets its own CSS. */
@supports (corner-shape: bevel) {
.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td > div {
    corner-shape: bevel;
    border-radius: 15px / 50%;
    height: 1.5em;
    clip-path: unset;
    }
.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td:nth-child(1) {
    padding-top: unset;
    padding-bottom: unset;
   
}
   
}
}

Latest revision as of 13:03, 26 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%;
}

/* This is for the title icons in the Titles page, for non-Chromium browsers. */

.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td > div {
    height: 1.5em;
    --bevel-size: 12px;
    clip-path: polygon( var(--bevel-size) 0, calc(100% - var(--bevel-size)) 0, 100% var(--bevel-size), 100% calc(100% - var(--bevel-size)), calc(100% - var(--bevel-size)) 100%, var(--bevel-size) 100%, 0           calc(100% - var(--bevel-size)), 0 var(--bevel-size) );
    
}

/* Since non-Chromium browsers need clip-path, which doesn't support box-shadow, this needs to be done to put some space between the title icons. */
.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td:nth-child(1) {
    padding-top: 5px;
    padding-bottom: 5px;
    
}

/* At the time of writing, only Chrome and Edge support corner-shape, so that gets its own CSS. */

@supports (corner-shape: bevel) {
.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td > div {
    corner-shape: bevel;
    border-radius: 15px / 50%;
    height: 1.5em;
    clip-path: unset;
    }
.page-NOISZ_STΔRLIVHT_Titles .titles-list > tbody > tr > td:nth-child(1) {
    padding-top: unset;
    padding-bottom: unset;
    
}

    
}