From cd0432ef2b1e3467fd14d7a748476d789b5a5c9a Mon Sep 17 00:00:00 2001
From: IM23a-spirgif <spirgif@bzz.ch>
Date: Mon, 19 May 2025 21:19:56 +0200
Subject: [PATCH] Enhance input and select styling with `select-wrapper` class

---
 static/style.css          | 188 ++++++++++++++++++++++----------------
 templates/calculator.html |  33 ++++---
 2 files changed, 126 insertions(+), 95 deletions(-)

diff --git a/static/style.css b/static/style.css
index d3b4115..0ea1a53 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,7 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 input[type="text"] {
     width: 100%;
     padding: 8px;
@@ -8,19 +12,18 @@ input[type="text"] {
 
 #modifiers-container {
     display: flex;
-    justify-content: space-between; /* Distribute space between the items */
-    flex-wrap: wrap; /* Allow wrapping to avoid overflow */
+    justify-content: space-between;
+    flex-wrap: wrap;
 }
 
-/* Style for the modifiers section */
 #modifiers {
-    display: flex; /* Use flexbox for alignment */
-    flex-direction: column; /* Stack items vertically */
+    display: flex;
+    flex-direction: column;
     width: 50%;
 }
 
 #abilities {
-    width: 42.5%; /* Adjust this value as needed */
+    width: 42.5%;
 }
 
 body {
@@ -29,7 +32,7 @@ body {
     background-attachment: fixed;
     background-size: cover;
     position: relative;
-    z-index: -1; /* Send the background behind the content */
+    z-index: -1;
     font-family: Arial, sans-serif;
     margin: 20px;
 }
@@ -105,7 +108,7 @@ input {
 }
 
 #search {
-    width: 33%;
+    width: 100%;
     padding: 6px;
     border: 2px black solid;
     margin-top: 8px;
@@ -136,17 +139,15 @@ nav {
     width: 80%
 }
 
-/* Add a black background color to the top navigation */
 .topnav {
     position: absolute;
     right: 50px;
     top: 10px;
     background-color: #333;
-    overflow: visible; /* Ensure dropdown content isn't clipped */
-    z-index: 1000; /* Higher z-index to appear above other content */
+    overflow: visible;
+    z-index: 1000;
 }
 
-/* Style the links inside the navigation bar */
 .topnav a {
     color: #f2f2f2;
     text-align: center;
@@ -154,7 +155,6 @@ nav {
     font-size: 17px;
 }
 
-/* Style the dropdown button */
 .dropdown .dropbtn {
     font-size: 17px;
     border: none;
@@ -165,20 +165,18 @@ nav {
     cursor: pointer;
 }
 
-/* Dropdown content */
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    right: 0; /* Ensures dropdown aligns with the button */
-    z-index: 2000; /* Ensures it stays above the rest */
+    right: 0;
+    z-index: 2000;
 }
 
-/* Style the links inside the dropdown */
 .dropdown-content a {
-    float: none; /* Ensure the links stack properly */
+    float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
@@ -186,24 +184,20 @@ nav {
     text-align: left;
 }
 
-/* Add a dark background on hover */
 .topnav a:hover, .dropdown:hover .dropbtn {
     background-color: #555;
     color: white;
 }
 
-/* Add a grey background to dropdown links on hover */
 .dropdown-content a:hover {
     background-color: #ddd;
     color: black;
 }
 
-/* Show the dropdown when the button is clicked */
 .dropdown.show .dropdown-content {
-    display: block; /* Toggle visibility */
+    display: block;
 }
 
-/* Media query for smaller screens */
 @media screen and (max-width: 600px) {
     .topnav {
         right: 0;
@@ -223,7 +217,6 @@ nav {
     }
 }
 
-/* Hide the icon on larger screens */
 .topnav .icon {
     display: none;
 }
@@ -234,7 +227,6 @@ nav {
     overflow: auto;
 }
 
-/* Show the icon only on smaller screens */
 @media screen and (max-width: 600px) {
     #search {
         width: 100%
@@ -255,7 +247,6 @@ nav {
     background-color: black;
 }
 
-/* Suggestion Form Enhancements */
 main h1 {
     font-size: 2.5em;
     color: black;
@@ -289,7 +280,6 @@ input[type="text"], input[type="number"], textarea {
     transition: border-color 0.3s, box-shadow 0.3s;
 }
 
-/* Focus effect to highlight the active input field */
 input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     border-color: black;
     box-shadow: 0 0 5px darkred;
@@ -302,7 +292,6 @@ textarea {
     height: 150px;
 }
 
-/* Submit button improvements */
 .button1 {
     background-color: darkred;
     color: white;
@@ -316,13 +305,11 @@ textarea {
     transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
-/* Button hover effect */
 .button1:hover {
     background-color: red;
     transform: scale(1.05);
 }
 
-/* Success message styling */
 #successMessage {
     font-size: 1.1em;
     color: green;
@@ -383,83 +370,124 @@ textarea {
 }
 
 .hamburger {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  width: 3rem;
-  height: 3rem;
-  padding: 0.5rem;
-  background: rgba(0, 0, 0, 0.6);
-  border-radius: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  cursor: pointer;
-  z-index: 2000;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    width: 3rem;
+    height: 3rem;
+    padding: 0.5rem;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+    z-index: 2000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
 .hamburger .bar {
-  width: 100%;
-  height: 0.4rem;
-  background-color: #fff;
-  border-radius: 2px;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+    width: 100%;
+    height: 0.4rem;
+    background-color: #fff;
+    border-radius: 2px;
+    transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
 .hamburger .bar {
-  transform-origin: left center;
+    transform-origin: left center;
 }
 
 .hamburger .bar {
-  width: 100%;
-  height: 0.4rem;
-  background-color: #fff;
-  margin: 0.15rem 0;
-  transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
+    width: 100%;
+    height: 0.4rem;
+    background-color: #fff;
+    margin: 0.15rem 0;
+    transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
 }
 
 .hamburger.active .bar:nth-child(1) {
-  transform: translate(8px, 8px) rotate(45deg);
-  width: 60%;
+    transform: translate(8px, 8px) rotate(45deg);
+    width: 60%;
 }
 
 .hamburger.active .bar:nth-child(2) {
-  transform: translateX(10px);
-  width: 80%;
+    transform: translateX(10px);
+    width: 80%;
 }
 
 .hamburger.active .bar:nth-child(3) {
-  transform: translate(8px, -8px) rotate(-45deg);
-  width: 60%;
+    transform: translate(8px, -8px) rotate(-45deg);
+    width: 60%;
 }
 
 .nav-menu {
-  position: fixed;
-  top:     0;
-  right:  -100%;
-  width:   250px;
-  height:  100vh;
-  background-color: rgba(255, 255, 255, 0.95);
-  display: flex;
-  flex-direction: column;
-  padding: 4rem 1.5rem;
-  gap:     1.5rem;
-  box-shadow: -4px 0 8px rgba(0,0,0,0.1);
-  transition: right 0.3s ease;
-  z-index: 1500;
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: 250px;
+    height: 100vh;
+    background-color: rgba(255, 255, 255, 0.95);
+    display: flex;
+    flex-direction: column;
+    padding: 4rem 1.5rem;
+    gap: 1.5rem;
+    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
+    transition: right 0.3s ease;
+    z-index: 1500;
 }
+
 .nav-menu a {
-  color: #333;
-  text-decoration: none;
-  font-size: 1.1rem;
-  font-weight: 500;
+    color: #333;
+    text-decoration: none;
+    font-size: 1.1rem;
+    font-weight: 500;
 }
 
 .nav-menu.active {
-  right: 0;
+    right: 0;
 }
 
 body.menu-open {
-  overflow: hidden;
+    overflow: hidden;
+}
+
+.select-wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.select-wrapper > input[type="text"],
+.select-wrapper > select {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.select-wrapper > select {
+  background-image: url("data:image/svg+xml;utf8,\
+    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23666' viewBox='0 0 24 24'>\
+      <path d='M7 10l5 5 5-5z'/>\
+    </svg>");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 1em;
+}
+
+.select-wrapper > input[type="text"]:focus,
+.select-wrapper > select:focus {
+  outline: none;
+  border-color: darkred;
+  box-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
+}
+
+.select-wrapper > input[type="text"]::placeholder {
+  color: #888;
 }
\ No newline at end of file
diff --git a/templates/calculator.html b/templates/calculator.html
index 9af92fc..cba947b 100644
--- a/templates/calculator.html
+++ b/templates/calculator.html
@@ -25,13 +25,15 @@
 </header>
 <body>
 <main>
-    <label for="weapon-search"></label>
-    <input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
-    <br>
-    <label for="weapon-select"></label>
-    <select id="weapon-select" name="weapons">
-        <option value="">Select a Weapon</option>
-    </select>
+    <div class="select-wrapper">
+        <label for="weapon-search"></label>
+        <input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
+        <br>
+        <label for="weapon-select"></label>
+        <select id="weapon-select" name="weapons">
+            <option value="">Select a Weapon</option>
+        </select>
+    </div>
     <br>
     <div id="guntype-filters">
         <label><input type="checkbox" id="primary" value="PRIMARY"> Primary</label>
@@ -46,14 +48,15 @@
         <label><input type="checkbox" id="special" value="SPECIAL"> Special</label>
         <label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label>
     </div>
-
-    <label for="operative-search"></label>
-    <input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
-    <br>
-    <label for="operative-select"></label>
-    <select id="operative-select">
-        <option value="">Select an operative</option>
-    </select><br>
+    <div class="select-wrapper">
+        <label for="operative-search"></label>
+        <input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
+        <br>
+        <label for="operative-select"></label>
+        <select id="operative-select">
+            <option value="">Select an operative</option>
+        </select><br>
+    </div>
     <div id="weapon-stats"></div>
     <div id="calculated-stats"></div>
     <h3>Operative Specific Modifiers</h3>