Octopath Traveler Wiki

Wooden Signboard
 Welcome to the Octopath Traveler Wiki!
Be advised, many pages may contain unmarked spoilers! Browse at your own discretion!

READ MORE

Octopath Traveler Wiki
Don't have an account?
Register
Advertisement
Register
Octopath Traveler Wiki
Octopath Traveler Wiki
3,641
pages

Common.css

MediaWiki page
Sign in to edit

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.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');
@import url("/MediaWiki:Tabber.css?ctype=text/css&action=raw");				    /* Tabber styling */
@import url("/MediaWiki:Tooltips.css?ctype=text/css&action=raw");				/* Tooltips styling */
@import url("/MediaWiki:BalancedTabber.css?ctype=text/css&action=raw");         /* Balanced Tabber */
@import url("/MediaWiki:Mainpage.css?ctype=text/css&action=raw");               /* Mainpage styling */

/* Article Tables */
.article-table {
}

.article-table th {
	background-color: #0A0605 !important;
	border: 1px solid #0A0605 !important;
	color: white;
	text-align: center;
	padding: 5px 5px; 
}
.article-table td {
	border: 1px solid #0A0605;
	padding: 5px 5px; 
	vertical-align: top;
}

/* Hide Breadcrumbs On Portals */
body.ns-112 .WikiaPageHeader h2,
body.ns-112 .WikiaMainContent #contentSub,
body.ns-112 #bodyContent #contentSub {
  display: none !important;
}
/****************************************************/
/***  CSS for Navboxes (see [[Template:Navbox]])  ***/
/****************************************************/
 
/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
    border: 1px solid #aaa;
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}

.navbox-inner,
.navbox-subgroup {
    width: 100%;
}

.navbox-group,
.navbox-title,
.navbox-abovebelow {
    padding: 0.25em 1em;      /* Title, group and above/below styles */
    line-height: 1.5em;
    text-align: center;
}

.navbox,
.navbox-subgroup {
    background: #fdfdfd;      /* Background color */
}

.navbox-list {
    line-height: 1.5em;
    border-color: #fdfdfd;    /* Must match background color */
}

.navbox th,
.navbox-title {
}

.theme-fandomdesktop-light .navbox th,
.theme-fandomdesktop-light .navbox-title {
    background: #DED6B0;      /* Level 1 color */
    border: 1px solid #000000;
}

.theme-fandomdesktop-dark .navbox th,
.theme-fandomdesktop-dark .navbox-title {
    background: #100702;      /* Level 1 color */
    border: 1px solid #A79D94;
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
}

.theme-fandomdesktop-light .navbox-abovebelow,
.theme-fandomdesktop-light th.navbox-group,
.theme-fandomdesktop-light .navbox-subgroup .navbox-title {
    background: #DED6B0;      /* Level 2 color */
    border: 1px solid #000000;
}

.theme-fandomdesktop-dark .navbox-abovebelow,
.theme-fandomdesktop-dark th.navbox-group,
.theme-fandomdesktop-dark .navbox-subgroup .navbox-title {
    background: #100702;      /* Level 2 color */
    border: 1px solid #A79D94;
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: transparent;      /* Level 3 color */
}

.navbox-even {
    background: transparent;      /* Even row striping */
}

.navbox-odd {
    background: transparent;  /* Odd row striping */
}

table.navbox {
    margin-top: 1em;          /* Prevent preceding content from clinging to navboxes */
}

table.navbox table.navbox {
    margin-top: 0;            /* No top margin for nested navboxes */
}

table.navbox + table.navbox {
    margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
 
/* Default styling for Navbar template */
.navbar {
    display: inline;
    font-size: 88%;
    font-weight: normal;
}
.mw-body-content .navbar ul {
    line-height: inherit;
}
.navbar li {
    word-spacing: -0.125em;
}
.navbar.mini li abbr[title] {
  font-variant: small-caps;
  border-bottom: none;
  text-decoration: none;
  cursor: inherit;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
    font-size: 100%;
}
.navbox .navbar {
    display: block;
    font-size: 100%;
}
.navbox-title .navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
    width: 6em;
}
 
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
    /* @noflip */
    float: right;
    font-weight: normal;
    /* @noflip */
    margin-left: 0.5em;
    /* @noflip */
    text-align: right;
    width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
    width: 6em;
}
 
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}
.navbox .mw-collapsible-toggle {
    width: 6em;
}
/* default skin for navigation boxes */

