mirror of
https://github.com/HendrikRauh/dmx-interface.git
synced 2025-07-09 23:25:45 +00:00
added slider for led brightness
This commit is contained in:
parent
6276b1f74b
commit
4234732631
5 changed files with 65 additions and 7 deletions
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue