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

83
src/static/main.css
View File

@ -4,72 +4,97 @@ body {
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
line-height: 1.6; line-height: 1.6;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
form { form {
margin-bottom: 20px; margin-bottom: 20px;
} }
label { label {
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;
box-sizing: border-box; box-sizing: border-box;
} }
input[type="range"] { input[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
height: 25px; height: 25px;
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;
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
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%;
} }
#pattern_buttons { #pattern_buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
#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;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
#pattern_buttons button:hover { #pattern_buttons button:hover {
background-color: #45a049; background-color: #45a049;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#pattern_buttons button { #pattern_buttons button {
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;
}