MediaWiki:Timeless.css: Difference between revisions

From A KoL Wiki
m Make the first child of responsive infobox containers grow.
Remove template-battle stuff as it has been modularised
Line 166: Line 166:
     font-size:80%;
     font-size:80%;
     text-align:right;
     text-align:right;
}
.template-battle .infobox {
    float: right;
    width: 23em;
    margin-left: 1em;
    margin-bottom: 0.5em;
}
}


Line 191: Line 184:
     .template-item .infobox, .template-effect .infobox, .template-skill .infobox {
     .template-item .infobox, .template-effect .infobox, .template-skill .infobox {
         text-align:left;
         text-align:left;
    }
    .template-battle .infobox {
        width: 100%;
        margin-left: 0;
        float: none;
     }
     }
}
}

Revision as of 12:53, 6 September 2025

/*
CSS placed here will affect users of the Vector skin.
If you have suggestions or requests, please put them in the discussion page for this page.
Sensible requests will be pushed to production.
*/

/* NightvolMoyer's Troll: (drop these lines into your user CSS to relive those glorious days)


body.page-Main_Page *{
    font-family: "Comic Sans MS", cursive, sans-serif;
}

*/

.main-page-columns-container {
    display:flex;
    flex-direction: row;
    gap:0.7em;
    margin: 0.7em 0;
}

@media (max-width:850px){
    .main-page-columns-container {
        flex-direction: column;
    }
}

#p-logo{
    background-color: #6386a8;
    border-radius: 5px;
    width: 120px;
    height: 170px;
    margin-left: 20px;
    margin-right: auto;
}
#p-logo a{
    width: 100px;
    height: 150px;
    margin: 10px;
}

.catlinks ul {
    display: inline;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.catlinks li {
    border-left: 1px solid #AAAAAA;
    display: inline-block;
    line-height: 1.25em;
    margin: 0.125em 0;
    padding: 0 0.5em;
}
.catlinks li:first-child {
    border-left: medium none;
    padding-left: 0.25em;
}
#catlinks .catlinks {
    border: 0px;
    padding: 0px;
}
.mw-confirmaccount-type-0, #mw-confirmaccount-msg {
    background-color: #FFFFFF;
}
#mw-panel{
    top: 55px;
}

.diffchange {
	font-weight: bold;
	text-decoration: none;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
}
table.diff {
    background-color: #FFFFFF;
    border: medium none;
    border-spacing: 4px;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}
table.diff td {
    padding: 0.33em 0.5em;
}
table.diff td.diff-marker {
    padding: 0.25em;
}
table.diff col.diff-marker {
    width: 2%;
}
table.diff col.diff-content {
    width: 48%;
}
table.diff td div {
    word-wrap: break-word;
}
td.diff-otitle, td.diff-ntitle {
    text-align: center;
    background: none repeat scroll 0 0 #FFFFFF;
}
td.diff-lineno {
    font-weight: bold;
}
td.diff-marker {
    font-size: 1.25em;
    font-weight: bold;
    text-align: right;
}
td.diff-addedline, td.diff-deletedline, td.diff-context {
    border-radius: 0.33em 0.33em 0.33em 0.33em;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    font-size: 88%;
    vertical-align: top;
    white-space: pre-wrap;
}
td.diff-addedline {
    border-color: #A3D3FF;
    background: none repeat scroll 0 0 #FFFFFF;
}
td.diff-deletedline {
    border-color: #FFE49C;
    background: none repeat scroll 0 0 #FFFFFF;
}
td.diff-context {
    background: none repeat scroll 0 0 #F9F9F9;
    border-color: #E6E6E6;
    color: #333333;
}
td.diff-addedline .diffchange, td.diff-deletedline .diffchange {
    border-radius: 0.33em 0.33em 0.33em 0.33em;
    padding: 0.25em 0;
}
td.diff-addedline .diffchange {
    background: none repeat scroll 0 0 #D8ECFF;
}
td.diff-deletedline .diffchange {
    background: none repeat scroll 0 0 #FEEEC8;
}

