kaiserkiwi/cyber-circle-creator
1
0
Fork 0
forked from revengeday/cyber-circle-creator
Code Pull requests Activity

Cyber Slider Style added

Browse source 
Needs to be reworked sometimes
This commit is contained in:
Ramses Revengeday 2024-11-15 21:57:57 +00:00
parent c7b40f9711
commit 47e71940d9
1 changed files with 102 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
css/style.css
View file

@ -168,7 +168,7 @@ button:active {
#outInfo { #outInfo {
font-style: italic; font-style: italic;
color: red; color: #9d921d;
margin: 20px 0; margin: 20px 0;
display: block; display: block;
} }
@ -272,7 +272,108 @@ button:active {
margin-top: 10px; margin-top: 10px;
font-size: 0.9rem; font-size: 0.9rem;
} }
.slider-container {
margin: 20px 0;
text-align: center;
color: #e8f0f2;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.slider-container label {
font-size: 1.2rem;
}
input[type="range"] {
-webkit-appearance: none;
width: 70%;
margin: 10.5px 0;
background-color: #0d2f25;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: #1bec99;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
border: 2px solid #159262;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6px;
transition: background-color 0.3s, transform 0.3s;
}
input[type="range"]:focus::-webkit-slider-thumb {
box-shadow: 0 0 10px #1bec99;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: #1bec99;
border-radius: 5px;
}
input[type="range"]::-moz-range-thumb {
border: 2px solid #159262;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
input[type="range"]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type="range"]::-ms-fill-lower {
background: #1bec99;
border-radius: 5px;
}
input[type="range"]::-ms-fill-upper {
background: #1bec99;
border-radius: 5px;
}
input[type="range"]::-ms-thumb {
border: 2px solid #159262;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
#sliderValueDisplay {
font-size: 1.1rem;
margin-left: 10px;
color: #1bec99;
font-weight: bold;
}
a { a {
color: #1bec99; color: #1bec99;
transition: color 0.3s; transition: color 0.3s;