javascript override of browser styles.

components/foot.php

@@ -1,64 +1,68 @@
 </body>
 
 <footer>
-  <?php
-function get_args_from_url()
-{
-    $args = [];
-    $arr = explode('&', $_SERVER['QUERY_STRING']);
+    <?php
+    function get_args_from_url()
+    {
+        $args = [];
+        $arr = explode('&', $_SERVER['QUERY_STRING']);
 
-    foreach ($arr as $a) {
-        $tmp = explode('=', $a);
-        $key = $tmp[0];
-        $value = $tmp[1];
+        foreach ($arr as $a) {
+            $tmp = explode('=', $a);
+            $key = $tmp[0];
+            $value = $tmp[1];
 
-        $args[$key] = $value;
+            $args[$key] = $value;
+        }
+
+        return $args;
     }
 
-    return $args;
-}
+    if ($_SERVER['SCRIPT_NAME'] == '/user.php') {
+        $args = get_args_from_url();
 
-if ($_SERVER['SCRIPT_NAME'] == '/user.php') {
-    $args = get_args_from_url();
-
-    if (isset($args['view'])) {
-        if ($args['view'] == 'signup') {
-            echo '
+        if (isset($args['view'])) {
+            if ($args['view'] == 'signup') {
+                echo '
               <script src="js/profile_picture_cropper_modal.js"></script>
               <script src="js/upload.js"></script>
             ';
-        } else if ($args['view'] == 'display') {
-            echo '
+            } else if ($args['view'] == 'display') {
+                echo '
               <script src="js/user_actions_modal.js"></script>
               <script src="js/upload.js"></script>
             ';
+            }
         }
-    }
-} else if ($_SERVER['SCRIPT_NAME'] == '/admin.php') {
-    echo '
+    } else if ($_SERVER['SCRIPT_NAME'] == '/admin.php') {
+        echo '
       <script src="js/clickable_rows.js"></script>
     ';
-    $args = get_args_from_url();
+        $args = get_args_from_url();
 
-    if (isset($args['view'])) {
-        if ($args['view'] == 'users') {
-            echo '
+        if (isset($args['view'])) {
+            if ($args['view'] == 'users') {
+                echo '
               <script src="js/upload.js"></script>
             ';
+            }
         }
-    }
-} else if ($_SERVER['SCRIPT_NAME'] == '/articles.php') {
-    $args = get_args_from_url();
+    } else if ($_SERVER['SCRIPT_NAME'] == '/articles.php') {
+        $args = get_args_from_url();
 
-    if (isset($args['view'])) {
-        if ($args['view'] == 'compose') {
-            echo '
+        if (isset($args['view'])) {
+            if ($args['view'] == 'compose') {
+                echo '
               <script src="js/md_preview.js"></script>
             ';
+            }
         }
     }
-}
-?>
+
+    echo '
+        <script src="js/override_browser_styles.js"></script>
+    ';
+    ?>
 </footer>
 
 </html>

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;
-  padding: 0 !important;
-  margin: 0 !important;
+  font-family: 'Hack Nerd Font Mono', Hack, sans-serif;
+  padding: 0;
+  margin: 0;
 }
 
 h1 {
@@ -358,26 +358,25 @@ i:hover {
 }
 
 input,
-input:is(:-webkit-autofill, :autofill),
+.autofilled,
 textarea {
-  border-radius: 12px !important;
-  width: 100% !important;
-  padding: 15px !important;
-  margin: 15px 15px 15px 0px !important;
-  box-sizing: border-box !important;
-  transition-duration: 500ms !important;
-  resize: none !important;
+  border-radius: 12px;
+  width: 100%;
+  padding: 15px;
+  margin: 15px 15px 15px 0px;
+  box-sizing: border-box;
+  transition-duration: 500ms;
+  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;
-  box-shadow: 0 2px 4px 0 rgba(255, 165, 0, 0.3), 0 3px 8px 0 rgba(255, 165, 0, 0.7) !important;
-  outline: none !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);
+  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);
+  });
+});