/* Hover thingy */
.hoverimage {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 4;
}
.hoverimage img {
   opacity: 0;
   -webkit-transition: opacity .5s ease;
   -moz-transition: opacity .5s ease;
   -ms-transition: opacity .5s ease;
   -o-transition: opacity .5s ease;
   transition: opacity .5s ease;
}
.hoverimage:hover img {
   opacity: 1;
   -webkit-transition: opacity .5s ease;
   -moz-transition: opacity .5s ease;
   -ms-transition: opacity .5s ease;
   -o-transition: opacity .5s ease;
   transition: opacity .5s ease;
}

/**** portable infobox formatting ****/
.portable-infobox .pi-data-value li {
	line-height:1.5em
}
.portable-infobox .reference,.refadjust .reference {
	font-size:7.5px;
	line-height:1.5
}
.portable-infobox .assumed {
	font-size:7.5px;
	line-height:1.5
}
.portable-infobox .pi-border-color {
	border-bottom-style:none !important
}
.portable-infobox .pi-item-spacing {
	padding:4px
}
.portable-infobox .pi-title {
	font-size:0.95em;
	text-align:center;
	line-height:1.5
}
.portable-infobox .pi-secondary-font {
	font-size:0.8em;
	line-height:1.5
}
.portable-infobox .pi-data-value {
	font-size:0.8em;
	line-height:1.5
}
.portable-infobox.pi-navigation:last-child,.portable-infobox .pi-navigation:last-child {
	-webkit-border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	-ms-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
	text-align:center
}

.portable-infobox .pi-smart-data-value {
	padding: 2px 4px 2px 4px !important;
	text-align:left;
}

.portable-infobox .pi-header {
	text-align:center;
}

.portable-infobox .pi-item[data-source=subheader] {
	padding-left:10px;
}

.theme-fandomdesktop-light .portable-infobox section:nth-child(n+3) ul.wds-tabs {
	background: #c2a04e;
}

.theme-fandomdesktop-dark .portable-infobox section:nth-child(n+3) ul.wds-tabs {
	background: #005c62;
}

.portable-infobox .pi-panel > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab {
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:0px;
}

.theme-fandomdesktop-light .portable-infobox .pi-item[data-source=subheader] {
	background: rgba(0,0,0,0.2);
}

.theme-fandomdesktop-dark .portable-infobox .pi-item[data-source=subheader] {
	background: rgba(255,255,255,0.1);
}

/* End portable infobox formatting */

.skin-Monobook #title-eraicons img { float: left; }

/* tweaks for title-messing templates */
	#title-override { left: 0px!important; font-weight: bold!important; background: #f4f8ff!important; }
	
	.WikiaPageHeader > h1 {
 font-family: Segoe UI; /* This changes the header on every article */
}

/* Hex #         Description                                               */
/* #284C6D ..... Workmark text color                                       */
/* #3A3A3A ..... Colour of all 'black' text on Wikia                       */

:not(.editor) .WikiaMainContent {
  margin-bottom: 15px;
}

 
a.wikia-button, .wikia-single-button a, .wikia-menu-button, input[type="reset"], input[type="button"], .button, button, a.wikia-button.secondary, .wikia-single-button a.secondary, .wikia-menu-button.secondary, input[type="submit"].secondary, input[type="reset"].secondary, input[type="button"].secondary, .button.secondary, button.secondary, .wikia-menu-button.active, div.neutral.modalToolbar a#ok.wikia-button, #EditPage .module_page_controls .wikia-menu-button, #EditPage .module_page_controls input[type="submit"], #wpSave, #wpPreview, #wpDiff, #wpSave a:hover, #wpDiff a:hover, #wpPreview a:hover, #wpSave:hover, #wpDiff:hover, #wpPreview:hover .wds-tabs li a, .css-side-bar .css-edit-box .css-publish-button {
    font-family: Arial;
}

/* Gradient on the right column as well as main page modules */
/* Mainpage H4 */
.mainpage h4 {
    margin: 0px !important;
}


/* Search */
.WikiaSearch input.placeholder[type="text"] {
    color: #284C6D !important;
}
.WikiaSearch input[type="text"]::-webkit-input-placeholder {
  color: #284C6D !important;
}
#WikiaSearch > input[name="search"] {
	background: transparent;
	border: 0;
	margin-left: 9px;
	padding-left: 0;
	padding-right: 0;
	width: 268px;
}
#WikiaSearch > button {
	border-radius: 3px;
	float: none;
	height: 24px;
	position: absolute;
	top: 1px;
	right: 1px;
}


/* Twitter Line Spacing */
.cfUserTweetsTag li {
  margin-bottom:10px;
}
 
/* References Text Size */
.references-small {
  font-size: 85%;
}
#infobox .reference {
  font-size: 85% !important;
  font-family: Helvetica, Arial, sans-serif !important;
}
 
/* Superscript */
sup {
  line-height: 1em;
}

/* ------------------------ CUSTOM WIKIA BUTTONS ------------------------- */
 
