MediaWiki:Common.css: Difference between revisions

m
no edit summary
(Frontpage update)
mNo edit summary
(60 intermediate revisions by the same user not shown)
Line 1:
/* CSS placed here will be applied to all skins */
 
@import url("/w/index.php?title=Template:CharacterCard/style.css&action=raw&ctype=text/css");
@import url("/w/index.php?title=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;
max-width: 900px;
padding-left: 16px;
box-sizing: border-box;
}
 
table.skilltable tr.summary {
background-color:#d9edfb;
Line 85 ⟶ 122:
min-width: 0;
}
}
 
span.skillvalue {
color:#007eff;
font-weight:bold
}
 
Line 101 ⟶ 143:
{
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 419 ⟶ 497:
display: grid;
gap: 10px;
grid-template-areas: "splash gacha twitterraid"
"splash raidgacha twitterupdates"
"splash updatesgacha twitter"
"mechanics mechanics mechanics"
"modes modes modes";
"basics basics basics";
grid-template-columns: 1fr 320px 320px;
margin: 0 auto;
Line 437 ⟶ 516:
"mechanics"
"modes"
"basics"
"twitter";
grid-template-columns: 1fr;
Line 488 ⟶ 568:
flex-direction: column;
justify-content: space-between;
/*background-image: url('https://static.miraheze.org/bluearchivewiki/3/39/Fp-background.jpg');*/
background-image: url('https://static.miraheze.org/bluearchivewiki/7/78/BG_CS_PV4_043.jpg');
background-position: center;
background-size: cover;
Line 544 ⟶ 623:
 
.fp-item-twitter {
/* background: none; */
grid-area: twitter;
}
Line 554 ⟶ 633:
.fp-item-modes {
grid-area: modes;
}
 
.fp-item-basics {
grid-area: basics;
}
 
Line 565 ⟶ 648:
}
 
.fp-item-links-wrapper a {
margin: 0 10px;
}
 
.fp-item-links-wrapper .break {
flex-basis: 100%;
height: 0;
}
 
.fp-item-links-wrapper a .link-image {
background-image: url('https://static.miraheze.org/bluearchivewiki/5/58/Fp-link-placeholder.png');
background-position: center;
Line 584 ⟶ 667:
}
 
.fp-item-links-wrapper a .link-image.link-missions {
background-image: url('https://static.miraheze.org/bluearchivewiki/6/6d/Fp-link-missions.png');
}
 
.fp-item-links-wrapper a .link-image.link-raid {
background-image: url('https://static.miraheze.org/bluearchivewiki/9/9c/Fp-link-raid.png');
}
 
.fp-item-links-wrapper a .link-image.link-arenaeliminateraid {
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-item-links-wrapper a .link-image.link-commission {
background-image: url('https://static.miraheze.org/bluearchivewiki/d/df/Fp-link-commission.png');
}
 
.fp-item-links-wrapper a .link-image.link-bountyhunt {
background-image: url('https://static.miraheze.org/bluearchivewiki/3/31/Fp-link-bountyhunt.png');
}
 
.fp-item-links-wrapper a .link-image.link-characters {
background-image: url('https://static.miraheze.org/bluearchivewiki/0/0a/Fp-link-characters.png');
}
 
.fp-item-links-wrapper a .link-image.link-cafe{
background-image: url('https://static.miraheze.org/bluearchivewiki/5/57/Fp-link-cafe.png');
}
 
.fp-item-links-wrapper a .link-image.link-equipment{
background-image: url('https://static.miraheze.org/bluearchivewiki/c/ca/Fp-link-equipment.png');
}
 
.fp-item-links-wrapper a .link-image.link-unique-weapons{
background-image: url('https://static.miraheze.org/bluearchivewiki/a/ac/Fp-link-unique-weapons.png');
}
 
.fp-item-links-wrapper a .link-image.link-events{
background-image: url('https://static.miraheze.org/bluearchivewiki/b/b6/Fp-link-events.png');
}
 
.fp-item-links-wrapper a .link-image.link-school_exchange{
background-image: url('https://static.miraheze.org/bluearchivewiki/e/ec/Fp-link-school-exchange.png');
}
 
.fp-item-links-wrapper a .link-image.link-recruitment{
background-image: url('https://static.miraheze.org/bluearchivewiki/b/b1/Fp-link-recruitment.png');
}
 
.fp-item-links-wrapper a .link-image.link-shop{
background-image: url('https://static.miraheze.org/bluearchivewiki/6/61/Fp-link-shop.png');
}
 
.fp-item-links-wrapper a .link-text image.link-affection{
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 643 ⟶ 742:
 
/* Twitter widget fix */
/*.fp-item-twitter .tabs-content {
iframe#twitter-widget-0, .twitter-timeline {
width: 100%;
}
iframe#twitter-widget-0, .twitter-timeline {
height: 100%!important;
}
 
@media (min-width: 1200px) {
.fp-item-twitter {
min-height: 800px600px;
}
}*/
 
 
Line 660 ⟶ 761:
float:right;
clear:right;
margin-top: 0;
margin-left: 24px!important;
text-align:center;
Line 765 ⟶ 867:
}
 
.character .portrait-birthday section>article[aria-hidden="false"]:first-child a.image::after {
display: block;
content: "";
Line 772 ⟶ 874:
background: url(https://static.miraheze.org/bluearchivewiki/9/9a/Icon_Momotalk_BirthdayHat.png);
position: absolute;
top: 8px16px;
right: 99px;
transform: rotate(18deg);
}
 
.character-images div.tabber__sectionvideo {
widthmin-height: 312px300px;
}
 
.character-images video {
display: block;
height: 300px;
width: 100%;
max-width: 480px;
object-fit: cover;
margin: auto;
cursor: pointer;
}
 
/*** Hide Mainpage title ***/
Line 1,110 ⟶ 1,221:
}
 
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,122 ⟶ 1,235:
}
 
td.rarity {
text-align: center;
}
 
.limitwidth-1280 {
Line 1,179 ⟶ 1,295:
 
.itemcard-block img.itemcard {
marginposition: -2px 0 0relative;
margin: -1px 0 0;
z-index: 2;
}
 
 
.itemcard-block > span {
.itemcard-block > span,
.itemcard-block a {
display: inline-block;
position: relative;
Line 1,229 ⟶ 1,349:
line-height: 18px;
border-radius: 11px;
z-index: 3;
}
 
Line 1,249 ⟶ 1,370:
}
 
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,330 ⟶ 1,481:
flex-wrap: wrap;
row-gap: 6px;
align-items: flex-start;
}
 
Line 1,513 ⟶ 1,665:
}
 
.condensed {
font-stretch: condensed;
}
 
.break {
flex-basis: 100%;
height: 0;
}
 
/* Item group */
Line 1,518 ⟶ 1,678:
display: inline-block;
position: relative;
border: 1px solid #0785FC46639880;
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 ;
}
 
Line 1,531 ⟶ 1,700:
border-width: 0 24px 0 3px;
}
 
 
 
div.itemgroup > .tag {
Line 1,537 ⟶ 1,708:
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
width: 24px;
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;
}