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

173
src/static/main.css
View File

@ -1,75 +1,100 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
max-width: 600px; max-width: 600px;
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"],
width: 100%; input[type="submit"],
input[type="range"],
margin-bottom: 10px; input[type="color"] {
box-sizing: border-box; width: 100%;
}
input[type="range"] { margin-bottom: 10px;
-webkit-appearance: none; box-sizing: border-box;
appearance: none; }
height: 25px; input[type="range"] {
background: #d3d3d3; -webkit-appearance: none;
outline: none; appearance: none;
opacity: 0.7; height: 25px;
transition: opacity .2s; background: #d3d3d3;
} outline: none;
input[type="range"]:hover { opacity: 0.7;
opacity: 1; transition: opacity 0.2s;
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]:hover {
-webkit-appearance: none; opacity: 1;
appearance: none; }
width: 25px; input[type="range"]::-webkit-slider-thumb {
height: 25px; -webkit-appearance: none;
background: #4CAF50; appearance: none;
cursor: pointer; width: 25px;
border-radius: 50%; height: 25px;
} background: #4caf50;
input[type="range"]::-moz-range-thumb { cursor: pointer;
width: 25px; border-radius: 50%;
height: 25px; }
background: #4CAF50; input[type="range"]::-moz-range-thumb {
cursor: pointer; width: 25px;
border-radius: 50%; height: 25px;
} background: #4caf50;
#pattern_buttons { cursor: pointer;
display: flex; border-radius: 50%;
flex-wrap: wrap; }
gap: 10px; #pattern_buttons {
margin-bottom: 20px; display: flex;
} flex-wrap: wrap;
#pattern_buttons button { gap: 10px;
flex: 1 0 calc(33.333% - 10px); margin-bottom: 20px;
padding: 10px; }
background-color: #4CAF50; #pattern_buttons button {
color: white; flex: 1 0 calc(33.333% - 10px);
border: none; padding: 10px;
cursor: pointer; background-color: #4caf50;
transition: background-color 0.3s; color: white;
} border: none;
#pattern_buttons button:hover { cursor: pointer;
background-color: #45a049; transition: background-color 0.3s;
} }
@media (max-width: 480px) { #pattern_buttons button:hover {
#pattern_buttons button { background-color: #45a049;
flex: 1 0 calc(50% - 10px); }
} @media (max-width: 480px) {
} #pattern_buttons button {
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;
}