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

Add more indicators that tools are currently active

Browse source
This commit is contained in:
lolabird 2023-11-13 02:23:14 -07:00
commit b3f7137d85
2 changed files with 17 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
script.js
View file

@ -240,6 +240,9 @@ function colorGrid() {
function changeColor() { function changeColor() {
const buttonID = this.id; const buttonID = this.id;
buttons.forEach(btn => btn.classList.remove("is-active"));
this.classList.add("is-active");
if (buttonID === "rgbColor") { if (buttonID === "rgbColor") {
isRgb = true; isRgb = true;
} else { } else {

15
style.css
View file

@ -57,7 +57,8 @@ button, .container, .color-input, .knob {
border: none; border: none;
color: #000; color: #000;
} }
button:hover, .container:hover, .color-input:hover { button:hover, .container:hover, .color-input:hover,
.knob:hover, .knob:active, .is-active {
background-color: #68ffd8; background-color: #68ffd8;
} }
@ -144,6 +145,12 @@ button {
border-radius: 6px; border-radius: 6px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.range-slider:hover {
box-shadow: 1px 2px 10px 1px #68ffd8;
}
.range-slider:active {
box-shadow: 1px 2px 10px 1px #68ffd8;
}
input[type="range"]::-moz-range-thumb { input[type="range"]::-moz-range-thumb {
appearance: none; appearance: none;
@ -217,6 +224,12 @@ input[type="range"]::-webkit-slider-runnable-track {
transform-style: preserve-3d; transform-style: preserve-3d;
will-change: transform; will-change: transform;
} }
.knob:hover {
box-shadow: 1px 2px 10px 1px #68ffd8;
}
.knob:active {
box-shadow: 1px 2px 10px 1px #68ffd8;
}
.knotch { .knotch {
width: 10px; width: 10px;