Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style slider

Browse source
This commit is contained in:
lolabird 2023-11-12 21:08:19 -07:00
commit a347c31fb7
3 changed files with 46 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

44
style.css
View file

@ -45,7 +45,7 @@ footer {
flex: 0 0 auto;
}
button, .container, .color-input, .knob-shadow {
button, .container, .color-input, .knob-shadow, .range-slider {
box-shadow: 1px 2px 10px 1px #555;
}
@ -134,6 +134,45 @@ button {
font-size: 18px;
}
.range-slider {
appearance: none;
width: 100%;
height: 12px;
background: rgb(180, 254, 235);
border-radius: 6px;
}
input[type="range"]::-moz-range-thumb {
appearance: none;
width: 20px;
height: 20px;
background: #f0fbf8;
cursor: pointer;
box-shadow: 1px 2px 10px 1px #555;
}
input[type="range"]::-moz-range-thumb:hover {
background-color: #68ffd8;
}
input[type="range"]::-moz-range-thumb:active{
background-color: #017070;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
background: #f0fbf8;
cursor: pointer;
box-shadow: 1px 2px 10px 1px #555;
}
input[type="range"]::-webkit-slider-thumb:hover {
background-color: #68ffd8;
}
input[type="range"]::-webkit-slider-thumb:active{
background-color: #017070;
}
#gridSlider {
display: none;
}
@ -177,8 +216,7 @@ button {
}
.knobless-grid-tools {
display: flex;
flex-direction: column;
display: block;
}
.grid-buttons {