technicalkiwi
/
led-controller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update main.css

This commit is contained in:
jimmy 2025-05-18 21:30:44 +12:00
parent 4c3337a232
commit c2a0cfaef4
1 changed files with 99 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/static/main.css
View File

@ -16,7 +16,10 @@ body {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
input[type="text"], input[type="submit"], input[type="range"], input[type="color"] { input[type="text"],
input[type="submit"],
input[type="range"],
input[type="color"] {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
@ -29,7 +32,7 @@ body {
background: #d3d3d3; background: #d3d3d3;
outline: none; outline: none;
opacity: 0.7; opacity: 0.7;
transition: opacity .2s; transition: opacity 0.2s;
} }
input[type="range"]:hover { input[type="range"]:hover {
opacity: 1; opacity: 1;
@ -39,14 +42,14 @@ body {
appearance: none; appearance: none;
width: 25px; width: 25px;
height: 25px; height: 25px;
background: #4CAF50; background: #4caf50;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
} }
input[type="range"]::-moz-range-thumb { input[type="range"]::-moz-range-thumb {
width: 25px; width: 25px;
height: 25px; height: 25px;
background: #4CAF50; background: #4caf50;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
} }
@ -59,7 +62,7 @@ body {
#pattern_buttons button { #pattern_buttons button {
flex: 1 0 calc(33.333% - 10px); flex: 1 0 calc(33.333% - 10px);
padding: 10px; padding: 10px;
background-color: #4CAF50; background-color: #4caf50;
color: white; color: white;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -73,3 +76,25 @@ body {
flex: 1 0 calc(50% - 10px); flex: 1 0 calc(50% - 10px);
} }
} }
#connection-status {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block; /* Or block, depending on where you put it */
margin-left: 10px; /* Adjust spacing as needed */
vertical-align: middle; /* Align with nearby text */
background-color: grey; /* Default: Unknown */
}
#connection-status.connecting {
background-color: yellow;
}
#connection-status.open {
background-color: green;
}
#connection-status.closing,
#connection-status.closed {
background-color: red;
}