/* Hover */
.cc2-wikia-button a:hover {
  background-color: #284C6D;
  background-image: -moz-linear-gradient(top, #366692 35%, #284c6d 65%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #366692), color-stop(65%, #284c6d));
  text-decoration: none;
}
 
.cc2-wikia-button a:active {
  background-image: -moz-linear-gradient(top, #23425e 35%, #305c83 65%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #23425e), color-stop(65%, #305c83));
  text-decoration: none;
}
.WikiaArticle {
 font-family: Arial; /* This changes the text in the content space only */}

/* Standard Navigationsleisten, aka box hiding thingy
   from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.NavFrame {
    margin: 0;
    padding: 4px;
    border: 1px solid #aaa;
    text-align: center;
    border-collapse: collapse;
    font-size: 95%;
}
div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;
}
div.NavFrame div.NavHead {
    height: 1.6em;
    font-weight: bold;
    background-color: #ccf;
    position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
    font-size: 100%;
}
div.NavEnd {
    margin: 0;
    padding: 0;
    line-height: 1px;
    clear: both;
}
a.NavToggle {
    position: absolute;
    top: 0;
    /* @noflip */
    right: 3px;
    font-weight: normal;
    font-size: 90%;
}

/* Wiki Navigation */
.nav-item.marked {
border-radius:6px 6px 0 0 !important;
-moz-border-radius:6px 6px 0 0 !important;
}
.nav-item.marked > a {
border-top-color:transparent !important;
}
.subnav-2-item.marked2 .subnav-2a {
border-radius:6px 6px 0 0 !important;
-moz-border-radius:6px 6px 0 0 !important;
}
.subnav-2a {
transition:0.2s all linear;
-webkit-transition:0.2s all linear;
border-radius:6px;
-moz-border-radius:6px;
}
.subnav-2a:hover {
background:#eee;
color:#000 !important;
}
.subnav-3.subnav {
border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
margin-top:1px !important;
}
.navbackground {
border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
background-image:url('');
background-repeat:no-repeat;
background-position:460px -70px;
}
.navbackground div {
background:inherit !important;
width:0 !important;
}
.navbackground .chevron {
display:none;
}

/**** Navbox Traveler Box START ****/
.NavboxTraveler
{
    position: relative;
    display: inline-block;
    margin-top: 1px;
    margin-bottom: 2px;
    height: 80px;
    width: 81px;
    z-index: 0;
}
.NavboxTravelerBoxText
{
    position:absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    font-size: 11px;
    text-align: center;
    padding: 0 0;
    width:100%;
}

.NavboxTravelerBoxText span
{
    background: rgba(0,0,0,0.6);
}

.NavboxTravelerImage
{
    position: absolute;
    top: 0;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    opacity: 1;
    z-index: 1;
}
.NavboxTraveler:hover .NavboxTravelerImage
{
    opacity: 0;
}

.NavboxTraveler:hover .NavboxTravelerBoxText
{
    font-size: 12px;
    font-weight: bold;
}

    /*Fade START*/
.NavboxTravelerImageAlt
{
    position: absolute;
    top: 0;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    opacity: 0;
    z-index: 2;
}
.NavboxTraveler:hover .NavboxTravelerImageAlt
{
    opacity: 1;
}

.NavboxBackgroundBar {
    padding-left: 5px;
    padding-right: 5px;
}

.theme-fandomdesktop-light .NavboxBackgroundBar {
    display: inline-block;
    background-image: url("https://vignette.wikia.nocookie.net/octopath-traveler/images/3/3b/CharNavBkgd_Left.png"),url("https://vignette.wikia.nocookie.net/octopath-traveler/images/1/11/CharNavBkgd_Right.png"),url("https://vignette.wikia.nocookie.net/octopath-traveler/images/d/da/CharNavBkgd_Repeat.png");
    background-position: left 30px, right 30px, center 30px ;
    background-repeat: no-repeat, no-repeat, repeat-x; 
 }

.theme-fandomdesktop-dark .NavboxBackgroundBar {
    display: inline-block;
    background-image: url("https://static.wikia.nocookie.net/octopath-traveler/images/b/b1/CharNavBkgd_Left_Dark.png"),url("https://static.wikia.nocookie.net/octopath-traveler/images/2/21/CharNavBkgd_Right_Dark.png"),url("https://static.wikia.nocookie.net/octopath-traveler/images/f/fb/CharNavBkgd_Repeat_Dark.png");
    background-position: left 30px, right 30px, center 30px ;
    background-repeat: no-repeat, no-repeat, repeat-x; 
 }

/**** END ****/

/* Columns */
.columns-two {
 -moz-column-count:2; 
 -webkit-column-count:2; 
  column-count:2;
}
/**** END ****/

/* Removing title on main page */
.mainpage .WikiaPage .page-header__title,
.mainpage .WikiaPage .page-header__separator {
    display: none;
}

/**** For Light/Dark themes ****/
body.theme-fandomdesktop-dark .light {
  display: none;
}

body.theme-fandomdesktop-light .dark {
  display: none;
}

/* End Light/Dark themes */


/**** For spoiler frame ****/
.frame-basic {    
    border-style: solid;
    border-width: 9px 9px 9px 9px;
    background-color: transparent;
    padding: 0;
}

.theme-fandomdesktop-light .frame-basic {
    border-image: url("https://vignette.wikia.nocookie.net/octopath-traveler/images/b/b0/Window_Frame_Tan.png") 9 round;
}

.theme-fandomdesktop-light .frame-basic td {
	background-color: #CAC09E;
}

.theme-fandomdesktop-dark .frame-basic {
    border-image: url("https://static.wikia.nocookie.net/octopath-traveler/images/d/df/Window_Frame_Gray.png") 9 round;
}

.theme-fandomdesktop-dark .frame-basic td {
	background-color: #313131;
}
/* End frames */

/**** Horizontal Rules ****/
.hr-diamonds{
    content: '';
    background-size: contain;
    display: block;
    height: 14px;
    border: 0;
    position: relative;
}

.theme-fandomdesktop-light .hr-diamonds {
    background: url("https://static.wikia.nocookie.net/octopath-traveler/images/2/27/HRule_Diamonds_%28Gray%29.png") no-repeat center;
}

.theme-fandomdesktop-dark .hr-diamonds {
    background: url("https://static.wikia.nocookie.net/octopath-traveler/images/2/2f/HRule_Diamonds_%28White%29.png") no-repeat center;
}

/* Center Diamonds */
.hr-diamonds-center{
    content: '';
    background-size: contain;
    display: block;
    height: 14px;
    border: 0;
    position: relative;
}

.theme-fandomdesktop-light .hr-diamonds-center {
    background: url("https://static.wikia.nocookie.net/octopath-traveler/images/1/12/HRule_Diamonds_Center_%28Gray%29.png") no-repeat center;
}

.theme-fandomdesktop-dark .hr-diamonds-center {
    background: url("https://static.wikia.nocookie.net/octopath-traveler/images/3/32/HRule_Diamonds_Center_%28White%29.png") no-repeat center;
}
/* End horizontal rules */

/**** Game Tabs ****/
/* Game Tabs */
.gametabs {
    width: 100%;
    border-bottom: 2px solid #6C6D5D;
    margin-bottom: 20px;
	font-size:90%;
    }

.gametabs ul {
    margin: 0px;
    padding: 0px;
    height: 30px;
    }

.gametabs li {
    display: inline-block;
    margin-right: 10px;
    padding: 0px;
    height: 25px;
    }


.gametabs li a {
    display: block;
    text-decoration: none !important;
    }

.gametabs li:first {
	margin-left: 20px !important;
}

.gametabs li span {
    padding: 3px 8px 21px 8px;
    border: 2px solid #6C6D5D;
    border-radius: 5px 5px 0px 0px;
	border-bottom: none;
    height: 25px;
    line-height: 18px;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.theme-fandomdesktop-light .gametabs li span {
	color: #797979;
	background: rgb(0,0,0,0.05);
}

.theme-fandomdesktop-dark .gametabs li span {
	color: #797979;
	background: rgb(255,255,255,0.05);
}

.gametabs .mw-selflink span, .gametabs .mw-selflink span:hover {
    border: 2px solid #6C6D5D !important;
	padding-top: 7px !important;
}

.theme-fandomdesktop-light .gametabs .mw-selflink span, 
.theme-fandomdesktop-light .gametabs .mw-selflink span:hover {
    color: #000000;
	background: #F8ECC2; 
    border-bottom: 2px solid #F8ECC2 !important;
}

.theme-fandomdesktop-dark .gametabs .mw-selflink span, 
.theme-fandomdesktop-dark .gametabs .mw-selflink span:hover {
    color: #fafafa;
	background: #151207; 
    border-bottom: 2px solid #151207 !important;
}

.gametabs li a span:hover {
	color: #fafafa; 
	background: #797979; 
	padding-top: 7px !important;
}
/* End game tabs */

/* Reducing extra margins */
.page-content dt { 
	font-size: 14px; 
}

.page-content dl { 
	margin: 0; 
}

.page-content dd > dl { 
	margin-top: 5px !important; 
}

.page-content p + ul { 
	margin-top: -5px !important; 
}

/* End reducing extra margins */
Community content is available under CC-BY-SA unless otherwise noted.
More Fandoms
Advertisement