VERY SLIGHTLY minor fix for layout

This commit is contained in:
Restia Ashdoll 2021-01-19 12:03:05 -07:00
parent 88c1a95d02
commit 9fe136f67b
2 changed files with 42 additions and 106 deletions

View file

@ -470,18 +470,16 @@
</div> </div>
<div class="center"> <div class="center">
<br>
<button class = "button" id = "update-button" onclick = "updateStats()"> <button class = "button" id = "update-button" onclick = "updateStats()">
Update Stats Update Stats
</button> </button>
<button class = "button" id = "show-id-button" onclick = "toggleID()"> <button class = "button" id = "show-id-button" onclick = "toggleID()">
Edit IDs Edit IDs
</button> </button>
<br> </div><br>
</div>
<div class="id-box fade-in" id="id-edit" style="display: none"> <div class="id-box fade-in" id="id-edit" style="display: none">
<div class="id-edit1"> <div class="id-edit1">
<table class="white-space: nowrap"> <table>
<tr> <tr>
<th colspan="5"> <th colspan="5">
<h1>Damage values:</h1> <h1>Damage values:</h1>

View file

@ -6,6 +6,7 @@
.all { .all {
font-family: 'Nunito',sans-serif; font-family: 'Nunito',sans-serif;
font-weight: 700; font-weight: 700;
text-size-adjust: none;
} }
th, td { th, td {
@ -14,11 +15,9 @@ th, td {
.nomargin { .nomargin {
padding: 0px; padding: 0px;
}
.nomarginp {
margin: 0px; margin: 0px;
padding: 0px;
} }
div { div {
padding: 0%; padding: 0%;
} }
@ -31,7 +30,11 @@ div {
grid-template-rows: min-content min-content auto; grid-template-rows: min-content min-content auto;
} }
.skillpoints, .id-edit1 { .id-edit1 {
}
.skillpoints {
padding: 0% 4% 2%; padding: 0% 4% 2%;
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
@ -39,14 +42,6 @@ div {
grid-auto-rows: minmax(60px, auto); 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{ .powder-specials{
padding: 0% 4% 2%; padding: 0% 4% 2%;
display: grid; display: grid;
@ -68,14 +63,6 @@ div {
a.link{ a.link{
color: #A5FDFF; color: #A5FDFF;
} }
.title{
text-align: center;
font-size: 150%;
}
.smalltitle{
text-align: center;
font-size: 125%;
}
.center { .center {
text-align: center; text-align: center;
position: relative; position: relative;
@ -95,19 +82,13 @@ table.center{
text-align: left; 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, .id-box { .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, .crafter, .recipe-stats, .craft-stats, .ing-stats, .id-box {
color: #aaa; color: #aaa;
background: #121516; background: #121516;
border: 3px solid #BCBCBC; border: 3px solid #BCBCBC;
border-radius: 3px; border-radius: 3px;
width: 96%; width: 96%;
} }
.crafter, .recipe-stats, .craft-stats, .ing-stats {
color: #aaa;
background: #121516;
border: 3px solid #BCBCBC;
border-radius: 3px;
}
.spell-info { .spell-info {
margin-bottom: 10px; margin-bottom: 10px;
@ -127,19 +108,23 @@ table.center{
margin: 2px 2%; margin: 2px 2%;
width: 94%; width: 94%;
margin-bottom: 16px; margin-bottom: 16px;
margin-left: auto;
margin-right: auto;
} }
.itemp, .damagep { .itemp, .damagep {
margin: 2px 2%; margin: 2px 2%;
padding: 0; padding: 0;
} }
.powderLeft {
margin: 2px 0% 2px 2%;
padding: 0;
}
.powderRight {
margin: 2px 2% 2px 0%;
padding: 0;
}
.space { .space {
margin-right: 5px; margin-right: 5px;
} }
.spaceleft{
margin-left: 5px;
}
.damageSubtitle { .damageSubtitle {
text-align: center; text-align: center;
@ -204,8 +189,8 @@ table.center{
margin: auto; margin: auto;
} }
.idCenter { .idLeft {
text-align: center; text-align: left;
padding: 1em 0px 0px 0px; padding: 1em 0px 0px 0px;
position: relative; position: relative;
display: flex; display: flex;
@ -237,40 +222,7 @@ table.center{
::-webkit-scrollbar-corner{ ::-webkit-scrollbar-corner{
background: #110110; 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 { input {
background-color: #666; background-color: #666;
border: 2px solid #444; border: 2px solid #444;
@ -304,12 +256,6 @@ input {
.Mythic{ .Mythic{
color:#a0a; color:#a0a;
} }
.Crafted {
color: #0aa;
}
.Custom {
color: #0aa;
}
.Set{ .Set{
color:#5f5; color:#5f5;
} }
@ -321,6 +267,17 @@ button.toggleOn{
background-color:#0a0; background-color:#0a0;
border: 3 px solid rgb(0, 70, 0); border: 3 px solid rgb(0, 70, 0);
} }
.toggleOn:hover {
background-color: #585;
}
button:hover {
background-color: #556;
}
button:active {
background-color: #558;
box-shadow: 0 3px #666;
transform: translateY(1px);
}
.funnynumber { .funnynumber {
background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00); -webkit-background-clip: text; background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00); -webkit-background-clip: text;
@ -340,31 +297,7 @@ button.toggleOn{
width: 100%; width: 100%;
} }
.T0 { .hide-container-block, .hide-container-grid, .set-info-div, .fade-in, .misc {
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-duration: 0.5s;
animation-name: fadeInFromNone; animation-name: fadeInFromNone;
animation-fill-mode: forwards; animation-fill-mode: forwards;
@ -383,3 +316,8 @@ button.toggleOn{
opacity: 1; opacity: 1;
} }
} }
.highlight {
color: #ff5;
background-color: #775;
}