javascript override of browser styles.

components/foot.php

@@ -58,6 +58,10 @@ if ($_SERVER['SCRIPT_NAME'] == '/user.php') {
             }
         }
     }
+
+    echo '
+        <script src="js/override_browser_styles.js"></script>
+    ';
     ?>
 </footer>
 

css/base.css

@@ -23,16 +23,16 @@ p,
 small,
 label,
 input,
-input:is(:-webkit-autofill, :autofill),
+.autofilled,
 textarea,
 a,
 .modal_button,
 th,
 td,
 li {
-  font-family: 'Hack Nerd Font Mono', Hack, sans-serif !important;
+  font-family: 'Hack Nerd Font Mono', Hack, sans-serif;
-  padding: 0 !important;
+  padding: 0;
-  margin: 0 !important;
+  margin: 0;
 }
 
 h1 {
@@ -358,26 +358,25 @@ i:hover {
 }
 
 input,
-input:is(:-webkit-autofill, :autofill),
+.autofilled,
 textarea {
-  border-radius: 12px !important;
+  border-radius: 12px;
-  width: 100% !important;
+  width: 100%;
-  padding: 15px !important;
+  padding: 15px;
-  margin: 15px 15px 15px 0px !important;
+  margin: 15px 15px 15px 0px;
-  box-sizing: border-box !important;
+  box-sizing: border-box;
-  transition-duration: 500ms !important;
+  transition-duration: 500ms;
-  resize: none !important;
+  resize: none;
 }
 
 input:focus,
-input:is(:-webkit-autofill, :autofill):focus,
+.autofilled,
 textarea:focus,
 input:hover,
-input:is(:-webkit-autofill, :autofill):hover,
 textarea:hover {
-  border: 3px solid orange !important;
+  border: 3px solid orange;
-  box-shadow: 0 2px 4px 0 rgba(255, 165, 0, 0.3), 0 3px 8px 0 rgba(255, 165, 0, 0.7) !important;
+  box-shadow: 0 2px 4px 0 rgba(255, 165, 0, 0.3), 0 3px 8px 0 rgba(255, 165, 0, 0.7);
-  outline: none !important;
+  outline: none;
 }
 
 textarea {

js/override_browser_styles.js

@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', function() {
+  let inputs = document.querySelectorAll('input');
+
+  inputs.forEach(input => {
+    if (input.matches(':-webkit-autofill')) {
+      input.classList.add('autofilled');
+    }
+
+    function apply_hover(el) {
+      input.classList.add('autofilled');
+    }
+
+    input.addEventListener('hover', apply_hover);
+    input.addEventListener('focus', apply_hover);
+  });
+});