slicker msgbox styling

privatepublic-de · Mar 18, 2019 · 532dc90 · 532dc90
1 parent 1c1692c
commit 532dc90
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/img/wait.gif b/img/wait.gif
diff --git a/lib/base.css b/lib/base.css
@@ -9,23 +9,30 @@ h1 {
     font-size: 1.2em;
 }
  .msgbox {
-    display: none;
+    visibility: hidden;
+    transition: visibility 0.09s, opacity 0.1s linear;
+    opacity: 0;
     box-sizing: border-box;
     position: fixed;
     width: 450px;
     height: auto;
     left: 50%;
     top: 20%;
-    /* margin-top: -100px; */
     margin-left: -225px;
     background: #eee linear-gradient(#eee, #ddd);
     color: #000;
-    border: 6px solid #000;
+    border: 1px solid #000;
+    border-radius: 4px;
     box-shadow: 0 0 8px #000;
     padding: 10px;
     overflow: auto;
     font-size: .8em;
 }
+.msgbox.visible {
+    transition: visibility 0s, opacity 0.25s linear;
+    opacity: 1;
+    visibility: visible;
+}
 .msgbox.error {
     border-color:#f33;
     background: #ffe8d8 linear-gradient(#fff, #ffe8d8);
@@ -34,7 +41,7 @@ h1 {
 #mboxtemp.msgbox.processing {
     background-image: url('../img/wait.gif');
     background-repeat: no-repeat;
-    background-position: center center;
+    background-position: center 70%;
     min-height: 200px;
 }
 .msgbox h2 {
@@ -63,7 +70,7 @@ h1 {
     border: none;
 }
 #mboxtemp {
-    background: #F0FBD7 linear-gradient(#fff, #F0FBD7);
+    background: #ccc linear-gradient(#eee, #ccc);
 }
 #mboxtemp button,
 #mbox button.close {

diff --git a/lib/base.js b/lib/base.js
@@ -84,6 +84,12 @@ let DOM = {
     show: function(selector) {
         DOM.all(selector, function(el){ el.style.display = 'block' });
     },
+    unvisible: function(selector) {
+        DOM.removeClass(selector, 'visible');
+    },
+    visible: function(selector) {
+        DOM.addClass(selector, 'visible');
+    },
     addClass: function(selector, className) {
         DOM.all(selector, function(el){ el.classList.add(className) });
     },
@@ -167,7 +173,7 @@ MBox.prototype.show = function(title, msg, props) {
         if (props.hideAfter) {
             MBox._lastTimeout = setTimeout(function() {MBox.hideTemp()}, props.hideAfter);
         }
-        DOM.show(box);
+        DOM.visible(box);
         DOM.all('#mbox input[type=text]', function(el) {el.focus()});
     }
     else {
@@ -177,11 +183,11 @@ MBox.prototype.show = function(title, msg, props) {
 }
 
 MBox.prototype.hide = function() {
-    if (this.initialized) DOM.hide(this._element);
+    if (this.initialized) DOM.unvisible(this._element);
 }
 
 MBox.prototype.hideTemp = function() {
-    if (this.initialized) DOM.hide(this._elementTemp);
+    if (this.initialized) DOM.unvisible(this._elementTemp);
 }
 
 MBox.show = function(title, msg, props) {