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
.rss_item {
background: #fff;
padding: 5px;
border-bottom: 1px solid #000;
margin-bottom: 5px;
}
/* This governs the sections on the Community portal */
.cpbox {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.cpbox #admins {
box-sizing: border-box;
width: calc(33% - 10px);
margin: 5px;
flex-grow: 1;
min-width: 300px;
}
.cpbox #help {
box-sizing: border-box;
width: calc(67% - 10px);
margin: 5px;
flex-grow: 1;
}
/* this CSS governs the responsive 2 column main page layout */
.fpcontent {
width: 100%;
overflow: hidden;
z-index: 1;
}
.fpmaybecols {
overflow: hidden;
margin: -5px 0 -5px 0;
}
.fpmaybecols + .fpmaybecols {
margin: 0 0 -5px 0;
}
.fpbox {
background: rgba(255,255,255,.7);
color: #000; /* change for hydra (light) wikis */
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border-radius: 4px;
}
.fpbox2 {
background: rgba(255,255,255,.75);
color: #000; /* change for hydra (light) wikis */
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border: 2px solid #DFC668;
}
.fpboxcell {
border: 2px solid #CDB88A;
}
.fpplainbox {
padding: 5px 8px 10px 8px;
margin: 0 5px 10px 5px;
vertical-align: top;
}
.fpbox .welcome {
border-bottom: 2px solid #1B1823;
color: #000; /* change for hydra (light) wikis */
font-size: 150%;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
text-transform: uppercase;
}
.fpbox .heading {
border-bottom: 1px solid #505050;
color: #000; /* change for hydra (light) wikis */
font-size: 132%;
font-variant: small-caps;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpbox .heading .smalllink {
color: #000; /* change for hydra (light) wikis */
font-size: 75%;
font-weight: bold;
}
.fpbox hr {
border: none;
border-bottom: 2px solid #1B1823;
}
div#content hr {
background-color: #1B1823;
color: #1B1823;
}
.fplinks {
margin: -5px;
}
.fplinks .linkslabel {
background: rgba(255,255,255,.75);
border-bottom: 2px solid #1B1823;
font-weight: bold;
margin: 15px 5px 5px 5px;
padding: 0 0 5px 0;
}
.fplink {
display: inline-block;
vertical-align: middle;
width: 100%;
}
/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
.fplink .box {
border-collapse: separate;
border-spacing: 5px;
display: table;
width: 100%;
}
.fplink .box .row {
display: table-row;
}
.fplink .box .row .cell {
background: rgba(255,255,255,.75);
color: #000; /* change for hydra (light) wikis */
display: table-cell;
font-weight: bold;
position: relative;
vertical-align: middle;
}
.fplink.wide .box .row .cell {
padding: 0 5px;
}
#fptopsection .fplink.image,
#fpflexsection .fplink.image,
#fpbottomsection .fplink.image {
height: 114px;
width: 114px;
}
.fplink.image .box .row .cell {
height: 100px;
width: 100px;
vertical-align: bottom;
}
.fplink.image .box .row .cell .image img {
height: 100px;
width: 100px;
}
@media (min-width: 470px) {
.fplink {
width: 50%;
}
.fplink.wide {
width: 100%;
}
}
@media (min-width: 580px) {
.fplink {
width: 33.333%;
}
.fplink.wide {
width: 66.666%;
}
}
@media (min-width: 690px) {
.fplink {
width: 25%;
}
.fplink.wide {
width: 50%;
}
}
@media (min-width: 800px) {
.fplink {
width: 20%;
}
.fplink.wide {
width: 40%;
}
}
@media (min-width: 910px) {
.fplink {
width: 16.666%;
}
.fplink.wide {
width: 33.333%;
}
}
@media (min-width: 990px) {
.fpcontent {
padding-right: 520px;
width: auto;
}
#fptopsection {
float: left;
width: 100%;
}
#fpflexsection {
float: right;
width: 520px;
margin-right: -520px
}
#fpbottomsection {
float: left;
width: 100%;
margin-top: -5px;
}
#fptopsection .fplink, #fpbottomsection .fplink {
width: 50%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 100%;
}
#fpflexsection .fplink {
width: 25%;
}
#fpflexsection .fplink.wide {
width: 50%;
}
}
@media (min-width: 1100px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 33.333%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 66.666%;
}
}
@media (min-width: 1210px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 25%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 50%;
}
}
@media (min-width: 1320px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 20%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 40%;
}
}
@media (min-width: 1430px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 16.666%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 33.333%;
}
.fplink a {
padding: 3px 5px;
}
}
@media (min-width: 1540px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 14.285%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 28.571%;
}
#fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
background-image: none;
}
.fpmaybelcol {
float: left;
width: 50%;
}
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 20%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 40%;
}
.fpmaybercol {
float: right;
width: 50%;
}
#fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
width: 50%;
}
#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
width: 100%;
}
}
@media (min-width: 1650px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 12.5%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 25%;
}
}
@media (min-width: 1697px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 16.666%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 33.333%;
}
}
@media (min-width: 1760px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 11.111%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 22.222%;
}
}
@media (min-width: 1850px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 14.285%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 28.571%;
}
}
@media (min-width: 1870px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 10%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 20%;
}
#fptopsection .fplink.image, #fpbottomsection .fplink.image {
width: 134px;
height: 134px;
}
#fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
width: 120px;
height: 120px;
}
#fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
width: 120px;
height: 120px;
}
}
@media (min-width: 1918px) {
#fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
width: 33.333%;
}
#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
width: 66.666%;
}
}
@media (min-width: 1980px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 9.09%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 18.181%;
}
}
@media (min-width: 2006px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 12.5%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 25%;
}
}
@media (min-width: 2090px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 8.33%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 16.666%;
}
}
@media (min-width: 2161px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 11.111%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 22.222%;
}
}
@media (min-width: 2200px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 7.692%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 15.384%;
}
}
@media (min-width: 2296px) {
#fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
width: 25%;
}
#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
width: 50%;
}
}
@media (min-width: 2310px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 7.142%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 14.285%;
}
}
@media (min-width: 2316px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 10%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 20%;
}
}
@media (min-width: 2420px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 6.666%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 13.333%;
}
.fplink a {
padding: 5px 5px;
}
#fptopsection .fplink.image, #fpbottomsection .fplink.image {
width: 164px;
height: 164px;
}
#fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
width: 150px;
height: 150px;
}
#fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
width: 150px;
height: 150px;
}
}
.fplink.image .image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 75%;
z-index: 1;
}
.fplink.image a {
z-index: 2;
}
.fplink a {
display: block;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1px 5px;
}
.fplink.image .image a {
padding: 0;
}
.fplink.image .link a {
background: rgba(255,255,255,.75);
border-top: 2px solid #505050;
}
.fplink.wide a {
margin: 0 -5px;
}
.fpvideos {
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.fpvideo {
display: inline-block;
margin: 0 5px;
}
/* Infoboxes */
.infoboxtable {
float: right;
background: #ECEFF6;
width: 350px;
}
.infoboxname {
background:#109382;
color: #fff;
font-size: 115%;
}
.infoboxlabel {
width: 50%;
background:#1B1823;
color: #000 ;
border: 1px solid #1B1823;
border-radius:5px;
padding: 0.5px 7px;
text-align: right;
}
.infoboxdetails {
padding-right: 5px;
}
/* Newer Navbox template style */
table.navbox {
border: 1px solid #676767;
clear: both;
font-size: 88%;
margin: auto;
padding: 1px;
text-align: center;
width: 100%;
}
/* Border between adjacent navboxes */
table.navbox + table.navbox {
margin-top: -1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-group {
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
/* Base background */
.navbox, .navbox-subgroup {
background: black;
}
.navbox-list {
border-color: black; /* Must match background color */
}
/* Level 1 color */
.navbox-title,
table.navbox th {
background: #000;
border: 1px solid #6C98BC;
color: #fff;
}
/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: #000;
border: 1px solid #6C98BC;
color: #fff;
}
/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #000;
border: 1px solid #6C98BC;
color: #fff;
}
/* Even row striping */
.navbox-even {
background: #202020;
color: #fff;
}
/* Odd row striping */
.navbox-odd {
background: transparent;
}
.collapseButton {
font-weight: normal;
width: auto;
}
.navbox .collapseButton {
width: 6em;
}
.navbar {
font-size: 88%;
font-weight: normal;
}
.navbox .navbar {
font-size: 100%;
}
table.collapsed tr.collapsible {
display: none;
}
/* End of new Navbox styling */
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;
}
.home-banners a {
position: relative;
display: inline-block;
}
.home-banners a:hover:after {
content: attr(title);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: #25282cf2;
color: #FFF;
font-weight: 700;
padding: 5px;
border-radius: 5px 5px 0 0;
}
/* [[File:Main Button UI Background.png]] */
div#homebuttons {
background: url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/c/c1/Main_Button_UI_Background.png/revision/latest) 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;
}
/* [[File:Christmas Button (Background).png]] */
div#subbuttons .sub-christmas {
background: url(/media/1/15/Christmas_Button_%28Background%29.png) 100%/100% !important;
}
/* [[File:Christmas Button Selected (Background).png]] */
div#subbuttons .sub-christmas:hover {
background: url(/media/b/b6/Christmas_Button_Selected_%28Background%29.png) 100%/100% !important;
}
div#subbuttons .sub-button span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: max-content;
width: max-content;
}
div#subbuttons .sub-button-text {
bottom: 25px;
position: relative;
}
#skill-overview, #elf-skill-overview {
width: 800px;
display: inline-grid;
grid-template-columns: 1fr 50px 100px 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;
border: 1px solid #2E85B5;
border-radius: 10px;
padding:10px;
background-size:360px!important;
background-repeat: no-repeat!important;
}
#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;
}
#skill-overview.Kiana-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/a/ad/Kiana_Skill_Background.png/revision/latest) center;
}
#skill-overview.Mei-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/a/a2/Mei_Skill_Background.png/revision/latest) 50% 20px;
}
#skill-overview.Bronya-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/9/99/Bronya_Skill_Background.png/revision/latest) center;
}
#skill-overview.Himeko-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/0/05/Himeko_Skill_Background.png/revision/latest) center;
}
#skill-overview.Sakura-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/a/a5/Sakura_Skill_Background.png/revision/latest) center;
}
#skill-overview.Theresa-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/8/85/Theresa_Skill_Background.png/revision/latest) center;
}
#skill-overview.FuHua-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/d/da/Fu_Hua_Skill_Background.png/revision/latest) center;
}
#skill-overview.Kallen-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/1/1a/Kallen_Skill_Background.png/revision/latest) center;
}
#skill-overview.Rita-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/64/Rita_Skill_Background.png/revision/latest) center;
}
#skill-overview.Rozaliya-skill, #skill-overview.Liliya-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/63/Twins_Skill_Background.png/revision/latest) center;
}
#skill-overview.Seele-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/b/ba/Seele_Skill_Background.png/revision/latest) center;
}
#skill-overview.Durandal-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/6f/Durandal_Skill_Background.png/revision/latest) center;
}
#elf-skill-overview.JW-skill {
background:url(/media/a/a3/ELF_Jingwei%27s_Wings_Skill_Background.png) center;
}
#elf-skill-overview.BE-skill {
background:url(https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/7/76/ELF_Blood_Embrace_Skill_Background.png/revision/latest) center;
}
#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);}
}
.pi-theme-event {
background-color: #ECEFF6;
}
.pi-theme-event .pi-item[data-source="start"] > div {
margin: 0 auto;
}
.pi-theme-event .pi-item[data-source="rewards"] {
text-align: center;
display: block;
}
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;
}