/*
INSTRUCTIONS ---------------------------------------------------------------------------------
1. Add this stylesheet to the of your pages
2. Use the file name as data-dd-theme attribute on your datedropper elements
*/
div.datedropper.JYL {
--dd-color1: #007bff;
--dd-color2: #FFF;
--dd-color3: #4D4D4D;
--dd-color4: #FFF;
--dd-radius: 8px;
--dd-width: 198px;
--dd-shadow: 0 0 36px 0px rgba(0, 0, 0, 0.45);
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
/* ── Overlay de chargement (partagé par toutes les pages) ────────────── */
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loader-content {
text-align: center;
}
/* ── Interactions cartes ─────────────────────────────────────────────── */
.card {
position: relative;
transition: transform .06s ease, box-shadow .12s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, .1);
}
.card:active {
transform: scale(.98);
}
.card .card-body img {
width: 110px;
max-width: 32vw;
}
@media (max-width: 576px) {
.card .card-body img {
width: 96px;
}
.container .row .col {
margin-bottom: 12px;
}
}
.card.loading::after {
content: '...';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(255, 255, 255, .55);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #212529;
}
/* ── Page de connexion (index.php) ───────────────────────────────────── */
html, body {
height: 100%;
}
body.login-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f4f6f9;
}
.login-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
padding: 40px 36px 32px;
width: 100%;
max-width: 400px;
}
.login-card img.logo {
max-width: 180px;
margin-bottom: 28px;
}
.login-card h2 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 24px;
color: #333;
}
.login-card .form-control {
text-align: center;
font-size: 1.1rem;
letter-spacing: .08em;
}
.login-card .btn-primary {
width: 100%;
margin-top: 12px;
font-size: 1.05rem;
}
#pwa-install-banner {
display: none;
background: #2196f3;
color: #fff;
padding: 14px 20px;
text-align: center;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
/* ── Styles pour data.php et user.php ────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200&display=swap');
.form-control[readonly] {
background-color: #007BFF;
opacity: 1;
color: #fff;
border: 1px solid #007BFF
}
.pro-button {
background-color: #10c045;
border-color: #10c045
}
.pro-button:focus {
outline: none !important;
background-color: #007BFF;
border-color: #007BFF;
box-shadow: 0 0 0 0.2rem rgb(255, 255, 255) !important
}
.pro-button:active {
outline: none !important;
background-color: #007BFF !important;
border-color: #007BFF !important
}
.pro-button:hover {
background-color: #0b9434;
border-color: #0b9434
}
label {
font-weight: 800
}
.dt-button {
border-color: #10c045;
background-color: #0062cc !important
}
/* Footer fixe */
#sticky-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1030;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
padding: 10px 0;
}
/* Sur pwa-page : aligner le contenu du footer sur le même container que le header */
.pwa-page #sticky-footer > .container {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 992px) {
#sticky-footer {
left: 225px;
}
.pwa-page #sticky-footer {
left: 0;
}
}
#layoutSidenav_content main {
padding-bottom: 100px;
}
/* ═══════════════════════════════════════════════════════════════════════════
Thème PWA – cohérent avec la modal PIN
(pages : index.php · clockinguser.php · clocking.php)
═══════════════════════════════════════════════════════════════════════════ */
:root {
--pwa-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--pwa-gradient-success: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
--pwa-gradient-warning: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
--pwa-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
--pwa-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
--pwa-gradient-muted: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
--pwa-bg: #eef0f8;
--pwa-card-radius: 15px;
--pwa-shadow: 0 8px 32px rgba(102, 126, 234, 0.18);
--pwa-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
--pwa-text-dark: #2d3748;
--pwa-text-muted: #718096;
}
/* ── Body ─────────────────────────────────────────────────────────────────── */
body.pwa-page {
background: var(--pwa-bg);
min-height: 100vh;
}
body.pwa-page h2 {
color: var(--pwa-text-dark);
font-size: 1.5rem;
font-weight: 700;
margin: 18px 0 12px;
}
/* ── Hero header ─────────────────────────────────────────────────────────── */
.pwa-hero {
background: var(--pwa-gradient);
border-radius: var(--pwa-card-radius);
box-shadow: var(--pwa-shadow);
padding: 14px 20px;
margin-bottom: 20px;
color: #fff;
}
.clock-text {
font-size: clamp(1.2rem, 5vw, 2rem);
font-weight: 700;
white-space: nowrap;
margin: 0;
line-height: 1.2;
}
.pwa-hero .clock-text { color: #fff !important; }
/* Slot Clock */
.slot-clock-wrap { text-align: center; line-height: 1; }
.slot-date { color: rgba(255,255,255,.85); font-size: .8rem; letter-spacing: 2px; margin-bottom: 4px; text-transform: uppercase; }
.slot-clock { display: inline-flex; align-items: flex-start; font-size: clamp(2rem, 7vw, 3rem); height: clamp(2rem, 7vw, 3rem); overflow: hidden; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.s-unit { width: clamp(1.25rem, 4.3vw, 1.85rem); overflow: hidden; height: clamp(2rem, 7vw, 3rem); }
.s-unit > div { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.175, .885, .32, 1.275); }
.s-unit > div > span { display: block; height: clamp(2rem, 7vw, 3rem); line-height: clamp(2rem, 7vw, 3rem); text-align: center; }
.s-sep { height: clamp(2rem, 7vw, 3rem); line-height: clamp(1.8rem, 6.3vw, 2.7rem); padding: 0 clamp(1px, 0.4vw, 2px); animation: s-blink 1s step-end infinite; color: rgba(255,255,255,.7); }
@keyframes s-blink { 50% { opacity: 0; } }
.pwa-hero hr { border-color: rgba(255,255,255,.3); margin: 10px 0; }
.pwa-hero .nav-menu-item {
color: rgba(255,255,255,.9);
border-radius: 12px;
transition: background .15s;
}
.pwa-hero .nav-menu-item:hover {
background: rgba(255,255,255,.18);
color: #fff;
border-radius: 12px;
}
.pwa-hero .nav-menu-item img { filter: brightness(0) invert(1); }
.pwa-hero .navbar-toggler { border-color: rgba(255,255,255,.6); }
.pwa-hero .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* ── Carte employé ───────────────────────────────────────────────────────── */
.pwa-user-card {
background: #fff;
border-radius: var(--pwa-card-radius);
box-shadow: var(--pwa-shadow-sm);
border: none;
overflow: hidden;
cursor: pointer;
position: relative;
transition: transform .12s ease, box-shadow .15s ease;
}
.pwa-user-card:hover { transform: translateY(-4px); box-shadow: var(--pwa-shadow); }
.pwa-user-card:active { transform: scale(.97); }
.pwa-user-card-body {
padding: 20px 14px 14px;
display: flex;
flex-direction: column;
align-items: center;
}
.pwa-user-card-body img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 3px 10px rgba(0,0,0,.15);
margin-bottom: 10px;
}
.pwa-user-name {
font-size: 1rem;
font-weight: 700;
color: var(--pwa-text-dark);
line-height: 1.2;
margin: 0;
}
.pwa-user-footer {
padding: 9px 12px;
background: #f8f9fa;
border-top: 1px solid #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
}
.pwa-status-badge {
font-size: .75rem;
font-weight: 700;
padding: 4px 14px;
border-radius: 50px;
letter-spacing: .03em;
white-space: nowrap;
}
/* ── Carte action (clocking.php) ─────────────────────────────────────────── */
.pwa-action-card {
position: relative;
background: #fff;
border-radius: var(--pwa-card-radius);
box-shadow: var(--pwa-shadow-sm);
border: none;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: transform .1s ease, box-shadow .15s ease;
}
.pwa-action-card:hover { transform: translateY(-3px); box-shadow: var(--pwa-shadow); }
.pwa-action-card:active { transform: scale(.97); }
.pwa-action-card .card-header {
font-weight: 700;
font-size: .92rem;
padding: 13px 12px;
border: none;
color: #fff;
text-align: center;
letter-spacing: .01em;
}
.pwa-action-card .card-body {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 18px 12px;
background: #fff;
}
.pwa-action-card .card-header.gh-success { background: var(--pwa-gradient-success); }
.pwa-action-card .card-header.gh-warning { background: var(--pwa-gradient-warning); }
.pwa-action-card .card-header.gh-danger { background: var(--pwa-gradient-danger); }
.pwa-action-card .card-header.gh-primary { background: var(--pwa-gradient-primary); }
.pwa-action-card .card-header.gh-purple { background: var(--pwa-gradient); }
.pwa-action-card .card-header.gh-muted { background: var(--pwa-gradient-muted); }
.pwa-card-disabled {
filter: grayscale(1);
opacity: .42;
pointer-events: none;
}
.pwa-action-card.loading::after,
.pwa-user-card.loading::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(255,255,255,.55);
}
/* ── Bloc profil utilisateur (clocking.php) ──────────────────────────────── */
.pwa-profile-card {
background: #fff;
border-radius: var(--pwa-card-radius);
box-shadow: var(--pwa-shadow-sm);
overflow: hidden;
margin-bottom: 20px;
}
.pwa-profile-strip { height: 5px; width: 100%; }
.pwa-profile-body {
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
}
.pwa-profile-body img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 3px 10px rgba(0,0,0,.15);
flex-shrink: 0;
}
.pwa-profile-body h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--pwa-text-dark);
margin: 0 0 4px;
}
.pwa-profile-body h5 {
font-size: .9rem;
color: var(--pwa-text-muted);
margin: 0;
font-weight: 500;
}
/* ── Modales PWA ─────────────────────────────────────────────────────────── */
.pwa-modal .modal-content {
border-radius: var(--pwa-card-radius);
border: none;
box-shadow: 0 10px 40px rgba(0,0,0,.22);
overflow: hidden;
}
.pwa-modal .modal-header {
background: var(--pwa-gradient);
border: none;
padding: 18px 24px;
}
.pwa-modal .modal-header h5 {
color: #fff;
font-weight: 600;
font-size: 1.15rem;
margin: 0;
}
.pwa-modal .modal-body {
background: #f8f9fa;
padding: 22px 24px;
color: var(--pwa-text-dark);
}
.pwa-modal .modal-footer {
background: #f8f9fa;
border: none;
padding: 12px 24px 22px;
justify-content: center;
gap: 12px;
}
.pwa-modal .modal-footer .btn {
border-radius: 50px;
padding: 9px 30px;
font-weight: 600;
font-size: 1rem;
min-width: 110px;
}
/* ── Page connexion (index.php) ──────────────────────────────────────────── */
body.login-page { background: var(--pwa-bg); }
.login-card {
border-radius: var(--pwa-card-radius);
box-shadow: 0 10px 40px rgba(102,126,234,.18);
padding: 0;
overflow: hidden;
}
.login-card-header {
background: var(--pwa-gradient);
padding: 32px 36px 24px;
text-align: center;
}
.login-card-header img.logo {
max-width: 90px;
margin-bottom: 16px;
}
.login-card-header h2 {
color: #fff;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0;
}
.login-card-body { padding: 28px 36px 32px; }
/* ── Footer PWA ───────────────────────────────────────────────────────────── */
.pwa-footer {
margin-top: 24px;
padding: 16px 0;
border-top: 1px solid rgba(0,0,0,.06);
text-align: center;
}
.pwa-footer p {
color: var(--pwa-text-muted);
font-size: .85rem;
margin: 0;
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
.pwa-hero { padding: 12px 14px; }
.pwa-user-card-body { padding: 14px 10px 10px; }
.pwa-action-card .card-header { font-size: .85rem; padding: 11px 10px; }
.login-card-header { padding: 24px 24px 18px; }
.login-card-body { padding: 20px 24px 24px; }
}