MediaWiki:Common.css: Difference between revisions
Content deleted Content added
m Bannertable styling |
mNo edit summary |
||
(82 intermediate revisions by 2 users not shown) | |||
Line 1:
/* CSS placed here will be applied to all skins */
@import url("/wiki/Template:CharacterCard/style.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:XPtable.css?action=raw&ctype=text/css");
/*** Damage and Armor colors ***/
:root {
--normal: #485582;
--explosive: #930008;
--light: #930008;
Line 14 ⟶ 20:
--siege: #794394;
--structure: #794394;
--sonic: #794394;
--elastic: #794394;
}
.normal {color: var(--normal);}
.explosive {color: var(--explosive);}
.light {color: var(--light);}
Line 24 ⟶ 34:
.siege {color: var(--siege);}
.structure {color: var(--structure);}
.sonic {color: var(--sonic);}
.elastic {color: var(--elastic);}
.bg-normal {background-color: var(--normal);}
.bg-explosive {background-color: var(--explosive);}
.bg-light {background-color: var(--light);}
Line 33 ⟶ 46:
.bg-siege {background-color: var(--siege);}
.bg-structure {background-color: var(--structure);}
.bg-sonic {background-color: var(--sonic);}
.bg-elastic {background-color: var(--elastic);}
/* GL typing aliases */
.piercing {color: var(--penetration);}
.bg-piercing {background-color: var(--penetration);}
.bg-element {
Line 40 ⟶ 59:
}
/* Japanese font fallback */
html, body {
font-family: sans-serif, meiryo, meiryo ui, Yu Gothic, YuGothic;
}
*:lang(ja) {
font-family: meiryo, meiryo ui, Yu Gothic, YuGothic, sans-serif;
}
Line 64 ⟶ 92:
background-color: #ecf5f9;
}
.skill-additional {
width: 100%;
/*min-width: 575px; addtional skills are stretched too wide on smaller screens */
max-width: 900px;
padding-left: 16px;
box-sizing: border-box;
}
table.skilltable tr.summary {
background-color:#d9edfb;
Line 69 ⟶ 106:
table.skilltable tr.summary td {
text-align:center;
}
@media (max-width: 1200px) {
Line 85 ⟶ 117:
min-width: 0;
}
}
span.skillvalue {
color:#007eff;
font-weight:bold
}
Line 101 ⟶ 138:
{
min-width: 40px;
}
td.rarity {
position: relative;
}
.pool-event td.rarity,
.pool-limited td.rarity,
.pool-anniversary td.rarity {
padding-bottom: 10px;
padding-top: 0;
}
.pool-event td.rarity::after,
.pool-limited td.rarity::after,
.pool-anniversary td.rarity::after {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 11px;
background-color: rgb(162 169 177 / 66%);
color: white;
font-size: 10px;
line-height: 11px;
}
.pool-event td.rarity::after {
content: "Event";
}
.pool-limited td.rarity::after {
content: "Limited";
}
.pool-anniversary td.rarity::after {
content: "Anniversary";
}
Line 242 ⟶ 315:
.statchart td {
position: relative;
}
Line 423 ⟶ 492:
display: grid;
gap: 10px;
grid-template-areas: "splash gacha
"splash
"splash
"
"modes modes modes"
"basics basics basics";
grid-template-columns: 1fr 320px 320px;
margin: 0 auto;
Line 438 ⟶ 509:
"raid "
"updates"
"
"modes"
"basics"
"twitter";
grid-template-columns: 1fr;
Line 542 ⟶ 615:
.fp-item-recent-updates {
grid-area: updates;
text-align: center;
}
.fp-item-recent-updates ul {
text-align: left;
}
.fp-item-twitter {
/* background: none; */
grid-area: twitter;
}
.fp-item-
grid-area: mechanics;
}
.fp-item-modes {
grid-area: modes;
}
.fp-item-basics {
grid-area: basics;
}
.fp-links-wrapper {
display: flex;
flex-wrap: wrap;
Line 558 ⟶ 647:
}
.fp
margin: 0 10px;
}
.fp
flex-basis: 100%;
height: 0;
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/5/58/Fp-link-placeholder.png');
background-position: center;
Line 577 ⟶ 666:
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/6/6d/Fp-link-missions.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/9/9c/Fp-link-raid.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/8/81/Fp-link-eliminateraid.gif');
}
.fp-links-wrapper a .link-image.link-multifloorraid {
background-image: url('https://static.miraheze.org/bluearchivewiki/4/43/Fp-link-multifloorraid.png');
}
.fp-links-wrapper a .link-image.link-jfe {
background-image: url('https://static.miraheze.org/bluearchivewiki/a/ad/Fp-link-jfe.png');
}
.fp-links-wrapper a .link-image.link-arena {
background-image: url('https://static.miraheze.org/bluearchivewiki/8/8f/Fp-link-arena.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/d/df/Fp-link-commission.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/3/31/Fp-link-bountyhunt.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/0/0a/Fp-link-characters.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/5/57/Fp-link-cafe.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/c/ca/Fp-link-equipment.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/a/ac/Fp-link-unique-weapons.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/b/b6/Fp-link-events.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/e/ec/Fp-link-school-exchange.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/b/b1/Fp-link-recruitment.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/6/61/Fp-link-shop.png');
}
.fp
background-image: url('https://static.miraheze.org/bluearchivewiki/2/2b/Fp-link-affection.png');
}
.fp-links-wrapper a .link-text {
margin-top: 10px;
text-align: center;
Line 636 ⟶ 741:
/* Twitter widget fix */
/*.fp-item-twitter .tabs-content {
width: 100%;
}
iframe#twitter-widget-0, .twitter-timeline {
height: 100%!important;
}
@media (min-width: 1200px) {
.fp-item-twitter {
min-height:
}
}*/
Line 653 ⟶ 760:
float:right;
clear:right;
margin-top: 0;
margin-left: 24px!important;
text-align:center;
Line 758 ⟶ 866:
}
.character .portrait-birthday section>article[aria-hidden="false"]:first-child a
display: block;
content: "";
Line 765 ⟶ 873:
background: url(https://static.miraheze.org/bluearchivewiki/9/9a/Icon_Momotalk_BirthdayHat.png);
position: absolute;
top:
right: 99px;
transform: rotate(18deg);
}
.character-images div.
}
.character-images video {
display: block;
height: 300px;
width: 100%;
max-width: 480px;
object-fit: cover;
margin: auto;
cursor: pointer;
}
/*** Hide Mainpage title ***/
Line 1,066 ⟶ 1,183:
.limited td.image::after {
content: "
display: block;
height: 24px;
width: 66px;
top: 16px;
left: 10px;
position: absolute;
background: repeating-linear-gradient( 115deg, #e15634, #e15634 4px, #e46b41 4px, #e46b41 8px);
border: 2px solid #69290a;
text-shadow: 0px 0px 2px #69290a;
padding: 0px 0px;
text-align: center;
transform: skew(-10deg) rotate(-10deg);
filter: drop-shadow(1px 1px 1px #00000066);
}
Line 1,095 ⟶ 1,220:
}
table .tbd img
table tr.tbd td.bg-element {
opacity: 0.6;
}
.related-portrait,
.related-portrait img,
.related-characters div img {
border-radius: 50%;
Line 1,105 ⟶ 1,232:
object-fit: cover;
margin: 1px 4px 1px 0px;
}
td.rarity {
text-align: center;
}
.limitwidth-1280 {
width: 100%;
min-width: 720px;
max-width: 1280px;
}
Line 1,118 ⟶ 1,255:
min-width: 575px;
max-width: 720px;
}
.limitwidth-nomin {
min-width: none;
}
.limitwidth-min320 {
min-width: 320px;
}
.limitwidth-min480 {
min-width: 480px;
}
Line 1,145 ⟶ 1,294:
.itemcard-block img.itemcard {
margin: -1px 0 0;
z-index: 2;
}
.itemcard-block > span,
.itemcard-block a {
display: inline-block;
position: relative;
Line 1,195 ⟶ 1,348:
line-height: 18px;
border-radius: 11px;
z-index: 3;
}
Line 1,215 ⟶ 1,369:
}
span.itemcard-block[class*='tier-'] > span > a::before {
display: block;
content: "";
background-color: #b5cbdc;
background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png);
background-size: cover;
background-blend-mode: overlay;
position: absolute;
top: 8%;
bottom: 8%;
left: 14%;
right: 13%;
z-index: 1;
border-radius: 6px;
transform: skewX(-10deg);
}
span.itemcard-block.tier-0 > span > a::before,
span.itemcard-block.tier-1 > span > a::before {
background-color: #b5cbdc;
}
span.itemcard-block.tier-2 > span > a::before {
background-color: #77affd;
}
span.itemcard-block.tier-3 > span > a::before {
background-color: #f97f54;
}
span.itemcard-block.tier-4 > span > a::before {
background-color: #b757fc;
}
/*** Template:MissionRewards ***/
Line 1,296 ⟶ 1,480:
flex-wrap: wrap;
row-gap: 6px;
align-items: flex-start;
}
Line 1,472 ⟶ 1,657:
-10px 0 80px #f0f,
10px 0 80px #0ff;
}
/* General visibility */
.hidden {
display: none;
}
.condensed {
font-stretch: condensed;
}
.break {
flex-basis: 100%;
height: 0;
}
/* Item group */
div.itemgroup {
display: inline-block;
position: relative;
border: solid #46639880;
border-width: 0 3px 0 3px;
border-radius: 8px;
background-color: #ecf5f9;
margin: 0 2px;
}
div.itemgroup.tag {
border-width: 24px 0 3px 0;
}
div.itemgroup.btag {
border-width: 3px 0 24px 0 ;
}
div.itemgroup.ltag {
border-width: 0 3px 0 24px;
}
div.itemgroup.rtag {
border-width: 0 24px 0 3px;
}
div.itemgroup > .tag {
display: none;
align-items: center;
justify-content: center;
position: absolute;
text-align: center;
line-height: 1;
color: #ecf5f9;
text-shadow: 0 0 2px #466398;
}
div.itemgroup.tag > .tag,
div.itemgroup.btag > .tag,
div.itemgroup.ltag > .tag,
div.itemgroup.rtag > .tag {
display: flex;
}
div.itemgroup.tag > .tag {
height: 24px;
top: -24px;
left:0;
right:0;
}
div.itemgroup.btag > .tag {
height: 24px;
bottom:-24px;
left:0;
right:0;
}
div.itemgroup.ltag > .tag {
width: 24px;
top:0;
bottom:0;
left: -24px;
}
div.itemgroup.rtag > .tag {
width: 24px;
top:0;
bottom:0;
right: -24px;
}
/* Vector skin fixes */
body {
height: auto!important;
}
#footer {
overflow: auto;
padding-bottom: 0.1em;
}
/* Darkmode fixes */
.client-darkmode figure[typeof~='mw:File/Thumb'] > a:first-child > *:first-child:not(.mw-broken-media),
.client-darkmode figure[typeof~='mw:File/Frame'] > a:first-child > *:first-child:not(.mw-broken-media),
.client-darkmode figure[typeof~='mw:File/Thumb'] > span:first-child > *:first-child:not(.mw-broken-media),
.client-darkmode figure[typeof~='mw:File/Frame'] > span:first-child > *:first-child:not(.mw-broken-media) {
border: 1px solid #303439;
background-color:#222222;
}
/* Generic flexbox container */
.flex-cards {
display: flex;
flex-flow: row wrap;
gap: 32px 32px;
}
/* Protect table row from being hidden */
table.mw-collapsed tr.protected {
display: table-row !important;
}
/* FurnitureFootprint template styling */
/* included here due to templatestyles sanitation limitations */
.sizetable-container {
display: inline-flex;
min-width: 120px;
min-height: 80px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.sizetable {
background: none;
border-spacing: 2px;
border-collapse: separate;
transform-style: preserve-3d;
transform: rotateX(54deg) rotateZ(40deg);
}
.sizetable.wall, .sizetable.wallpaper {
transform: rotateY(40deg) skewY(17deg);
}
.sizetable td {
height: 10px;
width:10px;
background-color:#e9effa;
border: 1px solid #bcd4ed;
}
.sizetable.enlarge td {
width: 35px;
height: 35px;
border-width: 3px;
}
.sizetable.enlarge-xl td {
width: 64px;
height: 64px;
border-width: 3px;
}
.sizetable caption {
display: block;
position: absolute;
color: #3366CB;
font-size: 22px;
text-align: center!important;
left: 0;
right: 0;
top: calc(50% - 16px);
height: 22px;
text-shadow: 0px 0px 3px #fff, -1px 0px #fff, 1px 0px #fff, 0px -1px #fff, 0px 1px #fff;
}
|