485 lines
8.5 KiB
CSS
485 lines
8.5 KiB
CSS
.header {
|
|
padding: 2% 0% 0%;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title{
|
|
text-align: center;
|
|
font-size: 150%;
|
|
}
|
|
.smalltitle{
|
|
text-align: center;
|
|
font-size: 125%;
|
|
margin-top: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.error {
|
|
color: red;
|
|
top: 30px;
|
|
font-size: 10px;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 5px;
|
|
font-family: 'Nunito', sans-serif;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.headericon {
|
|
/* JANK FIX IF CAN */
|
|
max-height: 48px;
|
|
max-width: 48px;
|
|
}
|
|
.headerleft {
|
|
display: inline-block;
|
|
width: 35%;
|
|
text-align: left;
|
|
}
|
|
.headercenter {
|
|
display: inline-block;
|
|
width: 30%;
|
|
text-align: center;
|
|
}
|
|
.headerright{
|
|
display: inline-block;
|
|
width: 35%;
|
|
text-align: right;
|
|
}
|
|
.iconlink {
|
|
position: relative;
|
|
left: 0%;
|
|
right: 0%;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.all {
|
|
font-family: 'Nunito',sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
th, td {
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.nomargin {
|
|
padding: 0px;
|
|
}
|
|
.lessbottom {
|
|
margin-bottom: 6px;
|
|
padding: 0px;
|
|
margin-top: 6px;
|
|
}
|
|
.nomarginp {
|
|
margin-top: 0px;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
}
|
|
div {
|
|
padding: 0%;
|
|
}
|
|
|
|
.skillpoints{
|
|
padding: 0% 4% 2%;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 5px;
|
|
grid-auto-rows: minmax(60px, auto);
|
|
}
|
|
|
|
|
|
.id-edit2 {
|
|
padding: 0% 4% 2%;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 5px;
|
|
grid-auto-rows: minmax(60px, auto);
|
|
}
|
|
|
|
.powder-specials{
|
|
padding: 0% 4% 2%;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 5px;
|
|
grid-auto-rows: minmax(60px, auto);
|
|
}
|
|
|
|
.equipment, .skillpoints, .header, .all, .nocolor, .crafted, .crafter{
|
|
background: #121516;
|
|
color: #aaa;
|
|
}
|
|
.hppeng{
|
|
color: #20c2b6;
|
|
}
|
|
.ferricles{
|
|
color: #5be553;
|
|
}
|
|
a.link{
|
|
color: #A5FDFF;
|
|
}
|
|
.center {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
table.center{
|
|
margin: 10px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
gap: 10px;
|
|
}
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
.idLeft {
|
|
text-align: left;
|
|
margin-left: 2px;
|
|
}
|
|
.left{
|
|
margin: 2px 2%;
|
|
text-align: left;
|
|
}
|
|
|
|
.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .box {
|
|
color: #aaa;
|
|
background: #121516;
|
|
border: 3px solid #BCBCBC;
|
|
border-radius: 3px;
|
|
width: 96%;
|
|
}
|
|
|
|
.id-box {
|
|
color: #aaa;
|
|
background: #121516;
|
|
border: 3px solid #BCBCBC;
|
|
border-radius: 3px;
|
|
width: 96%;
|
|
margin: 1em 0px 0px 0px;
|
|
}
|
|
|
|
.crafter, .recipe-stats, .craft-stats, .ing-stats {
|
|
color: #aaa;
|
|
background: #121516;
|
|
border: 3px solid #BCBCBC;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.spell-info {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.itemcenter {
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.itemleft {
|
|
text-align: left;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.itemtable {
|
|
margin: 2px 2%;
|
|
width: 94%;
|
|
margin-bottom: 16px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.headertable {
|
|
width: 98%;
|
|
margin-left: 1%;
|
|
margin-right: 1%;
|
|
}
|
|
.itemp, .damagep {
|
|
margin: 2px 2%;
|
|
padding: 0;
|
|
}
|
|
.powderLeft {
|
|
margin-right: 0px;
|
|
}
|
|
.powderRight {
|
|
margin-left: 0px;
|
|
}
|
|
.space {
|
|
margin-right: 5px;
|
|
}
|
|
.spaceleft{
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.damageSubtitle {
|
|
text-align: center;
|
|
margin: 12px 2% 4px;
|
|
/*margin-bottom: 16px;*/
|
|
/*margin-top: 16px;*/
|
|
}
|
|
|
|
|
|
.positive {
|
|
color: #5f5;
|
|
/*text-shadow: 2px 2px 0 #153f15;*/
|
|
}
|
|
|
|
.negative {
|
|
color: #f55;
|
|
/*text-shadow: 2px 2px 0 #1f1515;*/
|
|
}
|
|
|
|
.Earth { color: #0a0; }
|
|
.Earth:before { content: "\2724" ' '; }
|
|
.Earth_powder { color: #0a0; }
|
|
.Earth_powder:before { content: "\2724"; }
|
|
|
|
.Thunder { color: #ff5; }
|
|
.Thunder:before { content: "\2726" ' '; }
|
|
.Thunder_powder { color: #ff5; }
|
|
.Thunder_powder:before { content: "\2726"; }
|
|
|
|
.Water { color: #5ff; }
|
|
.Water:before { content: "\2749" ' '; }
|
|
.Water_powder { color: #5ff; }
|
|
.Water_powder:before { content: "\2749"; }
|
|
|
|
.Fire { color: #f55; }
|
|
.Fire:before { content: "\2739" ' '; }
|
|
.Fire_powder { color: #f55; }
|
|
.Fire_powder:before { content: "\2739"; }
|
|
|
|
.Air { color: #fff; }
|
|
.Air:before { content: "\274b" ' '; }
|
|
.Air_powder { color: #fff; }
|
|
.Air_powder:before { content: "\274b"; }
|
|
|
|
.Neutral { color: #fa0; }
|
|
.Neutral:before { content: "\2724" ' '; }
|
|
.Damage { color: rgb(255, 198, 85)}
|
|
|
|
.Mana { color: #5ff;}
|
|
.Mana:after { content: "\273A"}
|
|
|
|
.Health {
|
|
color: #a00;
|
|
/*text-shadow: 2px 2px 0 #2a0000;*/
|
|
}
|
|
.Health:before {
|
|
content: "\2764" ' ';
|
|
}
|
|
|
|
.skplabel {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
.idCenter {
|
|
text-align: center;
|
|
padding: 1em 0px 0px 0px;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
.idWrap {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
/*Scrollbar*/
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
box-shadow: inset 0 0 5px #BCBCBC;
|
|
border: #BCBCBC;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: #aaa;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Ugly Corner */
|
|
::-webkit-scrollbar-corner{
|
|
background: #110110;
|
|
}
|
|
.button-narrow {
|
|
background-color: #666;
|
|
border: 2px solid #444;
|
|
border-radius: 5px;
|
|
color: #ddd;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-family: 'Nunito',sans-serif;
|
|
font-weight: 700;
|
|
font-size: 90%;
|
|
display: inline-block;
|
|
}
|
|
button {
|
|
background-color: #666;
|
|
border: 2px solid #444;
|
|
border-radius: 5px;
|
|
color: #ddd;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-family: 'Nunito',sans-serif;
|
|
font-weight: 700;
|
|
font-size: 120%;
|
|
display: inline-block;
|
|
}
|
|
button:hover {
|
|
background-color: #556;
|
|
}
|
|
|
|
button:active {
|
|
background-color: #558;
|
|
box-shadow: 0 3px #666;
|
|
transform: translateY(1px);
|
|
}
|
|
input {
|
|
background-color: #666;
|
|
border: 2px solid #444;
|
|
border-radius: 5px;
|
|
color: #ddd;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-family: 'Nunito',sans-serif;
|
|
font-weight: 700;
|
|
display: inline-block;
|
|
}
|
|
.small-input {
|
|
width: max(4vw,60px);
|
|
}
|
|
::placeholder{
|
|
color: #aaa;
|
|
}
|
|
|
|
button.toggleOn{
|
|
background-color:#0a0;
|
|
border: 3 px solid rgb(0, 70, 0);
|
|
}
|
|
button.toggleOn:hover {
|
|
background-color: #575;
|
|
}
|
|
|
|
.funnynumber {
|
|
background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00);
|
|
color: transparent;
|
|
-webkit-background-clip: text;
|
|
display: inline-block;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.externalBuffs {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.hide-container-block, .hide-container-grid, .set-info-div, .fade-in {
|
|
animation-duration: 0.5s;
|
|
animation-name: fadeInFromNone;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes fadeInFromNone {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
1% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
color: #ff0;
|
|
background: #775;
|
|
}
|
|
.tooltip {
|
|
position: relative;
|
|
}
|
|
.tooltip .tooltiptext {
|
|
visibility: hidden;
|
|
color: #ddd;
|
|
background: #110110;
|
|
/*width: min(200%, 75vw);*/
|
|
display: inline-block;
|
|
padding: 0 min(2%,10px) 0 min(2%,10px);
|
|
text-align: center;
|
|
border: 1px solid #BCBCBC;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
.header-tooltip {
|
|
top: 100%;
|
|
left: -20%;
|
|
}
|
|
.ing-tooltip {
|
|
min-width: 240px;
|
|
border: 3px solid #BCBCBC !important;
|
|
border-radius: 10px !important;
|
|
top: 100%;
|
|
}
|
|
.spellcostcalc {
|
|
width: max(70%, 120px) !important;
|
|
font-size: 12px;
|
|
/*overflow-wrap: break-word !important;*/
|
|
border: 1.5px dotted #BCBCBC !important;
|
|
border-radius: 1px !important;
|
|
|
|
/*JANK*/
|
|
left: -40%;
|
|
top: 24px;
|
|
}
|
|
.def-tooltip {
|
|
width: max(70%, 100px) !important;
|
|
font-size: 12px;
|
|
border: 1.5px dotted #BCBCBC !important;
|
|
border-radius: 1px !important;
|
|
/*JANK*/
|
|
margin-top: 20px;
|
|
left: -30%;
|
|
}
|
|
.melee-tooltip {
|
|
width: max(80%, 150px) !important;
|
|
font-size: 12px;
|
|
border: 1.5px dotted #BCBCBC !important;
|
|
border-radius: 1px !important;
|
|
/*JANK*/
|
|
margin-top: 20px;
|
|
left: -10%;
|
|
}
|
|
.spell-tooltip {
|
|
width: max(80%, 150px) !important;
|
|
font-size: 12px;
|
|
border: 1.5px dotted #BCBCBC !important;
|
|
border-radius: 1px !important;
|
|
/*JANK*/
|
|
margin-top: 20px;
|
|
left: -10%;
|
|
}
|
|
.summary-tooltip {
|
|
left: 10% !important;
|
|
}
|
|
|
|
.recipe {
|
|
z-index: 1;
|
|
}
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
.bodydiv{
|
|
height: 100vh;
|
|
}
|
|
|