Initial V1

2024-06-15 16:09:50 +02:00
parent 01e33a3ff0
commit 6ab4e3f2df
50 changed files with 2128 additions and 0 deletions
--- a/V1/resources/css/components/compare.css
+++ b/V1/resources/css/components/compare.css
@@ -0,0 +1,112 @@
+.projet-compare-container {
+  display: grid;
+
+  > * {
+    grid-area: 1 / 1;
+  }
+
+  > .projet-compare-left,
+  .projet-compare-right {
+    display: grid;
+    place-content: center;
+  }
+
+  .projet-compare-left {
+    -webkit-mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
+    mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
+  }
+
+  .projet-compare-right {
+    -webkit-mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
+    mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
+  }
+
+  > input[type="range"] {
+    z-index: 1;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      inline-size: 4px;
+      block-size: 100%;
+      background-color: CanvasText;
+    }
+
+    &::-moz-range-thumb {
+      -moz-appearance: none;
+      appearance: none;
+      inline-size: 4px;
+      block-size: 100%;
+      background-color: CanvasText;
+    }
+  }
+
+  img {
+    max-block-size: 80dvh;
+    max-inline-size: 100%;
+  }
+}
+
+input[type="range"] {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 10px 0;
+  width: 100%;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 12.8px;
+  cursor: pointer;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  background: none;
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 20px;
+  width: 39px;
+  border-radius: 7px;
+  background: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -3.6px;
+}
+
+input[type="range"]:focus::-webkit-slider-runnable-track {
+  background: none;
+}
+
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 12.8px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  background: none;
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+
+input[type="range"]::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 20px;
+  width: 39px;
+  border-radius: 7px;
+  background: none;
+  cursor: pointer;
+}