Fretux/anomaly-front-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance input and select styling with select-wrapper class

Browse Source
This commit is contained in:
IM23a-spirgif
2025-05-19 21:19:56 +02:00
parent 644a3878fb
commit cd0432ef2b
2 changed files with 126 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+108 -80
View File
@@ -1,3 +1,7 @@
*, *::before, *::after {
box-sizing: border-box;
}
input[type="text"] { input[type="text"] {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
@@ -8,19 +12,18 @@ input[type="text"] {
#modifiers-container { #modifiers-container {
display: flex; display: flex;
justify-content: space-between; /* Distribute space between the items */ justify-content: space-between;
flex-wrap: wrap; /* Allow wrapping to avoid overflow */ flex-wrap: wrap;
} }
/* Style for the modifiers section */
#modifiers { #modifiers {
display: flex; /* Use flexbox for alignment */ display: flex;
flex-direction: column; /* Stack items vertically */ flex-direction: column;
width: 50%; width: 50%;
} }
#abilities { #abilities {
width: 42.5%; /* Adjust this value as needed */ width: 42.5%;
} }
body { body {
@@ -29,7 +32,7 @@ body {
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
position: relative; position: relative;
z-index: -1; /* Send the background behind the content */ z-index: -1;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 20px; margin: 20px;
} }
@@ -105,7 +108,7 @@ input {
} }
#search { #search {
width: 33%; width: 100%;
padding: 6px; padding: 6px;
border: 2px black solid; border: 2px black solid;
margin-top: 8px; margin-top: 8px;
@@ -136,17 +139,15 @@ nav {
width: 80% width: 80%
} }
/* Add a black background color to the top navigation */
.topnav { .topnav {
position: absolute; position: absolute;
right: 50px; right: 50px;
top: 10px; top: 10px;
background-color: #333; background-color: #333;
overflow: visible; /* Ensure dropdown content isn't clipped */ overflow: visible;
z-index: 1000; /* Higher z-index to appear above other content */ z-index: 1000;
} }
/* Style the links inside the navigation bar */
.topnav a { .topnav a {
color: #f2f2f2; color: #f2f2f2;
text-align: center; text-align: center;
@@ -154,7 +155,6 @@ nav {
font-size: 17px; font-size: 17px;
} }
/* Style the dropdown button */
.dropdown .dropbtn { .dropdown .dropbtn {
font-size: 17px; font-size: 17px;
border: none; border: none;
@@ -165,20 +165,18 @@ nav {
cursor: pointer; cursor: pointer;
} }
/* Dropdown content */
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: #f9f9f9; background-color: #f9f9f9;
min-width: 160px; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0; /* Ensures dropdown aligns with the button */ right: 0;
z-index: 2000; /* Ensures it stays above the rest */ z-index: 2000;
} }
/* Style the links inside the dropdown */
.dropdown-content a { .dropdown-content a {
float: none; /* Ensure the links stack properly */ float: none;
color: black; color: black;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
@@ -186,24 +184,20 @@ nav {
text-align: left; text-align: left;
} }
/* Add a dark background on hover */
.topnav a:hover, .dropdown:hover .dropbtn { .topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555; background-color: #555;
color: white; color: white;
} }
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover { .dropdown-content a:hover {
background-color: #ddd; background-color: #ddd;
color: black; color: black;
} }
/* Show the dropdown when the button is clicked */
.dropdown.show .dropdown-content { .dropdown.show .dropdown-content {
display: block; /* Toggle visibility */ display: block;
} }
/* Media query for smaller screens */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.topnav { .topnav {
right: 0; right: 0;
@@ -223,7 +217,6 @@ nav {
} }
} }
/* Hide the icon on larger screens */
.topnav .icon { .topnav .icon {
display: none; display: none;
} }
@@ -234,7 +227,6 @@ nav {
overflow: auto; overflow: auto;
} }
/* Show the icon only on smaller screens */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#search { #search {
width: 100% width: 100%
@@ -255,7 +247,6 @@ nav {
background-color: black; background-color: black;
} }
/* Suggestion Form Enhancements */
main h1 { main h1 {
font-size: 2.5em; font-size: 2.5em;
color: black; color: black;
@@ -289,7 +280,6 @@ input[type="text"], input[type="number"], textarea {
transition: border-color 0.3s, box-shadow 0.3s; 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 { input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
border-color: black; border-color: black;
box-shadow: 0 0 5px darkred; box-shadow: 0 0 5px darkred;
@@ -302,7 +292,6 @@ textarea {
height: 150px; height: 150px;
} }
/* Submit button improvements */
.button1 { .button1 {
background-color: darkred; background-color: darkred;
color: white; color: white;
@@ -316,13 +305,11 @@ textarea {
transition: background-color 0.3s ease, transform 0.3s ease; transition: background-color 0.3s ease, transform 0.3s ease;
} }
/* Button hover effect */
.button1:hover { .button1:hover {
background-color: red; background-color: red;
transform: scale(1.05); transform: scale(1.05);
} }
/* Success message styling */
#successMessage { #successMessage {
font-size: 1.1em; font-size: 1.1em;
color: green; color: green;
@@ -383,83 +370,124 @@ textarea {
} }
.hamburger { .hamburger {
position: fixed; position: fixed;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
padding: 0.5rem; padding: 0.5rem;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
z-index: 2000; z-index: 2000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
} }
.hamburger .bar { .hamburger .bar {
width: 100%; width: 100%;
height: 0.4rem; height: 0.4rem;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease;
} }
.hamburger .bar { .hamburger .bar {
transform-origin: left center; transform-origin: left center;
} }
.hamburger .bar { .hamburger .bar {
width: 100%; width: 100%;
height: 0.4rem; height: 0.4rem;
background-color: #fff; background-color: #fff;
margin: 0.15rem 0; margin: 0.15rem 0;
transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
} }
.hamburger.active .bar:nth-child(1) { .hamburger.active .bar:nth-child(1) {
transform: translate(8px, 8px) rotate(45deg); transform: translate(8px, 8px) rotate(45deg);
width: 60%; width: 60%;
} }
.hamburger.active .bar:nth-child(2) { .hamburger.active .bar:nth-child(2) {
transform: translateX(10px); transform: translateX(10px);
width: 80%; width: 80%;
} }
.hamburger.active .bar:nth-child(3) { .hamburger.active .bar:nth-child(3) {
transform: translate(8px, -8px) rotate(-45deg); transform: translate(8px, -8px) rotate(-45deg);
width: 60%; width: 60%;
} }
.nav-menu { .nav-menu {
position: fixed; position: fixed;
top: 0; top: 0;
right: -100%; right: -100%;
width: 250px; width: 250px;
height: 100vh; height: 100vh;
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 4rem 1.5rem; padding: 4rem 1.5rem;
gap: 1.5rem; gap: 1.5rem;
box-shadow: -4px 0 8px rgba(0,0,0,0.1); box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
transition: right 0.3s ease; transition: right 0.3s ease;
z-index: 1500; z-index: 1500;
} }
.nav-menu a { .nav-menu a {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 500; font-weight: 500;
} }
.nav-menu.active { .nav-menu.active {
right: 0; right: 0;
} }
body.menu-open { 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;
} }
templates/calculator.html
+18 -15
View File
@@ -25,13 +25,15 @@
</header> </header>
<body> <body>
<main> <main>
<label for="weapon-search"></label> <div class="select-wrapper">
<input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()"> <label for="weapon-search"></label>
<br> <input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
<label for="weapon-select"></label> <br>
<select id="weapon-select" name="weapons"> <label for="weapon-select"></label>
<option value="">Select a Weapon</option> <select id="weapon-select" name="weapons">
</select> <option value="">Select a Weapon</option>
</select>
</div>
<br> <br>
<div id="guntype-filters"> <div id="guntype-filters">
<label><input type="checkbox" id="primary" value="PRIMARY"> Primary</label> <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="special" value="SPECIAL"> Special</label>
<label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label> <label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label>
</div> </div>
<div class="select-wrapper">
<label for="operative-search"></label> <label for="operative-search"></label>
<input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()"> <input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
<br> <br>
<label for="operative-select"></label> <label for="operative-select"></label>
<select id="operative-select"> <select id="operative-select">
<option value="">Select an operative</option> <option value="">Select an operative</option>
</select><br> </select><br>
</div>
<div id="weapon-stats"></div> <div id="weapon-stats"></div>
<div id="calculated-stats"></div> <div id="calculated-stats"></div>
<h3>Operative Specific Modifiers</h3> <h3>Operative Specific Modifiers</h3>