javascript override of browser styles.

This commit is contained in:
2025-04-13 17:56:19 -06:00
parent b39b75412d
commit 3dfb443f36
3 changed files with 71 additions and 52 deletions
+39 -35
View File
@@ -1,64 +1,68 @@
</body> </body>
<footer> <footer>
<?php <?php
function get_args_from_url() function get_args_from_url()
{ {
$args = []; $args = [];
$arr = explode('&', $_SERVER['QUERY_STRING']); $arr = explode('&', $_SERVER['QUERY_STRING']);
foreach ($arr as $a) { foreach ($arr as $a) {
$tmp = explode('=', $a); $tmp = explode('=', $a);
$key = $tmp[0]; $key = $tmp[0];
$value = $tmp[1]; $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') { if (isset($args['view'])) {
$args = get_args_from_url(); 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/profile_picture_cropper_modal.js"></script>
<script src="js/upload.js"></script> <script src="js/upload.js"></script>
'; ';
} else if ($args['view'] == 'display') { } else if ($args['view'] == 'display') {
echo ' echo '
<script src="js/user_actions_modal.js"></script> <script src="js/user_actions_modal.js"></script>
<script src="js/upload.js"></script> <script src="js/upload.js"></script>
'; ';
}
} }
} } else if ($_SERVER['SCRIPT_NAME'] == '/admin.php') {
} else if ($_SERVER['SCRIPT_NAME'] == '/admin.php') { echo '
echo '
<script src="js/clickable_rows.js"></script> <script src="js/clickable_rows.js"></script>
'; ';
$args = get_args_from_url(); $args = get_args_from_url();
if (isset($args['view'])) { if (isset($args['view'])) {
if ($args['view'] == 'users') { if ($args['view'] == 'users') {
echo ' echo '
<script src="js/upload.js"></script> <script src="js/upload.js"></script>
'; ';
}
} }
} } else if ($_SERVER['SCRIPT_NAME'] == '/articles.php') {
} else if ($_SERVER['SCRIPT_NAME'] == '/articles.php') { $args = get_args_from_url();
$args = get_args_from_url();
if (isset($args['view'])) { if (isset($args['view'])) {
if ($args['view'] == 'compose') { if ($args['view'] == 'compose') {
echo ' echo '
<script src="js/md_preview.js"></script> <script src="js/md_preview.js"></script>
'; ';
}
} }
} }
}
?> echo '
<script src="js/override_browser_styles.js"></script>
';
?>
</footer> </footer>
</html> </html>
+16 -17
View File
@@ -23,16 +23,16 @@ p,
small, small,
label, label,
input, input,
input:is(:-webkit-autofill, :autofill), .autofilled,
textarea, textarea,
a, a,
.modal_button, .modal_button,
th, th,
td, td,
li { 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 { h1 {
@@ -358,26 +358,25 @@ i:hover {
} }
input, input,
input:is(:-webkit-autofill, :autofill), .autofilled,
textarea { 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:focus,
input:is(:-webkit-autofill, :autofill):focus, .autofilled,
textarea:focus, textarea:focus,
input:hover, input:hover,
input:is(:-webkit-autofill, :autofill):hover,
textarea: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 { textarea {
+16
View File
@@ -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);
});
});