tellement de trucs

2024-05-13 18:27:54 +02:00
parent 9cee590267
commit 83c3f1df0b
83 changed files with 1457 additions and 702 deletions
@@ -0,0 +1,140 @@
+input[type="range"] {
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    width: 100%;
+
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    background: url(../assets/images/ui/scotch.webp) no-repeat center;
+    background-size: 100% auto;
+    height: 0.4rem;
+    border: none;
+    box-shadow: 0px 0px 13px rgba(31, 26, 26, 0.979) inset;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+
+    appearance: none;
+    margin-top: -0.3rem;
+    /* Centers thumb on the track */
+    height: 1rem;
+    width: 1rem;
+    border: none;
+    border-radius: 50%;
+    background: url(/systems/vermine2047/assets/images/ui/totems/human.webp);
+    background-size: cover;
+    filter: contrast(2);
+    box-shadow: 0px 0px 10px black
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+    box-shadow: 0px 0px 10px yellow
+}
+
+select {
+    border: none;
+    background: url(../assets/images/ui/scotch.webp);
+    background-size: 100% 100%;
+    box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;
+
+    &[disabled] {
+        color: rgb(0, 0, 0);
+        text-shadow: 0px 0px 15px black;
+    }
+
+    option {
+        appearance: none;
+        border: none;
+        background: url(../assets/images/ui/scotch.webp);
+        background-size: 100% 100%;
+    }
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    box-shadow: 0px 0px 3px rgb(133, 133, 78);
+    cursor: pointer;
+    width: 1.5rem;
+    height: 1rem;
+    border-radius: 0.4rem;
+    transition: 0.3s;
+    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+    box-shadow: 0px 0px 6px black inset;
+    background-color: rgba(61, 11, 11, 0.658);
+
+    &[disabled="true"] {
+        filter: grayscale(1)
+    }
+
+    &:after {
+        content: " ";
+        background: url(/systems/vermine2047/assets/images/ui/totems/human.webp);
+        background-size: 50% 150%;
+        background-repeat: no-repeat;
+        position: relative;
+        top: 10%;
+        left: 0%;
+        width: 100%;
+        height: 80%;
+        display: block;
+        border-radius: 0%;
+        padding: 0;
+        transition: 0.3s;
+
+
+    }
+
+
+    &:checked {
+        background-color: rgba(26, 107, 12, 0.658);
+
+
+        &:after {
+            font-weight: 900;
+            background-color: rgba(26, 1, 1, 0);
+            left: 50%;
+
+
+
+        }
+    }
+}
+
+input[type="radio"] {
+
+    width: 1rem;
+    height: 1rem;
+
+    &:after {
+        width: 0.8rem;
+        background-size: 100% 100%;
+        top: 5%;
+        left: 5%;
+        width: 90%;
+        height: 90%;
+        background-size: 30% 30%;
+        background-position: center;
+
+    }
+
+    &:not([disabled]):hover::after {
+        background-size: 90% 90%;
+
+    }
+
+    &:checked::after {
+        content: "";
+        background-size: 70% 70%;
+        top: 5%;
+        left: 5%;
+        position: relative;
+        background-color: rgba(26, 1, 1, 0);
+
+
+    }
+}