fix style

scripts/vue-loader.conf.js

@@ -1,6 +1,7 @@
 const { styleLoader } = require('./utils');
 
 module.exports = {
+  preserveWhitespace: false,
   loaders: {
     css: styleLoader({ fallback: 'vue-style-loader' }),
   },

src/common/ui/style/style.css

@@ -116,6 +116,9 @@ button {
 .pos-rel {
   position: relative;
 }
+.ml-1 {
+  margin-left: .5em;
+}
 .mr-1 {
   margin-right: .5em;
 }
@@ -128,6 +131,10 @@ button {
 .mb-2 {
   margin-bottom: 1em;
 }
+.mx-1 {
+  margin-left: .5em;
+  margin-right: .5em;
+}
 .px-2 {
   margin-left: 1em;
   margin-right: 1em;

src/options/style.css

@@ -62,6 +62,10 @@ section {
   border-left: 1px solid darkgray;
 }
 
+input[type=checkbox] {
+  margin-right: .5em;
+}
+
 .in-out {
   &-appear,
   &-enter,

src/options/views/script-item.vue

@@ -4,17 +4,17 @@
     <div class="script-info flex">
       <div class="script-name ellipsis" v-text="script._cache.name"></div>
       <div class="flex-auto"></div>
-      <tooltip :title="i18n('labelAuthor') + script.meta.author" class="script-author" v-if="author" align="end">
+      <tooltip :title="i18n('labelAuthor') + script.meta.author" class="script-author ml-1" v-if="author" align="end">
         <icon name="author"></icon>
-        <a class="ellipsis" :href="`mailto:${author.email}`" v-if="author.email" v-text="author.name"></a>
-        <span class="ellipsis" v-else v-text="author.name"></span>
+        <a class="ellipsis ml-1" :href="`mailto:${author.email}`" v-if="author.email" v-text="author.name"></a>
+        <span class="ellipsis ml-1" v-else v-text="author.name"></span>
       </tooltip>
-      <tooltip :title="lastUpdated.title" align="end">
+      <tooltip :title="lastUpdated.title" class="ml-1" align="end">
         <span v-text="script.meta.version ? `v${script.meta.version}` : ''"></span>
-        <span class="secondary" v-text="lastUpdated.show"></span>
+        <span class="secondary ml-1" v-text="lastUpdated.show"></span>
       </tooltip>
-      <div v-if="script.config.removed" v-text="i18n('labelRemoved')"></div>
-      <div v-if="script.config.removed">
+      <div v-if="script.config.removed" class="ml-1" v-text="i18n('labelRemoved')"></div>
+      <div v-if="script.config.removed" class="ml-1">
         <tooltip :title="i18n('buttonUndo')" placement="left">
           <span class="btn-ghost" @click="onRemove(0)">
             <icon name="undo"></icon>
@@ -388,9 +388,6 @@ export default {
     margin-left: 3.5rem;
     line-height: 1.5;
     align-items: center;
-    > *:not(:last-child) {
-      margin-right: 8px;
-    }
   }
   &-icon {
     position: absolute;

src/options/views/tab-about.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab-about">
     <h1>
-      <span v-text="i18n('labelAbout')"></span>
+      <span class="mr-1" v-text="i18n('labelAbout')"></span>
       <small v-text="`v${version}`"></small>
     </h1>
     <p class="mb-2" v-text="i18n('extDescription')"></p>
@@ -12,7 +12,7 @@
     </div>
     <div class="mb-1">
       <label v-text="i18n('labelAuthor')"></label>
-      <span v-html="i18n('anchorAuthor')"></span> | <a href="https://violentmonkey.github.io/donate/" target="_blank" v-text="i18n('labelDonate')"></a> <span class="text-red">&hearts;</span>
+      <span v-html="i18n('anchorAuthor')"></span> | <a href="https://violentmonkey.github.io/donate/" target="_blank" v-text="i18n('labelDonate')"></a><span class="text-red"> &hearts;</span>
     </div>
     <div class="mb-1">
       <label v-text="i18n('labelTranslator')"></label>

src/options/views/tab-settings/vm-export.vue

@@ -10,7 +10,7 @@
     </div>
     <button v-text="i18n('buttonAllNone')" @click="toggleSelection()"></button>
     <button v-text="i18n('buttonExportData')" @click="exportData" :disabled="exporting"></button>
-    <label>
+    <label class="ml-1">
       <setting-check name="exportValues" />
       <span v-text="i18n('labelExportScriptData')"></span>
     </label>

src/options/views/tab-settings/vm-sync.vue

@@ -5,7 +5,7 @@
     </h3>
     <div>
       <span v-text="i18n('labelSyncService')"></span>
-      <select :value="syncConfig.current" @change="onSyncChange">
+      <select class="mx-1" :value="syncConfig.current" @change="onSyncChange">
         <option v-for="service in syncServices" v-text="service.displayName" :value="service.name"></option>
       </select>
       <button v-text="labelAuthorize" v-if="service.name"