C3MA/PlantCtrl
5
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

css fixes

Browse Source
This commit is contained in:
Empire
2025-01-03 00:48:34 +01:00
parent 1927449c1d
commit 0f77ac163a
12 changed files with 255 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
rust/src_webpack/src/main.html
View File

@@ -1,113 +1,116 @@
<link rel="stylesheet" href="bootstrap-grid.css">
<style>
.progressPane{
display: block;
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-color: lightgrey;
opacity: 0.8;
}
.progressPaneCenter{
display: inline-block;
margin-top: 48%;
position: absolute;
height: 4%;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
.progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.progress:after {
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 5px;
left: 0;
right: 0;
}
.progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
<link rel="stylesheet" href="bootstrap-grid.css">
<style>
.progressPane {
display: block;
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-color: lightgrey;
opacity: 0.8;
}
.progressPaneCenter {
display: inline-block;
margin-top: 48%;
position: absolute;
height: 4%;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
.progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.progress:after {
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 5px;
left: 0;
right: 0;
}
.progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
}
.progress .valueIndeterminate {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 50%;
}
@keyframes indeterminateAnimation {
0% {
transform: translateX(0%) scaleX(0.5);
}
.progress .valueIndeterminate {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 50%;
50% {
transform: translateX(50%) scaleX(0.5);
}
@keyframes indeterminateAnimation {
0% {
transform: translateX(0%) scaleX(0.5);
}
50% {
transform: translateX(50%) scaleX(0.5);
}
100% {
transform: translateX(0%) scaleX(0.5);
}
100% {
transform: translateX(0%) scaleX(0.5);
}
</style>
}
</style>
<div class="container-xxl">
<input type="button" id="test" value="Test">
<div id="firmwareview">
</div>
<div id="timeview">
<div class="container-xl">
<div class="row">
<div id="firmwareview" class="container col-12 col-lg-4"
style="border-width: 1px; border-style: solid; padding: 8px;">
</div>
<div id="timeview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 8px;">
</div>
<div id="batteryview" class="container col-12 col-lg-4"
style="border-style: solid; border-width: 1px; padding: 8px;">
</div>
</div>
<div id="network_view">
<div class="row">
<div id="network_view" class="container col-12 col-sm-6 col-lg-4"
style="border-style: solid; border-width: 1px; padding: 8px;">
</div>
<div id="lightview" class="container col-12 col-sm-6 col-lg-4"
style="border-style: solid; border-width: 1px; padding: 16px;">
</div>
<div id="tankview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 16px;">
</div>
</div>
<div id="tankview"></div>
<div id="batteryview"></div>
<h2>config</h2>
<h3>Plants:</h3>
<button id="measure_moisture">Measure Moisture</button>
<div id="plants" class="row"></div>
<div id="configform">
<h3>Light:</h3>
<input type="checkbox" id="night_lamp_enabled" checked="false"> Enable Nightlight
<div>
Start
<select type="time" id="night_lamp_time_start">
</select>
Stop
<select type="time" id="night_lamp_time_end">
</select>
</div>
<div>
<input type="checkbox" id="night_lamp_only_when_dark">
Light only when dark
</div>
<h3>Plants:</h3>
<button id="measure_moisture">Measure Moisture</button>
<div id="plants" class="row"></div>
</div>
<button id="submit">Submit</button>
<div id="submit_status"></div>
<br>