fix lodding

Author: mallowigi

src/components/Loading.svelte

@@ -3,9 +3,10 @@
     background: var(--bg, #263238);
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center;
     text-align: center;
     width: 100%;
+    height: 100%;
     margin: 0 auto;
     padding: 0 2rem;
     max-width: 40rem;

src/popup.svelte

@@ -3,12 +3,138 @@
 </script>
 
 <style global lang='scss'>
+  *,
+  *::before,
+  *::after {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  html,
   body {
+    background: var(--bg, #263238);
+    transition: all .5s;
     margin: 0;
-    padding: 0;
+    height: 100%;
+    width: 100%;
     min-width: 1024px;
     min-height: 800px;
-    background: var(--bg, #263238);
+    font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--fg);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 0 0.5em 0;
+    font-weight: 400;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  a {
+    color: var(--links);
+  }
+
+  code {
+    font-family: var(--font-family, menlo, inconsolata, monospace);
+    font-size: var(--font-size, calc(1em - 2px));
+  }
+
+  @media (min-width: 400px) {
+    body {
+      font-size: 16px;
+    }
+  }
+
+  *::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  /* Track */
+  *::-webkit-scrollbar-track {
+    background: var(--bg);
+    border-radius: 10px;
+  }
+
+  /* Handle */
+  *::-webkit-scrollbar-thumb {
+    background: var(--accent);
+    border-radius: 10px;
+  }
+
+  /* Handle on hover */
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--accent);
+  }
+
+  input {
+    background-color: var(--contrast);
+    color: var(--text);
+    transition: all .5s;
+  }
+
+  .comment {
+    color: var(--comments);
+    transition: color .5s;
+  }
+
+  .keyword {
+    color: var(--keywords);
+    transition: color .5s;
+  }
+
+  .function {
+    color: var(--functions);
+    transition: color .5s;
+  }
+
+  .punctuation {
+    color: var(--operators);
+    transition: color .5s;
+  }
+
+  .string,
+  .attr-value {
+    color: var(--strings);
+    transition: color .5s;
+  }
+
+  .parameter {
+    color: var(--parameters);
+    transition: color .5s;
+  }
+
+  .number {
+    color: var(--numbers);
+    transition: color .5s;
+  }
+
+  .attr-name {
+    color: var(--attributes);
+    transition: color .5s;
+  }
+
+  .tag {
+    color: var(--tags);
+    transition: color .5s;
+  }
+
+  #__plasmo {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
   }
 </style>