From 040eab29141e08304005344ff51cadb972b16385 Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 23:34:41 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 js/ui/dialog/css/prompt-boxes.scss | 221 +++++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 js/ui/dialog/css/prompt-boxes.scss

diff --git a/js/ui/dialog/css/prompt-boxes.scss b/js/ui/dialog/css/prompt-boxes.scss
new file mode 100644
index 0000000..aae75fd
--- /dev/null
+++ b/js/ui/dialog/css/prompt-boxes.scss
@@ -0,0 +1,221 @@
+/** Variables **/
+$white: #FFF;
+$black: #252525;
+
+$light-grey: #EEE;
+$grey: #CCC;
+$dark-grey: #999;
+ 
+$light-blue: #79bde6;
+$blue: #4591bf;
+$dark-blue: #366988;
+
+$light-red: #ff7575;
+$red: #da4242;
+$dark-red: #af3535;
+
+$light-green: #6ed06c;
+$green: #51cc50;
+$dark-green: #409c3f;
+
+$br: 2px;
+
+body {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+#pb-container, .pb-backdrop {
+  transition: ease 0.25s;
+
+  a, button, input, textarea, select, div {
+    transition: ease 0.25s;
+  }
+}
+
+.pb-toast {
+  transition: ease 0.25s;
+
+  a, button, input, textarea, select, div {
+    transition: ease 0.25s;
+  }
+}
+
+.pb-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 97;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.8);
+
+  &[data-show] {
+    opacity: 1;
+  }
+}
+
+#pb-container {
+  display: inline-block;
+  position: fixed;
+  top: 40vh;
+  left: 0;
+  right: 0;
+  max-width: 375px;
+  transform: scale(0);
+
+  margin: {
+    top: -50px;
+    right: auto;
+    left: auto;
+  }
+  padding: 1em;
+  border-radius: $br;
+
+  background: $white;
+  border-bottborder-bottom: 4px solid $grey;
+
+  z-index: 99;
+
+  &.absolute {
+    margin-top: 40vh;
+  }  
+
+  input {
+    display: block;
+    width: 100%;
+    padding: 0.5em;
+    margin-bottom: 1em;
+    border: 1px solid $light-grey;
+    font-size: 1em;
+    border-radius: $br;
+
+    &:focus, &:active {
+      outline: none;
+      border-color: $grey;
+    }
+  }
+
+  &[data-show] {
+    transform: scale(1);
+  }
+}
+
+.pb-toast {
+  display: inline-block;
+  position: fixed;
+  left: 0;
+  right: 0;
+  transform: scale(0);
+  width: 400px;
+  margin: {
+    right: auto;
+    left: auto;
+  }
+
+  padding: 1em;
+  color: $white;
+  border-radius: $br;
+  text-align: center;
+
+  z-index: 98;
+
+  &.top {
+    top: 0.25em;
+  }
+
+  &.bottom {
+    bottom: 0.25em;
+  }
+
+  &.success {
+    background: $blue;
+  }
+
+  &.error {
+    background: $red;
+  }
+  
+  &.info {
+    color: $black;
+    background: $light-grey;
+  }
+
+  &.show {
+    transform: scale(1);
+  }
+
+  &.gone {
+    transform: scale(0);
+  }
+  
+  &[data-close="true"] {
+    padding-right: 3em;
+  }
+
+  .toast-close {
+    position: absolute;;
+    right: 0.75em;
+    top: 50%;
+    margin-top: -13.5px;
+    text-decoration: none;
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.pb-message {
+  font-size: 1.05em;
+  margin: 0 0 0.75em;
+}
+
+.pb-buttons {
+  button {
+    display: inline-block;
+    background: $light-grey;
+    border-radius: $br;
+    border: none;
+    padding: 0.5em 1em;
+    color: #222;
+    font-size: 1em;
+    outline: none;
+    overflow: hidden;
+    cursor: pointer;
+    box-shadow: none;
+    font-size: 14px;
+
+    &:focus {
+      box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(0, 0, 0, 0.2);
+    }
+
+    &:hover {
+      background: $grey;
+    }
+
+    &:not(:only-of-type):last-of-type {
+      float: right;
+      background: $blue;
+      color: $white;
+
+      &:focus {
+        box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(69, 145, 191, 0.5);
+      }
+
+      &:hover {
+        background: $dark-blue;
+      }
+      
+      &[disabled] {
+        opacity: 0.5;
+        background: none;
+        border-color: $grey;
+        color: $dark-grey;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
\ No newline at end of file