MediaWiki:Common.css: Difference between revisions

From ARMS Institute, the ARMS Wiki
Jump to navigation Jump to search
m (Added background color for NIWA box.)
(Added Max Brass's logo.)
Line 396: Line 396:
div.infobox.fighter.Helix div.background {
div.infobox.fighter.Helix div.background {
     background-image: url(/wiki/images/1/1a/BG-Helix.png);
     background-image: url(/wiki/images/1/1a/BG-Helix.png);
}
div.infobox.fighter.Max.Brass div.name::after {
    background-image: url(/wiki/images/4/42/Logo-Max_Brass.png);
}
}



Revision as of 23:17, 28 June 2017

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css?family=Hind:400,700');

@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=497c235b-38ae-4528-945d-4f70f5102d8a&fontids=1449668");
@font-face{
    font-family:"Akko W04 Black";
    src:url("/Fonts/1449668/5fdfd10d-8184-4369-9007-1bcb9662aab3.eot?#iefix");
    src:url("/Fonts/1449668/5fdfd10d-8184-4369-9007-1bcb9662aab3.eot?#iefix") format("eot"),url("/Fonts/1449668/6c257adf-c89f-4573-bc63-04a8af4cdce6.woff2") format("woff2"),url("/Fonts/1449668/5cfa0607-446b-4783-aa97-883acfccb390.woff") format("woff"),url("/Fonts/1449668/1d53c19e-27fe-49ab-8786-4f08e09b633e.ttf") format("truetype");
}

div#mw-panel {
    font-family: "Hind", sans-serif;
    font-variant-ligatures: none;
}

div#mw-panel div.portal h3,
div#mw-panel div.portal div.body ul li {
    font-size: 87.5%;
}

.mw-body-content {
    font-family: "Hind", sans-serif;
    font-variant-ligatures: none;
    font-size: 100%;
    line-height: 1.4;
}

.mw-body h1,
.mw-body h2,
.mw-body h3 {
    font-family: "Akko W04 Black";
}

.mw-body h1 { font-size: 32px; }
.mw-body h2 { font-size: 24px; }
.mw-body h3 { font-size: 20px; }

body.page-Home.action-view h1.firstHeading,
body.page-Home.action-submit h1.firstHeading {
	display: none;
}

div#content .noticebox {
	margin-left: auto;
	margin-right: auto;
	border-color: #aa9999;
	background: #ffeeee;
}

div#content .noticebox > tr > th,
div#content .noticebox > tr > th,
div#content .noticebox > * > tr > th,
div#content .noticebox > * > tr > td {
	border-color: #aa9999;
}

/* BEGIN Home boxes */
div#bodyContent h1 {
    font-size: 32px;
    border-bottom: 0;
}

td.home_box {
    border-radius: 30px 30px 8px 8px;
    padding: 0 20px 10px;    
}

td.home_box h2 {
    position: relative;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 0;
    line-height:30px;
    color: #ffff00;
    z-index: 1;
}

td.home_box h2::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: -20px;
    bottom: 0;
    left: -20px;
    background: #000000;
    border-radius: 10px 0;
    transform: skew(-20deg);
    z-index: -1;
}

td.home_box h2 a.external:visited,
td.home_box h2 a.external,
td.home_box h2 a {
    color: #ffff00;
}

td#home_intro {
    width: 50%;
    text-align: center;
}

td#home_news {
    width: 50%;
    background: #97ffc4;
}

td#home_featured {
    background: #97dbff;
}

td#home_other {
    vertical-align: top;
    width: 50%;
    background: #ffffaa;
}

td#home_help {
    vertical-align: top;
    width: 50%;
    background: #ffddff;
}

td#home_niwa {
    background: #e2d9ff;
}

td#home_niwa ul {
    list-style:none;
    margin-left: 0;
    padding-left: 0;
}
/* END Home Boxes */

table.home_nav_imgs img {
	max-width: 100%;
	width: auto;
	height: auto;
}

table.wikitable[align="right"] {
    margin-left: 20px;
}

table.wikitabley[align="right"] {
    margin-left: 20px;
}

/* BEGIN Interim Info and Nav boxes */
#toc,
.toc,
.catlinks,
table.wikitable > * > tr > td {
    border-color: #aaaa00;
    background-color: #ffffb2;
}

