MediaWiki:Common.css
From Will to Power Wiki
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.
@font-face {
font-family: 'Holitter';
src: url('/images/4/49/HolitterGothic-DJGd.ttf');
font-weight: normal;
font-style: normal;
}
/* Apply to all possible heading classes */
h1, h2, h3, h4, h5, h6,
.firstHeading,
#firstHeading,
.mw-headline {
font-family: 'Holitter', 'Georgia', serif !important;
}
/* Target the figure container */
figure[typeof="mw:File/Thumb"] {
background-image: url(https://landsofotan.com/images/8/80/Parchmentmain.png) !important;
border: 2px solid #675792 !important;
display: inline-block !important; /* Keep the box around the image */
padding: 0 !important;
background-color: transparent !important;
width: auto !important;
}
/* Force the caption to take up the full horizontal space */
figure[typeof="mw:File/Thumb"] figcaption {
display: block !important; /* Break out of any flex/inline-block squashing */
clear: both !important; /* Ensure it stays below the image */
width: auto !important; /* Let it expand */
min-width: 100% !important; /* Force it to match the figure width */
box-sizing: border-box !important;
/* Text Styling & Padding */
color: #eeeeee !important;
padding: 15px 10px !important; /* Breathable space */
text-align: center !important;
line-height: 1.5 !important;
background: transparent !important;
}
/* Ensure the image link doesn't interfere */
figure[typeof="mw:File/Thumb"] a {
display: block !important;
width: 100% !important;
}
figure[typeof="mw:File/Thumb"] img {
display: block !important;
margin: 0 auto !important;
max-width: 100% !important;
height: auto !important;
}
.copyright {
background-image: url( /images/b/b2/Parchmentblue.png ) !important;
font-family: 'Holitter', Merriweather !important;
border: solid 3px #675792 !important;
font-weight: 700 !important;
color:#675792 !important;
}
.color-right, .color-middle, .color-left {
background: #353535 ;
}
#mw-header-container {
background: #353535 !important;
}
#mw-content-container {
background: #444444 !important;
}
#mw-content-block {
background: #444444 !important;
}
#mw-site-navigation {
background: #444444 !important;
}
#mw-related-navigation {
background: #444444 !important;
}
#searchInput-container {
background: #444444 !important;
color:#eeeeee !important;
}
#searchInput {
background: #444444 !important;
color:#eeeeee !important;
}
a:link {
color:#bbbbbb !important;
}
a:visited {
color:#aaaabb !important;
}
a:hover {
color:#ddddff !important;
}
div.editOptions {
background: #353535 !important;
}
#p-logo-text a {
color: #9b8ebc !important;
}
.new a {
color: #dd3399 !important;
}
p {
font-size: 18px !important;
font-weight: 480 !important;
}
li {
font-size: 18px !important;
}
.firstHeading {
font-family: Merriweather !important;
font-size: 48px !important;
font-weight: 700 !important;
color:#eeeeee !important;
border-bottom: solid 4px #eeeeee !important;
}
h2:after {
content: '';
display: block;
border-bottom: solid 3px #eeeeee !important;
overflow: hidden;
}
#p-cactions-label {
font-size: 26px !important;
color:#eeeeee !important;
border-bottom: solid 2px #eeeeee !important;
}
#p-pagemisc-label {
font-size: 26px !important;
color:#eeeeee !important;
border-bottom: solid 2px #eeeeee !important;
}
#p-navigation-label {
font-size: 26px !important;
color:#eeeeee !important;
border-bottom: solid 2px #eeeeee !important;
}
#p-tb-label {
font-size: 26px !important;
color:#eeeeee !important;
border-bottom: solid 2px #eeeeee !important;
}
#mw-toc-heading {
font-size: 36px !important;
color:#eeeeee !important;
border-bottom: solid 2px #eeeeee !important;
overflow: hidden;
}
.toctitle {
border-bottom: solid 2px #eeeeee !important;
overflow: hidden;
color:#eeeeee !important;
}
#personal h2 {
font-size: 20px !important;
font-weight: 600;
color:#eeeeee !important;
}
.mw-headline {
font-family: Merriweather;
font-weight: 600;
color:#eeeeee ;
}
h2 {
font-size: 40px !important;
}
h3 {
font-size: 35px !important;
}
h4 {
font-size: 30px !important;
}
h5 {
font-size: 25px !important;
}
#personal {
font-size: 20px !important;
font-weight: 400 !important;
color:#eeeeee !important;
background: #444444 !important;
}
#p-personal {
background: #444444 !important;
}
#personal-inner {
background: #444444 !important;
}
#mw-content-container {
background: #111111 !important;
}
body {
background: #888888 !important;
color:#eeeeee !important;
}
#mw-content-wrapper {
background-image: url( /images/8/80/Parchmentmain.png ) !important;
border: solid 3px #675792 !important;
color:#FFFFFF !important;
background: #555555 !important;
}
#mw-content {
background-image: url( /images/8/80/Parchmentmain.png ) !important;
border: solid 1px #675792 !important;
color:#eeeeee !important;
}
figure[view-mode="thumb"],
.mw-default-size,
figure.mw-halign-right {
background-image: url(https://landsofotan.com/images/8/80/Parchmentmain.png) !important;
border: 2px solid #675792 !important;
padding: 3px; /* Adds a small gap between the border and the image */
}
/* Target the caption text specifically */
figcaption {
color: #eeeeee !important;
background: transparent !important;
font-size: 0.9em;
padding: 5px 0;
}
/* Ensures the image itself doesn't have a conflicting background */
figure[view-mode="thumb"] img {
border: 1px solid #675792; /* Optional: adds a thin inner border around the photo */
}
.thumbinner {
background-image: url( /images/8/80/Parchmentmain.png ) !important;
border: 2px solid #675792 !important;
color:#eeeeee !important;
}
.sidebar-chunk {
background: #353535 !important;
font-weight: 600 !important;
font-size: 130% !important;
border: 2px solid #675792 !important;
}
.toc {
background: #353535 !important;
font-weight: 600;
font-size: 130%;
border: 2px solid #675792;
}
.infobox {
background: #353535;
border: 2px solid #675792;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
width: 320px;
background-image: url( /images/b/b2/Parchmentblue.png ) !important;
}
.infobox2 {
background: #353535;
border: 2px solid #675792;
float: left;
margin: 0 0 1em 1em;
padding: 1em;
width: 320px;
background-image: url( /images/b/b2/Parchmentblue.png ) !important;
}
.infobox3 {
background: #353535;
border: 2px solid #675792;
float: left;
margin: 0 0 1em 1em;
padding: 1em;
width: 220px;
}
.infobox-title {
font-size: 2em;
text-align: center;
}
.infobox-image {
text-align: center;
}
.infobox th {
text-align: left;
vertical-align: top;
width: 120px;
}
.infobox td {
vertical-align: top;
}
.copyright {
background: #353535;
text-align: center;
border: 1px solid #aaa;
margin: 0 0 1em 1em;
padding: 1em;
width: 600px;
}
.pmonth {
margin: 0 0 .2em .2em;
#padding: .2em;
width: 130px;
float: left;
}
.omonth {
background: #353535;
border: 1px solid #aaa;
margin: 0 0 1em 1em;
padding: .2em;
width: 130px;
font-weight: bold;
font-size: 130%;
float: left;
}
.oweek {
background: #353535;
border: 1px solid #aaa;
margin: 0 0 .2em .2em;
padding: .2em;
width: 130px;
font-weight: bold;
font-size: 130%;
float: left;
}
.odayofweek {
background: #353535;
border: 1px solid #aaa;
margin: 0 0 .2em .2em;
padding: .2em;
width: 120px;
text-align: center;
font-weight: bold;
font-size: 130%;
float: left;
}
.oday {
border: 1px solid #aaa;
margin: 0 0 .2em .2em;
padding: .2em;
width: 120px;
height: 120px;
overflow-y: auto;
float: left;
}
.ocurrday {
border: 1px solid #8f8;
background: #dfd;
margin: 0 0 .2em .2em;
padding: .2em;
width: 120px;
height: 120px;
overflow-y: auto;
float: left;
}
.daynum {
font-weight: bold;
float: left;
}
.daytext {
float: right;
}
.stat-block {
text-align: left;
margin: 20px;
display: inline-block;
vertical-align: top;
width: 17%;
min-width:280px;
background: #FDF1DC;
padding: 5px 10px 20px;
box-shadow: 0 0 1.5em #867453;
font-size: 13.5px;
line-height: 1.2em;
box-sizing: border-box;
max-width: 100%;
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica,
Arial, sans-serif;
}
.stat-block.wide{
width: 46.5%;
min-width: 560px;
text-align: center;
font-size: 13.5px;
line-height: 1.2em;
box-sizing: border-box;
max-width: 100%;
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica,
Arial, sans-serif;
}
.stat-block.wide .section-left,
.stat-block.wide .section-right{
display: inline-block;
vertical-align: top;
width: 48%;
text-align: left;
}
.stat-block.wide .section-left{
margin-right: 1.5%;
}
.stat-block.wide .section-right{
margin-left: 1.5%;
}
.portable-infobox,
.infobox {
width: 350px !important;
float: right;
margin: 0 0 1em 1em;
}
@media screen and (max-width: 720px) {
.portable-infobox,
.infobox {
float: none !important; /* Stops the text from trying to wrap */
margin: 0 auto 1.5em auto !important; /* Centers the box and adds space below */
width: 350px !important; /* Keeps your preferred 350px width */
max-width: 100% !important; /* Safety: shrinks ONLY if phone is narrower than 350px */
display: block;
}
}
.orange-border{
display: block;
background: #E69A28;
border: 1px solid #000;
height: 5px;
padding: 0 10px 0;
margin: -10px -10px 0;
box-sizing: initial;
}
.orange-border.bottom{
margin: 15px -10px -20px;
}
.tapered-rule{
display: block;
width: 100%;
height: 5px;
border: none;
color: #922610;
fill: #922610;
stroke: #922610;
}
.creature-heading h1{
font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
color: #922610;
font-size: 23px;
line-height: 1.2em;
margin: 10px 0 0;
letter-spacing: 1px;
font-variant: small-caps;
font-weight: bold;
}
.creature-heading h2{
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 1.2em;
margin: 0 0 10px;
}
.property-line h4,
.property-line p{
display: inline;
margin: 0;
color: #922610;
font-size: 13.5px;
line-height: 1.2em;
}
.property-line h4{
color: #7A200D;
}
.property-line{
text-indent: -1em;
padding-left: 1.1em;
line-height: 1.4em;
}
.property-line.first{
margin: 8px 0 0
}
.property-line.last{
margin: 0 0 10px;
}
.abilities{
text-align: center;
color: #922610;
}
.abilities > div{
display: inline-block;
vertical-align: middle;
width: 15.5%;
min-width: 40px;
font-size: 12px;
line-height: 1em;
}
.abilities h4{
margin: 10px 0 2px;
font-size: 14px;
line-height: 1.2em;
text-transform: uppercase;
color: #7A200D;
}
.abilities p{
margin: 0 0 10px;
line-height: 1.2em;
}
.property-block h4,
.property-block p{
font-size: 13.5px;
line-height: 1.2em;
display: inline;
margin: 0;
}
.property-block h4{
font-style: italic;
}
.property-block{
padding: 10px 2px 0;
}
.actions h3{
border-bottom: 1px solid #7A200D;
color: #7A200D;
font-size: 21px;
font-variant: small-caps;
font-weight: normal;
letter-spacing: 1px;
margin: 20px 0 0;
padding: 0 0 10px;
text-indent: 5px;
}
.actions{
margin: 0 0 20px;
}
.actions:last-child{
margin: 0;
}
@media print{
.orange-border{
display: none;
}
.stat-block,
.stat-block.wide,
.stat-block.wide .section-left,
.stat-block.wide .section-right,
.property-line,
.property-block{
width: 100%;
display: block;
}
.stat-block.wide .section-left{
margin: 0;
}
.stat-block.wide .section-right{
margin: 0;
}
.stat-block{
width: 40%;
display: inline-block;
vertical-align: top;
}
.stat-block.wide{
page-break-after: always;
}
}
@media screen and (max-width: 575px){
.stat-block{
margin: 20px 0;
}
}
/* Dark Mode Infobox - Final Polish */
.ot-infobox {
float: right;
width: 350px;
background-color: #1a1a1a;
border: 1px solid #444444;
border-radius: 10px;
margin: 0 0 15px 15px;
font-family: 'Segoe UI', Roboto, sans-serif;
color: #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
overflow: hidden; /* This keeps the image edges rounded and kills sliders */
}
.ot-infobox-title {
/* Adding Holitter Family here */
font-family: 'Holitter', 'Segoe UI', serif;
font-size: 1.8em;
text-align: center;
font-weight: bold;
padding: 12px 5px;
background-color: #2d2d2d;
border-bottom: 1px solid #444444;
color: #ffffff;
text-transform: capitalize;
}
.ot-infobox-subtitle {
/* Adding Holitter Family here */
font-family: 'Holitter', 'Segoe UI', serif;
font-size: 1.4em;
text-align: center;
font-weight: bold;
padding: 12px 5px;
background-color: #2d2d2d;
border-bottom: 1px solid #444444;
color: #ffffff;
text-transform: capitalize;
}
.ot-infobox-image {
width: 100%;
line-height: 0; /* Removes tiny gap at bottom of image */
padding: 0; /* Expansion: Kills the halo */
margin: 0;
background-color: #000; /* Backdrop for transparent images */
}
.ot-infobox-image img {
width: 100% !important; /* Forces expansion to edges */
height: auto;
display: block;
}
.responsive-lore-img img {
width: 100% !important; /* Forces expansion to edges */
height: auto;
display: block;
}
.ot-infobox-caption {
font-size: 1.1em;
text-align: center;
color: #ffffff;
padding: 8px 10px;
background-color: #1f1f1f; /* Subtly different area for caption */
}
.ot-infobox-table {
width: 100%;
border-collapse: collapse;
padding: 0 10px 10px 10px;
display: table;
}
.ot-infobox-table tr {
border-bottom: 1px solid #2d2d2d;
}
.ot-infobox-table th {
text-align: left;
padding: 8px 10px;
font-size: 0.85em;
color: #aaaaaa;
width: 40%;
}
.ot-infobox-table td {
padding: 8px 10px;
font-size: 0.9em;
color: #ffffff;
}
.ot-infobox, .infobox, .portable-infobox {
display: block !important;
overflow: visible !important;
height: auto !important;
clear: none !important; /* Forces text to wrap IMMEDIATELY after the float */
}
/* Ensure the first paragraph doesn't 'bounce' off the infobox */
#mw-content-text p:first-of-type {
display: inline;
}
#mw-content-text p {
display: block;
}
/* Ensure this is at the very bottom so it overrides everything else */
@media screen and (max-width: 720px) {
.ot-infobox, .infobox {
float: none !important;
display: block !important;
width: 100% !important;
max-width: 350px !important;
margin: 1em auto !important; /* Centers the box and pushes text down */
clear: both !important;
}
}
/* Target the MediaWiki alignment class specifically */
figure.mw-halign-left,
figure.mw-halign-right {
margin: 1em 0; /* Adds some breathing room */
}
/* Responsive Lore Images */
@media screen and (max-width: 600px) {
.responsive-lore-img {
float: none !important;
width: 100% !important;
margin: 10px 0 !important;
text-align: center;
}
/* Ensures the image inside scales to the new 100% width */
.responsive-lore-img img {
max-width: 100%;
height: auto;
}
}
