upload testing

src/web/css/update.css

@@ -1,6 +1,117 @@
-.uploadprogress {
+.progressbar {
+    position: relative;
     width: 100%;
     height: 20px;
     display: flex;
     align-items: center;
+    background-color: black;
+    border-radius: 7px;
+}
+
+.progressbar.hidden {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.bar {
+    position: absolute;
+    width: 50%;
+    height: 20px;
+    background-color: rgb(100, 100, 100);
+    border-radius: 7px;
+}
+
+.hidden {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.percent {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+}
+
+.settingrectfooterbutton.hidden {
+    width: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.hstack {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.hstack.hidden {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.vstack {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+}
+
+.vstack.hidden {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.checker {
+    width: 45px;
+    height: 15px;
+    background-color: #8d9fa4;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    margin: 5px;
+    position: relative;
+    cursor: pointer;
+}
+
+.checker.active {
+    background-color: #93bc9a;
+}
+
+.checker.hidden {
+    height: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.checked {
+    width: 25px;
+    height: 25px;
+    background: white;
+    /* border: 1px solid; */
+    border-radius: 25px;
+    box-shadow: -1px -1px 5px black;
+    cursor: pointer;
+    position: absolute;
+}
+
+.checked.active {
+    background-color: #5fac5a;
+    box-shadow: -1px -1px 5px #5fac5a;
+    transform: translateX(25px);
+}
+
+.checked.hidden {
+    height: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
 }