diff --git a/src/global.css b/src/global.css index d6c5196..d2325d8 100644 --- a/src/global.css +++ b/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; } diff --git a/src/popup/interface.js b/src/popup/interface.js index 92b16dc..960465c 100644 --- a/src/popup/interface.js +++ b/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 diff --git a/src/popup/popup.css b/src/popup/popup.css index 05e72bb..e02aee5 100644 --- a/src/popup/popup.css +++ b/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 {