mirrors/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2025-04-25 19:00:03 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

relates #2345 small fixes

Browse source 
change autofill colors, automatically set dark or light mode depending on browser preference
This commit is contained in:
HWFord 2025-03-26 16:20:17 +01:00
parent acdd4320df
commit ee0d29a0e9
2 changed files with 38 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
themes/standard_pages/css/identification_register.css
View file

@ -99,6 +99,15 @@ h1 i{
line-height:25px;
}
input:-webkit-autofill {
background-color: transparent !important;
color: inherit !important;
}
input:-webkit-autofill::first-line {
color: inherit !important;
}
.input-container input:focus{
border:none;
outline:none;
@ -133,6 +142,7 @@ h1 i{
font-family: sans-serif;
font-size: 16px;
margin-bottom:5px;
margin-left:20px;
}
.gallery-icon-checkmark {
@ -169,6 +179,7 @@ input[type="checkbox"]#remember_me:checked + .gallery-icon-checkmark::before {
label{
margin-bottom:5px;
font-size:15px;
font-weight:700;
}
p.form-instructions{
@ -395,6 +406,14 @@ p.error-message{
border:1px solid #F0F0F0;
}
.light .input-container input:is(:-webkit-autofill, :autofill)
{
box-shadow: 0 0 0 100px #F0F0F0 inset;
-webkit-box-shadow: 0 0 0px 1000px #F0F0F0 inset !important;
-webkit-text-fill-color: #3C3C3C;
color:#3C3C3C;
}
.light #separator{
border-bottom:1px solid #D8D8D8;
}
@ -453,6 +472,14 @@ p.error-message{
border:1px solid #303030;
}
.dark .input-container input:is(:-webkit-autofill, :autofill)
{
box-shadow: 0 0 0 100px #303030 inset;
-webkit-box-shadow: 0 0 0px 1000px #303030 inset !important;
-webkit-text-fill-color: #D6D6D6;
color:#D6D6D6;
}
.dark #separator{
border-bottom:1px solid #303030;
}

11
themes/standard_pages/js/identification_register.js
View file

@ -3,6 +3,17 @@ if("" != modeCookie)
{
toggle_mode(modeCookie);
}
else
{
let prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(prefersDark)
toggle_mode(prefersDark ? "dark" : "light");
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
let newMode = event.matches ? "dark" : "light";
toggle_mode(newMode);
});
jQuery( document ).ready(function() {
jQuery("#selected-language").textContent = selected_language;