rwanoux
140 lines
3.0 KiB
SCSS
140 lines
3.0 KiB
SCSS
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);
|
|
|
|
|
|
}
|
|
} |