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

added slider for led brightness

Browse source
This commit is contained in:
RaffaelW 2024-12-15 00:11:37 +01:00
parent 6276b1f74b
commit 4234732631
5 changed files with 65 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

35
data/style.css
View file

@ -3,7 +3,7 @@
--color-on-primary: white;
--color-background: #222;
--color-danger: #fa2b58;
--icon-button-size: 2.5rem;
--appended-item-size: 2.5rem;
}
body {
@ -50,8 +50,13 @@ label span {
}
input,
select {
select,
label div {
width: clamp(200px, 100%, 400px);
}
input,
select {
background-color: var(--color-background);
color: white;
border: 1px solid white;
@ -66,8 +71,13 @@ select:focus {
border-color: var(--color-primary);
}
select:has(+ .icon-button) {
width: calc(clamp(200px, 100%, 400px) - var(--icon-button-size) - 8px);
select:has(+ .icon-button),
label div input[type="range"] {
width: calc(clamp(200px, 100%, 400px) - var(--appended-item-size) - 8px);
}
input[type="range"] {
accent-color: var(--color-primary);
}
button {
@ -213,8 +223,8 @@ button.reload {
.icon-button {
padding: 8px;
font-size: 0;
width: var(--icon-button-size);
height: var(--icon-button-size);
width: var(--appended-item-size);
height: var(--appended-item-size);
}
.spinning {
@ -223,3 +233,16 @@ button.reload {
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div:has(.range-value) {
display: flex;
flex-direction: row;
gap: 8px;
}
.range-value {
width: var(--appended-item-size);
height: var(--appended-item-size);
text-align: center;
line-height: var(--appended-item-size);
}