Blue Archive Wiki

MediaWiki:Common.css: Difference between revisions

Message Discussion

MediaWiki:Common.css (view source)

Revision as of 03:12, 29 April 2024

21,256 bytes added ,  1 month ago
m
no edit summary
No edit summary
mNo edit summary
(164 intermediate revisions by 2 users 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 108 ⟶ 186:
width: 100%;
min-width: 575px;
max-width: 740px900px;
}
.character-stattable .stattable-controls {
min-height: 34px;
font-size: 15px;
line-height: 38px;
}
 
.character-stattable .stattable-controls .stattable-level-selectortd>div {
float: right;
}
.stattable-controls .stattable-level-selector,
.stattable-controls .stattable-equipment-selector,
.stattable-controls .chart-affection-level {
margin: 2px 0 1px;
position: relative;
}
.character-stattable .stattable-controls .stattable-level {,
.stattable-controls .stattable-tier,
.stattable-controls input {
width: 44px;
font-size: 17px;
Line 127 ⟶ 213:
background-color: rgba(255, 255, 255, 1);
border-radius: 3px;
}
.character-stattable .stattable-controls .active {
}
 
.stattable-controls input {
padding: 0 0 0 4px;
width: 40px;
}
 
.character-stattable .stattable-controls .inactive {,
.statchart .equipment.inactive
{
filter: grayscale(1);
}
 
.stattable-equipment-selector .inactive,
.character-stattable .stattable-controls img {
.statchart-controls .inactive,
padding: 4px 1px;
.statchart .equipment.inactive {
opacity: 0.5;
}
 
.stattable-controls img {
padding: 0 1px;
margin: -3px 0 0 0;
vertical-align: middle;
}
 
.stattable-controls .affection>img {
padding: 0 5px;
}
 
.character-stattable .stattable-controls img:hover {
filter: drop-shadow(0 2px 2px rgb(0 0 0 / 25%));
transform: translateY(-1px);
transition: .15s;
cursor: pointer;
}
 
 
@media (min-width: 1200px) {
Line 151 ⟶ 256:
width: 16%;
}
table.character-stattable td[class^="stat-"] {
width: 9%;
}
}
 
 
.stattable-controls .stattable-equipment-selector .equipment-item,
.stattable-controls div.affection {
display: inline-block;
}
 
.stattable-controls .stattable-equipment-selector .equipment-item > img {
width: 44px;
height: auto;
}
 
.stattable-controls div.affection > img {
width: 32px;
height: auto;
}
 
.character-stattable td[class^="stat-"] {
cursor: help;
}
 
 
/* StatChart */
#statchart-controls {
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
margin: auto;
}
 
#statchart-controls .stattable-controls td>div {
float: none!important;
}
 
#statchart-controls .stattable-controls td {
padding: 0.2em 0.4em;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap:8px 20px;
}
 
.statchart {
background-color: #ecf5f9;
}
 
.statchart thead {
position: sticky;
top:0px;
z-index: 50;
}
 
.statchart th {
background-color:#2d4c72;color:white;
}
 
.statchart td {
position: relative;
}
 
.statchart th.equipment,
.statchart th.gear {
max-width: 60px;
box-sizing: border-box;
}
 
.statchart .rank-1:after,
.statchart .rank-2:after,
.statchart .rank-3:after,
.statchart .rank-4:after {
content: "";
display: flex;
align-items: center;
background-size: 30px;
background-position: center 55%;
background-repeat: no-repeat;
width: 36px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
}
 
.statchart .rank-1:after {
background-image: url('https://static.miraheze.org/bluearchivewiki/thumb/e/e4/RankIcon_1.png/60px-RankIcon_1.png');
}
.statchart .rank-2:after {
background-image: url('https://static.miraheze.org/bluearchivewiki/thumb/6/68/RankIcon_2.png/60px-RankIcon_2.png');
}
.statchart .rank-3:after {
background-image: url('https://static.miraheze.org/bluearchivewiki/thumb/6/68/RankIcon_3.png/60px-RankIcon_3.png');
}
.statchart .rank-4:after {
background-image: url('https://static.miraheze.org/bluearchivewiki/thumb/6/6b/RankIcon_4.png/60px-RankIcon_4.png');
}
 
 
.statchart th.equipment,
.statchart th.weapon,
.statchart th.gear {
font-stretch: ultra-condensed;
font-size: x-small;
}
 
