Difference between revisions of "MediaWiki:Common.css"

From We Are All Pokémon Trainers
Jump to navigation Jump to search
(Hatnotes)
 
(14 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('http://waapt.wiki.tropi.us/images/f/f4/Hexagon.png');
+
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('http://waapt.wiki.tropi.us/images/7/74/HexagonLead.png');
+
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('http://waapt.wiki.tropi.us/images/2/28/HexagonB.png');
+
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('http://waapt.wiki.tropi.us/images/f/f4/Hexagon.png');
+
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 61: Line 76:
  
 
/* CSS enabling the Mon Info templates */
 
/* CSS enabling the Mon Info templates */
 +
 +
table.mon_info {
 +
    float:right;
 +
    width:30%;
 +
    margin-left:8pt;
 +
    margin-bottom: 14pt;
 +
}
  
 
table.mon_info .key {
 
table.mon_info .key {
 +
    width: 35%;
 
     text-align: left;
 
     text-align: left;
 
     padding: 0 4px;
 
     padding: 0 4px;
Line 68: Line 91:
  
 
table.mon_info .value {
 
table.mon_info .value {
 +
    width: 60%;
 
     text-align: right;
 
     text-align: right;
 
     padding: 0 4px;
 
     padding: 0 4px;
Line 79: Line 103:
 
     background-color: #e0e0e0;
 
     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; }