fix style

fix violentmonkey/violentmonkey#124

src/options/style.css

@@ -171,37 +171,6 @@ aside img {
   padding: 0 .5rem;
   border-bottom: 1px solid darkgray;
 }
-.backdrop,
-.scripts {
-  position: absolute;
-  top: 2rem;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.scripts {
-  overflow-y: auto;
-}
-.backdrop {
-  text-align: center;
-  color: gray;
-  z-index: 9;
-}
-.backdrop > *,
-.backdrop::after {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 2rem;
-}
-.backdrop::after {
-  content: ' ';
-  width: 0;
-  height: 100%;
-}
-.mask {
-  background: rgba(0,0,0,.08);
-  /*transition: opacity 1s;*/
-}
 #currentLang {
   color: green;
   font-weight: bold;

src/options/views/tab-installed.vue

@@ -8,13 +8,13 @@
       </div>
       <a href="https://greasyfork.org/scripts" target="_blank" v-text="i18n('anchorGetMoreScripts')"></a>
     </header>
-    <div class="backdrop" :class="{mask: store.loading}" v-show="message">
-      <div v-html="message"></div>
-    </div>
     <div class="scripts">
       <item v-for="script in store.scripts" :key="script"
       :script="script" @edit="editScript" @move="moveScript"></item>
     </div>
+    <div class="backdrop" :class="{mask: store.loading}" v-show="message">
+      <div v-html="message"></div>
+    </div>
     <edit v-if="script" v-model="script" @close="endEditScript"></edit>
   </div>
 </template>
@@ -116,3 +116,36 @@ export default {
   },
 };
 </script>
+
+<style>
+.backdrop,
+.scripts {
+  position: absolute;
+  top: 2rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.scripts {
+  overflow-y: auto;
+}
+.backdrop {
+  text-align: center;
+  color: gray;
+}
+.backdrop > *,
+.backdrop::after {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 2rem;
+}
+.backdrop::after {
+  content: ' ';
+  width: 0;
+  height: 100%;
+}
+.mask {
+  background: rgba(0,0,0,.08);
+  /*transition: opacity 1s;*/
+}
+</style>