diff --git a/poker-paf/config.css b/poker-paf/config.css index eb5b1eb..eef1563 100644 --- a/poker-paf/config.css +++ b/poker-paf/config.css @@ -150,3 +150,85 @@ input[type="submit"]:hover { transform: translateX(-5px); /* Petit effet de glissement vers la gauche */ } + + +/* --- Mode Mobile ---*/ +/* --- ADAPTATION MOBILE POUR LA CONFIGURATION --- */ +@media (max-width: 600px) { + + body { + padding: 10px; /* On réduit la marge extérieure */ + align-items: flex-start; /* On aligne en haut pour que le scroll soit naturel */ + } + + .container { + padding: 20px; /* On réduit le padding interne (30px 50px -> 20px) */ + border-width: 8px; /* Bordure bois plus fine */ + border-radius: 30px; /* Moins arrondi pour gagner de la place */ + width: 100%; + box-sizing: border-box; + } + + h1 { + font-size: 1.4rem; + margin-bottom: 20px; + } + + /* Le bouton "Retour" */ + .btn-back { + position: relative; /* On le sort de l'absolute pour qu'il ne chevauche pas le titre */ + top: 0; + left: 0; + display: block; + margin-bottom: 15px; + width: auto; + } + + /* 1. Ligne joueur : Le plus important ! */ + .player-row { + flex-direction: column; /* On empile Nom et Poubelle verticalement */ + align-items: stretch; + background: rgba(0,0,0,0.1); + padding: 10px; + border-radius: 8px; + border: 1px solid rgba(212, 175, 55, 0.3); + } + + .player-row input { + width: 100%; /* Le champ de nom prend toute la largeur */ + } + + .player-row button { + width: 100%; /* Le bouton supprimer devient une large barre rouge */ + padding: 12px; + margin-top: 5px; + } + + /* 2. Inputs plus gros pour le tactile */ + input[type="number"], + input[type="text"] { + padding: 15px; + font-size: 1.1rem; /* Évite le zoom auto sur iPhone */ + } + + /* 3. Boutons d'action */ + button[type="button"] { + width: 100%; /* "Ajouter un joueur" prend toute la largeur */ + padding: 15px; + font-size: 1rem; + } + + input[type="submit"] { + padding: 18px; + font-size: 1.1rem; + border-radius: 15px; /* Un peu moins arrondi pour le look mobile */ + } + + /* Infos de mise (les petits labels gris) */ + label.info { + margin-left: 0; + margin-top: -15px; + margin-bottom: 15px; + display: block; + } +} \ No newline at end of file diff --git a/poker-paf/index.css b/poker-paf/index.css index 6b8a9d5..1efac06 100644 --- a/poker-paf/index.css +++ b/poker-paf/index.css @@ -116,4 +116,67 @@ li { display: flex; justify-content: space-between; align-items: center; +} + + + +/* --- Mode Mobile --- */ +/* --- ADAPTATION MOBILE POUR L'ACCUEIL --- */ +@media (max-width: 600px) { + + body { + /* On permet le scroll si le contenu est plus haut que l'écran */ + height: auto; + padding: 20px 0; + } + + .welcome-container { + /* On réduit les bordures massives et le padding */ + padding: 30px 20px; + border-width: 8px; /* Bordure en bois moins épaisse */ + border-radius: 40px; /* Moins arrondi pour gagner de la place */ + width: 85%; + } + + h1 { + font-size: 1.6rem; /* Titre plus petit */ + margin-bottom: 30px; + } + + /* Le bouton principal doit être bien large pour le pouce */ + .btn-start { + width: 100%; + box-sizing: border-box; /* Pour que le padding n'agrandisse pas la largeur */ + padding: 18px 20px; + font-size: 1.1rem; + } + + /* Section rejoindre */ + input[type="text"] { + width: 100%; /* L'input prend toute la largeur */ + box-sizing: border-box; + padding: 15px; + font-size: 1.1rem; /* Évite le zoom auto de l'iPhone sur les inputs */ + } + + button { + width: 100%; /* Les boutons de validation passent en pleine largeur */ + padding: 15px; + margin-top: 10px; + } + + /* Pour la liste des parties */ + li { + flex-direction: column; /* On empile le nom et le bouton */ + gap: 10px; + background: rgba(0,0,0,0.2); + padding: 15px; + border-radius: 10px; + margin-bottom: 15px; + } + + .btn-join-list { + width: 100%; + text-align: center; + } } \ No newline at end of file