documentation

test_tube_scanner/home/static/css/doc_calibration.css

@@ -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; }
+}