MediaWiki:Common.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* CSS placed here will be applied to all skins */
/*****  CSS placed here will be applied to all skins on the entire site.  *****/
/*===================
        Imports 
  ===================*/
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Interface.css|MediaWiki:Infoboxes.css|MediaWiki:Slider.css|MediaWiki:ColorSchemes.css|u:dev:MediaWiki:InterlanguageFlags.css|u:dev:MediaWiki:AbuseLogRC.css");

/*=================
        Theme
  =================*/
/**
 * CSS variables
 * Documentation: https://drafts.csswg.org/css-variables/ - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
 * Wiki's theme
 */
/* END CSS variables */

/*============================
          General
  ============================*/
 
/* Mark redirects in Special:Allpages and Special:Watchlist */
	.allpagesredirect, .watchlistredir { font-style: italic; }
	.allpagesredirect:after { color: #808080; content: " (redirect)" }
/* Image frame fix */
	div.tright, div.tleft { border: 1px solid silver; }
	div.thumbinner { background: inherit; border: none; color: inherit; }
	#article div.thumb { color:inherit; }
/* Table Tweaks */
	tr.high-light { }
		tr.high-light:hover  {background-color: #E0E8FF;}
		.high-light tr:hover {background-color: #E0E8FF;}
	td { empty-cells: hide }
/* Typography Fixes */
	sup { line-height: 0px; } /* lines with s will have same lineheight */

/* Instant collapsible animation when needed */
.instant-collapsible .mw-collapsed {
	display: none !important;
}

/* Styling code tag */
code {
	background-color: #f9f9f9;
	border-radius: 2px;
	border: 1px solid #ddd;
	color: black;
	padding: 1px 4px;
}

/* Reference popup customization */
.refpopups-box {
	background: #FFF380 !important;
	background: #FFF380 !important;
	border: 2px solid #AFA330 !important;
	border-radius: 1ex !important;
	color: #000000 !important;
}

.hiddenStructure { display: none; }

/* Hides image attribution on articles */
.picture-attribution { display:none !important; }

/* http://community.wikia.com/wiki/User_blog:Dopp/Technical_Update:_January_10,_2012 */
.WikiaArticle h2 {
	margin-top: 18px;
}
/** Exclusions  **/
.WikiaBlogListingPost h2 {
	margin-top: 0;
}


/* Character tables */

/* Characters tables for chapters and episodes */
.CharTable {
	border: 3px solid rgb(85, 85, 85);
	border-collapse: collapse;
	margin: auto;
}
.CharTable th {
	border: 2px solid rgb(85, 85, 85);
	background: none repeat scroll 0% 0% rgb(206, 206, 206);
}
.CharTable td {
	border: 2px solid rgb(85, 85, 85);
	vertical-align: top;
	padding: 1em
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .CharTable {
	margin: auto;
 }
}
 
.Gallery {
	border:1px outset gray;
	margin:auto;
	width:120px;
	empty-cells: hide;
}
 
.Gallery tr th, .Gallery tr td {
	border:1px inset gray;
	font-weight:bold;
	text-align:center;
	color:inherit;
	background:inherit;
}
 
.Gallery a:link, .Gallery a:visited {color:inherit}
.Gallery a:hover , .Gallery a:active {color:inherit; font-weight:bold; text-decoration:underlined }

/* links to gallery pic */
.Gallery-pic-info {
	display: none;
}
.Gallery-pic:hover .Gallery-pic-info {
	display: inline;
}

.status-symbol {
	cursor:help;
	border-bottom:1px dotted gray;
}

/* Restoring red links for new categories */
.newcategory { color: #e81a3f; }

/* Fixes for RecentChanges */
	/** Margins **/
.client-js .mw-changeslist ul,
.client-js .mw-changeslist table.mw-enhanced-rc {
	margin-left: 0;
}
	/** Tags in RC **/
.mw-tag-markers { font-weight: bold; }

/* Removing black border from focused links */
:focus {
	outline: none;
}


/*********************
     Template:Tabs
 *********************/
/* General styles */
	/** margins **/
.article-tabs {
	margin-bottom: 5px;
}
	/** list **/
.article-tabs ul {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
	/** tab default style **/
.article-tabs li {
	margin: 0;
	min-width: 100px;
	border: 1px solid var(--theme-text-color1);
	border-radius: 8px 8px 0 0;
	background-color: var(--colorscheme-bg, var(--theme-bg-color1));
	color: var(--colorscheme-txt, var(--theme-text-color1));
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
	/** links cover the whole tab **/
.article-tabs li a,
.article-tabs li a.new {
	display: block;
	color: inherit !important;
}
.article-tabs li > .selflink,
.article-tabs li > span,
.article-tabs li a > span {
	display: block;
	padding: 5px 10px;
}
	/** active and hover tab style **/
.article-tabs .at-selected,
.article-tabs li:hover {
	background-color: var(--colorscheme-txt, var(--theme-bg-color3));
	color: var(--colorscheme-bg, var(--theme-text-color3));
}

/* Second level tabs */
	/** default placement **/
.article-tabs .article-tabs {
	display: none;			/* initially hidden */
	position: absolute;

}
.article-tabs .article-tabs ul {
	width: 858px;
}
	/** tabs style **/
.article-tabs .article-tabs li {
	border-radius: 0;
}
	/** active tab style **/
.article-tabs .at-selected .article-tabs {
	display: table;
	left: 0;
}
	/** show on hover **/
.article-tabs li:not(.at-selected):hover > .article-tabs {
	display: table;
	z-index: 1;
}
	/** hover style **/
.article-tabs li:not(.at-selected):hover > .article-tabs ul {
	min-width: 200px;
	width: auto;
	flex-direction: column;
	left: -2px;
}

/* Adjacent tabs style (not nested) */
.article-tabs + .article-tabs li {
	margin-top: -5px;
	border-radius: 0 0 8px 8px;
}

/* *
 * Alignment correction for lists in more columns
 * https://stackoverflow.com/questions/5314726/css-multi-column-layout-of-list-items-doesnt-align-properly-in-chrome
 * */
.column-list ul li,
.column-list ol li {
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0;
	padding-top: 0;
}
.column-list ul,
.column-list ol {
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0;
	padding-top: 0;
	line-height: 1.8em;
}

/* Timer CSS */
#displayTimer { font-size: 12px !important; } 

#showdate a { color: white !important; }

/* Don't show external icon for local links */
a.external[href^="https://onepiece.fandom.com/"]:after {
	display: none;
}

/* Collapsible toggles customization */
.mw-collapsible-toggle {
	font-family: Monospace;
}
.mw-collapsible-toggle a, .ooui-theme-fandom .mw-collapsible-toggle a,
.mw-collapsible-toggle a, .ooui-theme-fandom .mw-collapsible-toggle a:hover {
	color: inherit;
}

/*============================
          Forum Formatting
  ============================*/

/* Forum formatting - Algorithm & Splarka */
.forumheader {
	background-color: #f9f9f9;
	border: 1px solid #aaa;
	margin-top: 1em;
	padding: 12px;
}
.forumlist td span {
	display: block;
	font-size: smaller;
	padding-left: 10px;
}
.forumlist td span a {
	text-decoration: none;
}
.forumlist td span.forum_author {
	padding-left: 30px;
}
.forumlist td.forum_edited a {
	text-decoration: none;
}
.forumlist th.forum_title {
	padding-left: 20px;
}
.forumlist td.forum_title a {
	padding-left: 20px;
}
.forumlist td.forum_title span a {
	padding-left: 0;
}
.forumlist td.forum_title a.forum_new {
	background: url("/wiki/Special:FilePath/Forum_new.gif") center left no-repeat;
	font-weight: bold;
	padding-left: 20px;
}
.forumlist td.forum_title a.forum_new:visited {
	background: none;
	font-weight: normal;
	padding-left: 20px;
}
/* remove talk link from forum namespace (Monobook/Monaco) - Splarka */
body.ns-110 #ca-talk,
body.ns-110 #page_tabs li+li {
	display: none;
}

/*******************
 * Navboxes
 *******************/
.navbox {
    width: 100%;
    background: white;
    color: black;
    margin: 1em auto;
    font-size: 84%;
    clear: both;
    padding: 2px;
    border-spacing: 0;
    border: 1px solid #AAA;
}

/* Merges navboxes that are directly under eachother */
.navbox + .navbox {
    margin-top: -11px;
}

.navbox .navbox-title {
    background: #CCF;
    color: black;
    font-weight: bold;
}

.navbox .navbox-vde {
    float:left;
    width:65px;
}

.navbox .navbox-title-padright {
    padding-right: 65px;
}

.navbox .navbox-title-padleft {
    padding-left: 65px;
}

.navbox .navbox-subgroup {
    border-spacing: 0;
    width: 100%;
}

.navbox .navbox-gutter {
    height: 2px;
}

.navbox .navbox-subgroup .navbox-gutter {
    background: white;
}

.navbox .navbox-section-row > td {
    padding: 0;
    height: 100%;
}

.navbox .navbox-section {
    width: 100%;
    border-spacing: 0;
}

.navbox .navbox-above,
.navbox .navbox-below {
    background: #DDF;
    text-align: center;
}

.navbox .navbox-image {
    background: white;
    text-align: center;
}

.navbox .navbox-group,
.navbox .navbox-header {
    background: #DDF;
    color: black;
    font-weight: bold;
    height: 100%;
    padding: 2px 4px;
}

.navbox .navbox-header-collapsible {
    padding-left: 65px;
}

.navbox .navbox-group {
    text-align: right;
    padding-right: 1em;
    min-width: 150px;
}

.navbox .navbox-group,
.navbox .navbox-image-left {
    border-right: 2px solid white;
}

.navbox-image-right {
    border-left: 2px solid white;
}

.navbox .navbox-list {
    background: white;
    color: black;
    width: 100%;
    height: 100%;
    padding: 0;
}

.navbox .alt > .navbox-list {
    background: #F7F7F7;
}

.navbox .navbox-list div {
    padding: 0px 4px;
}

.navbox .navbox-list.no-group {
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

.navbox .mw-collapsible-toggle {
    width: 65px;
}

/* hlist */
.hlist ul {
    margin: 0;
    list-style: none;
}

.hlist li, .hlist ul ul {
    display: inline;
}

.hlist li a {
    white-space: nowrap;
}

.hlist ul ul:before {
    content: "("
}

.hlist ul ul:after {
    content: ")"
}

.hlist li:after {
    content: " • ";
}

.hlist ul ul li:after {
    content: "/";
}

.hlist li:last-child:after, .hlist ul ul li:last-child:after {
    content: none;
}

/* Slider */
#SliderView {
  background: transparent;
  width: 100%;  
  height: auto;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  text-align: center;
}
#SliderWrapper {
  position: relative;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: cubic-bezier(.67,.01,.23,1);
  -o-transition-timing-function: cubic-bezier(.67,.01,.23,1);
  transition-timing-function: cubic-bezier(.67,.01,.23,1);
}
#SliderWrapper, #SliderWrapper ul, #SliderWrapper li, #NavBtns, #NavBtns ul {
  margin: 0px;
  padding: 0px;
}
#NavBtns li {
  margin: 0px;
}

.Sld {
  height: auto;
  list-style: none;
  display: inline;
  float: left;
}

.SlideIMG {
  width: 100%;
}
.SlideIMG img {
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 100%; 
  min-height: 100%; 
  position: relative;  
}

#NavBtns {
  position: absolute; 
  display: block;
}
.NavBtn {
  position: relative;
  display: block;
  top: 0px;
  width: auto;
  height: auto;
  list-style: none;
  margin: 0px;
  background: transparent;
}

.nmLeft {
  height: 100%;
  left: 0px;
  background: linear-gradient(to right, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
}
.nmLeft li {
  list-style: none;   
  padding: 10px 100px 10px 10px;
}
.nmLeft li:hover {
  cursor: pointer;
  background: linear-gradient(to right, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}

.nmRight {
  height: 100%;
  right: 0px;
  background: linear-gradient(to left, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
  text-align: left;
}
.nmRight li {
  list-style: none;   
  padding: 10px 10px 10px 100px;
}
.nmRight li:hover {
  cursor: pointer;
  background: linear-gradient(to left, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}

.nmTop {
  width: 100%;
  top: 0px;
  background: linear-gradient(to bottom, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
  text-align: left;
}
.nmTop li {
  display: inline-block;
  list-style: none;   
  padding: 10px 10px 20px 10px;
}
.nmTop li:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}

.nmBottom {
  width: 100%;
  bottom: 0px;
  background: linear-gradient(to top, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
  text-align: left;
}
.nmBottom li {
  display: inline-block;
  list-style: none;   
  padding: 20px 10px 10px 10px;
}
.nmBottom li:hover {
  cursor: pointer;
  background: linear-gradient(to top, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}

.nbActiveLeft {
  background: linear-gradient(to right, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}
.nbActiveRight {
  background: linear-gradient(to left, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}
.nbActiveTop {
  background: linear-gradient(to bottom, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}
.nbActiveBottom {
  background: linear-gradient(to top, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}