diff options
Diffstat (limited to 'core/css')
| -rw-r--r-- | core/css/header.scss | 34 | ||||
| -rw-r--r-- | core/css/icons.scss | 4 | ||||
| -rw-r--r-- | core/css/styles.scss | 115 |
3 files changed, 134 insertions, 19 deletions
diff --git a/core/css/header.scss b/core/css/header.scss index 619852faf60..50d270a6ff9 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -20,10 +20,21 @@ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; +} - /* Dropdown menu arrow */ - &.menu:after, - .menu:after { +/* Header menu */ +.menu { + position: absolute; + top: 45px; + background-color: #fff; + box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75); + border-radius: 0 0 3px 3px; + display: none; + box-sizing: border-box; + z-index: 2000; + + /* Dropdown arrow */ + &:after { border: 10px solid transparent; border-bottom-color: $color-main-background; bottom: 100%; @@ -199,19 +210,12 @@ nav { #navigation { position: relative; - top: 45px; left: -100%; width: 160px; - margin-top: 0; background-color: $color-main-background; box-shadow: 0 1px 10px $color-box-shadow; - border-radius: 3px; - border-top-left-radius: 0; - border-top-right-radius: 0; - display: none; - box-sizing: border-box; - z-index: 2000; &:after { + /* position of dropdown arrow */ left: 47%; bottom: 100%; border: solid transparent; @@ -407,17 +411,9 @@ nav { } #expanddiv { - position: absolute; right: 13px; - top: 45px; - z-index: 2000; - display: none; background: $color-main-background; box-shadow: 0 1px 10px $color-box-shadow; - border-radius: 3px; - border-top-left-radius: 0; - border-top-right-radius: 0; - box-sizing: border-box; &:after { /* position of dropdown arrow */ right: 13px; diff --git a/core/css/icons.scss b/core/css/icons.scss index 1ca29f22600..f9b73f51923 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -438,6 +438,10 @@ img, object, video, button, textarea, input, select { background-image: url('../img/places/calendar-dark.svg?v=1'); } +.icon-contacts { + background-image: url('../img/places/contacts.svg?v=1'); +} + .icon-contacts-dark { background-image: url('../img/places/contacts-dark.svg?v=1'); } diff --git a/core/css/styles.scss b/core/css/styles.scss index a6970336c12..ed11fd52158 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -1057,6 +1057,121 @@ span.ui-icon { margin: 3px 7px 30px 0; } +/* ---- CONTACTS MENU ---- */ + +#contactsmenu { + .menutoggle { + background-size: 16px 16px; + padding: 14px; + cursor: pointer; + opacity: .7; + } +} + +#contactsmenu > .menu { + /* show ~4.5 entries */ + height: 278px; + width: 350px; + right: 13px; + + &::after { + right: 61px; + } + + .emptycontent { + margin-top: 5vh !important; + margin-bottom: 2vh; + .icon-loading { + position: inherit; + } + .icon-search { + display: inline-block; + } + } + + .content { + max-height: calc(100% - 50px); + overflow-y: auto; + + .footer { + text-align: center; + + a { + display: block; + width: 100%; + padding: 12px 0; + opacity: .5; + } + } + } + + .contact { + display: flex; + position: relative; + align-items: center; + padding: 3px 3px 3px 10px; + border-bottom: 1px solid #eeeeee; + + :last-of-type { + border-bottom: none; + } + + .avatar { + height: 32px; + width: 32px; + display: inline-block; + } + + .body { + flex-grow: 1; + padding-left: 8px; + + div { + position: relative; + width: 100%; + } + + .full-name, .last-message { + /* TODO: don't use fixed width */ + max-width: 204px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .last-message { + opacity: .5; + } + } + + .top-action, .second-action, .other-actions { + width: 16px; + height: 16px; + padding: 14px; + opacity: .5; + cursor: pointer; + + :hover { + opacity: 1; + } + } + + /* actions menu */ + .menu { + top: 47px; + margin-right: 13px; + } + .popovermenu::after { + right: 2px; + } + } +} + + +#contactsmenu-search { + width: calc(100% - 16px); + margin: 8px; +} + /* ---- TOOLTIPS ---- */ .extra-data { |