Parenthèse

Galaxie familiale : personnes, unions et filiations, photos, vidéos et voix sur chaque personne,
partage par lien avec consultation sans compte et contributions validées par le propriétaire.
Auto-hébergeable avec Docker. Licence PolyForm Noncommercial 1.0.0.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/components/annotations/SizeOptions.css

@@ -0,0 +1,71 @@
+.size-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.size-options__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.size-options__label {
+  font-size: 14px;
+  font-weight: 450;
+  color: #8B7355;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.size-options__value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #A67C52;
+  min-width: 28px;
+  text-align: right;
+}
+
+.size-options__slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background: linear-gradient(
+    to right,
+    #A67C52 0%,
+    #A67C52 var(--slider-progress, 50%),
+    rgba(166, 124, 82, 0.2) var(--slider-progress, 50%),
+    rgba(166, 124, 82, 0.2) 100%
+  );
+  outline: none;
+  cursor: pointer;
+  border: none;
+}
+
+.size-options__slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #A67C52;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(166, 124, 82, 0.4);
+  transition: transform 0.1s ease;
+}
+
+.size-options__slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.size-options__slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #A67C52;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 1px 4px rgba(166, 124, 82, 0.4);
+}