420 lines
11 KiB
CSS
420 lines
11 KiB
CSS
/* ── Fonts (self-hosted) ─────────────────────────────────────────────────── */
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 100 900; /* variable font : toutes les graisses dans un fichier */
|
|
font-display: swap;
|
|
src: url("/fonts/InterVariable.woff2") format("woff2-variations"),
|
|
url("/fonts/InterVariable.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
|
|
}
|
|
|
|
/* Override Radix Themes default font + smoothing global */
|
|
:root,
|
|
.radix-themes {
|
|
--default-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
--heading-font-family: "Inter", system-ui, sans-serif;
|
|
--code-font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
|
|
Consolas, monospace;
|
|
--strong-font-family: var(--default-font-family);
|
|
--quote-font-family: var(--default-font-family);
|
|
}
|
|
|
|
/* ── Brand tokens (thèmes utilisateur) ───────────────────────────────────────
|
|
Tokens utilisés par l'app pour les couleurs de marque. Chaque thème surcharge
|
|
ces variables via [data-theme="..."] sur <body>.
|
|
Les couleurs sémantiques des notes (rouge<4 / orange<5 / vert>=5) restent
|
|
hardcodées dans fiche.py / classe.py et NE doivent PAS utiliser ces tokens. */
|
|
:root {
|
|
--brand-primary: #dc000e; /* EPTM red, theme-color meta */
|
|
--brand-primary-dark: #c62828; /* KPI rouges, sidebar active */
|
|
--brand-primary-tint: rgba(220, 0, 14, 0.18); /* sidebar active bg */
|
|
--brand-primary-light: #ff4a54; /* sidebar active text */
|
|
--brand-accent: #1565c0; /* liens, infos, sélection */
|
|
--brand-accent-soft: #e3f2fd; /* fond pâle pour bannières d'info */
|
|
}
|
|
|
|
[data-theme="bleu"] {
|
|
--brand-primary: #1565c0;
|
|
--brand-primary-dark: #0d47a1;
|
|
--brand-primary-tint: rgba(21, 101, 192, 0.18);
|
|
--brand-primary-light: #42a5f5;
|
|
--brand-accent: #1976d2;
|
|
--brand-accent-soft: #e3f2fd;
|
|
}
|
|
|
|
[data-theme="indigo"] {
|
|
--brand-primary: #3f51b5;
|
|
--brand-primary-dark: #283593;
|
|
--brand-primary-tint: rgba(63, 81, 181, 0.18);
|
|
--brand-primary-light: #7986cb;
|
|
--brand-accent: #5c6bc0;
|
|
--brand-accent-soft: #e8eaf6;
|
|
}
|
|
|
|
[data-theme="vert"] {
|
|
--brand-primary: #2e7d32;
|
|
--brand-primary-dark: #1b5e20;
|
|
--brand-primary-tint: rgba(46, 125, 50, 0.18);
|
|
--brand-primary-light: #66bb6a;
|
|
--brand-accent: #00695c;
|
|
--brand-accent-soft: #e8f5e9;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--default-font-family);
|
|
/* Activations Inter : cv11 = 1 sans empattement, ss01 = a/g modernes,
|
|
cv02 = G plus carré. Affiche un rendu plus net en UI. */
|
|
font-feature-settings: "cv11", "ss01", "cv02";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* Chiffres à largeur fixe (tabular nums) — KPI, tables de notes/absences,
|
|
* timestamps de logs. Aligne verticalement même en mélangeant 1 et 8. */
|
|
.tabular,
|
|
.log-content,
|
|
.log-ts,
|
|
.doc-content table td,
|
|
.doc-content table th {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Tighten letter-spacing on headings — Inter looks crisper this way. */
|
|
h1, h2, h3, h4, h5, h6,
|
|
.rt-Heading {
|
|
letter-spacing: -0.011em;
|
|
font-feature-settings: "cv11", "ss01", "ss03";
|
|
}
|
|
|
|
/* ── Reset default margins and padding ───────────────────────────────────── */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body, html {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#root, #__next {
|
|
height: 100%;
|
|
}
|
|
|
|
/* App shell: viewport-bounded with internal scroll on content */
|
|
.content-area {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Desktop: réserve la largeur de la sidebar (240px ou 68px collapsed) */
|
|
@media (min-width: 768px) {
|
|
.content-area {
|
|
margin-left: 240px;
|
|
width: calc(100% - 240px);
|
|
max-width: calc(100% - 240px);
|
|
}
|
|
.content-area.sidebar-collapsed {
|
|
margin-left: 68px;
|
|
width: calc(100% - 68px);
|
|
max-width: calc(100% - 68px);
|
|
}
|
|
}
|
|
|
|
/* Allow flex/grid descendants to shrink below their content size,
|
|
* preventing horizontal overflow from long text or wide tables.
|
|
* Inline `min-width` styles still win (higher specificity). */
|
|
.content-area * {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Tables : restaurer le layout natif (sinon les cellules collapsent à
|
|
* 0 et le texte casse caractère par caractère sur mobile). Les tables
|
|
* sont enveloppées dans un div overflow-x:auto pour le scroll horizontal. */
|
|
.content-area table,
|
|
.content-area thead,
|
|
.content-area tbody,
|
|
.content-area tr,
|
|
.content-area td,
|
|
.content-area th {
|
|
min-width: auto;
|
|
overflow-wrap: normal;
|
|
word-break: normal;
|
|
}
|
|
|
|
/* Mobile: hide desktop sidebar, account for fixed topbar (56px) */
|
|
@media (max-width: 767px) {
|
|
.sidebar-desktop { display: none !important; }
|
|
.content-area {
|
|
margin-left: 0 !important;
|
|
width: 100% !important;
|
|
padding-top: calc(56px + 0.75rem) !important;
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 0.75rem !important;
|
|
padding-bottom: 0.75rem !important;
|
|
}
|
|
/* Tuiles d'avis de sanction : plein écran sur mobile */
|
|
.sanction-tile {
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
flex: 1 1 100% !important;
|
|
}
|
|
}
|
|
|
|
/* Tablet */
|
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
.content-area {
|
|
padding: 1rem !important;
|
|
}
|
|
}
|
|
|
|
/* Desktop: hide mobile topbar */
|
|
@media (min-width: 768px) {
|
|
.topbar-mobile { display: none !important; }
|
|
}
|
|
|
|
/* Ensure responsive images and content */
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Ensure flex containers wrap properly */
|
|
.content-area > * {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* ── Animations ─────────────────────────────────────────────────────────── */
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from { opacity: 0; transform: translateY(-8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.96); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.anim-fade {
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
.anim-slide-down {
|
|
animation: slideDown 0.22s ease-out;
|
|
}
|
|
|
|
.anim-slide-up {
|
|
animation: slideUp 0.22s ease-out;
|
|
}
|
|
|
|
.anim-scale-in {
|
|
animation: scaleIn 0.18s ease-out;
|
|
}
|
|
|
|
/* ── Interactive hover lift ─────────────────────────────────────────────── */
|
|
|
|
.hover-lift {
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
.hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.55; }
|
|
}
|
|
|
|
.anim-pulse {
|
|
animation: pulse 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
/* Subtle press effect on cards/buttons */
|
|
.hover-press {
|
|
transition: transform 0.12s ease, background-color 0.15s ease;
|
|
}
|
|
.hover-press:hover {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
.hover-press:active {
|
|
transform: scale(0.985);
|
|
}
|
|
|
|
/* Smooth transition default for buttons and cards */
|
|
.smooth-transition {
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
/* ── Logs viewer (page /logs) ──────────────────────────────────────────── */
|
|
|
|
.log-content {
|
|
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 0.78rem;
|
|
line-height: 1.55;
|
|
color: #cbd5e1;
|
|
}
|
|
.log-line {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
padding: 1px 0;
|
|
}
|
|
.log-line.log-blank { height: 0.4rem; }
|
|
.log-ts { color: #64748b; font-weight: 500; margin-right: 0.15rem; }
|
|
.log-indent { padding-left: 1rem; opacity: 0.85; }
|
|
|
|
.log-info { color: #cbd5e1; }
|
|
.log-debug { color: #94a3b8; opacity: 0.85; }
|
|
.log-success { color: #4ade80; }
|
|
.log-warn { color: #fbbf24; }
|
|
.log-error { color: #f87171; font-weight: 500; }
|
|
|
|
.log-prefix {
|
|
display: inline-block;
|
|
padding: 0 0.25rem;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
font-size: 0.92em;
|
|
margin-right: 0.25rem;
|
|
}
|
|
.log-prefix.prefix-default { background: #334155; color: #cbd5e1; }
|
|
.log-prefix.prefix-abs { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
|
|
.log-prefix.prefix-sync { background: rgba(6, 182, 212, 0.16); color: #67e8f9; }
|
|
.log-prefix.prefix-push { background: rgba(192, 132, 252, 0.16); color: #d8b4fe; }
|
|
.log-prefix.prefix-cron { background: rgba(250, 204, 21, 0.16); color: #fde047; }
|
|
|
|
/* ── Documentation rendered markdown ───────────────────────────────────── */
|
|
|
|
.doc-content { line-height: 1.65; color: #1f2937; }
|
|
.doc-content h2 {
|
|
font-size: 1.4rem;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #1e293b;
|
|
font-weight: 700;
|
|
}
|
|
.doc-content h3 {
|
|
font-size: 1.15rem;
|
|
margin-top: 1.2rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #334155;
|
|
font-weight: 600;
|
|
}
|
|
.doc-content p { margin: 0 0 0.75rem 0; }
|
|
.doc-content ul, .doc-content ol {
|
|
padding-left: 1.5rem;
|
|
margin: 0 0 0.75rem 0;
|
|
}
|
|
.doc-content li { margin-bottom: 0.25rem; }
|
|
.doc-content code {
|
|
background-color: var(--gray-3);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
font-size: 0.88em;
|
|
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
.doc-content pre {
|
|
background-color: #1e293b;
|
|
color: #e2e8f0;
|
|
padding: 0.85rem 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
font-size: 0.85em;
|
|
margin: 0.75rem 0;
|
|
line-height: 1.5;
|
|
}
|
|
.doc-content pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
.doc-content table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 0.75rem 0;
|
|
font-size: 0.93em;
|
|
}
|
|
.doc-content th, .doc-content td {
|
|
border: 1px solid var(--gray-6);
|
|
padding: 0.4rem 0.75rem;
|
|
text-align: left;
|
|
}
|
|
.doc-content th {
|
|
background-color: var(--gray-3);
|
|
font-weight: 600;
|
|
}
|
|
.doc-content blockquote {
|
|
border-left: 3px solid var(--red-7);
|
|
padding: 0.25rem 0.75rem;
|
|
color: var(--gray-11);
|
|
margin: 0.75rem 0;
|
|
background-color: var(--gray-2);
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
.doc-content a {
|
|
color: var(--red-11);
|
|
text-decoration: none;
|
|
}
|
|
.doc-content a:hover { text-decoration: underline; }
|
|
.doc-content hr {
|
|
border: none;
|
|
border-top: 1px solid var(--gray-5);
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
/* Respect users who prefer reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.anim-fade,
|
|
.anim-slide-down,
|
|
.anim-slide-up,
|
|
.anim-scale-in {
|
|
animation: none;
|
|
}
|
|
.hover-lift,
|
|
.hover-press,
|
|
.smooth-transition {
|
|
transition: none;
|
|
}
|
|
.anim-pulse {
|
|
animation: none;
|
|
}
|
|
}
|