ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-07-05 13:48:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added switch between input and output

Browse source
This commit is contained in:
RaffaelW 2024-10-24 23:16:36 +02:00
parent 3325a18b04
commit 1b7e22470a
2 changed files with 72 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
data/index.html
View file

@ -74,6 +74,16 @@
<fieldset>
<legend>Input/Output 1</legend>
<label class="switch">
<span>Output</span>
<input
type="checkbox"
name="input-or-output-1"
id="input-input-or-output-1"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<input
type="number"
@ -88,6 +98,17 @@
<fieldset>
<legend>Input/Output 2</legend>
<label class="switch">
<span>Output</span>
<input
type="checkbox"
name="input-or-output-2"
id="input-input-or-output-2"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<input
type="number"
name="universe-2"

53
data/style.css
View file

@ -44,11 +44,60 @@ button {
padding: 8px 16px;
}
:is(div:has(:is(input, select)), input, select)
+ :is(div:has(:is(input, select)), input, select) {
:is(div:has(:is(input, select)), input, select, label)
+ :is(div:has(:is(input, select)), input, select, label) {
margin-top: 8px;
}
.hidden {
display: none;
}
label.switch {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
-webkit-user-select: none;
user-select: none;
}
label.switch input {
display: none;
}
label.switch .slider {
display: inline-block;
position: relative;
height: 1em;
width: 2em;
background-color: #444;
border-radius: 1em;
border: 4px solid #444;
}
label.switch .slider::before {
content: "";
position: absolute;
height: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
top: 50%;
background-color: white;
transition: all 0.1s linear;
}
label.switch:active .slider::before {
transform: scale(1.3);
transform-origin: 50% 50%;
}
label.switch input:not(:checked) + .slider::before {
left: 0%;
translate: 0 -50%;
}
label.switch input:checked + .slider::before {
left: 100%;
translate: -100% -50%;
}