diff options
Diffstat (limited to 'css/contact-details-avatar.scss')
| -rw-r--r-- | css/contact-details-avatar.scss | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss new file mode 100644 index 00000000..d2ad4485 --- /dev/null +++ b/css/contact-details-avatar.scss @@ -0,0 +1,125 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Team Popcorn <teampopcornberlin@gmail.com> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + */ + +// AVATAR +.contact-header-avatar { + position: relative; + height: 75px; + width: 75px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + margin: 0 22px 0 44px; + &__background { + opacity: .2; + z-index: 0; + left: 0; + top: 50px; + } + &__photo { + z-index: 10; + background-size: cover; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + } + label.icon-upload-white { + opacity: .5; + z-index: 2; + position: absolute; + width: 100%; + height: 100%; + &:hover, + a:active, + a:focus { + opacity: .7; + } + } + &__photo + label.icon-upload-white { + opacity: 0; + } + &__options { + top: 0; + background-color: rgba(0, 0, 0, 0.2); + width: 100%; + height: 100%; + overflow: hidden; + } +} + +.contact-header-avatar.maximised { + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + border-radius: 0; + margin: 0px; + background-color: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: center; + z-index: 200; + padding-top: $header-height; + flex-direction: column; + .contact-header-avatar__photo { + border-radius: 0; + align-self: center; + background-size: contain; + margin: 50px; + } + label.icon-upload-white { + width: 25%; + height: 40px; + position: relative; + } + .contact-header-avatar__options { + height: 50px; + width: 100%; + display: flex; + opacity: 1; + flex-wrap: wrap; + justify-content: space-evenly; + } + .contact-header-avatar__options > [class^='icon-'] { + width: 25%; + display: block; + cursor: pointer; + opacity: 0.5; + } + .contact-header-avatar__options > [class^='icon-']:hover { + opacity: 0.8; + } +} + +.contact-header-avatar-options { + top: 0; + background-color: rgba(0, 0, 0, 0.2); + display: flex; + width: 100%; + height: 100%; + overflow: hidden; +} + + |