wynnbuilder-forked-for-changes/styles.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;
}