.statchart th.stat {
width: 100px;
min-width: 85px;
box-sizing: border-box;
}
 
.statchart td[class^="stat-"] {
z-index: 1;
text-align: center;
text-shadow: 0 0 1px #ecf5f9, 0 0 2px #ecf5f9, 0 0 4px #ecf5f9;
}
 
 
.statchart td[class*="percentile-"]:before {
content: "";
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: #d9edfb;
z-index: -2;
transition: 0.6s;
border-right: 1px solid #cbe7fb;
}
 
.statchart td.percentile-100:before {
right: 0;
}
.statchart td.percentile-95:before {
right: 5%;
}
.statchart td.percentile-90:before {
right: 10%;
}
.statchart td.percentile-85:before {
right: 15%;
}
.statchart td.percentile-80:before {
right: 20%;
}
.statchart td.percentile-75:before {
right: 25%;
}
.statchart td.percentile-70:before {
right: 30%;
}
.statchart td.percentile-65:before {
right: 35%;
}
.statchart td.percentile-60:before {
right: 40%;
}
.statchart td.percentile-55:before {
right: 45%;
}
.statchart td.percentile-50:before {
right: 50%;
}
.statchart td.percentile-45:before {
right: 55%;
}
.statchart td.percentile-40:before {
right: 65%;
}
.statchart td.percentile-35:before {
right: 70%;
}
.statchart td.percentile-30:before {
right: 75%;
}
.statchart td.percentile-25:before {
right: 80%;
}
.statchart td.percentile-20:before {
right: 85%;
}
.statchart td.percentile-15:before {
right: 90%;
}
.statchart td.percentile-10:before {
right: 95%;
}
.statchart td.percentile-5:before {
right: 99%;
}
 
 
 
 
Line 188 ⟶ 491:
}
}
 
 
/* Front page stuff */
Line 193 ⟶ 497:
display: grid;
gap: 10px;
grid-template-areas: "splash gacha twitterraid"
"splash raidgacha twitterupdates"
"splash updatesgacha twitter"
"links links linksmechanics mechanics mechanics";
"modes modes modes"
"basics basics basics";
grid-template-columns: 1fr 320px 320px;
margin: 0 auto;
Line 208 ⟶ 514:
"raid "
"updates"
"links mechanics"
"modes"
"basics"
"twitter";
grid-template-columns: 1fr;
Line 248 ⟶ 556:
 
.fp-item-content ul {
margin-left: 0;
}
 
.fp-item-content ul li {
margin-left: 1em;
}
Line 255 ⟶ 567:
align-items: center;
flex-direction: column;
justify-content: space-aroundbetween;
background-image: url('https://static.miraheze.org/bluearchivewiki/3/39/Fp-background.jpg');
background-position: center;
Line 281 ⟶ 593:
.fp-logo {
width:calc(100% - 20px);
margin:10px 100px auto; 10px;
height:200px;
background:url('https://static.miraheze.org/bluearchivewiki/d/d2/Ba_logo_large.png');
Line 311 ⟶ 623:
 
.fp-item-twitter {
/* background: none; */
grid-area: twitter;
}
 
.fp-item-linksmechanics {
grid-area: mechanics;
}
 
.fp-item-modes {
grid-area: modes;
}
 
.fp-item-basics {
grid-area: basics;
}
 
.fp-links-wrapper {
display: flex;
flex-wrap: wrap;
Line 324 ⟶ 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 340 ⟶ 664:
width: 90px;
height: 90px;
margin: 0 auto;
}
 
.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-text image.link-cafe{
background-image: url('https://static.miraheze.org/bluearchivewiki/5/57/Fp-link-cafe.png');
}
 
.fp-links-wrapper a .link-image.link-equipment{
background-image: url('https://static.miraheze.org/bluearchivewiki/c/ca/Fp-link-equipment.png');
}
 
.fp-links-wrapper a .link-image.link-unique-weapons{
background-image: url('https://static.miraheze.org/bluearchivewiki/a/ac/Fp-link-unique-weapons.png');
}
 
.fp-links-wrapper a .link-image.link-events{
background-image: url('https://static.miraheze.org/bluearchivewiki/b/b6/Fp-link-events.png');
}
 
.fp-links-wrapper a .link-image.link-school_exchange{
background-image: url('https://static.miraheze.org/bluearchivewiki/e/ec/Fp-link-school-exchange.png');
}
 
.fp-links-wrapper a .link-image.link-recruitment{
background-image: url('https://static.miraheze.org/bluearchivewiki/b/b1/Fp-link-recruitment.png');
}
 
.fp-links-wrapper a .link-image.link-shop{
background-image: url('https://static.miraheze.org/bluearchivewiki/6/61/Fp-link-shop.png');
}
 
.fp-links-wrapper a .link-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;
width: 96px;
}
 
