MediaWiki:Common.css
Revision as of 20:51, November 30, 2023 by Korra II A Royal (talk | contribs)
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 */
/* Wiki Theme */
.TwoWorldsWiki {
border-radius: 10px;
border: 3px solid #A78558;
background-color: #426875;
}
.TwoWorldsWiki td {
background-color: #D9C790;
}
.TwoWorldsWiki th {
background-color: #6C97A8;
}
/* Sidebar */
#mw-panel.collapsible-nav .portal h3 {
padding: 4px 0 3px 1.5em;
background-color: rgba(220, 198, 142, 5);
margin-bottom: 0.25em;
}
#mw-panel.collapsible-nav .portal h3 a {
font-variant-caps: petite-caps;
font-weight: bold;
}
#mw-panel.collapsible-nav .portal .body ul li {
padding: 0.25em 0 0.25em 0.5em;
background: rgba(220, 198, 142, 5);
margin-bottom: 0.25em;
margin-right: 0.75em;
}
#mw-page-base {
background: none;
}
/* Header logo placement */
.mw-body {
position: relative;
top: 9vw;
background: #D9C790; /* page body foreground color and transparency */
border: 1px solid;
}
#p-logo {
left: 30vw;
position: relative;
/* banner
border: 1px solid #aeaeae;
height: 120px;
width: 510px;
background: url(/w/images/2/2e/Shiren_1_DS_Background_-_Table_Mountain.png);
background-size: 100%;
background-position-x: 50%;
background-position-y: 50%; */
}
#p-logo a {
margin-top: 45px;
background-size: contain;
width: 33em;
height: 100px;
}
#mw-head {
position: absolute;
top: 9vw;
}
.mw-footer {
margin-top: 9vw;
bottom: 0;
position: relative;
}
/* This governs the Header placement */
h1 { text-align:center}
h2 { text-align:center}
h3 { text-align:center}
h4 { text-align:center}
h5 { text-align:center}
h6 { text-align:center}
/* This governs the sections on the Community portal */
.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: 300px;
}
.cpbox #help {
box-sizing: border-box;
width: calc(67% - 10px);
margin: 5px;
}
div#mw-panel div.portal li a[href="https://discord.gg/4dKnfpW"] {
display: inline-block;
position: relative;
height: 20px;
width: 119px
}
div#mw-panel div.portal li a[href="https://discord.gg/4dKnfpW"]::before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
background: url(https://discordapp.com/api/guilds/502973274125238284/embed.png) no-repeat;
}
/* Template documentation styles */
/* If modifying these styles, be sure to update the mobile skin! */
.doc {
margin: 0em auto 1em;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
.doc-header {
padding-bottom: 3px;
border-bottom: 1px solid #BDCAC3;
margin-bottom: 1ex;
}
.doc-footer {
margin: 0;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
/* 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;
}
/* this CSS governs the responsive 2 column main page layout */
#fp-container {
display: grid;
grid-template-areas: "a" "b" "c";
grid-template-columns: 100%;
}
#fp-container main .columns .leftcol,
#fp-container .columns .rightcol {
width: 100%;
margin: 0;
padding: 0;
}
@media screen and (min-width:650px) {
#fp-container .columns .leftcol {
float: left;
width: 50%;
}
#fp-container .columns .rightcol {
float: right;
width: 50%;
}
}
@media screen and (min-width:990px) {
#fp-container {
grid-template-areas: "a b" "c c";
grid-template-columns: 50% 50%;
}
}
@media screen and (min-width:1350px) {
#fp-container {
grid-template-areas: "a b" "c b";
grid-template-columns: auto 520px;
}
}
.fp-section {
display: flex;
flex-wrap: wrap;
}
#fp-top {
grid-area: a;
}
#fp-flex {
grid-area: b;
}
#fp-bottom {
grid-area: c;
}
/* Sidebar Discord embed */
#mw-panel .portal .body ul {
min-width: calc(0.5em + 119px);
}
div#mw-panel div.portal li a[href="https://discord.gg/4dKnfpW"] {
display: inline-block;
position:relative;
height: 20px;
width: 119px;
}
div#mw-panel div.portal li a[href="https://discord.gg/4dKnfpW"]::before {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
content:"";
background:url(https://discordapp.com/api/guilds/502973274125238284/embed.png) no-repeat;
}
/* Classes from Gamepedia Help Wiki's Common.css */
.ambox {
background-color: rgba(120,120,120,0.2);
border-bottom-color: #383838;
border-right-color: #383838;
border-top-color: #383838;
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox.ambox-tiny {
font-size: 90%;
margin: 2px 0;
width: auto;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-wiki {
border-left: 10px solid #454340;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/* Infobox template style */
.infobox {
background-color: rgba(0, 0, 0, 0);
border: 1px solid #505050;
float: right;
font-size: 89%;
margin-bottom: 0.5em;
padding: 0.2em;
width: 300px;
}
.infobox td.infoboxlabel {
border: 2px solid inherit;
font-weight: bold;
padding: 0.5px 7px;
text-align: right;
}
.infoboxname {
background-color: #f58120;
color: #000;
font-size: 110%;
font-weight: bold;
padding: 0.5em;
}
.infoboxdescription {
background-color: #f58120;
color: #000;
}
/* Table of Contents */
.toc {
font-size: 95%;
border-radius: 10px;
border: 3px solid #426875;
background-color: #D9C790;
}
/*****************
* Infobox styles *
******************/
.infobox {
float: right;
width: 23em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 0.5em;
padding: 4px;
border:1px solid #aaaaaa;
background-color:#f9f9f9
}
.infobox-table {
width: 100%;
padding: 0;
background-color:transparent;
border: 0;
}
.infobox-header {
font-size: 150%;
padding:0.4em;
}
.infobox-section {
padding:0.05em 0.3em;
text-align:center;
}
.infobox-header,
.infobox-section {
font-weight:bold;
}
.infobox-centered {
text-align: center;
}
.infobox-centered img {
max-width:100%;
height:auto;
}
.infobox-row {
vertical-align: top;
}
.infobox-row-name {
text-align: left;
white-space: nowrap;
text-align:right;
background:#ccc;
padding: 0.1em 0.5em;
width:40%;
}
.infobox-row-value {
text-align:left
}
.infobox-spacer {
height: 0.5em;
}
/*********************
* End infobox styles *
**********************/
.editOptions {
background-color:#FAE6CD;
border-color:#000
}
input,textarea {
background-color:#FAE6CD;
border-color:#000; color:#000000
}