documentation
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
/* ============================================================
|
||||
doc_calibration.css
|
||||
Styles spécifiques à la page de calibration du scanner.
|
||||
Dépend de doc_database.css (variables, composants de base).
|
||||
============================================================ */
|
||||
|
||||
/* ─── Badge teal ─── */
|
||||
.badge-teal {
|
||||
background: rgba(45,212,191,.12);
|
||||
color: var(--accent-teal);
|
||||
border: 1px solid rgba(45,212,191,.3);
|
||||
}
|
||||
|
||||
/* ─── Badge blue ─── */
|
||||
.badge-blue {
|
||||
background: rgba(88,166,255,.12);
|
||||
color: var(--accent-blue);
|
||||
border: 1px solid rgba(88,166,255,.3);
|
||||
}
|
||||
|
||||
/* ─── Tag teal ─── */
|
||||
.tag-teal {
|
||||
background: rgba(45,212,191,.12);
|
||||
color: var(--accent-teal);
|
||||
border: 1px solid rgba(45,212,191,.2);
|
||||
}
|
||||
|
||||
/* ─── Schéma des 3 zones de l'écran ─── */
|
||||
.screen-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.screen-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 20px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--border);
|
||||
transition: background .15s;
|
||||
}
|
||||
.screen-zone:last-child { border-right: none; }
|
||||
.screen-zone i { font-size: 20px; }
|
||||
|
||||
.zone-left { color: var(--accent-indigo); }
|
||||
.zone-left i { color: var(--accent-indigo); }
|
||||
.zone-center {
|
||||
background: rgba(45,212,191,.04);
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
.zone-center i { font-size: 26px; color: var(--accent-teal); }
|
||||
.zone-right { color: var(--accent-orange); }
|
||||
.zone-right i { color: var(--accent-orange); }
|
||||
|
||||
/* ─── Barre visuelle des seuils de centrage ─── */
|
||||
.center-bar {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
height: 28px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cb-seg {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.cb-red { background: rgba(248,81,73,.18); color: var(--accent-red); border: 1px solid rgba(248,81,73,.3); }
|
||||
.cb-yellow { background: rgba(227,179,65,.18); color: var(--accent-yellow); border: 1px solid rgba(227,179,65,.3); }
|
||||
.cb-green { background: rgba(63,185,80,.18); color: var(--accent-green); border: 1px solid rgba(63,185,80,.3); }
|
||||
|
||||
/* ─── Responsive ─── */
|
||||
@media (max-width: 768px) {
|
||||
.screen-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.screen-zone {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 14px;
|
||||
}
|
||||
.screen-zone:last-child { border-bottom: none; }
|
||||
}
|
||||
@@ -40,8 +40,10 @@
|
||||
|
||||
/* ─── Reset minimal ─── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
a { color: var(--accent-blue); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
/*a:hover { text-decoration: underline; }*/
|
||||
|
||||
ul { padding: 0; margin: 0; list-style: none; }
|
||||
|
||||
/* ─── Mise en page principale ─── */
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
/* ============================================================
|
||||
doc_experiments.css
|
||||
Styles spécifiques à la page "Démarrer des expériences".
|
||||
Dépend de doc_database.css + doc_calibration.css.
|
||||
============================================================ */
|
||||
|
||||
/* ─── Badges supplémentaires ─── */
|
||||
.badge-green {
|
||||
background: rgba(63,185,80,.12);
|
||||
color: var(--accent-green);
|
||||
border: 1px solid rgba(63,185,80,.3);
|
||||
}
|
||||
.badge-purple {
|
||||
background: rgba(188,140,255,.12);
|
||||
color: var(--accent-purple);
|
||||
border: 1px solid rgba(188,140,255,.3);
|
||||
}
|
||||
.badge-orange {
|
||||
background: rgba(240,136,62,.12);
|
||||
color: var(--accent-orange);
|
||||
border: 1px solid rgba(240,136,62,.3);
|
||||
}
|
||||
|
||||
/* ─── Tags supplémentaires ─── */
|
||||
.tag-purple {
|
||||
background: rgba(188,140,255,.12);
|
||||
color: var(--accent-purple);
|
||||
border: 1px solid rgba(188,140,255,.2);
|
||||
}
|
||||
.tag-yellow {
|
||||
background: rgba(227,179,65,.12);
|
||||
color: var(--accent-yellow);
|
||||
border: 1px solid rgba(227,179,65,.2);
|
||||
}
|
||||
|
||||
/* ─── Étapes numérotées ─── */
|
||||
ol.doc-steps {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 8px 0 0;
|
||||
counter-reset: step-counter;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
ol.doc-steps li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
counter-increment: step-counter;
|
||||
padding: 6px 8px;
|
||||
background: rgba(255,255,255,.02);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
transition: background .12s;
|
||||
}
|
||||
ol.doc-steps li:hover {
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
ol.doc-steps li::before {
|
||||
content: counter(step-counter);
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(88,166,255,.15);
|
||||
color: var(--accent-blue);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
ol.doc-steps li i {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Alert info (bleu, non critique) ─── */
|
||||
.alert-box.alert-info {
|
||||
background: rgba(88,166,255,.08);
|
||||
border-color: rgba(88,166,255,.25);
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
/* ─── Titre de groupe de métriques ─── */
|
||||
.metrics-group-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 16px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
.metrics-group-title i {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ─── Cartes métriques : padding réduit ─── */
|
||||
.metrics-card {
|
||||
min-width: 180px;
|
||||
}
|
||||
.metrics-card .card-body h4 {
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ─── Tags métriques : inline compact ─── */
|
||||
.metric-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.metric-tags .tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/* ============================================================
|
||||
doc_results.css
|
||||
Styles spécifiques à la page "Exploiter les résultats".
|
||||
Dépend de doc_database.css + doc_calibration.css
|
||||
+ doc_experiments.css
|
||||
+ doc_scanning.css.
|
||||
============================================================ */
|
||||
|
||||
/* ─── Bloc chemin serveur ─── */
|
||||
.path-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(45,212,191,.06);
|
||||
border: 1px solid rgba(45,212,191,.2);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
.path-block i {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.path-block code {
|
||||
color: var(--accent-teal);
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
letter-spacing: .03em;
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/* ============================================================
|
||||
doc_scanning.css
|
||||
Styles spécifiques à la page "Balayage des puits".
|
||||
Dépend de doc_database.css + doc_calibration.css
|
||||
+ doc_experiments.css.
|
||||
============================================================ */
|
||||
|
||||
/* ─── Badge indigo ─── */
|
||||
.badge-indigo {
|
||||
background: rgba(129,140,248,.12);
|
||||
color: var(--accent-indigo);
|
||||
border: 1px solid rgba(129,140,248,.3);
|
||||
}
|
||||
|
||||
/* ─── Badge red ─── */
|
||||
.badge-red {
|
||||
background: rgba(248,81,73,.12);
|
||||
color: var(--accent-red);
|
||||
border: 1px solid rgba(248,81,73,.3);
|
||||
}
|
||||
|
||||
/* ─── Badge superadmin ─── */
|
||||
.badge-superadmin {
|
||||
font-size: 10px;
|
||||
background: rgba(188,140,255,.15);
|
||||
color: var(--accent-purple);
|
||||
border: 1px solid rgba(188,140,255,.3);
|
||||
padding: 1px 8px;
|
||||
border-radius: 20px;
|
||||
margin-left: 6px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ─── Exemple UUID ─── */
|
||||
.uuid-example {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(227,179,65,.06);
|
||||
border: 1px dashed rgba(227,179,65,.25);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--accent-yellow);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.uuid-example code {
|
||||
color: var(--accent-yellow);
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
Reference in New Issue
Block a user