style: borderless style

Thanks a lot to @bershan2

src/common/ui/style/style.css

@@ -5,12 +5,10 @@
 }
 
 html {
-  height: 100%;
   font: 14px menu;
 }
 
 body {
-  height: 100%;
   font-size: 1rem;
   font-family: "PingFang SC", STHeiti, "Microsoft YaHei", sans-serif;
 }
@@ -22,21 +20,6 @@ h1, h2 {
   margin-top: .5em;
   margin-bottom: .5em;
 }
-button {
-  padding: 0 .5rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  background: white;
-  cursor: pointer;
-  border: 1px solid #bbb;
-  &:hover {
-    border-color: #bbb;
-  }
-  > .icon {
-    display: block;
-    height: 2rem;
-  }
-}
 a {
   color: dodgerblue;
 }
@@ -72,9 +55,27 @@ svg path {
   fill: currentColor;
 }
 
-.pull-left {
-  float: left;
+.btn-ghost,
+button {
+  display: inline-block;
+  padding: 0 .5rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  cursor: pointer;
+  vertical-align: bottom;
 }
+.btn-ghost {
+  border: 1px solid transparent;
+  &:hover {
+    border-color: #bbb;
+    background: white;
+  }
+  > .icon {
+    display: block;
+    height: 2rem;
+  }
+}
+
 .pull-right {
   float: right;
 }

src/confirm/app.js

@@ -5,6 +5,7 @@ import 'src/common/handlers';
 import options from 'src/common/options';
 import 'src/common/ui/style';
 import App from './views/app';
+import './style.css';
 
 Vue.prototype.i18n = i18n;
 document.title = `${i18n('labelInstall')} - ${i18n('extName')}`;

src/confirm/style.css

@@ -0,0 +1,4 @@
+html,
+body {
+  height: 100%;
+}

src/options/style.css

@@ -1,15 +1,15 @@
+html,
+body {
+  height: 100%;
+}
 aside {
-  position: absolute;
-  background: #fafafa;
-  top: 0;
-  left: 0;
-  width: 14rem;
+  flex: 0 0 14rem;
   padding: 4rem 1rem 0;
-  border: none;
   text-align: right;
-}
-aside img {
-  width: 5rem;
+  background: #fafafa;
+  img {
+    width: 5rem;
+  }
 }
 .sidemenu > a {
   display: block;
@@ -19,10 +19,10 @@ aside img {
   font-weight: bold;
   text-decoration: none;
   color: gray;
-}
-.sidemenu > a.active,
-.sidemenu > a:hover {
-  color: black;
+  &.active,
+  &:hover {
+    color: black;
+  }
 }
 #currentLang {
   color: green;
@@ -52,70 +52,6 @@ section {
 .options-panel label {
   display: block;
 }
-.script {
-  position: relative;
-  margin: .6rem;
-  padding: .6rem;
-  border: 1px solid #ccc;
-  border-radius: .3rem;
-  transition: transform .5s;
-}
-.script:hover {
-  border-color: darkgray;
-}
-.script.disabled {
-  background: lightgray;
-  color: gray;
-}
-.script .pull-right {
-  margin-left: 1em;
-}
-.script-info {
-  margin-left: 3.5rem;
-  line-height: 1.5;
-  align-items: center;
-  > * {
-    margin-right: .8rem;
-  }
-  .icon {
-    display: block;
-  }
-}
-.script-icon {
-  position: absolute;
-  top: .8rem;
-  width: 3rem;
-  height: 3rem;
-}
-.script-name {
-  font-weight: bold;
-  font-size: 1rem;
-}
-.script-author {
-  max-width: 30%;
-}
-.script-desc {
-  margin-left: 3.5rem;
-  line-height: 2rem;
-}
-.script-desc::after {
-  content: "\200b";
-}
-.disabled .script-icon {
-  filter: grayscale(.5);
-}
-.disabled .script-name {
-  color: blueviolet;
-}
-.dragging-placeholder {
-  visibility: hidden;
-}
-.dragging {
-  position: fixed;
-  margin: 0;
-  background: wheat;
-  z-index: 9;
-}
 .feature {
   &-text {
     position: relative;
@@ -138,8 +74,6 @@ section {
 
 .tab {
   position: relative;
-  height: 100%;
-  margin-left: 14rem;
   padding: 1.2rem;
   background: white;
   border-left: 1px solid darkgray;

src/options/views/app.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="page-options pos-rel h-100">
-    <aside class="h-100">
+  <div class="page-options flex h-100">
+    <aside>
       <img src="/public/images/icon128.png">
       <h1 v-text="i18n('extName')"></h1>
       <hr>
-      <div class=sidemenu>
+      <div class="sidemenu">
         <a href="#?t=Installed" :class="{active: tab === 'Installed'}" v-text="i18n('sideMenuInstalled')"></a>
         <a href="#?t=Settings" :class="{active: tab === 'Settings'}" v-feature="'settings'">
           <span v-text="i18n('sideMenuSettings')" class="feature-text"></span>
@@ -12,7 +12,7 @@
         <a href="#?t=About" :class="{active: tab === 'About'}" v-text="i18n('sideMenuAbout')"></a>
       </div>
     </aside>
-    <component :is="tab" class="tab"></component>
+    <component :is="tab" class="tab flex-auto"></component>
   </div>
 </template>
 

src/options/views/script-item.vue

@@ -16,28 +16,28 @@
       <div class="script-version" v-text="script.meta.version?'v'+script.meta.version:''"></div>
     </div>
     <p class="script-desc ellipsis" v-text="script.custom.description || getLocaleString('description')"></p>
-    <div class="buttons">
+    <div class="buttons flex">
       <tooltip :title="i18n('buttonEdit')">
-        <button @click="onEdit">
+        <span class="btn-ghost" @click="onEdit">
           <svg class="icon"><use xlink:href="#code" /></svg>
-        </button>
+        </span>
       </tooltip>
       <tooltip :title="labelEnable">
-        <button @click="onEnable">
+        <span class="btn-ghost" @click="onEnable">
           <svg class="icon"><use :xlink:href="`#toggle-${script.enabled ? 'on' : 'off'}`" /></svg>
-        </button>
+        </span>
       </tooltip>
       <tooltip :title="i18n('buttonRemove')">
-        <button @click="onRemove">
+        <span class="btn-ghost" @click="onRemove">
           <svg class="icon"><use xlink:href="#trash" /></svg>
-        </button>
+        </span>
       </tooltip>
       <tooltip v-if="canUpdate" :title="i18n('buttonUpdate')">
-        <button :disabled="script.checking" @click="onUpdate">
+        <span class="btn-ghost" :disabled="script.checking" @click="onUpdate">
           <svg class="icon"><use xlink:href="#refresh" /></svg>
-        </button>
+        </span>
       </tooltip>
-      <span v-text="script.message"></span>
+      <span class="flex-auto" v-text="script.message"></span>
     </div>
   </div>
 </template>
@@ -275,13 +275,71 @@ export default {
 
 <style>
 .script {
+  position: relative;
+  margin: 8px;
+  padding: 12px 10px 5px;
+  border: 1px solid #ccc;
+  border-radius: .3rem;
+  transition: transform .5s;
+  background: white;
+  &:hover {
+    border-color: darkgray;
+  }
+  &.disabled {
+    background: #f0f0f0;
+    color: #999;
+  }
   .buttons {
+    align-items: center;
     line-height: 1;
+    > .flex-auto {
+      text-align: right;
+    }
   }
   &-info {
+    margin-left: 3.5rem;
+    line-height: 1.5;
+    align-items: center;
     > *:not(:last-child) {
       margin-right: 8px;
     }
+    .icon {
+      display: block;
+    }
+  }
+  &-icon {
+    position: absolute;
+    top: 1rem;
+    width: 3rem;
+    height: 3rem;
+    .disabled & {
+      filter: grayscale(.8);
+    }
+  }
+  &-name {
+    font-weight: bold;
+    font-size: 1rem;
+    .disabled & {
+      color: blueviolet;
+    }
+  }
+  &-author {
+    max-width: 30%;
+  }
+  &-desc {
+    margin-left: 3.5rem;
+    line-height: 2rem;
+    &::after {
+      content: "\200b";
+    }
+  }
+}
+.dragging {
+  position: fixed;
+  margin: 0;
+  z-index: 9;
+  &-placeholder {
+    visibility: hidden;
   }
 }
 </style>

src/options/views/tab-installed.vue

@@ -3,18 +3,18 @@
     <header class="flex">
       <div class="flex-auto">
         <vm-dropdown :closeAfterClick="true">
-          <button slot="toggle">
+          <span class="btn-ghost" slot="toggle">
             <svg class="icon"><use xlink:href="#plus" /></svg>
-          </button>
+          </span>
           <a href="#" v-text="i18n('buttonNew')" @click.prevent="newScript"></a>
           <a v-text="i18n('installFrom', 'OpenUserJS')" href="https://openuserjs.org/" target="_blank"></a>
           <a v-text="i18n('installFrom', 'GreasyFork')" href="https://greasyfork.org/scripts" target="_blank"></a>
           <a href="#" v-text="i18n('buttonInstallFromURL')" @click.prevent="installFromURL"></a>
         </vm-dropdown>
         <tooltip :title="i18n('buttonUpdateAll')" placement="down">
-          <button @click="updateAll">
+          <span class="btn-ghost" @click="updateAll">
             <svg class="icon"><use xlink:href="#refresh" /></svg>
-          </button>
+          </span>
         </tooltip>
       </div>
       <div class="filter-search">

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

@@ -198,9 +198,11 @@ function exportData(selectedIds) {
     margin-right: .2rem;
     margin-bottom: .1rem;
     padding: 0 .3rem;
-    box-shadow: 0 0 1px black;
+    border: 1px solid #bbb;
+    border-radius: 3px;
     cursor: pointer;
     &.active {
+      border-color: #2c82c9;
       background: #3498db;
       color: white;
     }

src/popup/style.css

@@ -1,6 +1,6 @@
 body {
   min-width: 20em;
-  padding: 1em;
+  padding-top: 1em;
 }
 
 .logo {
@@ -16,9 +16,11 @@ body {
   border-top: 1px solid silver;
   &-item {
     position: relative;
+    height: 2rem;
+    line-height: 2rem;
+    padding: 0 3rem;
     cursor: pointer;
     text-align: center;
-    padding: .5em 2em;
     .submenu > & {
       text-align: left;
     }
@@ -34,32 +36,35 @@ body {
     }
     > .icon {
       position: absolute;
-      top: .7em;
-      left: .5em;
+      top: 0;
+      left: 1.5rem;
+      width: 1rem;
+      height: 100%;
       &-right {
         left: auto;
-        right: .5em;
+        right: 1.5em;
       }
     }
   }
-  &.collapse {
+  .icon-collapse {
+    transform: none;
+  }
+  &.expand {
+    background: #fbfbfb;
     > .submenu {
-      display: none;
+      display: block;
     }
     .icon-collapse {
-      transform: none;
-    }
-  }
-  &:not(.collapse) {
-    > .menu-item > .icon-collapse {
       transform: rotateZ(90deg);
     }
   }
 }
 .submenu {
-  min-height: 4em;
-  max-height: 18em;
-  margin-left: 2em;
+  display: none;
+  background: white;
+  min-height: 4rem;
+  max-height: 16rem;
+  margin-left: 2rem;
   overflow-y: auto;
   border-top: 1px dashed #ddd;
 }

src/popup/views/app.vue

@@ -13,7 +13,7 @@
         <span v-text="i18n('menuDashboard')"></span>
       </div>
     </div>
-    <div class="menu menu-domains" v-show="domains.length" :class="{collapse:activeMenu!=='domains'}">
+    <div class="menu menu-domains" v-show="domains.length" :class="{expand:activeMenu==='domains'}">
       <div class="menu-item" @click="toggleMenu('domains')">
         <icon name="search"></icon>
         <icon name="more" class="icon-right icon-collapse"></icon>
@@ -25,7 +25,7 @@
         </div>
       </div>
     </div>
-    <div class="menu menu-commands" v-show="commands.length" :class="{collapse:activeMenu!=='commands'}">
+    <div class="menu menu-commands" v-show="commands.length" :class="{expand:activeMenu==='commands'}">
       <div class="menu-item" @click="toggleMenu('commands')">
         <icon name="more" class="icon-right icon-collapse"></icon>
         <span v-text="i18n('menuCommands')"></span>
@@ -36,7 +36,7 @@
         </div>
       </div>
     </div>
-    <div class="menu menu-scripts" v-show="scripts.length" :class="{collapse:activeMenu!=='scripts'}">
+    <div class="menu menu-scripts" v-show="scripts.length" :class="{expand:activeMenu==='scripts'}">
       <div class="menu-item" @click="toggleMenu('scripts')">
         <icon name="more" class="icon-right icon-collapse"></icon>
         <span v-text="i18n('menuMatchedScripts')"></span>
@@ -75,11 +75,6 @@ export default {
       store,
       options: optionsData,
       activeMenu: 'scripts',
-      collapse: {
-        domains: true,
-        commands: true,
-        scripts: false,
-      },
     };
   },
   computed: {
@@ -107,7 +102,7 @@ export default {
       this.activeMenu = this.activeMenu === name ? null : name;
     },
     getSymbolCheck(bool) {
-      return bool ? 'check' : 'remove';
+      return `toggle-${bool ? 'on' : 'off'}`;
     },
     onToggle() {
       options.set('isApplied', !this.options.isApplied);