Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
Sixthhokage1 (talk | contribs) |
Sixthhokage1 (talk | contribs) (Hatnotes) |
||
(16 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
+ | /* Hatnote style cribbed from Wikipedia */ | ||
+ | .hatnote { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | .hatnote i { | ||
+ | font-style: normal; | ||
+ | } | ||
+ | div.hatnote { | ||
+ | /* @noflip */ | ||
+ | padding-left: 1.6em; | ||
+ | margin-bottom: 0.5em; | ||
+ | } | ||
+ | div.hatnote + div.hatnote { | ||
+ | margin-top: -0.5em; | ||
+ | } | ||
/* CSS enabling the Mon Box template */ | /* CSS enabling the Mon Box template */ | ||
Line 6: | Line 21: | ||
position:relative; | position:relative; | ||
width: 154px; height:145px; | width: 154px; height:145px; | ||
− | background: url(' | + | background: url('https://waapt.wiki.tropi.us/images/f/f4/Hexagon.png'); |
} | } | ||
.mon_box .mon_icon { | .mon_box .mon_icon { | ||
Line 39: | Line 54: | ||
.hex_row .mon_box { | .hex_row .mon_box { | ||
display:inline-block; | display:inline-block; | ||
− | background: url(' | + | background: url('https://waapt.wiki.tropi.us/images/7/74/HexagonLead.png'); |
} | } | ||
.hex_row + .hex_row:nth-of-type(odd) .mon_box { | .hex_row + .hex_row:nth-of-type(odd) .mon_box { | ||
− | background: url(' | + | background: url('https://waapt.wiki.tropi.us/images/2/28/HexagonB.png'); |
} | } | ||
.hex_row + .hex_row:nth-of-type(even) .mon_box { | .hex_row + .hex_row:nth-of-type(even) .mon_box { | ||
− | background: url(' | + | background: url('https://waapt.wiki.tropi.us/images/f/f4/Hexagon.png'); |
} | } | ||
.hex_row .mon_box:nth-of-type(odd) { | .hex_row .mon_box:nth-of-type(odd) { | ||
Line 59: | Line 74: | ||
margin-top: -80px; | margin-top: -80px; | ||
} | } | ||
+ | |||
+ | /* CSS enabling the Mon Info templates */ | ||
+ | |||
+ | table.mon_info { | ||
+ | float:right; | ||
+ | width:30%; | ||
+ | margin-left:8pt; | ||
+ | margin-bottom: 14pt; | ||
+ | } | ||
+ | |||
+ | table.mon_info .key { | ||
+ | width: 35%; | ||
+ | text-align: left; | ||
+ | padding: 0 4px; | ||
+ | } | ||
+ | |||
+ | table.mon_info .value { | ||
+ | width: 60%; | ||
+ | text-align: right; | ||
+ | padding: 0 4px; | ||
+ | } | ||
+ | |||
+ | table.mon_info .quotebox { | ||
+ | font-family: "Book Antiqua", serif; | ||
+ | text-align: right; | ||
+ | padding-left: 4px; | ||
+ | padding-right: 8px; | ||
+ | background-color: #e0e0e0; | ||
+ | } | ||
+ | |||
+ | /* CSS for the art gallery templates */ | ||
+ | |||
+ | .artGallery { | ||
+ | display: flex; | ||
+ | flex-flow: row wrap; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .artNode { | ||
+ | display: flex; | ||
+ | flex-flow: column; | ||
+ | justify-content: flex-end; | ||
+ | background: #ccc; | ||
+ | padding: 3px; | ||
+ | margin: 3px; | ||
+ | border-radius: 3px | ||
+ | } | ||
+ | .artNode_image { | ||
+ | flex: 1; | ||
+ | max-height: 300px; | ||
+ | overflow-y: auto; | ||
+ | } | ||
+ | .artNode_description { | ||
+ | flex: 0; | ||
+ | background: #fff; | ||
+ | border-radius: 2px; | ||
+ | margin-top: 3px; | ||
+ | padding: 1px 3px; | ||
+ | } | ||
+ | |||
+ | .artNode img { | ||
+ | width: 300px; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | .artNode_span2 img { | ||
+ | width: calc(2 * 300px); | ||
+ | } | ||
+ | .artNode_span3 img { | ||
+ | width: calc(3 * 300px); | ||
+ | } | ||
+ | .artNode_span4 img { | ||
+ | width: calc(4 * 300px); | ||
+ | } | ||
+ | .artNode_span5 img { | ||
+ | width: calc(5 * 300px); | ||
+ | } | ||
+ | .artNode_span6 img { | ||
+ | width: calc(6 * 300px); | ||
+ | } | ||
+ | |||
+ | |||
+ | /* experiment, trying to correct a small bork in search styling since the last backend update */ | ||
+ | |||
+ | form#searchform input#searchInput { overflow: none; min-wdidth: 8em; } |
Latest revision as of 07:28, 5 January 2017
/* CSS placed here will be applied to all skins */
/* Hatnote style cribbed from Wikipedia */
.hatnote {
font-style: italic;
}
.hatnote i {
font-style: normal;
}
div.hatnote {
/* @noflip */
padding-left: 1.6em;
margin-bottom: 0.5em;
}
div.hatnote + div.hatnote {
margin-top: -0.5em;
}
/* CSS enabling the Mon Box template */
.mon_box {
position:relative;
width: 154px; height:145px;
background: url('https://waapt.wiki.tropi.us/images/f/f4/Hexagon.png');
}
.mon_box .mon_icon {
position: absolute;
top: 50%;
left: 50%;
background: 50% 50% no-repeat;
}
.mon_box .mon_icon div {
position: absolute;
}
.mon_box .mon_name {
display:block;
position: absolute;
left: 0;
right: 0;
bottom: 8px;
font: 12px sans-serif;
text-align: center;
}
.mon_box .mon_name.male {
color: #0de;
}
.mon_box .mon_name.female {
color: #f6a;
}
/* hex tiling */
.hex_row {
margin: 0px;
}
.hex_row .mon_box {
display:inline-block;
background: url('https://waapt.wiki.tropi.us/images/7/74/HexagonLead.png');
}
.hex_row + .hex_row:nth-of-type(odd) .mon_box {
background: url('https://waapt.wiki.tropi.us/images/2/28/HexagonB.png');
}
.hex_row + .hex_row:nth-of-type(even) .mon_box {
background: url('https://waapt.wiki.tropi.us/images/f/f4/Hexagon.png');
}
.hex_row .mon_box:nth-of-type(odd) {
margin-bottom: 70px;
}
.hex_row .mon_box:nth-of-type(even) {
margin-top: 70px;
}
.hex_row .mon_box + .mon_box {
margin-left: -41.5px;
}
.hex_row + .hex_row {
margin-top: -80px;
}
/* CSS enabling the Mon Info templates */
table.mon_info {
float:right;
width:30%;
margin-left:8pt;
margin-bottom: 14pt;
}
table.mon_info .key {
width: 35%;
text-align: left;
padding: 0 4px;
}
table.mon_info .value {
width: 60%;
text-align: right;
padding: 0 4px;
}
table.mon_info .quotebox {
font-family: "Book Antiqua", serif;
text-align: right;
padding-left: 4px;
padding-right: 8px;
background-color: #e0e0e0;
}
/* CSS for the art gallery templates */
.artGallery {
display: flex;
flex-flow: row wrap;
overflow: hidden;
}
.artNode {
display: flex;
flex-flow: column;
justify-content: flex-end;
background: #ccc;
padding: 3px;
margin: 3px;
border-radius: 3px
}
.artNode_image {
flex: 1;
max-height: 300px;
overflow-y: auto;
}
.artNode_description {
flex: 0;
background: #fff;
border-radius: 2px;
margin-top: 3px;
padding: 1px 3px;
}
.artNode img {
width: 300px;
max-width: 100%;
height: auto;
}
.artNode_span2 img {
width: calc(2 * 300px);
}
.artNode_span3 img {
width: calc(3 * 300px);
}
.artNode_span4 img {
width: calc(4 * 300px);
}
.artNode_span5 img {
width: calc(5 * 300px);
}
.artNode_span6 img {
width: calc(6 * 300px);
}
/* experiment, trying to correct a small bork in search styling since the last backend update */
form#searchform input#searchInput { overflow: none; min-wdidth: 8em; }