CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/* CSS placed here will be applied to all skins */
/* This governs the sections on the Community portal */
/* Inline widths break the mobile main page, so they need to go here instead */
.mainpage-portal-left { width: 69% }
.mainpage-portal-right { width: 28% }
/* Removing gradient */
body{
background-color: transparent !important;
/* background-image: url(https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/2/26/Background.png/revision/latest) !important; */
/* Temporary change for the summer theme */
background-image: url("https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/9/93/Summer-background.png/revision/latest") !important;
background-attachment: fixed;
}
.fandom-community-header__background::before {
background-image: linear-gradient(to bottom,rgba(255, 190, 98,0.7) 70%,transparent),url(https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/a/a0/Library_hero.jpg);
background-size: cover;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
}
.fandom-community-header__background {
background: none !important;
}
/* Restoring old tabs */
.page-content .wds-tabs__tab {
-webkit-box-shadow: unset !important;
box-shadow: unset !important;
height: 40px;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
font-family: "RockoUltraFLF";
}
/* Re-adding tab centering */
.centertab .tabber.wds-tabber .wds-tabs__wrapper.with-bottom-border .wds-tabs {justify-content: center;}
/* Removing tabs clipping off content */
.page-content .wds-tabber{overflow:visible !important;}
.page-content .wds-tabs__wrapper .wds-tabs{overflow:hidden !important;}
/* Migrating old mainpage code */
.panel {border-radius: 1.5em;}
.center {
margin-left:auto;
margin-right:auto;
}
.DiscordFP{
width: 290px;
height: 81px;
background-image: url('https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/c/c9/JoinDiscord.png/revision/latest');
background-size: contain;
}
.boxshadow {
box-shadow: 4px 4px 0px 0px rgba(66,66,66,0.5);
width:100%;
border-radius:1.5em;
}
.panel-menu {
flex: 0 0 auto;
border-top-right-radius:1.0em;
border-top-left-radius:1.0em;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 1px 0 2px 0px;
letter-spacing:0.2px;
font-size: 105%;
font-family: "RockoUltraFLF";
}
.panel-section-heading {
padding: 1px 0 1px 0px;
color:white;
font-size: 24px;
letter-spacing:1px;
font-weight:bold;
font-family: "RockoUltraFLF";
}
.mpflex-img {
width: 100%;
margin: auto;
}
.mpflex-img img {
display: inline-block;
width: 100%;
height: auto;
border-radius: 1em;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
}
.fpbuttonlinks img {
width: auto;
}
.spacer {margin-top: 10px;}
/* End of migration, starts default code + even older wikia code */
/*****************************************************************/
.cpbox {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.cpbox #admins {
box-sizing: border-box;
width: calc(33% - 10px);
margin: 5px;
flex-grow: 1;
min-width: 250px;
}
.cpbox #help {
box-sizing: border-box;
width: calc(67% - 10px);
margin: 5px;
flex-grow: 1;
}
.cpbox .feature {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 5px;
padding: 10px;
}
/* Template documentation styles */
.doc {
margin: 0.5em 4px 1em;
background-color: #ffffff;
border: 2px solid #FFBE62;
border-radius: 1em;
box-shadow: 4px 4px 0 0 rgb(66 66 66 / 50%);
padding: 1em;
}
.doc-header {
margin-bottom: 1em;
margin-top: 8px;
padding-bottom: 3px;
}
.doc-footer {
margin: 0;
background-color: #ffffff;
border-radius: 1em;
padding: 2em 0 0 0;
}
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
text-align: left;
}
.desktopcenter {
text-align: center;
}
.desktopright {
text-align: right;
}
/* Front page structure */
.fpmain {
width: 100%;
overflow: hidden;
}
.fpbox {
margin: 5px;
padding: 5px;
overflow: auto;
}
.fpbox.plain {
background: transparent;
border: none;
box-shadow: none;
}
.fpbox .heading,
.fpbox .mainheading,
.fpbox .welcome {
margin: 0 0 10px;
padding: 0 0 5px;
overflow: auto;
}
.fpbox .mainheading,
.fpbox .welcome {
font-size: 150%;
font-weight: bold;
}
.fpbox .heading {
text-align: center;
font-size: 132%;
}
.linkslabel {
margin: 15px 5px 5px;
padding: 0 0 5px;
}
/* Template:FP links styles */
.fplinks {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
text-align: center;
}
.fplink-outer {
padding: 5px;
flex-basis: calc(25% - 10px);
width: calc(25% - 15px);
min-width: 115px;
display: inline-block;
vertical-align: middle;
}
.fplink-wide {
flex-basis: calc(33% - 10px);
width: calc(33% - 15px);
}
.fplink-fullwidth {
flex-basis: 100%;
width: calc(100% - 15px);
font-weight: bold;
}
.fplink {
padding: 0.5em;
box-sizing: border-box;
width: 100%;
height: 100%;
display: table;
}
.fplink-plain {
background: transparent;
border-radius: 0;
border: 0;
box-shadow: none;
}
.fplink-inner {
display: table-row;
}
.fplink a {
display: table-cell;
vertical-align: middle;
}
.fplink img {
max-width: 150px;
width: 100%;
height: auto;
}
/* Auto-resize front page video to fit smaller columns */
.fpbox .embedvideowrap {
width: 100%!important;
max-width: 480px;
margin: 0 auto;
}
.fpbox .embedvideowrap iframe {
width: 100%!important;
}
/* from previous site */
/*=========================================*/
/* Test */
/*=========================================*/
#gifs-rows img {
cursor: pointer;
}
#gifs-rows .gif-file {
display:none;
}
/*=========================================*/
/* TOC limiter */
/*=========================================*/
/* Allow limiting of which header levels are shown in a TOC;
<div class="toclimit-3">, for instance, will limit to
showing ==headings== and ===headings=== but no further
(as long as there are no =headings= on the page, which
there shouldn't be according to the MoS).
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/*=========================================*/
/* Image Rounder */
/*=========================================*/
.circular {
display: inline-block;
overflow: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
color: white;
}
/*=========================================*/
/* Infobox spacer */
/*=========================================*/
.infobox {
float: right;
margin-bottom: 1em;
margin-left: 1em;
clear: right;
/* Porting additional rules from Hydra.css to help fix the appearance of
non-PortableInfobox templates */
background-color: transparent;
border-color: #93C0FF;
-moz-border-radius: .7em;
-webkit-border-radius: .7em;
border-radius: .7em;
font-size: smaller;
font-weight: 500;
width: 256px;
box-sizing: content-box;
}
/*=========================================*/
/* User Profile background */
/*=========================================*/
.UserProfileMasthead .masthead-info {
background: url("https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/9/99/Menu.png/revision/latest") no-repeat center;
overflow:hidden;
}
.UserProfileMasthead .masthead-info h1{
color: #ffffff !important;
}
.UserProfileMasthead .masthead-info h2{
color: #ffffff !important;
}
/*=========================================*/
/* Hover highlight effect */
/*=========================================*/
table.highlight tr:hover {
background-color: #FFFF4C;
}
.i18ndoc {
background-color: #FFF77D;
border-bottom: 1px solid lightgrey;
font-family: monospace;
font-size: 8pt;
height: 140px;
overflow: auto;
padding: 3px;
}
.page-share-container {
display: none;
}
.page-share-toolbar {
display: none;
}
/*=========================================*/
/* 100% OJ Font Activation */
/*=========================================*/
.mainheader {
font-family: 'Harlow solid italic italic';
}
.Discordheader {
font-family: 'Harlow solid italic italic';
}
.news-table {
display:flex;
justify-content:space-between;
}
.HeaderText {
width: calc(100% - 200px);
}
.news-atoz {
font-family: 'Harlow solid italic italic';
}
@font-face {
font-family: 'Harlow Solid Italic Italic';
src: local('Harlow Solid Italic Italic'), local('Harlow-Solid-Italic-Italic'), url('/media/hydra/fonts/Harlow Solid Italic Italic.ttf') format('truetype');
}
@font-face {
font-family: 'RockoUltraFLF';
src: local('RockoUltraFLF'), local('RockoUltraFLF'), url('/media/hydra/fonts/RockoUltraFLF.ttf') format('truetype');
}
@font-face {
font-family: 'Backissuesbb_boldital';
src: local('Backissuesbb_boldital'), local('Backissuesbb_boldital'), url('/media/hydra/fonts/backissuesbb_boldital.ttf') format('truetype');
}
@font-face {
font-family: 'Backissuesbb_ital';
src: local('Backissuesbb_ital'), local('Backissuesbb_ital'), url('/media/hydra/fonts/backissuesbb_ital.ttf') format('truetype');
}
@font-face {
font-family: 'KMKDSPB_';
src: local('KMKDSPB_'), local('KMKDSPB_'), url('/media/hydra/fonts/KMKDSPB_.ttf') format('truetype');
}
@font-face {
font-family: 'Segoeui';
src: local('Segoeui'), local('Segoeui'), url(/media/hydra/fonts/segoeui.ttf) format('truetype');
}
.mainheader {
font-size: 50px;
line-height: 35px;
/*line-height: 45px;*/
text-align: center;
/*margin-top: 5px;*/
padding-top: 10px;
padding-bottom: 20px;
border-radius: 1em 2em 1em 2em !important;
color: #ffffff !important;
}
.Discordheader {
font-size: 50px;
line-height: 35px;
text-align: center;
border-radius: 2em 2em 0.5em 0.5em !important;
color: #ffffff !important;
}
/* Rounded search box - thanks to GeorgieGibbons for the code */
/*=========================================*/
/* Table of Content Rounder */
/*=========================================*/
/*<Toc rounder>*/
#toc, .toc {
background-color: transparent;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #d9d9d9;
border-collapse: separate;
margin: 1em 0;
padding: 5px;
}
#toc h2,
.toc h2 {
padding: 5px;
}
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 {
display: none;
}
/*=========================================*/
/* Fade Text Hover */
/*=========================================*/
.hoverfont a {
opacity: 1.00;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.hoverfont a:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
.hoverfont a:active {
opacity: 1.00;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*=========================================*/
/* Image Fade Hover Class */
/*=========================================*/
.hoverimage img {
opacity:1.00;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.hoverimage img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
/*=========================================*/
/* Button Hover Move Up */
/*=========================================*/
.hover-effect {
transition: transform .3s;
}
.hover-effect:hover {
transform: translatey(-6px);
}
/*=========================================*/
/* Icon Hover Move Up */
/*=========================================*/
.hover-small img {
transform: translatey(0px);
}
.hover-small img:hover {
transform: translatey(-2px);
}
/*=========================================*/
/* Image Change Hover */
/*=========================================*/
.hover-transition {
display:grid;
width:min-content;
position:relative;
z-index:0;
}
.hovertransimg {
grid-row: 1;
grid-column: 1;
top:0px;
opacity:1;
z-index:1;
}
.hovertransimg2 {
grid-row: 1;
grid-column: 1;
top:0px;
opacity:0;
z-index:2;
}
.hover-transition:hover .hovertransimg {
opacity:0;
}
.hover-transition:hover .hovertransimg2 {
opacity:1;
}
/*=================================*/
/* Zoom Image */
/*=================================*/
.zoom_pack img {
width: 156px;
height: 200px;
-moz-transition: -moz-transform 0.1s ease-in;
-webkit-transition: -webkit-transform 0.1s ease-in;
-o-transition: -o-transform 0.1s ease-in;
transition: transform 0.1 ease-in;
}
.zoom_pack img:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
cursor: pointer;
}
.zoom_card1 img {
width: 85px;
height: 119px;
-moz-transition: -moz-transform 0.1s ease-in;
-webkit-transition: -webkit-transform 0.1s ease-in;
-o-transition: -o-transform 0.1s ease-in;
transition: transform 0.1 ease-in;
}
.zoom_card1 img:hover {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
cursor: pointer;
}
/*Edit button pencil to Orange*/
.sprite.edit-pencil {
background-position: 0!important;
background-image: url('https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/4/46/Editbutton.png/revision/latest')!important;
}
/*=========================================*/
/* Tool Tip for Cards-Don't touch */
/*=========================================*/
.main-tooltip {
border-radius: 5px;
background-color: white;
overflow: hidden;
}
/* Adds padding to the wrapper to make space for a shadow + z-index so tooltips are visible over edit preview screen */
#tooltip-wrapper {
padding: 3px 7px 2px 3px;
z-index: 6000000;
overflow: hidden;
}
/* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */
.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
display: none;
}
.tooltips-init-complete {
cursor: help;
}
/*==============================================*/
/* Simpler Tooltip, allowed to touch */
/*==============================================*/
.stooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.stooltip .stooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.stooltip:hover .stooltiptext {
visibility: visible;
}
/*=========================================*/
/* Spoiler Black Box */
/*=========================================*/
.spoiler {
background-color: #000000 !important;
color: #ffffff !important;
border: 1px solid #ffffff;
border-radius: 2px;
}
.spoiler .spoilerInner {
visibility: hidden !important;
}
.spoiler:hover .spoilerInner {
visibility: visible !important;
}
/*=========================================*/
/* Protection image */
/* (See Template:Protection) */
/* (See MediaWiki:Common.js/Protection.js) */
/*=========================================*/
div.protection-image {
display: none;
}
div.protection-image-visible {
display: inline;
}
/*=========================================*/
/* Page Title Font Changer */
/*=========================================*/
.wds-community-header .wds-tabs__tab-label a {
}
div#content #firstHeading{
font-family: 'RockoUltraFLF';
}
h1 {
font-family: 'RockoUltraFLF';
}
div#content h2 {
font-family: 'RockoUltraFLF';
}
div#content h3 {
font-family: 'Segoeui';
font-size: 95%;
}
.tabbernav li {
display: inline-flex !important;
}
/*=========================================*/
/* Code for Newsletter */
/*=========================================*/
.newse-table {
width: 100%;
padding: 5px;
margin-top: 10px;
background-color: #FFEBCD;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.news-under {
padding-left: 8px;
border-bottom: 1px solid #8B4513;
}
.news-heading {
font-size: 150% !important;
}
.news-atoz {
text-align: center;
font-size: 150%;
border-radius: 1em 2em 1em 2em;
}
/*=========================================*/
/* Remove Text Underline */
/*=========================================*/
.no-decoration a:hover {
text-decoration: none;
}
/*======================================*/
/* Background for small icons */
/*====================================*/
.iconbg {
background-image: url("https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/0/02/Menusmall.png/revision/latest") !important;
background-size: cover;
}
.currencybg {
background-image: url("https://static.wikia.nocookie.net/onehundredpercentorangejuice_gamepedia_en/images/9/9b/Menumedium.png/revision/latest") !important;
background-size: cover;
}
/*=========================================*/
/* ??? */
/*=========================================*/
/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect {
font-style: italic;
}
.allpagesredirect:after {
color: #808080; content: " (redirect)"
}
.watchlistredir {
font-style: italic;
}
/* Default skin for navigation boxes: Borderlands style */
table.navbox { /* Navbox container style */
border: 1px solid #FFE0B3;
width: 100%;
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
background: #FFE0B3; -webkit-border-radius: .7em;
}
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
text-align: center; /* Title and above/below styles */
padding-left: 1em;
padding-right: 1em;
}
.navbox-group { /* Group style */
white-space: nowrap;
text-align: right;
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
}
.navbox,
.navbox-subgroup {
background: #FFE0B3; /* Background color */
}
.navbox-list {
border-color: #FFFFFF; /* Must match background color */
}
.navbox-title,
table.navbox th {
background: #FFBE62;
-webkit-border-radius: .7em; /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: #FFBE62;
-webkit-border-radius: .7em; /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #FFBE62;
-webkit-border-radius: .7em; /* Level 3 color */
}
.navbox-even {
background: #FFFFFF; /* Even row striping */
}
.navbox-odd {
background: transparent; /* Odd row striping */
}
.collapseButton { /* 'show'/'hide' buttons created dynamically */
float: right; /* by the CollapsibleTables javascript in */
font-weight: normal; /* [[MediaWiki:Common.js]]are styled here */
text-align: right; /* so they can be customised. */
width: auto;
}
.navbox .collapseButton { /* In navboxes, the show/hide button balances */
width: 6em; /* the vde links from [[Template:Tnavbar]], */
} /* so they need to be the same width. */
/*=========================================*/
/* Wrap Text and Underline Server Time */
/*=========================================*/
.js-tzclock-wrap {
display: table;
margin: 0 auto;
padding: 0 1em;
text-align: center;
white-space: nowrap;
}
.js-tzclock-lctn {
text-decoration: underline;
}
/* Tooltips */
.htt .tooltip-contentX table {
color: white;
}
.tooltip ul,
.htt .tooltip-contentX ul {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
list-style-image: none;
}
.htt .tooltip-contentX, .htt .tooltip-content {
background-color: rgba(255,255,255, 0.9);
}
#templatetfb .tooltip-content {
max-width: 300px !important;
padding: 5px;
}
.htt .tooltip-contentX .tooltip-hide {
display:none;
}
.tooltip-ready {
visibility: hidden;
display: block;
z-index: 2999;
}
.ajaxttlink > img,
.linkicon img {
vertical-align: text-bottom;
}
.infoboxtable {
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
}
.tooltip-contentX > .infoboxtable {
margin: 1px;
}
.tooltip-contentX > .wikitable {
margin: 1px;
}
/*=====================*/
/* Rounded corners */
/*=====================*/
.tablecurve-r {
-moz-border-bottom-right-radius: .7em;
-webkit-border-bottom-right-radius: .7em;
border-bottom-right-radius: .7em;
}
.tablecurve-l {
-moz-border-bottom-left-radius: .7em;
-webkit-border-bottom-left-radius: .7em;
border-bottom-left-radius: .7em;
}
.tableitem {
padding: 1px;
display: flex;
justify-content: space-evenly;
align-items: center;
background: white;
}
.DLCimage {
max-width: 332px;
height: 200px;
}
.frontnews {
display:flex;
}
.frontnews > div {
display: flex;
flex-flow: column wrap;
align-items: center;
flex: 1 1 0;
}
/*==========================*/
/* Moved from hydra.css */
/*==========================*/
/* thumbnails and galleries and image file history */
div.thumb {
background-color: #FFBE62 !important;
background-image: -moz-linear-gradient(center top , #FFFFFF 0%, #F2F2F2 100%) !important;
overflow: hidden !important;
border:0 !important;
padding: 3px !important;
text-align: center !important;
border-radius:5px;
}
img.thumbborder {
border: 1px solid #FFBE62;
border-radius: 5px;
}
div.thumbinner {
background-color: rgba(255, 255, 255, 0.2);
border: medium none;
}
li.gallerybox div.thumb {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid #FFBE62;
border-radius: 5px;
}
html .thumbimage {
border: 1px solid #FFBE62;
border-radius: 5px;
}
div.tright div.tleft {
border: 1px solid #FFBE62 !important;
}
div.tright {
clear: right;
float: right;
}
/* Tab template styles */
.tabcontainer .tab {
background-color: transparent;
border:2px solid #cccccc;
border-radius: 2px;
cursor: pointer;
float: right;
margin: 0 1px -2px;
padding: 3px;
text-align: center;
white-space: nowrap;
}
.tabcontainer .tab:hover {
background-color: #efefef;
color:#000000;
}
.tabcontainer .tab.active {
background-color: #FFBE62 !important;
border-bottom: 2px solid #cccccc;
color: #ffffff;
}