table.wikitabley > * > tr > td {
    border-color: #aaaa00;
    background-color: #ffffb2;
}

table.wikitable > * > tr > th {
    font: 16px "Akko W04 Black";
    border-color: #aaaa00;
    background-color: #000000;
    color: #ffffff;
}

table.wikitabley > * > tr > th {
    font: 16px "Akko W04 Black";
    border-color: #aaaa00;
    background-color: #dddd82;
}

table.wikitable:not(.fighter_stats) > * > tr:first-child > th {
    font: 20px "Akko W04 Black";
    background-color: #000000;
    color: #ffffff;
}

table.wikitabley:not(.fighter_stats) > * > tr:first-child > th {
    font: 20px "Akko W04 Black";
    background-color: #000000;
    color: #ffffff;
}

table.wikitable > * > tr:first-child > th a {
    color: #ffff00;
}
table.wikitabley > * > tr:first-child > th a {
    color: #ffff00;
}

.mw-collapsible-toggle a {
     color: lightblue;
}

/* END Interim Info and Nav boxes */

/* BEGIN ARMS-themed boxes with yellow backgrounds and black, rounded headings */
div.armsbox {
    background: linear-gradient(to right, #eeee55, transparent, transparent, #eeee55),
        linear-gradient(to bottom, #eeee55, #ffff66, #ffff66, #eeee55);   
    border-radius: 25px 0 8px 8px;
    padding-bottom: 20px;
}

div.armsbox div.header {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 20px;
    font-family: "Akko W04 Black";
    font-size: 22px;
    color: #ffffff;
    z-index: 1;
}

div.armsbox div.header::before {
    content: "";
    background-color: #000000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 12px 0;
    z-index: -1;    
}

div.armsbox div.header a {
    color: #ffff00;
}

div.armsbox > p {
    margin-left: 20px;
    margin-right: 20px;
}
/* END ARMS-themed boxes with yellow backgrounds and black, skewed headings */

/* BEGIN infobox */
div.infobox {
    position: relative;
    z-index: 2;
}
/* END infobox */

/* BEGIN fighter infobox */
div.infobox.fighter {
    float: right;
    max-width: 330px;
    margin-left: 20px;
    border-top-left-radius: 40px;
}

div.infobox.fighter div.header.name {
    margin-top: 0;
    padding: 10px 20px;
    line-height: 1;
    text-transform: uppercase;
}

div.infobox.fighter div.header.name::before {
    border-radius: 16px 0;
}

div.infobox.fighter div.header.name::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: right +8px center;
    background-size: 20%;
    z-index: 0;
}

div.infobox.fighter div.header.name div.nickname {
    font-family: "Hind", sans-serif;
    font-size: 16px;
    font-style: italic;
    text-transform: none;
}

div.infobox.fighter div.background {
    border-radius: 40px 0 25px 0;
    background-size: cover;
    background-position: center;
}

div.infobox.fighter div.image img {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

div.infobox.fighter.Spring div.name::before {
    background-color: #0178da;
}
div.infobox.fighter.Spring div.name::after {
    background-image: url(/wiki/images/8/88/Logo-Spring_Man.png);
}
div.infobox.fighter.Spring div.background {
    background-image: url(/wiki/images/7/7b/BG-Spring_Man.png);
}

div.infobox.fighter.Ribbon div.name::before {
    background-color: #e61991;
}
div.infobox.fighter.Ribbon div.name::after {
    background-image: url(/wiki/images/4/48/Logo-Ribbon_Girl.png);
}
div.infobox.fighter.Ribbon div.background {
    background-image: url(/wiki/images/3/36/BG-Ribbon_Girl.png);
}

div.infobox.fighter.Ninjara div.name::before {
    background-color: #003764;
}
div.infobox.fighter.Ninjara div.name::after {
    background-image: url(/wiki/images/f/f0/Logo-Ninjara.png);
}
div.infobox.fighter.Ninjara div.background {
    background-image: url(/wiki/images/7/7a/BG-Ninjara.png);
}

div.infobox.fighter.Mummy div.name::before {
    background-color: #8c199b;
}
div.infobox.fighter.Mummy div.name::after {
    background-image: url(/wiki/images/5/50/Logo-Master_Mummy.png);
}
div.infobox.fighter.Mummy div.background {
    background-image: url(/wiki/images/4/4e/BG-Master_Mummy.png);
}

div.infobox.fighter.Min div.name::before {
    background-color: #00772d;
}
div.infobox.fighter.Min div.name::after {
    background-image: url(/wiki/images/9/97/Logo-Min_Min.png);
}
div.infobox.fighter.Min div.background {
    background-image: url(/wiki/images/5/50/BG-Min_Min.png);
}

div.infobox.fighter.Mechanica div.name::before {
    background-color: #ef9831;
}
div.infobox.fighter.Mechanica div.name::after {
    background-image: url(/wiki/images/3/33/Logo-Mechanica.png);
}
div.infobox.fighter.Mechanica div.background {
    background-image: url(/wiki/images/3/3c/BG-Mechanica.png);
}

div.infobox.fighter.Twintelle div.name::before {
    background-color: #795d2b;
}
div.infobox.fighter.Twintelle div.name::after {
    background-image: url(/wiki/images/8/86/Logo-Twintelle.png);
}
div.infobox.fighter.Twintelle div.background {
    background-image: url(/wiki/images/5/53/BG-Twintelle.png);
}

div.infobox.fighter.Barq div.name::before {
    background-color: #1761b1;
}
div.infobox.fighter.Barq div.name::after {
    background-image: url(/wiki/images/2/21/Logo-Byte_%26_Barq.png);
}
div.infobox.fighter.Barq div.background {
    background-image: url(/wiki/images/a/a6/BG-Byte_&_Barq.png);
}

div.infobox.fighter.Cobra div.name::before {
    background-color: #41217e;
}
div.infobox.fighter.Cobra div.name::after {
    background-image: url(/wiki/images/4/41/Logo-Kid_Cobra.png);
}
div.infobox.fighter.Cobra div.background {
    background-image: url(/wiki/images/3/3a/BG-Kid_Cobra.png);
}

div.infobox.fighter.Helix div.name::before {
    background-color: #144537;
}
div.infobox.fighter.Helix div.name::after {
    background-image: url(/wiki/images/a/aa/Logo-Helix.png);
}
div.infobox.fighter.Helix div.background {
    background-image: url(/wiki/images/1/1a/BG-Helix.png);
}

div.infobox.fighter.Max.Brass div.name::after {
    background-image: url(/wiki/images/4/42/Logo-Max_Brass.png);
}

div.infobox.fighter div.image {
    text-align: center;
}

div.infobox.fighter table {
    margin-left: auto;
    margin-right: auto;
}

div.infobox.fighter table th,
div.infobox.fighter table td {
    vertical-align:top;
}

div.infobox.fighter table th {
    text-align: right;
    white-space: nowrap;
    padding: 1px 8px 1px 18px;
}

div.infobox.fighter table td {
    padding-right: 18px;
}

div.infobox.fighter div.arms ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

div.infobox.fighter div.arms ul li {
    padding: 0;
    margin: 0;
    flex: 1;
    width: 110px;
    text-align: center;
}
/* END fighter infobox */

/* BEGIN navbox */
div.navbox {
    clear: both;
}

div.navbox ul {
    list-style: none;
    margin: 0;
    padding: 0 20px;
    text-align: center;
}

div.navbox ul li {
    display: inline-block;
    vertical-align: top;
    white-space:nowrap;
}

div.navbox > ul > li::after {
    content: " · ";
}

div.navbox > ul > li:last-child::after {
    content: normal;
}
/* END navbox */

/* BEGIN ARMS navbox */
div.navbox.arms ul {
    text-align: left;
}

div.navbox.arms ul li {
    white-space: normal;
}

div.navbox.arms > ul {
    column-width: 600px;
}

div.navbox.arms > ul > li {
    display: flex;
}

div.navbox.arms > ul > li > b {
    flex: 1;
    max-width: 100px;
    white-space: nowrap;
}

div.navbox.arms > ul > li > ul {
    flex: 1;
    padding-left: 0;
}

div.navbox.arms ul li::after {
    content: normal;
}

div.navbox.arms > ul > li > ul > li::after {
    content: " · ";
}

div.navbox.arms > ul > li > ul > li:last-child::after {
    content: normal;
}

@media only screen and (max-width: 599px) {

    div.navbox.arms > ul > li {
        display: block;
        padding-bottom: 20px;
    }

}
/* END ARMS navbox */