mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-03-28 17:42:57 +01:00
fixes #2518 add viewport meta & adjust responsive css
This commit is contained in:
HWFord
@@ -6,6 +6,7 @@
|
||||
{/if}
|
||||
<meta charset="{$CONTENT_ENCODING}">
|
||||
<meta name="generator" content="Piwigo (aka PWG), see piwigo.org">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>{if $PAGE_TITLE!=l10n('Home') && $PAGE_TITLE!=$GALLERY_TITLE}{$PAGE_TITLE} | {/if}{$GALLERY_TITLE}</title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="{$ROOT_URL}{$themeconf.icon_dir}/favicon.ico">
|
||||
|
||||
@@ -47,6 +47,8 @@ html{
|
||||
height:100%;
|
||||
min-height:100vh;
|
||||
overflow-y:auto;
|
||||
max-width:100vw;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
#login-form,
|
||||
@@ -54,7 +56,8 @@ html{
|
||||
#password-form,
|
||||
.profile-section{
|
||||
border-radius:15px;
|
||||
width:400px;
|
||||
max-width:400px;
|
||||
width:75%;
|
||||
margin:0 auto;
|
||||
margin-top:50px;
|
||||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
@@ -839,284 +842,18 @@ input:checked + .slider:before, input:checked + .slider::after {
|
||||
box-shadow: 0px 10px 33px #3333332e;
|
||||
}
|
||||
|
||||
/* Light */
|
||||
/* #theIdentificationPage .light,
|
||||
#theRegisterPage .light,
|
||||
#thePasswordPage .light,
|
||||
#theProfilePage .light{
|
||||
background: linear-gradient(75.69deg, #FFEACF 7.64%, #FFFAF3 77.87%);
|
||||
}
|
||||
|
||||
.light #login-form,
|
||||
.light #register-form,
|
||||
.light #password-form,
|
||||
.light #lang-select #other-languages,
|
||||
.light .profile-section,
|
||||
.light .slider:before,
|
||||
.light .body-modal,
|
||||
.light [data-tooltip]:hover::after {
|
||||
background-color:#ffffff;
|
||||
}
|
||||
|
||||
#theIdentificationPage .light a,
|
||||
#theRegisterPage .light a,
|
||||
#thePasswordPage .light a,
|
||||
#theProfilePage .light a:not(.close-modal),
|
||||
.light h1,
|
||||
.light .input-container input,
|
||||
.light .input-modal input,
|
||||
.light .input-container select,
|
||||
.light .input-container textarea,
|
||||
.light .secondary-links,
|
||||
.light .properties label,
|
||||
.light .profile-section label,
|
||||
.light .properties i,
|
||||
.light .profile-section i,
|
||||
.light #password-form p,
|
||||
.light .profile-section p,
|
||||
.light #lang-select #other-languages span,
|
||||
.light .btn-cancel,
|
||||
.light .btn-link {
|
||||
color:#3C3C3C;
|
||||
}
|
||||
|
||||
#theIdentificationPage .light a:hover,
|
||||
#theRegisterPage .light a:hover,
|
||||
#thePasswordPage .light a:hover,
|
||||
#theProfilePage .light a:hover{
|
||||
color:#ff7700;
|
||||
}
|
||||
|
||||
.light #header-options a,
|
||||
.light #header-options .toggle-mode,
|
||||
.light #selected-language-container{
|
||||
color:#ff7700;
|
||||
}
|
||||
|
||||
.light .input-container,
|
||||
.light .input-modal,
|
||||
.light .api-list-head {
|
||||
background-color:#F0F0F0;
|
||||
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;
|
||||
}
|
||||
|
||||
.light .gallery-icon-eye{
|
||||
color:#898989;
|
||||
}
|
||||
|
||||
.light .success-message{
|
||||
background-color: #DBF6D7;
|
||||
color: #6DCE5E !important;
|
||||
border-left: 4px solid #6DCE5E;
|
||||
}
|
||||
|
||||
.light .success-message i{
|
||||
color:#6DCE5E;
|
||||
}
|
||||
|
||||
.light .infos-message{
|
||||
background-color: #bde5f8;
|
||||
color: #00529b !important;
|
||||
border-left: 4px solid #00529b;
|
||||
}
|
||||
|
||||
.light input:checked + .slider {
|
||||
background-color: #FFA646;
|
||||
}
|
||||
|
||||
.light input:focus + .slider {
|
||||
box-shadow: 0 0 1px #FFA646;
|
||||
}
|
||||
|
||||
.light .slider {
|
||||
background-color: #CCCCCC;
|
||||
}
|
||||
|
||||
.light .api-list-body > div:nth-child(4n+1),
|
||||
.light .api-list-body > div:nth-child(4n+2) {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.light .api-tab-line p,
|
||||
.light .api-icon-action i,
|
||||
.light .keys p:not(.api-copy),
|
||||
.light .keys i,
|
||||
.light #api_key_list_expired .api-skull {
|
||||
color: #656565;
|
||||
}
|
||||
|
||||
.light .close-modal {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.light input[type="date"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.light input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0);
|
||||
}
|
||||
|
||||
.light .btn-revoked {
|
||||
background-color: #EB3223 !important;
|
||||
} */
|
||||
|
||||
/* Dark */
|
||||
/* #theIdentificationPage .dark,
|
||||
#theRegisterPage .dark,
|
||||
#thePasswordPage .dark,
|
||||
#theProfilePage .dark{
|
||||
background: linear-gradient(75.69deg, #1B1B1D 7.64%, #2F2F2F 77.87%);
|
||||
}
|
||||
|
||||
.dark #login-form,
|
||||
.dark #register-form,
|
||||
.dark #password-form,
|
||||
.dark .profile-section,
|
||||
.dark .body-modal {
|
||||
background-color:#3C3C3C;
|
||||
}
|
||||
|
||||
#theIdentificationPage .dark a,
|
||||
#theRegisterPage .dark a,
|
||||
#thePasswordPage .dark a,
|
||||
#theProfilePage .dark a:not(.close-modal),
|
||||
.dark h1,
|
||||
.dark .input-container input,
|
||||
.dark .input-modal input,
|
||||
.dark .input-container select,
|
||||
.dark .input-container textarea,
|
||||
.dark .secondary-links,
|
||||
.dark .properties label,
|
||||
.dark .profile-section label,
|
||||
.dark .properties i,
|
||||
.dark .profile-section i,
|
||||
.dark #password-form p,
|
||||
.dark .profile-section p,
|
||||
.dark #lang-select #other-languages span,
|
||||
.dark .btn-cancel,
|
||||
.dark .btn-link {
|
||||
color:#D6D6D6;
|
||||
}
|
||||
|
||||
#theIdentificationPage .dark a:hover,
|
||||
#theRegisterPage .dark a:hover,
|
||||
#thePasswordPage .dark a:hover,
|
||||
#theProfilePage .dark a:hover,
|
||||
.dark #lang-select #other-languages span{
|
||||
color:#ff7700;
|
||||
}
|
||||
|
||||
.dark #header-options a,
|
||||
.dark #header-options .toggle-mode,
|
||||
.dark #selected-language-container{
|
||||
color:#FFEBD0;
|
||||
}
|
||||
|
||||
.dark .input-container,
|
||||
.dark .input-modal {
|
||||
background-color:#303030;
|
||||
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;
|
||||
}
|
||||
|
||||
.dark .gallery-icon-eye{
|
||||
color:#898989;
|
||||
}
|
||||
|
||||
.dark #lang-select #other-languages,
|
||||
.dark .slider,
|
||||
.dark input:checked + .slider:before {
|
||||
background-color: #3C3C3C;
|
||||
}
|
||||
|
||||
.dark .success-message{
|
||||
background-color: #4EA590;
|
||||
color: #AAF6E4 !important;
|
||||
border-left: 4px solid #AAF6E4;
|
||||
}
|
||||
|
||||
.dark .success-message i{
|
||||
color: #AAF6E4;
|
||||
}
|
||||
|
||||
.dark .infos-message{
|
||||
background-color: #4f71a4;
|
||||
color: #bad6ff !important;
|
||||
border-left: 4px solid #bad6ff;
|
||||
}
|
||||
|
||||
.dark .btn-secondary {
|
||||
background-color: #202020!important;
|
||||
color: white!important;
|
||||
}
|
||||
|
||||
.dark input:checked + .slider {
|
||||
background-color: #FFA646;
|
||||
}
|
||||
|
||||
.dark .slider:before {
|
||||
background-color: #777777;
|
||||
}
|
||||
|
||||
.dark .api-list-head,
|
||||
.dark [data-tooltip]:hover::after{
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
|
||||
.dark .api-list-body > div:nth-child(4n+1),
|
||||
.dark .api-list-body > div:nth-child(4n+2) {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.dark .icon-collapse {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.dark .close-modal {
|
||||
color: #3C3C3C;
|
||||
}
|
||||
|
||||
.dark input[type="date"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.dark input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0);
|
||||
}
|
||||
|
||||
.dark .btn-revoked {
|
||||
background-color: #BE4949 !important;
|
||||
} */
|
||||
|
||||
/*Responsive display*/
|
||||
@media (max-width: 768px) {
|
||||
#login-form,
|
||||
#register-form,
|
||||
#password-form{
|
||||
@media only screen and (max-width: 768px) {
|
||||
#login-form, #register-form, #password-form, .profile-section{
|
||||
max-width:300px;
|
||||
width:50vw;
|
||||
}
|
||||
}
|
||||
|
||||
#separator{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#language-switch{
|
||||
position:unset;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user