Fix up style of Notifications

Move Notification Sass to its own file

gallery/templates/layout.html

@@ -131,10 +131,15 @@
             div.appendChild(icon);
 
             // Create text element and append to notification
-            var gwagwa = document.createElement('span');
+            var description = document.createElement('span');
-            gwagwa.classList.add('sniffle__notification-text');
+            description.classList.add('sniffle__notification-text');
-            gwagwa.innerHTML = text;
+            description.innerHTML = text;
-            div.appendChild(gwagwa);
+            div.appendChild(description);
+
+            // Create span to show time remaining
+            var timer = document.createElement('span');
+            timer.classList.add('sniffle__notification-time');
+            div.appendChild(timer);
 
             // Append notification to container
             container.appendChild(div);

gallery/user/themes/default/buttons/img-tool.scss

@@ -32,7 +32,7 @@
     color: $red;
 
     span {
-        background-color: $red;
+        color: $red;
     }
 
     &:hover {
@@ -43,7 +43,7 @@
     color: $blue;
 
     span {
-        background-color: $blue;
+        color: $blue;
     }
 
     &:hover {

gallery/user/themes/default/style.scss

@@ -4,102 +4,12 @@
 @import 'ui/reset';
 @import 'ui/nav';
 @import 'ui/main';
+@import 'ui/notification';
 
 @import 'buttons/img-tool';
 @import 'buttons/btn';
 @import 'buttons/up';
 
-.sniffle {
-    margin: 0;
-    padding: 0;
-
-    width: 450px;
-    height: auto;
-
-    position: fixed;
-    top: 0.3rem;
-    right: 0.3rem;
-
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-
-    z-index: 6969;
-}
-.sniffle__notification {
-    margin: 0;
-    padding: 0;
-
-    width: 450px;
-    height: auto;
-
-    display: flex;
-    flex-direction: row;
-
-    position: relative;
-
-    background-color: $black300;
-    border-radius: $rad;
-    color: $white100;
-
-    box-sizing: border-box;
-    overflow: hidden;
-
-    transition: all 0.5s ease-in-out;
-}
-.sniffle__notification--success {
-    background-color: $green;
-}
-.sniffle__notification--error {
-    background-color: $red;
-}
-.sniffle__notification--warning {
-    background-color: $yellow;
-}
-.sniffle__notification--info {
-    background-color: $blue;
-}
-.sniffle__notification-icon {
-    margin: 0;
-    padding: 1rem;
-
-    width: auto;
-    height: 100%;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: rgba($black100, 0.2);
-
-    svg {
-        width: 1.25rem;
-        height: 1.25rem;
-
-        fill: $white100;
-    }
-}
-.sniffle__notification-text {
-    margin: 0;
-    padding: 1rem;
-
-    width: auto;
-    height: auto;
-
-    display: flex;
-    flex-direction: column;
-    justify-self: center;
-    align-self: center;
-
-    font-family: $font-body;
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1;
-    text-align: left;
-
-    color: $white100;
-}
-
 .app {
     margin: 0 0 0 3.5rem;
     padding: 0.5rem;

gallery/user/themes/default/ui/notification.scss

@@ -0,0 +1,126 @@
+@keyframes sniffle {
+    0% {
+        left: -450px;
+    }
+    100% {
+        left: 0;
+    }
+}
+
+.sniffle {
+    margin: 0;
+    padding: 0;
+
+    width: 450px;
+    height: auto;
+
+    position: fixed;
+    top: 0.3rem;
+    right: 0.3rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+
+    z-index: 6969;
+}
+.sniffle__notification {
+    margin: 0;
+    padding: 0;
+
+    width: 450px;
+    height: auto;
+
+    display: flex;
+    flex-direction: row;
+
+    position: relative;
+
+    background-color: $black200;
+    border-radius: $rad;
+    color: $white100;
+
+    box-sizing: border-box;
+    overflow: hidden;
+
+    transition: all 0.5s ease-in-out;
+}
+.sniffle__notification-icon {
+    margin: 0;
+    padding: 1rem;
+
+    width: auto;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: $black300;
+
+    svg {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+}
+.sniffle__notification-text {
+    margin: 0;
+    padding: 1rem;
+
+    width: auto;
+    height: auto;
+
+    display: flex;
+    flex-direction: column;
+    justify-self: center;
+    align-self: center;
+
+    font-family: $font-body;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1;
+    text-align: left;
+}
+.sniffle__notification-time {
+    margin: 0;
+    padding: 0;
+
+    width: 450px;
+    height: 3px;
+
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+
+    background-color: $white100;
+
+    animation: sniffle 2.5s linear;
+}
+.sniffle__notification--success {
+    color: $green;
+
+    .sniffle__notification-time {
+        background-color: $green;
+    }
+}
+.sniffle__notification--error {
+    color: $red;
+
+    .sniffle__notification-time {
+        background-color: $red;
+    }
+}
+.sniffle__notification--warning {
+    color: $yellow;
+
+    .sniffle__notification-time {
+        background-color: $yellow;
+    }
+}
+.sniffle__notification--info {
+    color: $blue;
+
+    .sniffle__notification-time {
+        background-color: $blue;
+    }
+}