diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/ContactDetailsAvatar.scss | 22 | ||||
| -rw-r--r-- | css/ContactsList.scss | 14 | ||||
| -rw-r--r-- | css/icons.scss | 9 |
3 files changed, 30 insertions, 15 deletions
diff --git a/css/ContactDetailsAvatar.scss b/css/ContactDetailsAvatar.scss index e1523e62..def6b5d9 100644 --- a/css/ContactDetailsAvatar.scss +++ b/css/ContactDetailsAvatar.scss @@ -57,6 +57,9 @@ background-size: cover; // White background for avatars with transparency, also in dark theme background-color: #fff; + &:hover + .contact-avatar-options__popovermenubtn { + opacity: .25; + } } &__options { position: absolute; @@ -68,7 +71,6 @@ display: block; width: 100%; height: 100%; - opacity: .5; background-color: rgba(0, 0, 0, .2); &:hover, &:active, @@ -78,6 +80,24 @@ &__popovermenu { // center margin: calc((100% - 44px) / 2); + } + &__popovermenubtn { + height: 45px; + width: 45px; + border-radius: 50%; + z-index: 11; + background: rgba(0, 0, 0, .2); + opacity: 0; + &:hover, + &:active, + &:focus { + opacity: 1; + } + // bottom right + margin: calc((100% + 5px) / 2); + } + &__popovermenu, + &__popovermenubtn { & .action-item__menutoggle { // hide three dot menu, in favour of icon-picture-force-white z-index: -1; diff --git a/css/ContactsList.scss b/css/ContactsList.scss index 75ef932a..43e8f17c 100644 --- a/css/ContactsList.scss +++ b/css/ContactsList.scss @@ -33,17 +33,3 @@ border-radius: 50%; opacity: 1; } - -// Virtual scroller overrides -.vue-recycle-scroller { - position: sticky !important; -} - -.vue-recycle-scroller__item-view { - // TODO: find better solution? - // https://github.com/Akryum/vue-virtual-scroller/issues/70 - // hack to not show the transition - overflow: hidden; - // same as app-content-list-item - height: 68px; -} diff --git a/css/icons.scss b/css/icons.scss index 0d7c99d0..14889d61 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -30,6 +30,15 @@ @include icon-black-white('no-calendar', 'contacts', 1); @include icon-black-white('language', 'contacts', 2); @include icon-black-white('clone', 'contacts', 2); +@include icon-black-white('sync', 'contacts', 2); +@include icon-black-white('recent-actors', 'contacts', 1); + +// social network icons: +@include icon-black-white('facebook', 'contacts', 2); // “facebook (fab)” by fontawesome.com is licensed under CC BY 4.0. (https://fontawesome.com/icons/facebook?style=brands) +@include icon-black-white('instagram', 'contacts', 2); // “instagram (fab)” by fontawesome.com is licensed under CC BY 4.0. (https://fontawesome.com/icons/instagram?style=brands) +@include icon-black-white('mastodon', 'contacts', 2); // “mastodon (fab)” by fontawesome.com is licensed under CC BY 4.0. (https://fontawesome.com/icons/mastodon?style=brands) +@include icon-black-white('tumblr', 'contacts', 2); // “tumblr (fab)” by fontawesome.com is licensed under CC BY 4.0. (https://fontawesome.com/icons/tumblr?style=brands) +@include icon-black-white('twitter', 'contacts', 2); // “twitter (fab)” by fontawesome.com is licensed under CC BY 4.0. (https://fontawesome.com/icons/twitter?style=brands) .icon-up-force-white { // using #fffffe to trick the accessibility dark theme icon invert |