User:Zinga/Fandom.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* CSS placed here will be applied to all skins */

/* CSS for SL song table (in the individual song pages) and style info  */
.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{
	background-color: pink;
	background-color: rgba(255,171,223,0.8);
	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://static.wikia.nocookie.net/noisz/images/f/fc/Jokerspoiler.png/revision/latest?cb=20240104083800);
  height:150px;
  width:162px;
  background-size:contain;
  background-repeat:no-repeat;
  display:block;
  position:relative;
  top:-157px;
  left:50px;
  margin-bottom:-180px;
  padding-top:80px
}
.sljokerboxtext .mbox {
  margin-left:50px;
  padding-left:140px;
  background-image:url(https://static.wikia.nocookie.net/noisz/images/2/2f/Dialogue_Box_BG_TH.jpg/revision/latest?cb=20240103141650) !important;
  background-size: cover;
  border:2px solid #ec625e !important;
  border-left-color: #ec625e !important;
  box-shadow:0 0 10px #ec625e;
  border-radius:10px !important;
  background-position:center
}

/* SL Beyond spoiler warning, for SL spoiler warning */
.slbeyondwarning::after{
	content: '';
    background-image: url(https://static.wikia.nocookie.net/noisz/images/0/02/Beyondspoiler.png/revision/latest?cb=20230312142439);
    height: 150px;
    width: 162px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -157px;
    left: 50px;
    margin-bottom: -180px;
    padding-top: 80px;
}
.slbeyondboxtext .mbox{
	margin-left: 50px;
	padding-left: 50px;
	background-image: url("https://static.wikia.nocookie.net/noisz/images/0/04/Dialogue_Box_BG.jpg/revision/latest?cb=20230312144411") !important;
	background-size: cover;
	border: 2px solid #FCAAE2 !important;
	border-left-color: #FCAAE2 !important;
	box-shadow: 0 0 10px #FC78E2;
	border-radius: 10px !important;
	background-position: center;
}

/* Arietta  spoiler warning, for NOISZ Ignition spoiler warning */
.ariwarning::after{
	content: '';
    background-image: url(https://static.wikia.nocookie.net/noisz/images/c/c0/Arispoiler.png/revision/latest?cb=20230320142717);
    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;
}

/* Beyond warning, for Needs Information banner */
.beyondwarning::after{
	content: '';
    background-image: url(https://static.wikia.nocookie.net/noisz/images/e/e5/Beyondneedsinfo.png/revision/latest?cb=20230321155225);
    height: 150px;
    width: 162px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -157px;
    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;
}

/* Stornel spoiler warning, for NOISZ re:VERSE spoiler warning */
.stornelwarning::after{
	content: '';
    background-image: url(https://static.wikia.nocookie.net/noisz/images/d/de/Stornelspoiler.png/revision/latest?cb=20230326220708);
    height: 150px;
    width: 162px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -157px;
    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;
}

/* Gaius spoiler warning, for NOISZ episode G spoiler warning */
.gaiuswarning::after{
	content: '';
    background-image: url(https://static.wikia.nocookie.net/noisz/images/0/07/Gaius_Antiphon_EPISODE_G.png/revision/latest?cb=20230327231204);
    height: 150px;
    width: 162px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -157px;
    left: 60px;
    margin-bottom: -180px;
    padding-top: 80px;
}
.gaiuswarning .mbox{
	margin-left: 50px;
	padding-left: 50px;
	background-color: #626365 !important;
	border: 2px solid #87CD92 !important;
	border-left-color: #87CD92 !important;
	border-radius: 10px !important;
	box-shadow: 0 0 10px #109525;
}

/* Main Character (NOISZ)  spoiler warning, for NOISZ series spoiler warning */
.mcwarning::after{
	content: '';
    background-image: url(https://static.wikia.nocookie.net/noisz/images/2/2e/Ignition_Protagonist.png/revision/latest?cb=20230322022618);
    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;
}
.mcwarning .mbox{
	margin-left: 50px;
	padding-left: 50px;
	background-color: #525456 !important;
	border: 2px solid #CA88C3 !important;
	border-left-color: #CA88C3 !important;
	border-radius: 10px !important;
	box-shadow: 0 0 10px #9C158E;
}


/* 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-header{
	background-color: var(--theme-sticky-nav-background-color) !important;
	border-color: var(--theme-accent-color) !important;
}
.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;
  text-transform: uppercase;
}
.headerbox .mw-editsection a {
  color: #E345A4;
}

/* 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.25);
	-webkit-filter:brightness(1.1);
}
.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.1);
}

/* 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);
}
/* 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: 5px;
}
/* ALternating colours to make tables slightly more readable */
.sl-chapter-table tr:nth-child(2n+1), .sl-song-table tr:nth-child(2n+1), .artists-table tr:nth-child(2n+1){
	background-color: #7B4F7C;
	background-color: rgba(128,128,128,0.2);
}

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

/* For the diamonds around the SL story LV requirements */
.gracelv:after{
	content: url(https://static.wikia.nocookie.net/noisz/images/4/4a/Gracediamondempty.png/revision/latest/scale-to-width-down/36??cb=20230323134601);
}
.seralv:after{
		content: url(https://static.wikia.nocookie.net/noisz/images/a/a3/Seradiamondempty.png/revision/latest/scale-to-width-down/36?cb=20230323134603);
}
.sumirelv:after{
	content: url(https://static.wikia.nocookie.net/noisz/images/9/96/Sumirediamondempty.png/revision/latest/scale-to-width-down/36?cb=20230323134604);
	
}
.hakunolv:after{
	content: url(https://static.wikia.nocookie.net/noisz/images/a/ac/Hakunodiamondempty.png/revision/latest/scale-to-width-down/36?cb=20230323134602);
	filter: brightness(0.85);
}

.jokerlv:after{
	content: url(https://static.wikia.nocookie.net/noisz/images/8/88/Jokerdiamondempty.png/revision/latest/scale-to-width-down/36?cb=20240101202756&format=original);
}

.gracelv:after, .seralv:after, .sumirelv:after, .hakunolv:after, .jokerlv:after {
	position:relative;
	display: inline-block;
	top: 11.5px;
	left:-24%;
}
.gracelv b, .seralv b, .sumirelv b, .hakunolv b, .jokerlv b {
	left: 25%;
	position:relative;
	z-index:2;
	text-align: center;
}
/* 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;
}

/* 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;
}
.article-table.story-gallery-table td{
	border: none;
}
/* 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: -76px;
	top: -90px;
}

/* So area conversation boxes aren't padded out by the <p> created by the div tags */
.sl-area-convos .row-1, .sl-area-convos .row-2, .sl-area-convos .row-3, .sl-area-convos .row-4{
	height: 0px;
}
.sl-area-convos .story-gallery-container{
	padding-left: 0px !important;
	text-align: center;
	display: table-row;
}

.sl-area-convos .row-2 img{
	top: 0px !important;
	right: -85px !important;
}
.sl-chapter-table .sl-story-gallery{
	position: relative;
	display: table-cell;
}
.sl-chapter-table .sl-story-gallery img{
	right: -16px !important;
	top: -30px !important; 
	padding: 0px !important;
}
.sl-chapter-table .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:after{
	bottom: 200px;
	content: url(https://static.wikia.nocookie.net/noisz/images/4/4a/Site-favicon.ico/revision/latest?cb=20230207235215);
	position:fixed;
	left: 40000px;
}
.meowfly:hover::after, .meowfly:active::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);
}