497 lines
No EOL
8 KiB
CSS
497 lines
No EOL
8 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: 30%;
|
|
text-align: left;
|
|
}
|
|
.headercenter {
|
|
display: inline-block;
|
|
width: 40%;
|
|
text-align: center;
|
|
}
|
|
.headerright{
|
|
display: inline-block;
|
|
width: 30%;
|
|
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;
|
|
}
|
|
.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, .center, .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;
|
|
}
|
|
/* Tier colors tier colors */
|
|
.none {
|
|
color: #aaa;
|
|
}
|
|
.lore {
|
|
color: #555;
|
|
}
|
|
.Normal{
|
|
color: #fff;
|
|
}
|
|
.Unique{
|
|
color:#ff5;
|
|
}
|
|
.Rare{
|
|
color:#f5f;
|
|
}
|
|
.Legendary{
|
|
color:#5ff;
|
|
}
|
|
.Fabled{
|
|
color:#f55;
|
|
}
|
|
.Mythic{
|
|
color:#a0a;
|
|
}
|
|
.Crafted {
|
|
color: #0aa;
|
|
}
|
|
.Custom {
|
|
color: #0aa;
|
|
}
|
|
.Set{
|
|
color:#5f5;
|
|
}
|
|
.restrict, .warning {
|
|
color: #ff8180;
|
|
}
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
.Star {
|
|
color:rgb(255, 198, 85);
|
|
}
|
|
.Star:after {
|
|
content: "\272B";
|
|
}
|
|
.externalBuffs {
|
|
width: 100%;
|
|
}
|
|
|
|
.T0 {
|
|
color: #555;
|
|
}
|
|
.T1 {
|
|
color: #ff5;
|
|
}
|
|
.T2 {
|
|
color: #f5f;
|
|
}
|
|
.T3 {
|
|
color: #5ff;
|
|
}
|
|
.T0-bracket {
|
|
color: #555;
|
|
}
|
|
.T1-bracket {
|
|
color: #fa0;
|
|
}
|
|
.T2-bracket {
|
|
color: #a0a;
|
|
}
|
|
.T3-bracket {
|
|
color: #0aa;
|
|
}
|
|
.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 .tooltiptext {
|
|
visibility: hidden;
|
|
color: #aaa;
|
|
background: #110110;
|
|
width: min(200%, 75vw);
|
|
text-align: center;
|
|
border: 3px solid #BCBCBC;
|
|
border-radius: 10px;
|
|
padding: 0 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
.center-parent {
|
|
|
|
}
|
|
.recipe {
|
|
z-index: 1;
|
|
}
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
.bodydiv{
|
|
height: 100vh;
|
|
}
|
|
|
|
.atlas{
|
|
height: 48px;
|
|
width: 48px;
|
|
} |