MediaWiki:Common.css: Difference between revisions
From HorizonXI Wiki
No edit summary |
No edit summary |
||
| Line 282: | Line 282: | ||
.wide-table { | .wide-table { | ||
width: 100%; | width: 100%; | ||
} | |||
/* Item page sections and headers */ | |||
.item-header { | |||
margin-top: 0; | |||
} | |||
.showhide { | |||
float: right; | |||
cursor: pointer; | |||
font-size: 67%; | |||
font-weight: normal; | |||
} | |||
.item-header .showhide::before { | |||
content: '[show/hide]' | |||
} | |||
.item-section .item-header, | |||
.item-subsection .item-header { | |||
margin-right: 1ex; | |||
} | |||
.item-section { | |||
vertical-align: top; | |||
display: inline-block; | |||
width: 100%; | |||
} | |||
.item-subsection { | |||
vertical-align: top; | |||
display: inline-block; | |||
width: 50%; | |||
} | |||
/* Fix overflow issues on small screens */ | |||
@media screen and (max-width: 1024px) { | |||
.item-subsection { | |||
width: 100%; | |||
} | |||
} | |||
/* Fix main page column font size */ | |||
.page-Main_Page div#column-one { | |||
font-size: 127%; | |||
} | |||
/* Box with image border */ | |||
.ffxi-border-box { | |||
border: 8px solid transparent; | |||
border-image: url(https://vignette.wikia.nocookie.net/ffxi/images/f/f8/FFXIbox.png) 8 repeat; | |||
} | |||
/* Links that won't override text color */ | |||
.no-color-links a, | |||
.no-color-links a:visited { | |||
color: inherit; | |||
} | |||
/* New-style .js Tooltip appearance */ | |||
.main-tooltip { | |||
border: 1px solid #A3B1BF; | |||
-moz-border-radius: 10px; | |||
padding: 1em; | |||
background-color: rgba(163, 177, 191, .8); | |||
/* enforce full width for lazy-loaded image tooltips */ | |||
width: max-content!important; | |||
} | |||
/* Hidden categories not hiding */ | |||
.mw-hidden-cats-ns-shown {display: none} | |||
/******************* | |||
* LUA Navboxes (to replace existing broken Navbox template) | |||
*******************/ | |||
.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; | |||
} | |||
/* Item page sections and headers */ | |||
.item-section, | |||
.item-subsection { | |||
width: 100%; | |||
} | |||
.showhide { | |||
font-size: 13px; | |||
} | |||
.item-header .showhide::before { | |||
content: 'show/hide'; | |||
} | |||
.compact-list dl, | |||
.compact-list ul { | |||
margin: 0; | |||
} | |||
.flush-list dl, | |||
.flush-list ul { | |||
margin: 0; | |||
} | |||
.ffxi-table dl { | |||
margin: 0; | |||
} | |||
/* Infobox template style */ | |||
.infobox { | |||
border: 1px solid #aaa; | |||
background-color: #f9f9f9; | |||
color: black; | |||
margin-bottom: 0.5em; | |||
/* margin-left: 0.5em; */ | |||
padding: 0.2em; | |||
float: right; | |||
clear: right; | |||
} | |||
.infobox td, | |||
.infobox th { | |||
vertical-align: top; | |||
} | |||
.infobox caption { | |||
font-size: larger; | |||
margin-left: inherit; | |||
} | |||
.infobox.bordered { | |||
border-collapse: collapse; | |||
} | |||
.infobox.bordered td, | |||
.infobox.bordered th { | |||
border: 1px solid #aaa; | |||
} | |||
.infobox.bordered .borderless td, | |||
.infobox.bordered .borderless th { | |||
border: 0; | |||
} | |||
.infobox.sisterproject { | |||
width: 20em; | |||
font-size: 90%; | |||
} | |||
@media print { | |||
.infobox.sisterproject { | |||
display: none; | |||
} | |||
} | |||
/* Styles for bordered infobox with merged rows */ | |||
.infobox.bordered .mergedtoprow td, | |||
.infobox.bordered .mergedtoprow th { | |||
border: 0; | |||
border-top: 1px solid #aaa; | |||
border-right: 1px solid #aaa; | |||
} | |||
.infobox.bordered .mergedrow td, | |||
.infobox.bordered .mergedrow th { | |||
border: 0; | |||
border-right: 1px solid #aaa; | |||
} | |||
/* Standard Navigations Documentation at [[Wikipedia:NavFrame]]. */ | |||
div.Boxmerge, | |||
div.NavFrame { | |||
margin: 0px; | |||
margin-left: 0em; | |||
padding: 4px; | |||
border: 0px solid #aaa; | |||
text-align: center; | |||
border-collapse: collapse; | |||
font-size: 95%; | |||
} | |||
div.Boxmerge div.NavFrame { | |||
border-style: none; | |||
border-style: hidden; | |||
} | |||
div.NavFrame + div.NavFrame { | |||
border-top-style: none; | |||
border-top-style: hidden; | |||
} | |||
div.NavPic { | |||
background-color: #fff; | |||
margin: 0px; | |||
padding: 2px; | |||
float: left; | |||
} | |||
div.NavFrame div.NavHead { | |||
height: 1em; | |||
font-weight: bold; | |||
background-color: #ccf; | |||
position:relative; | |||
} | |||
div.NavFrame p { | |||
font-size: 100%; | |||
} | |||
div.NavFrame div.NavContent { | |||
font-size: 100%; | |||
} | |||
div.NavFrame div.NavContent p { | |||
font-size: 100%; | |||
} | |||
div.NavEnd { | |||
margin: 0px; | |||
padding: 0px; | |||
line-height: 1px; | |||
clear: both; | |||
} | |||
a.NavToggle { | |||
position:absolute; | |||
top:0px; | |||
right:3px; | |||
font-weight:normal; | |||
font-size:smaller; | |||
} | |||
div.Boxmerge, | |||
div.MainPageNavFrame { | |||
margin: 0px; | |||
padding: 4px; | |||
border: 0px solid #aaa; | |||
text-align: center; | |||
border-collapse: collapse; | |||
font-size: 95%; | |||
} | |||
div.MainPageNavFrame div.MainPageNavHead { | |||
height: 1.6em; | |||
font-weight: bold; | |||
background-color: transparent; | |||
position:relative; | |||
} | |||
/* Template preloads */ | |||
.preload_table { | |||
text-align:center; | |||
padding:1px; | |||
border-spacing: 4px 2px; | |||
} | |||
.preload_button, | |||
.preload_button2 { | |||
background-color: #ddddee; | |||
border: 2px outset #9999bb; | |||
text-align: center; | |||
padding: 2px 4px; | |||
} | |||
.preload_button2 { | |||
font-size: 110%; | |||
background-color: #E0BF1C; | |||
border:2px outset #BFb428; | |||
} | } | ||
Revision as of 13:27, 27 January 2023
/* CSS placed here will be applied to all skins */
/* General purpose "pretty (data) tables" */
table.datatable {
background-color: transparent;
}
table.datatable th,
table.datatable td {
padding: 4px;
}
table.datatable th {
text-align: left;
background-color: #d87093;
}
table.datatable tr {
background-color: #ccccff;
}
table.datatable tr:hover {
background-color: #e3e6ff;
}
li #credits {
white-space: normal;
}
.headbare h1,
.headbare h2 {
border-bottom: none;
}
.mw-plusminus-pos {
color: #006500;
}
.mw-plusminus-neg {
color: #8B0000;
}
/* Lists with less indentation */
.compact-list dd {
margin-left: 1ex;
}
.flush-list dd {
margin-left: 0;
}
/* Various common tables */
table.mission-table,
table.monster-table,
table.poi-table,
table.npc-table,
table.nm-table {
width: 100%;
}
table.ffxi-table,
table.mission-table,
table.monster-table,
table.nm-table{
border-spacing: 2px;
}
table.job-table {
border-spacing: 0;
border-collapse: collapse;
}
table.job-table td,
table.job-table th {
border: 2px ridge;
}
table.ffxi-table td,
table.ffxi-table th,
table.nm-table td,
table.nm-table th,
table.job-table td,
table.job-table th {
padding: 2px;
}
table.job-table td,
table.job-table th {
padding-left: 1ex;
}
table.job-table td {
vertical-align: top;
}
table.mission-table td,
table.mission-table th,
table.poi-table td,
table.poi-table th,
table.npc-table td,
table.npc-table th,
table.monster-table td,
table.monster-table th,
table.monster-table tr.ffxi-footer td,
table.monster-table td.ffxi-footer {
text-align: center;
padding: 2px;
}
table.nm-table td {
text-align: left;
}
/* Various table background colors */
table.ffxi-table tr,
table.mission-table tr,
table.monster-table tr,
table tr.bg-blue,
.bg-blue tr,
.bg-blue {
background-color: #eddce7;
}
table.bg-blue-alt tr,
table tr.bg-blue-alt,
.bg-blue-alt {
background-color: #d5d9ff;
}
table.ffxi-table th,
table.monster-table th,
table.poi-table th,
table.npc-table th,
table.itm-table th,
table.gtm-table th,
table.quest-table th,
table.fishing-table th,
table.chocodig-table th,
table tr.ffxi-header,
table tr td.ffxi-header,
table tr th.ffxi-header,
table tr.ffxi-footer,
table tr td.ffxi-footer,
table tr th.ffxi-footer,
table tr.bg-header,
.bg-header tr,
.bg-header {
background-color: #bc73a1;
}
table.job-table tr,
table tr.bg-bright-blue,
.bg-bright-blue tr,
.bg-bright-blue {
background-color: #eaf0ff;
}
table.quest-table tr,
table tr.bg-mauve,
.bg-mauve tr,
.bg-mauve {
background-color: #fffcf5;
}
table.fishing-table tr,
table tr.bg-seablue,
.bg-seablue tr,
.bg-seablue {
background-color: #66b2ff;
}
table.chocodig-table tr,
table tr.bg-cream,
.bg-cream tr,
.bg-cream {
background-color: #fffacd;
}
table.spell-table tr,
table tr.bg-faint-blue,
.bg-faint-blue tr,
.bg-faint-blue {
background-color: #eeeeff;
}
table.nm-table th,
.bg-red th,
.bg-nm th,
.bg-nm .ffxi-header,
.bg-nm .ffxi-footer {
background-color: #f76b6b;
}
table.nm-table tr,
table tr.bg-red,
table tr.bg-nm,
.bg-red tr,
.bg-nm tr,
.bg-red,
.bg-nm {
background-color: #ffd9d9;
}
table.artifact-table tr,
table tr.bg-faint-red,
.bg-faint-red tr,
.bg-faint-red {
background-color: #ffeaf0;
}
table.skill-table td,
table tr.bg-beige,
.bg-beige tr,
.bg-beige {
background-color: #f5f5f5;
}
table.job-table th,
table tr.bg-header-blue,
.bg-header-blue tr,
.bg-header-blue {
background-color: #66ccff;
}
table.spell-table th,
table tr.bg-header-purple,
.bg-header-purple tr,
.bg-header-purple {
background-color: #ccaaff;
}
table.skill-table th,
table tr.bg-header-beige,
.bg-header-beige tr,
.bg-header-beige {
background-color: #cdc8b1;
}
table.artifact-table th,
table tr.bg-header-red,
.bg-header-red tr,
.bg-header-red {
background-color: #e87093;
}
table.gtm-table tr,
table.spawn-table tr,
table.poi-table tr,
table tr.bg-green,
.bg-green tr,
.bg-green {
background-color: #c8e6c9;
}
table.spawn-table th,
table tr.bg-dark-green,
.bg-dark-green tr,
.bg-dark-green {
background-color: #6bf799;
}
table.npc-table tr,
table tr.bg-purple,
.bg-purple tr,
.bg-purple {
background-color: #e1bee7;
}
table.itm-table tr,
table tr.bg-yellow,
.bg-yellow tr,
.bg-yellow {
background-color: #f0f4c3;
}
table.mission-table th,
table th.pst-green,
.pst-green th,
.pst-green {
background-color: #ceffc7;
}
.wide-table {
width: 100%;
}
/* Item page sections and headers */
.item-header {
margin-top: 0;
}
.showhide {
float: right;
cursor: pointer;
font-size: 67%;
font-weight: normal;
}
.item-header .showhide::before {
content: '[show/hide]'
}
.item-section .item-header,
.item-subsection .item-header {
margin-right: 1ex;
}
.item-section {
vertical-align: top;
display: inline-block;
width: 100%;
}
.item-subsection {
vertical-align: top;
display: inline-block;
width: 50%;
}
/* Fix overflow issues on small screens */
@media screen and (max-width: 1024px) {
.item-subsection {
width: 100%;
}
}
/* Fix main page column font size */
.page-Main_Page div#column-one {
font-size: 127%;
}
/* Box with image border */
.ffxi-border-box {
border: 8px solid transparent;
border-image: url(https://vignette.wikia.nocookie.net/ffxi/images/f/f8/FFXIbox.png) 8 repeat;
}
/* Links that won't override text color */
.no-color-links a,
.no-color-links a:visited {
color: inherit;
}
/* New-style .js Tooltip appearance */
.main-tooltip {
border: 1px solid #A3B1BF;
-moz-border-radius: 10px;
padding: 1em;
background-color: rgba(163, 177, 191, .8);
/* enforce full width for lazy-loaded image tooltips */
width: max-content!important;
}
/* Hidden categories not hiding */
.mw-hidden-cats-ns-shown {display: none}
/*******************
* LUA Navboxes (to replace existing broken Navbox template)
*******************/
.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;
}
/* Item page sections and headers */
.item-section,
.item-subsection {
width: 100%;
}
.showhide {
font-size: 13px;
}
.item-header .showhide::before {
content: 'show/hide';
}
.compact-list dl,
.compact-list ul {
margin: 0;
}
.flush-list dl,
.flush-list ul {
margin: 0;
}
.ffxi-table dl {
margin: 0;
}
/* Infobox template style */
.infobox {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: black;
margin-bottom: 0.5em;
/* margin-left: 0.5em; */
padding: 0.2em;
float: right;
clear: right;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox caption {
font-size: larger;
margin-left: inherit;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
@media print {
.infobox.sisterproject {
display: none;
}
}
/* Styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
border-right: 1px solid #aaa;
}
/* Standard Navigations Documentation at [[Wikipedia:NavFrame]]. */
div.Boxmerge,
div.NavFrame {
margin: 0px;
margin-left: 0em;
padding: 4px;
border: 0px solid #aaa;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.Boxmerge div.NavFrame {
border-style: none;
border-style: hidden;
}
div.NavFrame + div.NavFrame {
border-top-style: none;
border-top-style: hidden;
}
div.NavPic {
background-color: #fff;
margin: 0px;
padding: 2px;
float: left;
}
div.NavFrame div.NavHead {
height: 1em;
font-weight: bold;
background-color: #ccf;
position:relative;
}
div.NavFrame p {
font-size: 100%;
}
div.NavFrame div.NavContent {
font-size: 100%;
}
div.NavFrame div.NavContent p {
font-size: 100%;
}
div.NavEnd {
margin: 0px;
padding: 0px;
line-height: 1px;
clear: both;
}
a.NavToggle {
position:absolute;
top:0px;
right:3px;
font-weight:normal;
font-size:smaller;
}
div.Boxmerge,
div.MainPageNavFrame {
margin: 0px;
padding: 4px;
border: 0px solid #aaa;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.MainPageNavFrame div.MainPageNavHead {
height: 1.6em;
font-weight: bold;
background-color: transparent;
position:relative;
}
/* Template preloads */
.preload_table {
text-align:center;
padding:1px;
border-spacing: 4px 2px;
}
.preload_button,
.preload_button2 {
background-color: #ddddee;
border: 2px outset #9999bb;
text-align: center;
padding: 2px 4px;
}
.preload_button2 {
font-size: 110%;
background-color: #E0BF1C;
border:2px outset #BFb428;
}
