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; }