Style main popup view (#10)

src/global.css

@@ -1,5 +1,6 @@
 html,
 body {
+    background-color: #fff;
     font-family: sans;
     font-size: 14px;
     margin: 0;
@@ -11,6 +12,6 @@ body {
     border-radius: 4px;
     color: #fff;
     font-size: 12px;
-    margin: 0 4px;
-    padding: 2px 4px;
+    margin: 0 6px;
+    padding: 1px 4px;
 }

src/popup/interface.js

@@ -115,7 +115,7 @@ function view(ctl, params) {
                                           result.recent.count +
                                           " time" +
                                           (result.recent.count > 1 ? "s" : "") +
-                                          ", last " +
+                                          ", last used " +
                                           Moment(new Date(result.recent.when)).fromNow()
                                   })
                                 : null

src/popup/popup.css

@@ -5,6 +5,11 @@ body {
     white-space: nowrap;
 }
 
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    display: none;
+}
+
 body {
     display: flex;
     flex-direction: column;
@@ -16,7 +21,7 @@ body {
     flex-direction: column;
     overflow-y: auto;
     height: inherit;
-    max-height: 203px; /* 7 x 29px login part*/
+    max-height: 217px; /* 7 x 31px login part*/
 }
 
 .part {
@@ -24,8 +29,6 @@ body {
     box-sizing: border-box;
     display: flex;
     flex-shrink: 0;
-    min-height: 29px;
-    padding: 6px;
     width: 100%;
 }
 
@@ -40,36 +43,42 @@ body {
 .part.error {
     color: #f00;
     white-space: normal;
+    padding: 7px;
 }
 
 .part.notice {
     color: #090;
     white-space: normal;
+    padding: 7px;
 }
 
 .part.search {
-    padding-right: 28px;
+    padding: 6px 28px 6px 6px;
     background-image: url("icon-search.svg");
     background-position: top 6px right 6px;
     background-repeat: no-repeat;
     background-size: 18px;
+    background-color: #f7f7f7;
 }
 
 .part.search:focus-within {
-    background-color: #eef;
+    background-color: #fff;
 }
 
 .part.search > .hint {
     background-color: #66c;
     display: flex;
+    align-items: center;
+    line-height: 19px;
 }
 
 .part.search > .hint > .remove-hint {
     background-image: url("icon-bs-delete.svg");
     background-repeat: no-repeat;
     background-size: contain;
+    cursor: pointer;
     height: 12px;
-    margin: 1px 0 1px 4px;
+    margin: 3px 0 3px 4px;
     width: 16px;
 }
 
@@ -82,21 +91,31 @@ body {
 
 .part.login {
     display: flex;
+    cursor: pointer;
+    align-items: center;
+    height: 31px;
 }
 
-.part.login:first-child {
-    background-color: #efe;
+.logins:not(:hover):not(:focus-within) .part.login:first-child > .name {
+    background-color: #f7f7f7;
 }
 
 .part.login:hover,
 .part.login:focus {
-    background-color: #eee;
     outline: none;
 }
 
+.part.login > .name:hover,
+.part.login > .action:hover,
+.part.login:focus > .name {
+    background-color: #eee;
+}
+
 .part.login > .name {
     display: flex;
     width: 100%;
+    height: 19px;
+    padding: 6px;
 }
 
 .part.login > .name > .recent {
@@ -104,16 +123,17 @@ body {
     background-repeat: no-repeat;
     background-size: contain;
     margin-left: 4px;
-    width: 16px;
+    width: 10px;
+    margin-top: 2px;
 }
 
 .part.login > .action {
-    background-position: right 3px top 0;
+    background-position: center;
     background-repeat: no-repeat;
-    background-size: 20px;
-    filter: drop-shadow(2px 2px 1px #666) invert(18%);
-    margin: -2px 0;
+    background-size: 19px;
     width: 30px;
+    height: 19px;
+    padding: 6px;
 }
 
 .past.login > .action:hover {
@@ -130,6 +150,7 @@ body {
 
 .part.login > .action.launch {
     background-image: url("icon-launch.svg");
+    background-position-y: 5.5px;
 }
 
 .part.login em {