#preftoc li.selected {
    border: 1px none #AAAAAA;
}
#prefcontrol {
    margin-top: 0em;
    position: relative;
    top: -0.25em;
}
.searchmatch {
    color: #000000;
}

.infobox {
    background-color: #F9F9F9;
    border: 1px solid #AAAAAA;
    color: #000000;
    padding: 0.2em;
    line-height: 1.4em;
    white-space:nowrap;
}

.template-item .infobox, .template-effect .infobox, .template-skill .infobox {
    font-size:80%;
    text-align:right;
}

.responsive-infobox-container {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.responsive-infobox-container div:first-child {
    flex-grow: 1;
}

@media (max-width:850px){
    .responsive-infobox-container {
        flex-direction: column;
    }
    .template-item .infobox, .template-effect .infobox, .template-skill .infobox {
        text-align:left;
    }
}

#simpleSearch{
    padding: 0 0 0 0;
    width: inherit;
    margin-bottom: 5px;
}
.mw-input > input, .mw-input > label, td.mw-label {
    vertical-align: middle;
}
table.recipe { 
   text-align: center;
   border-collapse: collapse;
   margin-top: 1em;
}
table.recipe th {
   border: 2px solid black;
   background-color: #FFFFFF;
   padding: 3px;
}
table.recipe td {
   border: 2px solid black;
   padding: 3px;
}
table.recipe tr.row1 {
   background-color: #FFFFFF;
}
table.recipe tr.row2 {
   background-color: #EEEEEE;
}
table.recipe tr.row3 {
   background-color: #DDDDDD;
}
table.recipe tr.row4 {
   background-color: #CCCCCC;
}
table.recipe tr.row5 {
   background-color: #BBBBBB;
}
table.recipe tr.row6 {
   background-color: #AAAAAA;
}
table.recipe tr.row7 {
   background-color: #999999;
}
table.recipe tr.row8 {
   background-color: #888888;
}
table.recipe tr.row9 {
   background-color: #777777;
}
h2:not(:empty) + hr {
    display: none;
}

@media (max-width:880px){
    #content{
        margin-top: 40px;
    }
}

/* Darkcodelagsniper contributes: */
div#mw-panel {
    margin-top: 1.5em;
    padding-right: 0.5em;
    background-color: #f6f6f6;
    height: 100%;
}

#footer {
    background-color: #f6f6f6;
}

*{font-family: Arial, Helvetica, sans-serif;}

.mw-body h1 {font-family: inherit; font-size: x-large;}

.mw-body #firstHeading {font-size: x-large;}

.mw-body h2 {font-family: inherit; font-size: large; font-weight: bold;}

.mw-body h3 {font-family: inherit; font-size: large; font-weight: bold;}

.mw-body h4 {font-family: inherit; font-size: inherit; font-weight: bold;}

.mw-body h5 {font-family: inherit; font-size: inherit; font-weight: bold;}

.mw-body h6 {font-family: inherit; font-size: inherit; font-weight: bold;}

.mw-body-content {font-family: inherit;}

/* End of Darkcodelagsniper's contributions: */

/* For colouring elements consistently, and including link underlines */
.element-hot, .element-hot > a {
    color: red;
}
.element-cold, .element-cold > a {
    color: blue;
}
.element-stench, .element-stench > a {
    color: green;
}
.element-spooky, .element-spooky > a, .element-shadow, .element-shadow > a {
    color: gray;
}
.element-sleaze, .element-sleaze > a {
    color: blueviolet;
}
.element-spelling, .element-spelling > a {
    color: purple;
}
.element-slime, .element-slime > a {
    color: darkgreen;
}
.element-supercold, .element-supercold > a {
    color: lightblue;
}

/* List margins */
.mw-content-ltr ul, .mw-content-ltr ol {
    margin: 0 0 0 1.6em;
}

/* Rotation animation */
@keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}