Tracking de l'application VApp (IHM du jeu)

VApp/node_modules/vuetify/lib/components/VSlider/VSliderThumb.sass

@@ -0,0 +1,154 @@
+@use 'sass:map'
+@use 'sass:selector'
+@use 'sass:math'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+// Theme
+.v-slider-thumb
+  touch-action: none
+  color: rgb(var(--v-theme-surface-variant))
+
+  .v-input--error:not(.v-input--disabled) &
+    color: inherit
+
+.v-slider-thumb__label
+  background: rgba(var(--v-theme-surface-variant), .7)
+  color: rgb(var(--v-theme-on-surface-variant))
+
+  &::before
+    color: rgba(var(--v-theme-surface-variant), .7)
+
+// Block
+.v-slider-thumb
+  outline: none
+  position: absolute
+  transition: $slider-transition
+
+.v-slider-thumb__surface
+  cursor: pointer
+  width: var(--v-slider-thumb-size)
+  height: var(--v-slider-thumb-size)
+  border-radius: $slider-thumb-border-radius
+  user-select: none
+  background-color: currentColor
+
+  &::before
+    transition: 0.3s settings.$standard-easing
+    content: ''
+    color: inherit
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    border-radius: $slider-thumb-border-radius
+    background: currentColor
+    position: absolute
+    pointer-events: none
+    opacity: 0
+
+  &::after
+    content: ''
+    width: $slider-thumb-touch-size
+    height: $slider-thumb-touch-size
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
+.v-slider-thumb__label-container
+  position: absolute
+  transition: $slider-thumb-label-transition
+
+.v-slider-thumb__label
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: $slider-thumb-label-font-size
+  min-width: $slider-thumb-label-min-width
+  height: $slider-thumb-label-height
+  border-radius: $slider-thumb-label-border-radius
+  padding: $slider-thumb-label-padding
+  position: absolute
+  user-select: none
+  transition: $slider-thumb-label-transition
+
+  &::before
+    content: ''
+    width: 0
+    height: 0
+    position: absolute
+
+.v-slider-thumb__ripple
+  position: absolute
+  left: calc(var(--v-slider-thumb-size) / -2)
+  top: calc(var(--v-slider-thumb-size) / -2)
+  width: calc(var(--v-slider-thumb-size) * 2)
+  height: calc(var(--v-slider-thumb-size) * 2)
+  background: inherit
+
+// Horizontal
+.v-slider.v-input--horizontal
+  .v-slider-thumb
+    top: 50%
+    transform: translateY(-50%)
+    inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
+
+  .v-slider-thumb__label-container
+    left: calc(var(--v-slider-thumb-size) / 2)
+    top: 0
+
+  .v-slider-thumb__label
+    bottom: $slider-thumb-label-offset
+
+    +tools.ltr()
+      transform: translateX(-50%)
+    +tools.rtl()
+      transform: translateX(50%)
+
+    &::before
+      border-left: $slider-thumb-label-wedge-size solid transparent
+      border-right: $slider-thumb-label-wedge-size solid transparent
+      border-top: $slider-thumb-label-wedge-size solid currentColor
+      bottom: -$slider-thumb-label-wedge-size
+
+// Vertical
+.v-slider.v-input--vertical
+  .v-slider-thumb
+    top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
+
+  .v-slider-thumb__label-container
+    top: calc(var(--v-slider-thumb-size) / 2)
+    right: 0
+
+  .v-slider-thumb__label
+    top: math.div($slider-thumb-label-height, -2)
+    left: $slider-thumb-label-offset
+
+    &::before
+      border-right: $slider-thumb-label-wedge-size solid currentColor
+      border-top: $slider-thumb-label-wedge-size solid transparent
+      border-bottom: $slider-thumb-label-wedge-size solid transparent
+      left: -$slider-thumb-label-wedge-size
+
+// Modifiers
+.v-slider-thumb--focused
+  .v-slider-thumb__surface::before
+    transform: scale(2)
+    opacity: $slider-thumb-focus-opacity
+
+.v-slider-thumb--pressed
+  transition: none
+
+  .v-slider-thumb__surface::before
+    opacity: $slider-thumb-pressed-opacity
+
+@media (hover: hover)
+  .v-slider-thumb:hover
+    .v-slider-thumb__surface::before
+      transform: scale(2)
+
+  .v-slider-thumb:hover:not(.v-slider-thumb--focused)
+    .v-slider-thumb__surface::before
+      opacity: $slider-thumb-hover-opacity