diff --git a/web/style.css b/web/style.css index af7d0e6..c28ecc7 100644 --- a/web/style.css +++ b/web/style.css @@ -187,20 +187,46 @@ li { box-sizing: border-box; } -#editMappingForm button { - background-color: #28a745; - color: white; + +/* ====== General mobile-friendly input & button styling ====== */ +input[type="text"], +input[type="file"], +input[type="range"] { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin: 8px 0; + box-sizing: border-box; + font-size: 16px; +} + +label { + display: block; + margin: 10px 0 5px 0; + font-weight: bold; + color: #333; +} + +button { + background-color: #007bff; + color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; - margin-top: 10px; transition: background-color 0.3s ease; + margin: 5px 0; } -#editMappingForm button:hover { - background-color: #218838; +button:hover:not(:disabled) { + background-color: #0056b3; +} + +button:disabled { + background-color: #6c757d; + cursor: not-allowed; } /* Responsive design improvements */