CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/* HONKAI IMPACT SPECIFIC */
h1, h2 {
border-bottom: 1px solid #21767e!important;
}
div#mw-mf-viewport {
background:transparent!important;
}
.header {
background: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,#4cc9d4),color-stop(70%,#25848d));
background-image: -o-linear-gradient(top,#4cc9d4 35%,#25848d 65%);
background-image: -ms-linear-gradient(top,#4cc9d4 35%,#25848d 65%);
}
.header h1 {
border-bottom: 0!important;
}
span.toggle {
color: white;
background: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,#4cc9d4),color-stop(65%,#25848d));
background-image: -o-linear-gradient(top,#4cc9d4 35%,#25848d 65%);
background-image: -ms-linear-gradient(top,#4cc9d4 35%,#25848d 65%);
display: inline-block;
margin-top: 10px;
padding: 10px;
border: 1px solid #21767e;
border-radius: 5px;
font-weight: 700;
}
footer a, .navigation-drawer a {
color: #d0bc8b !important;
}
footer > .post-content {
color: #FFF;
}
/* [[File:Main Button UI Background.png]] */
div#homebuttons {
background: url(/media/c/c1/Main_Button_UI_Background.png) no-repeat center top;
height: 410px;
float: right;
}
div#homebuttons p {
margin: 0;
}
div#homebuttons span {
position: relative;
}
/* [[File:Sub Button (Background).png]] */
div#subbuttons .sub-button {
position: relative;
width: 54px;
height: 60px;
background: url(/media/4/4a/Sub_Button_%28Background%29.png) 100%/100%;
display:inline-block;
transition: all ease-in-out 0.2s;
}
div#subbuttons > div:nth-child(even) {
margin-left: 30px;
}
/* [[File:Sub Button Selected (Background).png]] */
div#subbuttons .sub-button:hover {
background: url(/media/8/83/Sub_Button_Selected_%28Background%29.png) 100%/100%;
}
/* [[File:Halloween Button (Background).png]] */
div#subbuttons .sub-halloween {
background: url(/media/c/c9/Halloween_Button_%28Background%29.png) 100%/100% !important;
}
/* [[File:Halloween Button Selected (Background).png]] */
div#subbuttons .sub-halloween:hover {
background: url(/media/9/9f/Halloween_Button_Selected_%28Background%29.png) 100%/100% !important;
}
div#subbuttons .sub-button span {
position: absolute;
height: max-content;
width: max-content;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
div#subbuttons .sub-button-text {
bottom: 25px;
position: relative;
}
/* Wikitables */
table.wikitable {
background: rgba(255,255,255,.7);
border: 1px solid #aaa;
border-radius: 4px;
margin: 0.5em 0;
}
table.wikitable.noncollapse {
border-collapse: inherit
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: rgba(255,255,255,.125);
border: 1px solid #aaa;
border-radius: 4px;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
background-color: rgba(0,0,0,.025);
border: 1px solid #aaa;
border-radius: 4px;
}
table.wikitable > * > tr > th.headerSort {
background-position: center!important
}
table span.mw-collapsible-toggle a {
vertical-align:middle;
}
table span.mw-collapsible-toggle {
font-size: large;
color: white;
line-height: normal;
}
table.blue th span.mw-collapsible-toggle a {
color: #FFC107;
}
/* Style Themes */
div.item {
position:relative;
width:max-content;
display:inline-block;
}
div.item div.itemIcon {
position:absolute;
bottom:25%;
left:0;
right:0;
width:max-content;
margin-left:auto;
margin-right:auto;
text-align:center;
}
div.item div.itemText {
position:absolute;
width:max-content;
left:0;
right:0;
bottom:0;
margin-left:auto;
margin-right:auto;
text-align:center;
}
div.item div.itemRarity {
position:absolute;
width:max-content;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align:center;
}
div.stigChar {
display:inline-block;
text-align:center;
margin:5px;
border:2px solid #25848d;
border-radius:10px;
padding:7px
}
div.stigChar:hover {
background:#B0C8F1;
}
div.valkyrieType {
position:relative;
display:inline-block;
}
.infoboxtable.stigmata .infoboxname {
background-color: #9db1ff;
color: #000;
}
.infoboxtable.stigmata div.tabbertab > div > a > img {
max-height: 500px;
width: auto;
height: auto;
}
.infoboxtable.stigmata .background {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.infoboxtable.event .infoboxname {
background-color: #00695C;
}
.infoboxtable.enemy .infoboxname {
background-color: #0B1B73;
}
.infoboxtable.enemy th {
color: #FFF;
background-color:#3F51B5;
}
table.blue th:not(.headerSort) {
background-color: #072792!important;
color: white;
}
table.pink th:not(.headerSort) {
background-color: #872542!important;
color: white;
}
table.gray th:not(.headerSort) {
background-color: #637CA5!important;
color: white;
}
table.green th:not(.headerSort) {
background-color: #00796B!important;
color: white;
}
table.red th:not(.headerSort) {
background-color: #b14141!important;
color: white;
}
table.purple th:not(.headerSort) {
background-color: #673ab7!important;
color: white;
}
table.furniture tbody {
background:#beddec;
}
table.divineKey {
animation: divineKey 4s linear infinite;
}
.tabber .tabbertab {
border: 2px solid #21767e!important;
border-radius: 5px;
padding: 10px;
}
.tabber .tabbernav {
border-bottom:0!important
}
.tabber .tabbernav li {
padding-top: 0!important;
}
/* Skill Pages */
#skill-overview, #elf-skill-overview {
width: 800px;
display: inline-grid;
grid-template-columns: 1fr 50px 100px 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;
padding: 10px;
border: 1px solid #2E85B5;
border-radius: 10px;
background-size: 360px!important;
background-repeat: no-repeat!important;
}
table#elf-skill-overview {
height: 350px;
}
#skill-overview .floatleft, #skill-overview .floatright, #elf-skill-overview .floatleft, #elf-skill-overview .floatright{
height: 110px;
width: 110px;
background: #2E85B5;
border-radius: 50%;
border: 3px dashed #79CEE7;
position: relative;
}
#skill-overview img, #elf-skill-overview img {
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
#skill-overview div p, #elf-skill-overview div p {
margin-top: 2em;
}
/* [[File:Kiana Skill Background.png]] */
#skill-overview.Kiana-skill {
background:url(/media/a/ad/Kiana_Skill_Background.png) center;
}
/* [[File:Mei Skill Background.png]] */
#skill-overview.Mei-skill {
background:url(/media/a/a2/Mei_Skill_Background.png) 50% 20px;
}
/* [[File:Bronya Skill Background.png]] */
#skill-overview.Bronya-skill {
background:url(/media/9/99/Bronya_Skill_Background.png) center;
}
/* [[File:Himeko Skill Background.png]] */
#skill-overview.Himeko-skill {
background:url(/media/0/05/Himeko_Skill_Background.png) center;
}
/* [[File:Sakura Skill Background.png]] */
#skill-overview.Sakura-skill {
background:url(/media/a/a5/Sakura_Skill_Background.png) center;
}
/* [[File:Theresa Skill Background.png]] */
#skill-overview.Theresa-skill {
background:url(/media/8/85/Theresa_Skill_Background.png) center;
}
/* [[File:Fu Hua Skill Background.png]] */
#skill-overview.FuHua-skill {
background:url(/media/d/da/Fu_Hua_Skill_Background.png) center;
}
/* [[File:Kallen Skill Background.png]] */
#skill-overview.Kallen-skill {
background:url(/media/1/1a/Kallen_Skill_Background.png) center;
}
/* [[File:Rita Skill Background.png]] */
#skill-overview.Rita-skill {
background:url(/media/6/64/Rita_Skill_Background.png) center;
}
/* [[File:Twins Skill Background.png]] */
#skill-overview.Rozaliya-skill, #skill-overview.Liliya-skill {
background:url(/media/6/63/Twins_Skill_Background.png) center;
}
/* [[File:Seele Skill Background.png]] */
#skill-overview.Seele-skill {
background:url(/media/b/ba/Seele_Skill_Background.png) center;
}
/* [[File:ELF Jingwei's Wings Skill Background.png]] */
#elf-skill-overview.JW-skill {
background:url(/media/a/a3/ELF_Jingwei%27s_Wings_Skill_Background.png) center;
}
/* [[File:ELF Blood Embrace Skill Background.png]] */
#elf-skill-overview.BE-skill {
background:url(/media/7/76/ELF_Blood_Embrace_Skill_Background.png) center;
}
/* [[File:ELF Selune's Elegy Skill Background.png]] */
#elf-skill-overview.SE-skill {
background:url(/media/2/2c/ELF_Selune%27s_Elegy_Skill_Background.png) center;
}
.skill-icon,.skill-icon-mini {
background: #2E85B5;
border-radius: 50%;
border: 3px solid #79CEE7;
position: relative;
}
.skill-icon {
height: 110px;
width: 110px;
}
.skill-shared {
background: #5E69B9;
border-color: #AB85DC;
}
.skill-augment {
border-color: #E1A81C;
}
.skill-icon img,.skill-icon-mini img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.augment-icon {
grid-column:3/4;
position:relative;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.augment-border {
left:-3px;
top:-3px;
height:86px;
width:86px;
background:#839eb2;
border:3px dashed #e1a81c;
border-radius:50px;
animation: augmentIcon 12s linear infinite;
}
span.increase {
color: #006b84;
font-weight: 700;
}
span.important {
color: #a08600;
font-weight: 700;
}
span.discount {
color: #981441;
font-weight: 700;
}
/* Animations */
@keyframes divineKey {
0% {box-shadow: 0 0 5px 5px rgba(243, 211, 38, 0.91);}
50% {box-shadow: 0px 0px 5px 2px rgba(249, 243, 215, 0.91);}
100% {box-shadow: 0 0 5px 5px rgba(243, 211, 38, 0.91);}
}
@keyframes augmentIcon {
0% {border-color:#e1a81c;transform: rotate(0deg);}
25% {border-color:#e8bf59;transform: rotate(120deg);}
50% {border-color:#eae6db;transform: rotate(90deg);}
75% {border-color:#d2aa3a;transform: rotate(160deg);}
100% {border-color:#e1a81c;transform: rotate(0deg);}
}