Update to latest js components

2024-12-17 16:18:29 +00:00
parent 6274bad976
commit 0ae4d44b70
204 changed files with 48323 additions and 42969 deletions
--- a/root/usr/share/javascript/StateRestore/css/common.scss
+++ b/root/usr/share/javascript/StateRestore/css/common.scss
@@ -0,0 +1,200 @@
+div.dtsr-confirmation,
+div.dtsr-creation {
+    position: fixed;
+    top: 20%;
+    left: 50%;
+    width: 500px;
+    margin-left: -250px;
+	background-color: white;
+	border-radius: 0.75em;
+	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
+    z-index: 2003;
+    box-sizing: border-box;
+	padding: 2em;
+
+    div.dtsr-creation-text,
+    div.dtsr-confirmation-title-row {
+        text-align: left;
+
+        h2 {
+            padding-left: 0;
+            border-bottom: 0px;
+            margin-top: 0px;
+            padding-top: 0px;
+            margin-bottom: 1rem;
+        }
+    }
+
+    div.dtsr-confirmation-text {
+        text-align: center;
+    }
+
+    div.dtsr-modal-foot,
+    div.dtsr-confirmation-buttons {
+        text-align: right;
+        margin-top: 1em;
+
+        button {
+            margin: 0px;
+        }
+    }
+
+    div.dtsr-creation-text {
+        text-align: left;
+        padding: 0px;
+        border: none;
+
+        span {
+            font-size: 20px;
+        }
+    }
+    
+    div.dtsr-creation-form {
+        div.dtsr-left, div.dtsr-right {
+            display: inline-block;
+            width: 50%;
+        }
+    
+        div.dtsr-left {
+            text-align: right;
+        }
+    
+        div.dtsr-right, div.dtsr-name-row {
+            text-align: left;
+        }
+
+        div.dtsr-form-row {
+            display: flex;
+            margin: 0.5em 0;
+
+            &:first-child {
+                margin-top: 1em;
+                margin-bottom: 1em;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            label {
+                width: 25%;
+                padding-right: 1em;
+                text-align: right;
+                padding-top: 2px;
+            }
+
+            div.dtsr-input {
+                width: 75%;
+
+                div.dtsr-check-label {
+                    margin-bottom: 0.5em;
+
+                    input {
+                        margin-right: 0.5em;
+                    }
+                }
+            }
+        }
+    }
+
+    div.dtsr-confirmation-text {
+        text-align: left;
+        label.dtsr-name-label {
+            width: auto;
+            display: inline-block;
+            text-align: right;
+            padding-right: 15px;
+        }
+
+        input.dtsr-name-input {
+            width: 66.6%;
+            display: inline-block;
+        }
+    }
+
+    div.dtsr-modal-foot {
+        text-align: right;
+        padding-top: 10px;
+    }
+
+    span.dtsr-modal-error {
+        color: red;
+        font-size: 0.9em;
+    }
+}
+
+
+div.dtsr-creation {
+    top: 10%;
+}
+
+div.dtsr-check-row {
+    padding-top: 0px;
+}
+
+div.dtsr-popover-close {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	width: 22px;
+	height: 22px;
+	text-align: center;
+	border-radius: 3px;
+	cursor: pointer;
+	z-index: 12;
+}
+
+div.dtsr-background {
+    z-index: 2002;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+}
+
+div.dt-button-collection {
+    h3 {
+        text-align: center;
+        margin-top: 4px;
+        margin-bottom: 8px;
+        font-size: 1.5em;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    span.dtsr-emptyStates {
+        border-radius: 5px;
+        display: inline-block;
+        line-height: 1.6em;
+        white-space: nowrap;
+        text-align: center;
+        vertical-align: middle;
+        width:100%;
+        padding-bottom: 7px;
+        padding-top: 3px;
+    }
+}
+
+html.dark,
+html[data-bs-theme="dark"] {
+    div.dtsr-confirmation,
+    div.dtsr-creation {
+		background-color: rgb(33, 37, 41);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+
+		button {
+			color: inherit;
+			border: 1px solid rgba(255, 255, 255, 0.175);
+			background-color: rgb(47, 52, 56);
+
+			&:hover {
+				background-color: rgb(64, 69, 73);
+			}
+		}
+    }
+}