FandomMobile.css

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 */
.fpbox figure { display: inline-block; }
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);}
}