Étape 3 : CSS - Le Style “Dark Sport”

Nous partons sur un style noir profond avec des accents rouges et gris métalliques. Le texte sera de type “LED Rouge” ou “Quartz Blanc” selon votre goût. On part sur du Blanc pur pour le temps principal et Rouge pour les contrôles, très lisible.

Ouvrez style.css.

1. Variables & Reset

:root {
    --bg-color: #121212; /* Noir presque pur */
    --container-bg: #1e1e1e; /* Gris foncé */
    --text-primary: #ffffff;
    --text-secondary: #ff3b30; /* Rouge Sport */
    --btn-start: #30d158; /* Vert Start */
    --btn-stop: #ff453a; /* Rouge Stop */
    --btn-plain: #3a3a3c; /* Gris boutons inactifs */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace; /* Notre police digitale */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

2. Le Cadran (Container)

.container {
    width: 350px;
    text-align: center;
}

.timer-display {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.milliseconds {
    font-size: 1.5rem;
    color: var(--text-secondary); /* Le petit accent rouge */
}

3. Les Contrôles (Boutons ronds)

On va faire des boutons ronds comme sur un vrai chrono physique.

.controls {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 30px;
}

.btn {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Cercle parfait */
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    background-color: var(--btn-plain);
}

/* Bordure interne pour faire illusion de bouton physique */
.btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}

/* États spécifiques */
.btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn.start {
    background-color: rgba(48, 209, 88, 0.2); /* Fond vert transparent */
    color: var(--btn-start); /* Texte vert */
    border-color: var(--btn-start);
}

.btn.stop {
    background-color: rgba(255, 69, 58, 0.2);
    color: var(--btn-stop);
    border-color: var(--btn-stop);
}

.btn.lap,
.btn.reset {
    background: #333;
    border: 1px solid #555;
    color: #ccc;
}

4. La Liste des tours

.laps {
    list-style: none;
    max-height: 250px;
    overflow-y: auto; /* Scroll si trop de tours */
    border-top: 1px solid #333;
    padding-top: 20px;
}

.lap-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #222;
    color: #888;
}

.lap-item span:last-child {
    color: white; /* Le temps du tour en blanc */
}

.lap-item .Fastest {
    color: var(--btn-start);
}
.lap-item .Slowest {
    color: var(--btn-stop);
}

Résultat : Une interface très propre, sombre, prête pour la course.