Initial commit

2025-09-20 22:59:18 +02:00
commit 6ba8860de9
9 changed files with 1110 additions and 0 deletions
--- a/dialog.css
+++ b/dialog.css
@@ -0,0 +1,95 @@
+@property --jsl-dialog-bgcolor {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #fff;
+}
+@property --jsl-dialog-bordercolor {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #444;
+}
+
+.jsl-dialog {
+
+    background: var(--jsl-dialog-bgcolor);
+    box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
+    max-width: min(90vw, 500px);
+    border: solid 2px var(--jsl-dialog-bordercolor);
+    border-radius: 0.5rem;
+    padding: 0px;
+    font-family: system-ui;
+
+    &.-style-msgbox, &.-style-info {
+        --jsl-dialog-bgcolor: #dfd;
+        --jsl-dialog-bordercolor: #1a8310;
+        .-title::before {
+            content: '🛈 ';
+        }
+    }
+    &.-style-confirm {
+        --jsl-dialog-bgcolor: #ffd;
+        --jsl-dialog-bordercolor: #835f10;
+        .-title::before {
+            content: '✔ ';
+        }
+    }
+    &.-style-error {
+        --jsl-dialog-bgcolor: #fcc;
+        --jsl-dialog-bordercolor: #bb3434;
+        .-title::before {
+            content: '⚠️ ';
+        }
+    }
+    &.-style-warning {
+        --jsl-dialog-bgcolor: #ffc;
+        --jsl-dialog-bordercolor: #c93b03;
+        .-title::before {
+            content: '⚠️ ';
+        }
+    }
+
+    .-header {
+        border-top-left-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+        /* background: rgba(0, 0, 0, 0.2); */
+        display: flex;
+        padding: 0.5rem;
+    }
+
+    .-title {
+        font-weight: bold;
+        flex-grow: 1;
+    }
+
+    .-close-btn {
+        border: 0px;
+        background: transparent;
+        color: red;
+    }
+
+    .-content {
+        padding: 0.5rem;
+    }
+
+    .-buttons {
+        padding: 0.5rem;
+        padding-top: 0.2rem;
+        text-align: center;
+
+        .action {
+            border: solid 1px #666;
+            border-radius: 0.25rem;
+            padding: 0.35rem 0.6rem;
+            margin: 0px 0.25rem;
+            background: #eee;
+
+            &.default-action {
+                outline: solid 1px #666;
+            }
+
+            &:active {
+                outline: solid 1px #444;
+            }
+        }
+    }
+}