fix: saisie de durée compatible Firefox (sync design)Unverified
Input minutes en type=text + inputmode=numeric + pattern=[0-9]* (les spinners Firefox ignoraient -moz-appearance), boutons −/+ du stepper sur fond crème avec icône accent-700. La validation serveur (1..=1440) reste inchangée.
b161f6f parent: 2dd9b43 modified
assets/style.css +2 -2 | @@ -190,8 +190,8 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; } | ||
| 190 | 190 | .stepper-btn { |
| 191 | 191 | width: 40px; height: 40px; flex: none; |
| 192 | 192 | display: flex; align-items: center; justify-content: center; |
| 193 | - border: none; border-radius: 999px; background: transparent; | |
| 194 | - color: var(--color-text); cursor: pointer; text-decoration: none; | |
| 193 | + border: none; border-radius: 999px; background: var(--color-bg); | |
| 194 | + color: var(--color-accent-700); cursor: pointer; text-decoration: none; | |
| 195 | 195 | } |
| 196 | 196 | .stepper-btn:hover { background: var(--color-accent-200); } |
| 197 | 197 | .stepper-btn:active { background: var(--color-accent-300); } |
| @@ -190,8 +190,8 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; } | |||
| 190 | .stepper-btn { | 190 | .stepper-btn { |
| 191 | width: 40px; height: 40px; flex: none; | 191 | width: 40px; height: 40px; flex: none; |
| 192 | display: flex; align-items: center; justify-content: center; | 192 | display: flex; align-items: center; justify-content: center; |
| 193 | - border: none; border-radius: 999px; background: transparent; | 193 | + border: none; border-radius: 999px; background: var(--color-bg); |
| 194 | - color: var(--color-text); cursor: pointer; text-decoration: none; | 194 | + color: var(--color-accent-700); cursor: pointer; text-decoration: none; |
| 195 | } | 195 | } |
| 196 | .stepper-btn:hover { background: var(--color-accent-200); } | 196 | .stepper-btn:hover { background: var(--color-accent-200); } |
| 197 | .stepper-btn:active { background: var(--color-accent-300); } | 197 | .stepper-btn:active { background: var(--color-accent-300); } |
modified
templates/add_step2.html +2 -2 | @@ -16,8 +16,8 @@ | ||
| 16 | 16 | <a class="stepper-btn" href="{{ minus_href }}" aria-label="Cinq minutes de moins"> |
| 17 | 17 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M5 12h14"></path></svg> |
| 18 | 18 | </a> |
| 19 | - <input class="input minutes-input" name="minutes" type="number" inputmode="numeric" | |
| 20 | - min="1" max="1440" step="5" required value="{{ minutes }}"> | |
| 19 | + <input class="input minutes-input" name="minutes" type="text" inputmode="numeric" | |
| 20 | + pattern="[0-9]*" required value="{{ minutes }}"> | |
| 21 | 21 | <a class="stepper-btn" href="{{ plus_href }}" aria-label="Cinq minutes de plus"> |
| 22 | 22 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg> |
| 23 | 23 | </a> |
| @@ -16,8 +16,8 @@ | |||
| 16 | <a class="stepper-btn" href="{{ minus_href }}" aria-label="Cinq minutes de moins"> | 16 | <a class="stepper-btn" href="{{ minus_href }}" aria-label="Cinq minutes de moins"> |
| 17 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M5 12h14"></path></svg> | 17 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M5 12h14"></path></svg> |
| 18 | </a> | 18 | </a> |
| 19 | - <input class="input minutes-input" name="minutes" type="number" inputmode="numeric" | 19 | + <input class="input minutes-input" name="minutes" type="text" inputmode="numeric" |
| 20 | - min="1" max="1440" step="5" required value="{{ minutes }}"> | 20 | + pattern="[0-9]*" required value="{{ minutes }}"> |
| 21 | <a class="stepper-btn" href="{{ plus_href }}" aria-label="Cinq minutes de plus"> | 21 | <a class="stepper-btn" href="{{ plus_href }}" aria-label="Cinq minutes de plus"> |
| 22 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg> | 22 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg> |
| 23 | </a> | 23 | </a> |