/*/*
* ------------------------------------------------------------------------- * -------------------------------------------------------------------------
* UI Branding plugin for GLPI - Modern Login Styles * UI Branding plugin for GLPI - Modern Login Styles
* ------------------------------------------------------------------------- * -------------------------------------------------------------------------
* *
* LICENSE * LICENSE
* *
* This file is part of UI Branding plugin for GLPI. * This file is part of UI Branding plugin for GLPI.
* *
* "UI Branding plugin for GLPI" is free software; you can redistribute it and/or modify * "UI Branding plugin for GLPI" is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by * it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or * the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version. * (at your option) any later version.
* *
* "UI Branding plugin for GLPI" is distributed in the hope that it will be useful, * "UI Branding plugin for GLPI" is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details. * GNU General Public License for more details.
* *
* You should have received a copy of the GNU General Public License * You should have received a copy of the GNU General Public License
* along with "UI Branding plugin for GLPI". If not, see . * along with "UI Branding plugin for GLPI". If not, see .
* ------------------------------------------------------------------------- * -------------------------------------------------------------------------
* @copyright Copyright (C) 2025 by i-Vertix/PGUM. * @copyright Copyright (C) 2025 by i-Vertix/PGUM.
* @license GPLv3 https://www.gnu.org/licenses/gpl-3.0.html * @license GPLv3 https://www.gnu.org/licenses/gpl-3.0.html
* @link https://github.com/i-Vertix/glpi-modifications * @link https://github.com/i-Vertix/glpi-modifications
* ------------------------------------------------------------------------- * -------------------------------------------------------------------------
*/ */
/* ==== ROOT VARIABLES ==== *//* ==== ROOT VARIABLES ==== */
:root {:root {
--mod-primary-color: #2563eb; --mod-primary-color: #2563eb;
--mod-secondary-color: #1e40af; --mod-secondary-color: #1e40af;
--mod-accent-color: #3b82f6; --mod-accent-color: #3b82f6;
--mod-text-color: #1f2937; --mod-text-color: #1f2937;
--mod-light-text: #6b7280; --mod-light-text: #6b7280;
--mod-background-overlay: rgba(0, 0, 0, 0.4); --mod-background-overlay: rgba(0, 0, 0, 0.4);
--mod-blur-intensity: 20px; --mod-blur-intensity: 20px;
--mod-border-radius: 16px; --mod-border-radius: 16px;
--mod-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --mod-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--mod-animation-speed: 0.3s; --mod-animation-speed: 0.3s;
--mod-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mod-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}}
/* ==== BASIC BACKGROUND SETUP ==== *//* ==== BASIC BACKGROUND SETUP ==== */
body.mod-layout-split-left,.welcome-anonymous {
body.mod-layout-split-right { background: url(../background.php) no-repeat fixed center;
background: url(../background.php) no-repeat fixed center; background-size: cover;
background-size: cover; position: relative;
} min-height: 100vh;
font-family: var(--mod-font-family);
/* ==== THEME: GLASSMORPHISM ==== */}
body.mod-theme-glass .welcome-anonymous {
background: rgba(255, 255, 255, 0.85) !important;/* ==== MODERN THEMES ==== */
backdrop-filter: blur(15px) saturate(180%) !important;
-webkit-backdrop-filter: blur(15px) saturate(180%) !important;/* Theme 1: Glassmorphism */
}.mod-theme-glass .welcome-anonymous::before {
content: '';
body.mod-theme-glass .welcome-anonymous > *:first-child { position: fixed;
background: rgba(255, 255, 255, 0.95) !important; top: 0;
} left: 0;
right: 0;
/* ==== THEME: DARK ELEGANT ==== */ bottom: 0;
body.mod-theme-dark { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
--mod-primary-color: #8b5cf6; backdrop-filter: blur(var(--mod-blur-intensity));
--mod-secondary-color: #7c3aed; z-index: 1;
--mod-text-color: #f9fafb;}
--mod-light-text: #d1d5db;
}.mod-theme-glass .card {
background: rgba(255, 255, 255, 0.15) !important;
body.mod-theme-dark .welcome-anonymous { backdrop-filter: blur(var(--mod-blur-intensity));
background: rgba(17, 24, 39, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(20px) !important; border-radius: var(--mod-border-radius) !important;
} box-shadow: var(--mod-shadow) !important;
position: relative;
body.mod-theme-dark .welcome-anonymous > *:first-child { z-index: 2;
background: rgba(31, 41, 55, 0.98) !important;}
}
/* Theme 2: Dark Elegant */
body.mod-theme-dark .welcome-anonymous input[type="text"],.mod-theme-dark .welcome-anonymous::before {
body.mod-theme-dark .welcome-anonymous input[type="password"], content: '';
body.mod-theme-dark .welcome-anonymous input[type="email"] { position: fixed;
background: rgba(55, 65, 81, 0.8) !important; top: 0;
border-color: rgba(75, 85, 99, 0.8) !important; left: 0;
color: #f9fafb !important; right: 0;
} bottom: 0;
background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.9));
body.mod-theme-dark .welcome-anonymous h2, z-index: 1;
body.mod-theme-dark .welcome-anonymous label {}
color: #f9fafb !important;
}.mod-theme-dark .card {
background: linear-gradient(135deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.9)) !important;
/* ==== THEME: GRADIENT MODERN ==== */ border: 1px solid rgba(75, 85, 99, 0.3) !important;
body.mod-theme-gradient { border-radius: var(--mod-border-radius) !important;
--mod-primary-color: #ec4899; box-shadow: var(--mod-shadow) !important;
--mod-secondary-color: #8b5cf6; color: white !important;
} position: relative;
z-index: 2;
body.mod-theme-gradient .welcome-anonymous {}
background: linear-gradient(135deg,
rgba(236, 72, 153, 0.1), .mod-theme-dark .form-control {
rgba(139, 92, 246, 0.1)) !important; background: rgba(55, 65, 81, 0.8) !important;
backdrop-filter: blur(20px) !important; border: 1px solid rgba(107, 114, 128, 0.3) !important;
} color: white !important;
}
body.mod-theme-gradient .welcome-anonymous::after {
background: linear-gradient(135deg, .mod-theme-dark .form-control:focus {
#ec4899 0%, background: rgba(55, 65, 81, 0.9) !important;
#8b5cf6 100%) !important; border-color: var(--mod-accent-color) !important;
} box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}
/* ==== THEME: NEON CYBER ==== */
body.mod-theme-neon {/* Theme 3: Gradient Modern */
--mod-primary-color: #06b6d4;.mod-theme-gradient .welcome-anonymous::before {
--mod-secondary-color: #0891b2; content: '';
--mod-accent-color: #22d3ee; position: fixed;
} top: 0;
left: 0;
body.mod-theme-neon .welcome-anonymous { right: 0;
background: rgba(8, 145, 178, 0.05) !important; bottom: 0;
border: 2px solid rgba(6, 182, 212, 0.3) !important; background: linear-gradient(135deg,
box-shadow: rgba(99, 102, 241, 0.8),
0 0 30px rgba(6, 182, 212, 0.2), rgba(168, 85, 247, 0.8),
0 20px 60px rgba(0, 0, 0, 0.3) !important; rgba(236, 72, 153, 0.8));
} z-index: 1;
}
body.mod-theme-neon .welcome-anonymous::after {
background: linear-gradient(135deg, .mod-theme-gradient .card {
#06b6d4 0%, background: rgba(255, 255, 255, 0.95) !important;
#0891b2 50%, backdrop-filter: blur(10px);
#0e7490 100%) !important; border: none !important;
} border-radius: var(--mod-border-radius) !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
body.mod-theme-neon .welcome-anonymous input:focus { inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
border-color: #06b6d4 !important; position: relative;
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important; z-index: 2;
}}
/* ==== MODERN BUTTONS ==== *//* Theme 4: Neon Cyber */
body.mod-modern-buttons button[type="submit"],.mod-theme-neon .welcome-anonymous::before {
body.mod-modern-buttons input[type="submit"] { content: '';
position: relative; position: fixed;
overflow: hidden; top: 0;
} left: 0;
right: 0;
body.mod-modern-buttons button[type="submit"]::before, bottom: 0;
body.mod-modern-buttons input[type="submit"]::before { background: linear-gradient(45deg, rgba(0, 0, 0, 0.95), rgba(16, 16, 32, 0.9));
content: ''; z-index: 1;
position: absolute;}
top: 50%;
left: 50%;.mod-theme-neon .card {
width: 0; background: rgba(0, 0, 0, 0.8) !important;
height: 0; border: 2px solid #00ffff !important;
border-radius: 50%; border-radius: var(--mod-border-radius) !important;
background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
transform: translate(-50%, -50%); inset 0 0 30px rgba(0, 255, 255, 0.1) !important;
transition: width 0.6s, height 0.6s; color: white !important;
} position: relative;
z-index: 2;
body.mod-modern-buttons button[type="submit"]:active::before,}
body.mod-modern-buttons input[type="submit"]:active::before {
width: 300px;.mod-theme-neon .form-control {
height: 300px; background: rgba(0, 0, 0, 0.7) !important;
} border: 1px solid #00ffff !important;
color: #00ffff !important;
/* ==== MODERN INPUTS (FLOATING LABELS) ==== */}
body.mod-modern-inputs .form-group {
position: relative;.mod-theme-neon .form-control:focus {
margin-bottom: 25px; box-shadow: 0 0 10px rgba(0, 255, 255, 0.8) !important;
} border-color: #00ffff !important;
}
body.mod-modern-inputs label {
position: absolute;.mod-theme-neon .btn-primary {
top: 12px; background: linear-gradient(45deg, #ff0080, #00ffff) !important;
left: 15px; border: none !important;
font-size: 15px; box-shadow: 0 0 20px rgba(255, 0, 128, 0.5) !important;
color: var(--mod-light-text); text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
pointer-events: none;}
transition: all 0.3s ease;
}/* ==== LAYOUT STYLES ==== */
body.mod-modern-inputs input:focus + label,/* Centered Card Layout */
body.mod-modern-inputs input:not(:placeholder-shown) + label {body.mod-layout-centered .welcome-anonymous,
top: -10px;.mod-layout-centered.welcome-anonymous {
left: 10px; display: flex !important;
font-size: 12px; align-items: center !important;
color: var(--mod-primary-color); justify-content: center !important;
background: white; padding: 2rem !important;
padding: 0 5px;}
}
body.mod-layout-centered .login-container,
/* ==== LOGO EFFECTS ==== */body.mod-layout-centered .container,
body.mod-modern-logos img {body.mod-layout-centered > div {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); width: 100% !important;
transition: transform 0.3s ease; max-width: 450px !important;
} transform: translateY(0) !important;
animation: mod-slide-up var(--mod-animation-speed) ease-out !important;
body.mod-modern-logos img:hover {}
transform: scale(1.05);
}/* Split Screen Layout */
body.mod-layout-split .welcome-anonymous,
/* ==== PARTICLE EFFECTS ==== */.mod-layout-split.welcome-anonymous {
body.mod-particles-enabled::before { display: grid !important;
content: ''; grid-template-columns: 1fr 1fr !important;
position: fixed; min-height: 100vh !important;
top: 0;}
left: 0;
width: 100%;body.mod-layout-split .welcome-anonymous::before {
height: 100%; content: '' !important;
pointer-events: none; position: fixed !important;
z-index: 0; top: 0 !important;
background-image: left: 0 !important;
radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.3), transparent), width: 50% !important;
radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.3), transparent), height: 100% !important;
radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.3), transparent), background: url(../background.php) no-repeat center !important;
radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.3), transparent), background-size: cover !important;
radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.3), transparent), z-index: 0 !important;
radial-gradient(1px 1px at 33% 90%, rgba(255, 255, 255, 0.3), transparent),}
radial-gradient(2px 2px at 15% 80%, rgba(255, 255, 255, 0.3), transparent);
background-size: 200% 200%;body.mod-layout-split .login-container,
animation: particleFloat 20s ease-in-out infinite;body.mod-layout-split .container,
}body.mod-layout-split > div > div {
position: relative !important;
@keyframes particleFloat { z-index: 1 !important;
0%, 100% { margin-left: auto !important;
background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%, 100% 0%, 30% 90%, 15% 80%; margin-right: 0 !important;
} display: flex !important;
50% { align-items: center !important;
background-position: 100% 100%, 0% 0%, 80% 20%, 100% 0%, 0% 100%, 70% 10%, 85% 20%; justify-content: center !important;
} padding: 2rem !important;
} background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
/* ==== ANIMATIONS ==== */ min-height: 100vh !important;
}
/* Fade In Animation */
@keyframes fadeIn {/* Full Width Layout */
from {body.mod-layout-fullwidth .welcome-anonymous,
opacity: 0;.mod-layout-fullwidth.welcome-anonymous {
transform: scale(0.95); padding: 0 !important;
}}
to {
opacity: 1;body.mod-layout-fullwidth .login-container,
transform: scale(1);body.mod-layout-fullwidth .container,
}body.mod-layout-fullwidth > div {
} background: var(--mod-background-overlay) !important;
backdrop-filter: blur(5px) !important;
body.mod-anim-fade .welcome-anonymous { min-height: 100vh !important;
animation: fadeIn 0.5s ease-out; display: flex !important;
} align-items: center !important;
justify-content: center !important;
/* Slide Up Animation */ padding: 2rem !important;
@keyframes slideUp {}
from {
opacity: 0;body.mod-layout-fullwidth .card {
transform: translateY(30px); background: rgba(255, 255, 255, 0.98) !important;
} max-width: 500px !important;
to { width: 100% !important;
opacity: 1;}
transform: translateY(0);
}/* Corner Layout */
}body.mod-layout-corner .welcome-anonymous,
.mod-layout-corner.welcome-anonymous {
body.mod-anim-slide .welcome-anonymous { position: relative !important;
animation: slideUp 0.6s ease-out; display: flex !important;
} align-items: flex-start !important;
justify-content: flex-end !important;
/* Scale In Animation */ padding: 2rem !important;
@keyframes scaleIn {}
from {
opacity: 0;body.mod-layout-corner .login-container,
transform: scale(0.8);body.mod-layout-corner .container,
}body.mod-layout-corner > div {
to { position: relative !important;
opacity: 1; width: 400px !important;
transform: scale(1); max-width: calc(100vw - 4rem) !important;
} margin: 0 !important;
}}
body.mod-anim-scale .welcome-anonymous {/* ==== ENHANCED FORM ELEMENTS ==== */
animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}/* Modern Input Fields */
.mod-modern-inputs .form-control {
/* ==== ACCESSIBILITY ==== */ background: rgba(255, 255, 255, 0.9) !important;
@media (prefers-reduced-motion: reduce) { border: 2px solid transparent !important;
*, border-radius: 12px !important;
*::before, padding: 1rem 1.25rem !important;
*::after { font-size: 1rem !important;
animation-duration: 0.01ms !important; transition: all var(--mod-animation-speed) ease !important;
animation-iteration-count: 1 !important; backdrop-filter: blur(10px);
transition-duration: 0.01ms !important;}
}
}.mod-modern-inputs .form-control:focus {
background: rgba(255, 255, 255, 1) !important;
/* ==== FOCUS STATES ==== */ border-color: var(--mod-accent-color) !important;
*:focus { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
outline: 2px solid var(--mod-primary-color); transform: translateY(-2px);
outline-offset: 2px;}
}
/* Floating Labels */
*:focus:not(:focus-visible) {.mod-floating-labels .form-floating label {
outline: none; color: var(--mod-light-text) !important;
} font-weight: 500 !important;
}
*:focus-visible {
outline: 2px solid var(--mod-primary-color);.mod-floating-labels .form-floating > .form-control:focus ~ label,
outline-offset: 2px;.mod-floating-labels .form-floating > .form-control:not(:placeholder-shown) ~ label {
} color: var(--mod-accent-color) !important;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}
/* Modern Buttons */
.mod-modern-buttons .btn {
border-radius: 12px !important;
padding: 0.875rem 2rem !important;
font-weight: 600 !important;
font-size: 1rem !important;
transition: all var(--mod-animation-speed) ease !important;
position: relative;
overflow: hidden;
}
.mod-modern-buttons .btn-primary {
background: linear-gradient(135deg, var(--mod-primary-color), var(--mod-secondary-color)) !important;
border: none !important;
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3) !important;
}
.mod-modern-buttons .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4) !important;
}
.mod-modern-buttons .btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s;
}
.mod-modern-buttons .btn-primary:hover::before {
left: 100%;
}
/* ==== ANIMATIONS ==== */
@keyframes mod-slide-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mod-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mod-scale-in {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Apply animations */
.mod-animated .card {
animation: mod-scale-in var(--mod-animation-speed) ease-out;
}
.mod-animated .form-control {
animation: mod-fade-in calc(var(--mod-animation-speed) * 1.5) ease-out;
}
.mod-animated .btn {
animation: mod-fade-in calc(var(--mod-animation-speed) * 2) ease-out;
}
/* ==== LOGO ENHANCEMENTS ==== */
.mod-logo-enhanced {
filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.15));
transition: all var(--mod-animation-speed) ease;
}
.mod-logo-enhanced:hover {
transform: scale(1.05);
filter: drop-shadow(0 12px 35px rgba(0, 0, 0, 0.2));
}
/* ==== PARTICLES BACKGROUND ==== */
.mod-particles-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.mod-particles-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 200, 255, 0.3) 0%, transparent 50%);
animation: mod-particles-float 10s ease-in-out infinite alternate;
}
@keyframes mod-particles-float {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-20px) rotate(2deg);
}
}
/* ==== RESPONSIVE DESIGN ==== */
@media (max-width: 768px) {
.mod-layout-split .welcome-anonymous {
grid-template-columns: 1fr;
}
.mod-layout-split .background-side {
display: none;
}
.mod-layout-corner .login-container {
position: relative;
top: auto;
right: auto;
width: 100%;
margin: 2rem;
}
.mod-layout-centered .login-container {
max-width: 100%;
margin: 1rem;
}
:root {
--mod-border-radius: 12px;
--mod-blur-intensity: 15px;
}
}
@media (max-width: 480px) {
.welcome-anonymous {
padding: 1rem;
}
.mod-modern-inputs .form-control {
padding: 0.875rem 1rem !important;
font-size: 0.9rem !important;
}
.mod-modern-buttons .btn {
padding: 0.75rem 1.5rem !important;
font-size: 0.9rem !important;
}
:root {
--mod-border-radius: 8px;
--mod-blur-intensity: 10px;
}
}
/* ==== ACCESSIBILITY ENHANCEMENTS ==== */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.mod-animated .card,
.mod-animated .form-control,
.mod-animated .btn {
animation: none !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.mod-theme-glass .card,
.mod-theme-gradient .card {
background: white !important;
border: 2px solid black !important;
}
.mod-theme-dark .card,
.mod-theme-neon .card {
background: black !important;
border: 2px solid white !important;
color: white !important;
}
}
/* ==== PRINT STYLES ==== */
@media print {
.welcome-anonymous::before,
.mod-particles-bg {
display: none !important;
}
.card {
background: white !important;
border: 1px solid black !important;
box-shadow: none !important;
}
}