/* Twitter widget fix */
/*.fp-item-twitter .tabs-content {
iframe#twitter-widget-0 {
width: 100%;
}
iframe#twitter-widget-0, .twitter-timeline {
height: 100%!important;
}
@media (min-width: 1200px) {
 
.fp-item-twitter {
min-height: 600px;
}
}*/
 
 
Line 384 ⟶ 761:
float:right;
clear:right;
margin-top: 0;
margin-left: 24px!important;
text-align:center;
Line 401 ⟶ 779:
}
 
.rarity > img,
.character-rarity > img {
margin: 0 1px;
Line 458 ⟶ 837:
font-weight: bold;
color: #2d4c72;
filter: drop-shadow(0px 0px 1px #ecf5f9);
}
 
.weapon-text img {
margin-right: 2px;
}
 
.weapon-unique {
margin-top: 12px;
margin-bottom: 6px;
}
 
.character-voice-preview {
position: relative;
cursor: pointer;
}
 
td.character-voice-preview::after {
background: url(https://static.miraheze.org/bluearchivewiki/8/8e/Icon_sound.png) no-repeat center;
background-size: contain;
position: absolute;
content: '';
display: block;
width: 14px;
right: 5px;
top: 0;
bottom: 0;
opacity: 0.8;
}
 
.character .portrait-birthday section>article[aria-hidden="false"]:first-child a::after {
display: block;
content: "";
height: 76px;
width: 52px;
background: url(https://static.miraheze.org/bluearchivewiki/9/9a/Icon_Momotalk_BirthdayHat.png);
position: absolute;
top: 16px;
right: 99px;
transform: rotate(18deg);
}
 
.character-images div.video {
min-height: 300px;
}
 
.character-images video {
display: block;
height: 300px;
width: 100%;
max-width: 480px;
object-fit: cover;
margin: auto;
cursor: pointer;
}
 
Line 666 ⟶ 1,095:
.navbox td.hlist ul {
padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
 
 
/*** Furniture table output through DPL ***/
.furniture-table {
width: 100%;
min-width: 575px;
max-width: 1024px;
}
 
.furniture-table td.icon {
text-align: center;
}
 
.furniture-table td.icon img {
margin: -4px -6px;
}
 
.furniture-table img.interaction-portrait {
border-radius: 50%;
height: 48px;
object-fit: cover;
margin: 1px 4px 1px 0px;
}
 
.furniture-table-narrow {
width: 100%;
min-width: auto;
max-width: 640px;
}
 
 
/*** Strategytable ***/
.strategytable {
width: 100%;
max-width: 900px;
}
 
.strategytable .students {
width:250px;
text-align: center;
}
 
.strategytable .students img {
margin: 4px;
}
 
@media (max-width: 720px) {
.strategytable .students {
width:170px;
}
}
 
@media (max-width: 480px) {
.strategytable .students img {
margin: 4px 0;
}
.strategytable .students {
width: auto;
max-width:78px;
}
.strategytable .strategy {
padding: 0.2em 0.4em;
}
}
 
 
/*** Bannertable ***/
.bannertable {
width: 100%;
max-width: 900px;
text-align: center;
}
 
.bannertable .image {
width: 300px;
position: relative;
}
 
.bannertable .date {
width: 100px;
}
 
 
.bannertable tr.limited {
background-color: #fff2ed;
}
 
.limited td.image::after {
content: "Limited!";
display: block;
height: 24px;
width: 66px;
top: 16px;
left: 10px;
position: absolute;
background: #e54933;
background: repeating-linear-gradient( 115deg, #e15634, #e15634 4px, #e46b41 4px, #e46b41 8px);
color: white;
border-radius: 6px;
border: 2px solid #69290a;
font-size: 14px;
font-weight: bold;
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 (min-width: 1024px) {
.bannertable .period {
width: 300px;
}
}
 
@media (max-width: 480px) {
 
}
 
 
/*** Generic table styles ***/
table .tbd {
color:#aaaaaa;
}
 
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;
}
 
.limitwidth,
.limitwidth-1024 {
width: 100%;
min-width: 575px;
max-width: 1024px;
}
 
.limitwidth-720 {
width: 100%;
min-width: 575px;
max-width: 720px;
}
 
.limitwidth-nomin {
min-width: none;
}
 
.limitwidth-min320 {
min-width: 320px;
}
 
.limitwidth-min480 {
min-width: 480px;
}
 
 
/*** Template:ItemCard ***/
img.itemcard {
margin: -4px 0 -3px;
}
 
.item-quantity {
display: inline-block;
background: rgb(64 110 160 / 10%);
height: 22px;
width: 62px;
border-radius: 11px;
margin-right: -30px;
padding: 0 26px 0 2px;
box-sizing: border-box;
line-height: 22px;
text-align: center;
}
 
.itemcard-block {
display: inline-block;
text-align: center;
}
 
.itemcard-block img.itemcard {
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: auto;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
padding: 0 4px;
}
 
.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;
}
 
.itemcard-block span > .item-tier {
display: block;
position: absolute;
box-sizing: border-box;
background: rgb(64 110 160 / 10%);
color: #606060;
bottom: -1px;
right: 0;
width: 15px;
height: 15px;
padding: 0;
font-size: 8px;
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 ***/
table.missionrewards {
background:none;
border:none;
border-collapse:separate;
text-align:center;
}
 
table.missionrewards span {
display: block;
bottom: 1px;
line-height: 20px;
border-radius: 12px;
padding: 0 4px;
color: #fff;
}
 
table.missionrewards span.prob {
background: #406ea0;
}
 
table.missionrewards span.amount {
background: #a06c40;
font-size: 12px;
}
 
 
/* Related characters list */
.related-characters div {
display: inline-flex;
width: 190px;
margin: 2px 0;
flex-direction: row;
align-items: center;
}
 
 
/* TabberNeue */
.character-images .tabber__tabs {
margin: 0 auto;
}
.itemtable .tabber__panel,
.furnituretable .tabber__panel {
padding: 6px;
}
 
 
/* Generic opacity classes */
.opacity-90 {opacity: 0.9;}
.opacity-80 {opacity: 0.8;}
.opacity-70 {opacity: 0.7;}
.opacity-60 {opacity: 0.6;}
.opacity-50 {opacity: 0.5;}
.opacity-40 {opacity: 0.4;}
.opacity-30 {opacity: 0.3;}
.opacity-20 {opacity: 0.2;}
.opacity-10 {opacity: 0.1;}
 
 
/* TimedMediaHandler / VideoJS player */
/* remove CC button in audio player */
.vjs-subs-caps-button {
display: none;
}
 
td span.mw-tmh-player.audio {
vertical-align: middle;
margin: 3px 0;
}
 
 
/* 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;
}
Retrieved from "https://bluearchive.wiki/wiki/Special:MobileDiff/5050...58353"