diff --git a/css/sq2bs.css b/css/sq2bs.css
index 36baa1f..d9fdbca 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -7,7 +7,6 @@
}
/* builder containers */
-
.slider {
-webkit-appearance: none;
background: #AAAAAA;
@@ -46,7 +45,6 @@ input[type=range]:focus {
outline: none; /* Removes the border. */
}
-
/* equipment field specifics */
/* inputs and dropdowns */
.form-control {
@@ -105,6 +103,8 @@ input.equipment-input {
min-height: calc(1.2 * var(--scaled-fontsize) + 2px);
padding: 0rem 0.5rem;
font-size: var(--scaled-fontsize);
+ --bs-gutter-y: 1rem;
+ --bs-gutter-x: 3rem
}
input.equipment-input:not(.is-invalid) {
@@ -177,11 +177,11 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-item-icon {
- width: 8rem;
+ width: 6rem;
}
.scaled-item-icon img {
- width: 6.5rem;
+ width: 6rem;
}
.scaled-bckgrd {
@@ -190,13 +190,28 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-bckgrd img {
- width: 6.5rem;
+ width: 7rem;
+}
+
+.overall-box {
+ max-width: 95%;
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
:root {
--scaled-fontsize: 1rem;
}
+ .overall-box {
+ padding-left: var(--sidebar-width);
+ max-width: 100%;
+ }
+ .equipment-input {
+ --bs-gutter-y: 0.5rem;
+ --bs-gutter-x: 1.5rem;
+ }
+ .level-input {
+ margin-top: 0
+ }
.scaled-font {
font-size: 1rem;
}
@@ -222,11 +237,11 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-item-icon {
- width: 3.2rem;
+ width: 2.6rem;
}
.scaled-item-icon img {
- width: 2.8rem;
+ width: 2.2rem;
}
.scaled-bckgrd {
@@ -251,6 +266,17 @@ input.equipment-input:not(.is-invalid) {
:root {
--scaled-fontsize: 1rem;
}
+ .overall-box {
+ padding-left: var(--sidebar-width);
+ max-width: 100%;
+ }
+ .equipment-input {
+ --bs-gutter-y: 0.5rem;
+ --bs-gutter-x: 1.5rem
+ }
+ .level-input {
+ margin-top: 0
+ }
.scaled-font {
font-size: 1rem;
}
@@ -276,11 +302,11 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-item-icon {
- width: 4rem;
+ width: 3.2rem;
}
.scaled-item-icon img {
- width: 3.5rem;
+ width: 2.7rem;
}
.scaled-bckgrd {
@@ -292,7 +318,6 @@ input.equipment-input:not(.is-invalid) {
width: 3.5rem;
}
-
.warning {
font-size: .8rem;
}
@@ -475,4 +500,4 @@ a:hover {
background-size: 500% 100%;
background-position: 100% 0;
aspect-ratio: 1/1;
-}
\ No newline at end of file
+}
diff --git a/js/builder_graph.js b/js/builder_graph.js
index bea5026..373efd4 100644
--- a/js/builder_graph.js
+++ b/js/builder_graph.js
@@ -736,7 +736,7 @@ class DisplayBuildWarningsNode extends ComputeNode {
input_map.get('def'),
input_map.get('agi')
];
- let skp_effects = ["% more damage dealt.","% chance to crit.","% spell cost reduction.","% less damage taken.","% chance to dodge."];
+ let skp_effects = ["% damage","% crit","% cost red.","% resist","% dodge"];
let total_assigned = 0;
for (let i in skp_order){ //big bren
const assigned = skillpoints[i] - base_totals[i] + min_assigned[i]
@@ -758,20 +758,16 @@ class DisplayBuildWarningsNode extends ComputeNode {
let summarybox = document.getElementById("summary-box");
summarybox.textContent = "";
- let skpRow = document.createElement("p");
- let remainingSkp = document.createElement("p");
- remainingSkp.classList.add("scaled-font");
- let remainingSkpTitle = document.createElement("b");
- remainingSkpTitle.textContent = "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: ";
+ let remainingSkp = make_elem("p", ['scaled-font', 'my-0']);
+ let remainingSkpTitle = make_elem("b", [], { textContent: "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: " });
let remainingSkpContent = document.createElement("b");
remainingSkpContent.textContent = "" + (levelToSkillPoints(build.level) - total_assigned);
remainingSkpContent.classList.add(levelToSkillPoints(build.level) - total_assigned < 0 ? "negative" : "positive");
- remainingSkp.appendChild(remainingSkpTitle);
- remainingSkp.appendChild(remainingSkpContent);
+ remainingSkp.append(remainingSkpTitle);
+ remainingSkp.append(remainingSkpContent);
- summarybox.append(skpRow);
summarybox.append(remainingSkp);
if(total_assigned > levelToSkillPoints(build.level)){
let skpWarning = document.createElement("span");
WynnBuilder 
WynnCrafter 
WynnAtlas 
WynnCustom 
WynnGPS 
Wynnfo 
Swap Icon Style 
WB Discord