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

added status ui

Browse source
This commit is contained in:
RaffaelW 2024-12-19 17:27:32 +01:00
parent 90f8d7c07e
commit 9e83851ddf
3 changed files with 211 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

56
data/style.css
View file

@ -2,6 +2,7 @@
--color-primary: #087e8b;
--color-on-primary: white;
--color-background: #222;
--color-surface: #333;
--color-danger: #fa2b58;
--icon-button-size: 2.5rem;
}
@ -141,6 +142,37 @@ label.switch input:checked + .slider::before {
translate: -100% -50%;
}
dialog {
width: 80%;
max-width: 500px;
max-height: 80%;
overflow: scroll;
background-color: var(--color-background);
color: white;
border: none;
border-radius: 8px;
padding: 16px;
}
dialog::backdrop {
background-color: #000a;
}
.card {
background-color: var(--color-surface);
padding: 8px;
border-radius: 8px;
}
.card > * {
display: block;
}
.card > :first-child {
color: var(--color-primary);
margin-bottom: 8px;
}
.buttons {
display: flex;
flex-direction: row;
@ -223,3 +255,27 @@ button.reload {
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.status {
background-color: var(--color-surface);
padding: 8px;
border-radius: 8px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.dialog-status-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.dialog-status button {
display: block;
margin: 0 auto;
margin-top: 32px;
}