sync

app/assets/css/banned.css

@@ -11,6 +11,14 @@ body {
     background-color: #262626;
 }
 
+main {
+    app-region: drag;
+}
+
+main > * {
+    app-region: no-drag;
+}
+
 main > article > section > img {
     width: 150px;
 }

app/assets/css/index.css

@@ -4,6 +4,8 @@
 * {
     margin: 0px;
     padding: 0px;
+    outline: none;
+    user-select: none;
     box-sizing: border-box;
     font-family: "Roboto", sans-serif;
 }
@@ -16,6 +18,11 @@ body {
     background-attachment: fixed;
 }
 
+img {
+    app-region: drag;
+    pointer-events: none;
+}
+
 main {
     position: absolute;
     top: 0px;
@@ -24,6 +31,11 @@ main {
     bottom: 0px;
     width: 100%;
     height: 100%;
+    app-region: drag;
+}
+
+main > * {
+    app-region: no-drag;
 }
 
 main > nav {
@@ -372,25 +384,43 @@ div.checkboxes > input[type="checkbox"] {
     font-size: small;
 }
 
-button.load {
-    content: "";
-    transition: background-color 0.3s;
+div.loader {
+    overflow: hidden;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 10px;
 }
 
+div.loader > div.full {
+    height: 10px;
+    width: 100%;
+    background-color: #3e3e3ee6;
+}
+
+div.loader > div.full > div.progress,
+div.loader > div.full > div.loading {
+    height: 10px;
+    width: 50%;
+    transition: 1s width;
+    background-color: #39aa6d;
+}
+
+div.loader > div.full > div.loading {
+    animation: animateLoadingEffect 1s linear infinite;
+}
 
 [hidden] {
     display: none;
     visibility: hidden;
 }
-@keyframes backgroundAnimation {
+@keyframes animateLoadingEffect {
     0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
+        transform: translateX(-100%);
     }
     100% {
-        background-position: 0% 50%;
+        transform: translateX(200%);
     }
-  }
-  
+}