diff options
author | skjnldsv <fremulon@protonmail.com> | 2016-04-10 11:40:08 +0200 |
---|---|---|
committer | skjnldsv <fremulon@protonmail.com> | 2016-04-20 07:55:42 +0200 |
commit | 0275c39b60fd86938789d336243da748eff38d46 (patch) | |
tree | e17b7dbcdef755dd72cbbb7a60fe661a1d7ab912 /css | |
parent | a807a0a107c9a30a6a8c389f30e42e055c2c0249 (diff) |
Single contact export button
Added addressbook export button
Fixed header css and export button location
+ add empty div to replace empty space if no picture
Diffstat (limited to 'css')
-rw-r--r-- | css/public/style.css | 75 |
1 files changed, 47 insertions, 28 deletions
diff --git a/css/public/style.css b/css/public/style.css index 83af8bba..a0fb2fe2 100644 --- a/css/public/style.css +++ b/css/public/style.css @@ -7,41 +7,43 @@ align-items: center; } +.contactdetails__header #details-contact-infos { + width: 80%; + margin: 2px 6px 0px; + flex-grow: 1; +} .contactdetails__header h2 { - position: absolute; - top: 15px; - left: 100px; - width: 75%; + margin: 0; } .contactdetails__header #details-org-container { - position: absolute; display: flex; - top: 50px; - left: 100px; - width: 70%; + flex-wrap: wrap; } .contactdetails__header .contactdetails__name, .contactdetails__header .contactdetails__org, .contactdetails__header .contactdetails__title { - font-size: inherit !important; - width: auto !important; - color: #fff !important; - background: transparent !important; - border: none !important; + font-size: inherit; + color: #fff !important; /* override focus,active&hover */ + background: transparent; + border: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%; - min-width: 25%; - margin: 3px 0; + margin: 0; + padding: 4px 5px; } .contactdetails__header .contactdetails__org, .contactdetails__header .contactdetails__title { max-width: 50%; + min-width: 150px; } .contactdetails__header .contactdetails__name { - max-width: 100%; - width: 100% !important; + width: 100%; +} +.contactdetails__header #details-actions { + display: flex; + flex-shrink: 0; } /* fix placeholder color */ .contactdetails__header .contactdetails__name::-webkit-input-placeholder, @@ -69,26 +71,45 @@ opacity: .8; } -.contactdetails__header .icon-delete-white { - position: absolute; - right: 0; +.contactdetails__header .icon-delete-white, +.contactdetails__header #contact-export-link { padding: 15px; - right: 15px; - top: 30px; background-color: transparent; border: none; opacity: .5; + margin: 3px; } .contactdetails__header .icon-delete-white:hover, -.contactdetails__header .icon-delete-white:focus { +.contactdetails__header .icon-delete-white:focus, +.contactdetails__header #contact-export-link:hover, +.contactdetails__header #contact-export-link:focus { opacity: .7 } -.contactdetails__logo { +.contactdetails__header .contactdetails__logo { height: 75px; width: 75px; object-fit: cover; background-color: transparent; + flex-shrink: 0; + margin: 0; +} +.contactdetails__header .contactdetails__logo.contact__icon { + background-color: transparent; + height: 75px; + width: 75px; + font-size: 2.5em; + line-height: 75px; +} +.contactdetails__header .contactdetails__logo.contact__icon > span { + display: block; + width: 100%; + height: 100%; + opacity: 0.5; + cursor: pointer; +} +.contactdetails__header .contactdetails__logo.contact__icon:hover > span { + opacity: 0.7; } #check-all + label:before { @@ -239,10 +260,8 @@ ul.addressBook-share-list li { margin-left: 15px; } -ul.addressBookList li .action .icon-public, -ul.addressBookList li .action .icon-share, -ul.addressBookList li .action .icon-delete { - padding: 10px 18px; +ul.addressBookList li .action > span { + padding: 10px 14px; } div.addressBookShares ul.dropdown-menu { |