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

Fix transparency number causing parent div to expand and move other elements around

Browse source
This commit is contained in:
lolabird 2023-11-13 03:08:09 -07:00
commit b42839a202
2 changed files with 9 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -36,7 +36,7 @@
<div class="grid-input"> <div class="grid-input">
<h3 class="tool-labels">Grid Tools</h3> <h3 class="tool-labels">Grid Tools</h3>
<label class="sub-labels" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label> <label class="sub-labels trans" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label>
<input class="range-slider" name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1"> <input class="range-slider" name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1">
<div class="grid-tools"> <div class="grid-tools">
<div class="slider"> <div class="slider">

11
style.css
View file

@ -92,6 +92,10 @@ button:active, .container:active, .color-input:active{
font-size: 18px; font-size: 18px;
color: #f0fbf8; color: #f0fbf8;
} }
.trans.sub-labels {
display: flex;
flex-direction: column;
}
.color-input { .color-input {
width: 120%; width: 120%;
@ -111,10 +115,10 @@ button {
height: 500px; height: 500px;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
margin: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background: rgb(180, 254, 235); background: rgb(180, 254, 235);
will-change: contents;
} }
.grid { .grid {
@ -221,8 +225,6 @@ input[type="range"]::-webkit-slider-runnable-track {
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
z-index: 1; z-index: 1;
transform-style: preserve-3d;
will-change: transform;
} }
.knob:hover { .knob:hover {
box-shadow: 1px 2px 10px 1px #68ffd8; box-shadow: 1px 2px 10px 1px #68ffd8;
@ -276,6 +278,9 @@ input[type="range"]::-webkit-slider-runnable-track {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.trans.sub-labels {
display: block;
}
} }
@media screen and (max-width: 559px) { @media screen and (max-width: 559px) {