129 lines
No EOL
5.4 KiB
CSS
129 lines
No EOL
5.4 KiB
CSS
/* ─────────────────────────────────────────────────────────────
|
|
GMAO Collège — Design System
|
|
Variables, composants réutilisables, theme sombre
|
|
───────────────────────────────────────────────────────────── */
|
|
|
|
/* ── Variables ── */
|
|
:root {
|
|
/* Palette principale */
|
|
--gmao-primary: #2c3e50;
|
|
--gmao-primary-light: #3a546b;
|
|
--gmao-accent: #0d6efd;
|
|
--gmao-success: #198754;
|
|
--gmao-warning: #ffc107;
|
|
--gmao-danger: #dc3545;
|
|
--gmao-info: #0dcaf0;
|
|
--gmao-purple: #6f42c1;
|
|
|
|
/* Backgrounds */
|
|
--gmao-bg: #f4f6f9;
|
|
--gmao-card-bg: #ffffff;
|
|
--gmao-card-border: #dee2e6;
|
|
--gmao-navbar-bg: #2c3e50;
|
|
|
|
/* Texte */
|
|
--gmao-text: #212529;
|
|
--gmao-text-muted: #6c757d;
|
|
|
|
/* Espacement */
|
|
--gmao-radius: 0.75rem;
|
|
--gmao-radius-sm: 0.5rem;
|
|
--gmao-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
--gmao-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
|
|
--gmao-transition: 0.2s ease;
|
|
}
|
|
|
|
/* ── Theme sombre ── */
|
|
[data-bs-theme="dark"] {
|
|
--gmao-bg: #1a1d24;
|
|
--gmao-card-bg: #252a33;
|
|
--gmao-card-border: #3a3f4b;
|
|
--gmao-navbar-bg: #1a1d24;
|
|
--gmao-text: #e0e0e0;
|
|
--gmao-text-muted: #9a9a9a;
|
|
--gmao-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
--gmao-shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* ── Body ── */
|
|
body { background: var(--gmao-bg); color: var(--gmao-text); }
|
|
.main-content { padding: 1rem; }
|
|
@media (min-width: 768px) { .main-content { padding: 1.5rem 2rem; } }
|
|
|
|
/* ── Navbar ── */
|
|
.navbar-brand i { font-size: 1.3rem; }
|
|
.navbar .dropdown-divider { border-color: rgba(255,255,255,0.15); }
|
|
.nav-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); padding: 0.5rem 1rem 0.2rem; }
|
|
@media (min-width: 992px) { .nav-group-label { display: none; } }
|
|
|
|
/* ── Cards ── */
|
|
.card { background: var(--gmao-card-bg); border-color: var(--gmao-card-border); border-radius: var(--gmao-radius); box-shadow: var(--gmao-shadow); transition: var(--gmao-transition); }
|
|
.card:hover { box-shadow: var(--gmao-shadow-hover); }
|
|
.stat-card { transition: transform var(--gmao-transition); border-radius: var(--gmao-radius); }
|
|
.stat-card:hover { transform: translateY(-3px); }
|
|
.bg-purple { background-color: var(--gmao-purple) !important; }
|
|
|
|
/* ── Tables responsive ── */
|
|
.table-responsive-stack { width: 100%; }
|
|
@media (max-width: 767px) {
|
|
.table-responsive-stack thead { display: none; }
|
|
.table-responsive-stack tbody tr {
|
|
display: block; margin-bottom: 0.75rem;
|
|
border: 1px solid var(--gmao-card-border); border-radius: var(--gmao-radius-sm);
|
|
padding: 0.75rem; background: var(--gmao-card-bg);
|
|
}
|
|
.table-responsive-stack tbody td {
|
|
display: flex; justify-content: space-between; align-items: flex-start;
|
|
padding: 0.3rem 0; border: none; text-align: right;
|
|
}
|
|
.table-responsive-stack tbody td::before {
|
|
content: attr(data-label); font-weight: 600; text-align: left;
|
|
padding-right: 1rem; flex-shrink: 0;
|
|
}
|
|
.table-responsive-stack tbody td:last-child { border-bottom: none; }
|
|
}
|
|
|
|
/* ── Filtres sur mobile ── */
|
|
.filter-bar .row > div { margin-bottom: 0.5rem; }
|
|
|
|
/* ── Workflow bar ── */
|
|
.workflow-step { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
|
|
@media (max-width: 767px) {
|
|
.workflow-steps { flex-wrap: wrap; gap: 0.3rem; }
|
|
.workflow-step { font-size: 0.7rem; }
|
|
}
|
|
|
|
/* ── Planning cards ── */
|
|
.planning-section .badge { font-size: 0.75rem; }
|
|
|
|
/* ── Composants reutilisables ── */
|
|
|
|
/* Badge de statut */
|
|
.status-badge { font-size: 0.75rem; padding: 0.35rem 0.6rem; border-radius: 1rem; font-weight: 500; }
|
|
.status-badge-ok { background: rgba(25,135,84,0.15); color: var(--gmao-success); }
|
|
.status-badge-warn { background: rgba(255,193,7,0.15); color: #b8860b; }
|
|
.status-badge-err { background: rgba(220,53,69,0.15); color: var(--gmao-danger); }
|
|
|
|
/* Spinner inline */
|
|
.gmao-spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gmao-spin 0.6s linear infinite; display: inline-block; }
|
|
@keyframes gmao-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* Toast container */
|
|
#gmao-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 9999; max-width: 400px; }
|
|
.gmao-toast { background: var(--gmao-card-bg); border: 1px solid var(--gmao-card-border); border-radius: var(--gmao-radius-sm); box-shadow: var(--gmao-shadow); padding: 1rem; margin-bottom: 0.5rem; animation: gmao-slide-in 0.3s ease; }
|
|
@keyframes gmao-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
|
|
|
/* Empty state */
|
|
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gmao-text-muted); }
|
|
.empty-state i { font-size: 3rem; opacity: 0.4; }
|
|
|
|
/* Page header */
|
|
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem; }
|
|
.page-header h1, .page-header .h3 { margin: 0; }
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb { margin-bottom: 1rem; }
|
|
|
|
/* Theme toggle button */
|
|
.theme-toggle { cursor: pointer; border: none; background: transparent; color: rgba(255,255,255,0.8); font-size: 1.2rem; padding: 0.25rem 0.5rem; }
|
|
.theme-toggle:hover { color: white; } |