MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
Content added Content deleted
mNo edit summary
(StatCalc update, StatChart styling)
Line 111: Line 111:
}
}
.character-stattable .stattable-controls {
.stattable-controls {
font-size: 15px;
font-size: 15px;
line-height: 38px;
line-height: 38px;
}
}


.character-stattable .stattable-controls td>div {
.stattable-controls td>div {
float: right;
float: right;
}
}
.character-stattable .stattable-controls .stattable-level-selector,
.stattable-controls .stattable-level-selector,
.character-stattable .stattable-controls .stattable-equipment-selector {
.stattable-controls .stattable-equipment-selector,
.stattable-controls .chart-affection-level {
margin: 2px 0 1px;
margin: 2px 0 1px;
position: relative;
}
}
.character-stattable .stattable-controls .stattable-level,
.stattable-controls .stattable-level,
.character-stattable .stattable-controls .stattable-tier {
.stattable-controls .stattable-tier,
.stattable-controls input {
width: 44px;
width: 44px;
font-size: 17px;
font-size: 17px;
Line 132: Line 135:
background-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 3px;
border-radius: 3px;
}
}


.character-stattable .stattable-controls .inactive {
.stattable-controls input {
padding: 0 0 0 4px;
width: 40px;
}

.stattable-controls .inactive,
.statchart .equipment.inactive
{
filter: grayscale(1);
filter: grayscale(1);
}
}


.character-stattable .stattable-equipment-selector .inactive {
.stattable-equipment-selector .inactive,
.statchart-controls .inactive,
.statchart .equipment.inactive {
opacity: 0.5;
opacity: 0.5;
}
}


.character-stattable .stattable-controls img {
.stattable-controls img {
padding: 0 1px;
padding: 0 1px;
margin: -3px 0 0 0;
margin: -3px 0 0 0;
vertical-align: middle;
vertical-align: middle;
}

.stattable-controls .affection>img {
padding: 0 5px;
}
}


.character-stattable .stattable-controls img:hover {
.stattable-controls img:hover {
filter: drop-shadow(0 2px 2px rgb(0 0 0 / 25%));
filter: drop-shadow(0 2px 2px rgb(0 0 0 / 25%));
transform: translateY(-1px);
transform: translateY(-1px);
Line 168: Line 185:
}
}



.character-stattable .stattable-equipment-selector .equipment-item {
.stattable-controls .stattable-equipment-selector .equipment-item,
.stattable-controls div.affection {
display: inline-block;
display: inline-block;
}
}


.character-stattable .stattable-equipment-selector .equipment-item > img {
.stattable-controls .stattable-equipment-selector .equipment-item > img {
width: 44px;
width: 44px;
height: auto;
}

.stattable-controls div.affection > img {
width: 32px;
height: auto;
height: auto;
}
}
Line 179: Line 203:
.character-stattable td[class^="stat-"] {
.character-stattable td[class^="stat-"] {
cursor: help;
cursor: help;
}


/* StatChart */
#statchart-controls .stattable-controls td>div {
float: none!important;
}

#statchart-controls .stattable-controls td {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap:8px 20px;
}

.statchart thead {
position: sticky;
top:0px;
z-index: 50;
}

.statchart th {
background-color:#2d4c72;color:white;
}

.statchart td {
position: relative;
}

.statchart .hidden {
display: none;
}

.statchart th.equipment,
.statchart th.gear {
max-width: 50px;
}


.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: extra-condensed;
}

.statchart th.stat {
min-width: 100px;
}

.statchart td[class^="stat-"] {
z-index: 1;
text-align: center;
}


.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%;
}
}


Retrieved from "https://bluearchive.wiki/wiki/MediaWiki:Common.css"