MediaWiki:Common.css: Difference between revisions
Replaced /w/index.php calls that result in 301 redirects
LeTrashman (talk | contribs) No edit summary Tag: Reverted |
(Replaced /w/index.php calls that result in 301 redirects) |
||
| (100 intermediate revisions by 3 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,059 ⟶ 1,176:
width: 100px;
}
.bannertable tr.limited {
Line 1,065 ⟶ 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);
}
@media (
.bannertable .period {
width: 300px;
}
}
Line 1,092 ⟶ 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%;
height: 48px;
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,114 ⟶ 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,140 ⟶ 1,293:
}
.itemcard-block
position: relative;
margin: -1px 0 0;
z-index: 2;
}
.itemcard-block > span,
.itemcard-block a {
display: inline-block;
position: relative;
}
.itemcard-block span > .item-quantity
.itemcard-block span > .item-probability {
display: block;
position: absolute;
width:
left:
padding:
}
.itemcard-block.quantity.probability span > .item-quantity {
bottom:20px;
}
/*
.itemcard-block span > .item-quantity {
}
*/
.itemcard-block span > .item-probability {
line-height: 18px;
border-radius: 12px;
color: #fff;
background-color: #406ea0;
margin: 0 2px;
}
Line 1,169 ⟶ 1,348:
line-height: 18px;
border-radius: 11px;
z-index: 3;
}
.itemcard-block.quantity > span,
.itemcard-block.probability > span {
padding-bottom: 20px;
}
.itemcard-block.quantity.probability > span {
padding-bottom: 40px;
}
.itemcard-block.quantity span > .item-tier,
.itemcard-block.probability span > .item-tier {
bottom: 19px;
}
.itemcard-block.quantity.probability span > .item-tier {
bottom: 39px;
}
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,242 ⟶ 1,470:
}
/* Event stage lists */
.stagetable {
text-align: center;
}
.stagetable .rewards {
display: flex;
flex-wrap: wrap;
row-gap: 6px;
align-items: flex-start;
}
table.columns-2 td,
td.columns-2 {
column-count: 2;
column-gap: 12px;
column-rule: 1px solid #a2a9b1;
display: block;
border: none;
}
table.columns-2 td ul,
td.columns-2 ul {
list-style: none;
margin-left: 0.3em;
}
@media (max-width: 1024px) {
table.columns-2 td,
td.columns-2 {
column-count: 1;
}
}
/* Mitcher! */
ul.mitchergacha {
padding-left: 0;
}
ul.mitchergacha li {
width:100%;
max-width: 480px;
border: 1px solid #c8ccd1;
background-color: #f8f9fa;
display: block;
clear: both;
margin: 1em auto;
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 1em;
box-sizing: border-box;
}
ul.mitchergacha li img {
display: block;
}
@media (max-width: 480px) {
ul.mitchergacha li img {
width: 60px!important;
height: auto!important;
}
}
#mitcherstats {
flex-wrap: wrap;
}
#mitcherstats div {
min-width: 200px;
}
ul.mitchergacha li.onemore {
background-color: #e0f2ff!important;
cursor: pointer;
}
ul.mitchergacha li.onemore:hover {
background-color: #d5ecfd!important;
}
ul.mitchergacha div {
position: relative;
z-index: 1;
transition: 0.2s;
transform-style: preserve-3d;
}
ul.mitchergacha div.hidden {
transform: rotateY(360deg);
display: block!important;
}
ul.mitchergacha div.hidden::before {
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color: #f8f9fa;
background-image: url("https://static.miraheze.org/bluearchivewiki/thumb/6/6c/Event_Image_Card_813_Back.png/85px-Event_Image_Card_813_Back.png");
background-size: contain;
content: '';
z-index: 2;
}
/* Junby! */
ul.omikuji {
padding-left: 0;
}
ul.omikuji li {
width:100%;
max-width: 480px;
border: 1px solid #c8ccd1;
background-color: #f8f9fa;
display: block;
clear: both;
margin: 1em auto;
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 1em;
box-sizing: border-box;
}
ul.omikuji li img {
display: block;
}
@media (max-width: 480px) {
ul.omikuji li img {
width: 60px!important;
height: auto!important;
}
}
#omikujistats {
flex-wrap: wrap;
}
#omikujistats div {
min-width: 200px;
}
#omikujistats div a {
display: inline-block;
}
ul.omikuji li.onemore {
background-color: #e0f2ff!important;
cursor: pointer;
}
ul.omikuji li.onemore:hover {
background-color: #d5ecfd!important;
}
ul.omikuji li.grade-0 {
box-shadow:
inset 0 0 50px #ddd,
inset 20px 0 80px rgb(49, 49, 49),
inset 20px 0 300px rgb(49, 49, 49),
inset -20px 0 300px rgb(48, 73, 73),
0 0 50px #fff,
-10px 0 80px rgb(49, 49, 49),
10px 0 80px rgb(48, 73, 73);
}
ul.omikuji li.grade-5 {
box-shadow:
inset 0 0 50px #fff,
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-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;
}
| |||