diff --git a/core/css/apps.scss b/core/css/apps.scss index 029301c326..d17cf9140c 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -829,6 +829,7 @@ $popovericon-size: 16px; background-color: var(--color-main-background); color: var(--color-main-text); border-radius: var(--border-radius); + border: 1px solid transparent; z-index: 110; margin: 5px; margin-top: -5px; @@ -838,9 +839,11 @@ $popovericon-size: 16px; &:after { bottom: 100%; - /* Min-width of popover is 36px and arrow width is 20px - wich leaves us 8px right and 8px left */ - right: 8px; + // Required right-distance is half menu icon size + right padding + // = 16px/2 + 14px = 22px + // popover right margin is 5px, arrow width is 9px to center and border is 1px + // 22px - 9px - 5px - 1px = 7px + right: 7px; /* change this to adjust the arrow position */ border: solid transparent; content: ' '; @@ -849,7 +852,7 @@ $popovericon-size: 16px; position: absolute; pointer-events: none; border-bottom-color: var(--color-main-background); - border-width: 10px; + border-width: 9px; } /* Center the popover */ &.menu-center { diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 72e69fa240..f3d51217f0 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -410,6 +410,7 @@ table.nostyle { } } +/* Devices & sessions access & tokens */ #security { table { width: 100%; @@ -420,12 +421,6 @@ table.nostyle { opacity: .5; padding: 10px 10px 10px 0; } - td { - padding: 10px 10px 10px 0; - &:first-child { - padding: 10px; - } - } } .token-list td { &%icon { @@ -441,8 +436,8 @@ table.nostyle { div { opacity: 0.57; - width: inherit; - padding-top: 5px; + width: 44px; + height: 44px; } } border-top: 1px solid var(--color-border); @@ -450,48 +445,27 @@ table.nostyle { max-width: 200px; white-space: nowrap; overflow: hidden; - vertical-align: top; + vertical-align: middle; position: relative; } tr > *:nth-child(3) { text-align: right; } .token-list { - td > a.icon { - + td > a.icon-more { transition: opacity 0.5s; } - a.icon { - margin-top: 4px; + a.icon-more { + padding: 14px; display: block; + width: 44px; + height: 44px; + opacity: .5; } tr { - &:hover td > a.icon, &.active td > a.icon { - opacity: 0.6; - } - } - td div.configure { - display: none; - } - tr.active div.configure { - display: block; - position: absolute; - top: 45px; - right: -5px; - padding: 10px; - } - div.configure:after { - right: 13px; - } - tr.active { - div.configure > * { - margin-top: 5px; - margin-bottom: 5px; - display: inline-block; - } - a.icon-delete { - background-position: left; - padding-left: 20px; + &:hover td > a.icon, + &.active td > a.icon { + opacity: 0.7; } } } diff --git a/settings/js/authtoken_view.js b/settings/js/authtoken_view.js index 7f788935ac..523d548f20 100644 --- a/settings/js/authtoken_view.js +++ b/settings/js/authtoken_view.js @@ -36,13 +36,17 @@ + '{{lastActivity}}' + '' + '{{#if showMore}}{{/if}}' - + '