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

replaced text buttons with icons

Browse source
This commit is contained in:
RaffaelW 2024-12-20 22:08:42 +01:00
parent 3fd0ae4837
commit 391ef3ab2e
2 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

17
data/index.html
View file

@ -40,11 +40,20 @@
<span>PSRAM: <span class="psram-percentage"></span> %</span> <span>PSRAM: <span class="psram-percentage"></span> %</span>
<span>Uptime: <span class="uptime"></span></span> <span>Uptime: <span class="uptime"></span></span>
<button type="button" class="expand-status">Mehr</button> <button type="button" class="expand-status icon-button">
<img src="/icons/open.svg" alt="Mehr" />
</button>
</div> </div>
<dialog class="dialog-status"> <dialog class="dialog-status">
<h2 class="model"></h2> <div class="dialog-header">
<h2 class="model"></h2>
<form method="dialog">
<button type="submit" class="icon-button">
<img src="/icons/close.svg" alt="Schließen" />
</button>
</form>
</div>
<div class="dialog-status-content"> <div class="dialog-status-content">
<div class="card"> <div class="card">
@ -109,10 +118,6 @@
<span class="sdk-version"></span> <span class="sdk-version"></span>
</div> </div>
</div> </div>
<form method="dialog">
<button type="submit">Schließen</button>
</form>
</dialog> </dialog>
<form class="config"> <form class="config">

17
data/style.css
View file

@ -168,6 +168,17 @@ dialog::backdrop {
background-color: #000a; background-color: #000a;
} }
.dialog-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
& button {
margin: 0;
}
}
.card { .card {
background-color: var(--color-surface); background-color: var(--color-surface);
padding: 8px; padding: 8px;
@ -297,12 +308,6 @@ div:has(.range-value) {
gap: 8px; gap: 8px;
} }
.dialog-status button {
display: block;
margin: 0 auto;
margin-top: 32px;
}
.connection-icon { .connection-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;