/*--------------------------------------------------------------------------- [Table Of Contents] 1. Hover style 2. Fixed style 3. Minimal style 4. Nectar Love ---------------------------------------------------------------------------*/ /************ 1. Hover style **************/ #single-below-header .nectar-social.hover { margin-right: 14px; } #single-below-header .nectar-social.hover[data-rm-love="1"] { margin-right: 0; } .nectar-social.hover { position :relative; } .nectar-social.hover > *:not(.share-btn) { margin-bottom: 14px; } .nectar-social.hover > div:not(.share-btn) { display: inline-block; } #ajax-content-wrap .nectar-social.hover .nectar-love-button span { padding-left: 0; } .nectar-social.hover .share-btn i { -webkit-transition: none; transition: none; } .nectar-social.hover .share-btn, .nectar-social.hover > div span, body .nectar-social.hover .nectar-love .nectar-love-count { font-size: 14px; line-height: 28px; } .nectar-social.hover > div a > span { -webkit-transition: color .45s cubic-bezier(0.25,1,0.33,1); transition: color .45s cubic-bezier(0.25,1,0.33,1); } .nectar-social.hover .share-btn, .nectar-social.hover > div a > span { cursor: pointer; -webkit-transition: color .45s cubic-bezier(0.25,1,0.33,1); transition: color .45s cubic-bezier(0.25,1,0.33,1); } .nectar-social.hover .share-btn, .nectar-social.hover > div a { display: inline-block; border: 2px solid rgba(0,0,0,0.1); padding: 6px 20px; -webkit-transition: border-color .45s cubic-bezier(0.25,1,0.33,1); transition: border-color .45s cubic-bezier(0.25,1,0.33,1); border-radius: 100px; } .nectar-social.hover .share-btn, .nectar-social.hover > div a > span, .sharing-default-minimal .nectar-love { color: #888; } #single-meta .nectar-social.hover .share-btn { padding-left: 20px; } .nectar-social.hover .share-btn:hover, .nectar-social.hover > div a:hover { border-color: rgba(0,0,0,0.5); } .nectar-social.hover .nectar-social-inner { position: absolute; left: 0; pointer-events: none; width: 300px; } .nectar-social.hover .share-btn { margin-right: 14px; } .nectar-social.hover i.icon-default-style[class^="icon-"], .nectar-social.hover i[class^="icon-"] { margin-right: 7px; font-size: 18px; line-height: 23px; height: 20px; -webkit-transition: color .45s cubic-bezier(0.25,1,0.33,1); transition: color .45s cubic-bezier(0.25,1,0.33,1); } .nectar-social.hover .nectar-social-inner a i { font-size: 16px; } .nectar-social.hover .nectar-social-inner a { transform: translateX(-20px); opacity: 0; height: 45px; width: 45px; padding: 0; color: #ddd; margin: 0 14px 14px 0; text-align: center; line-height: 43px; } .portfolio-items .col .custom-content .nectar-social.hover .nectar-social-inner a { width: 45px; } .portfolio-items .col .custom-content .nectar-social.hover .nectar-social-inner a { margin: 0 14px 14px 0; } .portfolio-items .col .custom-content .nectar-social.hover.visible .share-btn, .portfolio-items .col .custom-content .nectar-social.hover.visible .nectar-love-button, .portfolio-items .col .custom-content .nectar-social.hover:not(.visible) .nectar-social-inner a { opacity: 0!important; } .portfolio-items .custom-content .nectar-social.hover .nectar-love { height: auto; } .nectar-social.hover[data-position="right"] .nectar-social-inner a { transform: translateX(20px); } .nectar-social.hover[data-position="right"] .share-btn { float: right; margin-left: 14px; margin-right: 0; } .nectar-social.hover[data-position="right"] .nectar-social-inner { left: auto; text-align: right; right: 0; } .nectar-social.hover.visible .nectar-social-inner a:not(:hover):nth-child(2) { transition-delay: 0.03s; } .nectar-social.hover.visible .nectar-social-inner a:not(:hover):nth-child(3) { transition-delay: 0.06s; } .nectar-social.hover.visible .nectar-social-inner a:not(:hover):nth-child(4) { transition-delay: 0.09s; } .nectar-social.hover.visible .nectar-social-inner a:not(:hover):nth-child(5) { transition-delay: 0.12s; } .nectar-social.hover .share-btn, .nectar-social.hover .nectar-love-button, .nectar-social.hover .nectar-social-inner a { -webkit-transition: all 0.4s cubic-bezier(0.25,1,0.33,1); transition: all 0.4s cubic-bezier(0.25,1,0.33,1), ; } .nectar-social.hover.visible .share-btn, .nectar-social.hover.visible .nectar-love-button { opacity: 0; pointer-events: none; } .nectar-social.hover.visible .nectar-social-inner a, .nectar-social.hover.visible[data-position="right"] .nectar-social-inner a { transform: translateX(0px); opacity: 1; } .nectar-social.hover.visible .nectar-social-inner { pointer-events: all; } /************ 2. Fixed style **************/ .nectar-social.fixed > a:before { background-color: #000; } @media only screen and (max-width:999px){ .nectar-social.fixed >a{ transition:all 0.35s cubic-bezier(.15,0.2,.1,1); -webkit-transition:all 0.35s cubic-bezier(.15,0.2,.1,1); -webkit-transform:scale(0); transform:scale(0) } .nectar-social.fixed{ margin: 0; height:50px; pointer-events:none } .nectar-social.fixed.visible >a{ -webkit-transform:scale(1); transform:scale(1) } .nectar-social.fixed.visible{ pointer-events:auto } } .nectar-social.fixed { position:fixed; right:34px; bottom:34px; height:50px; width:50px; line-height:50px; z-index:1000 } .nectar-social.fixed >a { height:50px; width:50px; line-height:52px; text-align:center; display:block; position:absolute; bottom:0; left:0; z-index:10; } .nectar-social.fixed >a:before{ display:block; content:''; position:absolute; top:0; left:0; width:100%; transition:all 0.45s cubic-bezier(.15,0.2,.1,1); -webkit-transition:all 0.45s cubic-bezier(.15,0.2,.1,1); height:100%; transform: translateZ(0); backface-visibility:hidden; border-radius:50% } .nectar-social.fixed:hover >a:before{ box-shadow:0 7px 15px rgba(0,0,0,0.2) } .nectar-social.fixed >a >[class^="icon-"].icon-default-style{ font-size:16px; height: 50px; width: 50px; line-height: 50px; color:#fff; left:-1px; top: 0; z-index: 10; position: relative; } .nectar-social.fixed .nectar-social-inner { position:absolute; height:50px; width:50px; bottom:0; left:0; z-index:1; text-align:center } .nectar-social.fixed .nectar-social-inner a{ display:block; line-height:36px; height:36px; padding:0; margin:0; width:36px; left:7px; position:absolute; opacity:0; border:none; top:0; box-shadow:0 7px 15px rgba(0,0,0,0.2); border-radius:50%; -webkit-transition:all 0.45s cubic-bezier(.15,0.2,.1,1); transition:all 0.45s cubic-bezier(.15,0.2,.1,1) } .nectar-social.fixed >a:after, .nectar-social.fixed .nectar-social-inner a:after{ background-color:#fff; position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; content:''; display:block; border-radius:50% } .nectar-social.fixed a:after{ -webkit-transition:opacity 0.25s cubic-bezier(.15,0.2,.1,1); transition:opacity 0.25s cubic-bezier(.15,0.2,.1,1) } @keyframes socialButtonFlash{ 0%{ opacity:0; transform:scale(1) } 25%{ opacity:0.22; transform:scale(1.1115) } 100%{ opacity:0; transform:scale(1.23) } } .nectar-social.fixed:hover >a:after{ -webkit-animation:socialButtonFlash 0.45s cubic-bezier(.15,0.2,.1,1) forwards; animation:socialButtonFlash 0.45s cubic-bezier(.15,0.2,.1,1) forwards } .nectar-social.fixed a:hover:after{ opacity:0.2 } .nectar-social.fixed:hover >a:before{ -webkit-transform:scale(1.23) translateZ(0); transform:scale(1.23) translateZ(0) } .nectar-social.fixed .nectar-social-inner a:nth-child(1){ transform:translateY(0px) scale(0); -webkit-transform:translateY(0px) scale(0) } .nectar-social.fixed .nectar-social-inner a:nth-child(2){ -webkit-transform:translateY(-36px) scale(0); transform:translateY(-36px) scale(0) } .nectar-social.fixed .nectar-social-inner a:nth-child(3){ -webkit-transform:translateY(-86px) scale(0); transform:translateY(-86px) scale(0) } .nectar-social.fixed .nectar-social-inner a:nth-child(4){ -webkit-transform:translateY(-136px) scale(0); transform:translateY(-136px) scale(0) } .nectar-social.fixed .nectar-social-inner a:nth-child(5){ -webkit-transform:translateY(-186px) scale(0); transform:translateY(-186px) scale(0) } .nectar-social.fixed:hover .nectar-social-inner a:nth-child(1){ -webkit-transition:all 0.45s cubic-bezier(.15,0.2,.1,1); -webkit-transform:translateY(-56px) scale(1); transition:all 0.45s cubic-bezier(.15,0.2,.1,1); transform:translateY(-56px) scale(1); opacity:1 } .nectar-social.fixed:hover .nectar-social-inner a:nth-child(2){ -webkit-transition:all 0.45s cubic-bezier(.15,0.2,.1,1); -webkit-transform:translateY(-106px) scale(1); transition:all 0.45s cubic-bezier(.15,0.2,.1,1); transform:translateY(-106px) scale(1); opacity:1 } .nectar-social.fixed:hover .nectar-social-inner a:nth-child(3){ -webkit-transition:all 0.45s cubic-bezier(.15,0.2,.1,1); -webkit-transform:translateY(-156px) scale(1); transition:all 0.45s cubic-bezier(.15,0.2,.1,1); transform:translateY(-156px) scale(1); opacity:1 } .nectar-social.fixed:hover .nectar-social-inner a:nth-child(4){ -webkit-transition:all 0.45s cubic-bezier(.15,0.2,.1,1); -webkit-transform:translateY(-206px) scale(1); transition:all 0.45s cubic-bezier(.15,0.2,.1,1); transform:translateY(-206px) scale(1); opacity:1 } .nectar-social.fixed:hover .nectar-social-inner a:nth-child(5){ -webkit-transition:all 0.45s cubic-bezier(.15,0.2,.1,1); -webkit-transform:translateY(-256px) scale(1); transition:all 0.45s cubic-bezier(.15,0.2,.1,1); transform:translateY(-256px) scale(1); opacity:1 } .nectar-social.fixed:hover{ height:340px } body .nectar-social.fixed a i, #ajax-content-wrap .nectar-social.fixed a i{ color:#fff; font-size:14px; top: 0; padding-right:0; display: block; } body .nectar-social.fixed .nectar-social-inner a i, #ajax-content-wrap .nectar-social.fixed .nectar-social-inner a i { height:36px; line-height:36px; width:36px; } .nectar-social.fixed .google-plus-share i{ font-size:12px } /************ 3. Minimal style **************/ .sharing-default-minimal .nectar-social .love-text { display: inline; } .sharing-default-minimal .nectar-social .love-text, .sharing-default-minimal .nectar-social .social-text, #ajax-content-wrap .sharing-default-minimal .nectar-social .social-text { display: inline-block; opacity:1; font-size: 15px; line-height: 15px; } .sharing-default-minimal .nectar-social .facebook-share, .nectar-social.hover .facebook-share:hover, #single-below-header .nectar-social.hover .facebook-share:hover { border-color:#6a75c8; color:#6a75c8; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .twitter-share, .nectar-social.hover .twitter-share:hover, #single-below-header .nectar-social.hover .twitter-share:hover { border-color:#6abaf7; color:#6abaf7; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .linkedin-share, .nectar-social.hover .linkedin-share:hover, #single-below-header .nectar-social.hover .linkedin-share:hover { border-color:#2e82d9; color:#2e82d9; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .pinterest-share, .nectar-social.hover .pinterest-share:hover, #single-below-header .nectar-social.hover .pinterest-share:hover { border-color:#f00; color:#f00; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .facebook-share i{ height:15px; font-size:15px; line-height:19px; color:#6a75c8; padding-right: 3px; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .twitter-share i{ height:15px; font-size:16px; line-height:18px; padding-right: 3px; color:#6abaf7; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .google-plus-share i{ height:15px; font-size:14px; line-height:19px; padding-right: 3px; color:#f05660; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .linkedin-share i{ height:15px; font-size:14px; color:#2e82d9; padding-right: 3px; line-height:16px; transition:all 0.2s ease } .sharing-default-minimal .nectar-social .pinterest-share i{ height:15px; font-size:16px; color:#f00; padding-right: 3px; line-height:18px; transition:all 0.2s ease } /* Minimal coloring */ .sharing-default-minimal .nectar-social .facebook-share:hover, .nectar-social.fixed .facebook-share, .nectar-social.vertical .nectar-social-inner a.facebook-share:hover { background-color:#6a75c8; } .sharing-default-minimal .nectar-social .twitter-share:hover, .nectar-social.fixed .twitter-share, .nectar-social.vertical .nectar-social-inner a.twitter-share:hover { background-color:#6abaf7; } .sharing-default-minimal .nectar-social .linkedin-share:hover, .nectar-social.fixed .linkedin-share, .nectar-social.vertical .nectar-social-inner a.linkedin-share:hover { background-color:#2e82d9; } .sharing-default-minimal .nectar-social .pinterest-share:hover, .nectar-social.fixed .pinterest-share, .nectar-social.vertical .nectar-social-inner a.pinterest-share:hover { background-color:#f00; } .sharing-default-minimal .nectar-social a:hover { color:#fff } #ajax-content-wrap .sharing-default-minimal .nectar-social .nectar-love, body .sharing-default-minimal .nectar-social .nectar-love { margin-top: 0; font-size: 15px; line-height: 22px; } body .sharing-default-minimal .n-shortcode{ border-right:none!important; top:-1px; position:relative } .col.centered-text .sharing-default-minimal .nectar-social-inner { text-align: center; } .sharing-default-minimal .nectar-social-inner .nectar-love { border:2px solid rgba(0,0,0,0.2); padding:7px 9px 7px 30px!important; margin-top:50px; height:auto!important; font-size:12px; margin-right:10px; line-height:20px; position:relative; transition:all 0.2s ease } .sharing-default-minimal .nectar-love.loved{ border-color:transparent; background-color: #000; } .sharing-default-minimal .n-shortcode .nectar-love .icon-salient-heart-2, body .sharing-default-minimal .nectar-love i{ font-size:14px!important; margin-right:8px; line-height:20px; transition:all 0.2s ease } #ajax-content-wrap .sharing-default-minimal .nectar-love i, body .sharing-default-minimal .hovered .nectar-love i{ color:rgba(0,0,0,0.2); transform:scale(1); opacity:1; position:relative } .sharing-default-minimal .total_loves{ background-color:rgba(0,0,0,0.2); color: #fff; border-radius:100px; padding:2px 8px!important; margin-left:28px; float:right; line-height:12px; transition:all 0.2s ease } .sharing-default-minimal .nectar-love .total_loves .nectar-love-count{ font-size:10px; line-height: 16px; opacity:1 } .sharing-default-minimal .nectar-love:hover{ background-color:#000 } .sharing-default-minimal .nectar-love:hover .total_loves, .sharing-default-minimal .nectar-love.loved .total_loves{ background-color:rgba(255,255,255,0.25) } .sharing-default-minimal .nectar-love .icon-salient-heart-2:before{ content:"\e00e"!important } .sharing-default-minimal .total_loves{ display:block } .sharing-default-minimal a:hover .total_loves, .sharing-default-minimal .nectar-love.loved .total_loves{ color:#fff } #page-header-bg[data-post-hs="default_minimal"] h1, body.single-post .heading-title[data-header-style="default_minimal"] .entry-title{ text-align:center; margin:0 auto } .sharing-default-minimal{ text-align:left } .sharing-default-minimal .nectar-social-inner >a{ border:2px solid #000; padding:9px 30px!important; margin-right:10px } body[data-button-style^="rounded"] .sharing-default-minimal .nectar-social-inner >a, body[data-button-style^="rounded"] .sharing-default-minimal .nectar-love{ border-radius:100px; line-height:1px; margin:10px 13px 10px 0; height:auto; display:inline-block } .sharing-default-minimal .nectar-social-inner >a, .sharing-default-minimal .nectar-love{ line-height:1px; margin:10px 13px 10px 0; height:auto; display:inline-block } .sharing-default-minimal .nectar-social-inner >a, body[data-button-style^="rounded"] .sharing-default-minimal .nectar-social-inner >a { line-height: 18px; } .sharing-default-minimal .nectar-social .facebook-share:hover i, .sharing-default-minimal .nectar-social .twitter-share:hover i, .sharing-default-minimal .nectar-social .google-plus-share:hover i, .sharing-default-minimal .nectar-social .linkedin-share:hover i, .sharing-default-minimal .nectar-social .pinterest-share:hover i, .sharing-default-minimal .nectar-love:hover i, .sharing-default-minimal .nectar-love:hover, .sharing-default-minimal .nectar-love.loved i, .sharing-default-minimal .nectar-love.loved, body .sharing-default-minimal .hovered .nectar-love.loved i, #footer-outer .sharing-default-minimal .nectar-social a:hover { color:#fff!important } .post.masonry-blog-item .post-meta .nectar-love-wrap{ float:right } /************ 4. Nectar Love **************/ .nectar-love-wrap .nectar-love-count { margin-left: 5px; font-size: 14px; line-height: 14px; } body .nectar-love-wrap .total_loves { line-height: 14px; } .nectar-love-wrap { line-height:19px } article.post .post-meta .nectar-love-wrap { text-align: center; } body .nectar-love-wrap i[class^="icon-"] { font-size: 14px; height: 14px; top: -1px; transition: color 0.2s ease; line-height: 14px; } .nectar-love{ -webkit-transition:background-color 0.2s linear; transition:background-color 0.2s linear; width:auto; color:inherit; line-height:11px; font-size:14px; display:inline-block } .nectar-love span{ font-weight:400; color:inherit; font-size:12px; line-height:12px; display:inline-block } .nectar-social .social-text, .nectar-social .love-text, .nectar-love .love-text { display: none; } body .pinterest-share i, body .facebook-share i, body .twitter-share i, body .linkedin-share i, .nectar-social .icon-default-style.steadysets-icon-share, body [class^="icon-"].icon-salient-heart, body [class^="icon-"].icon-salient-heart-2 { background-color:transparent; border-radius: 0px; font-weight:normal; font-size:20px; height:20px; width:auto; line-height:20px; color:#ddd; } .nectar-social.hover .pinterest-share i, .nectar-social.hover .facebook-share i, .nectar-social.hover .twitter-share i, .nectar-social.hover .linkedin-share i { color: inherit; } .nectar-social .nectar-social-inner a, .nectar-social .nectar-love-button .nectar-love, .nectar-social.fixed > a { text-decoration: none!important; } .sharing-default-minimal.post-bottom, .salient-social-outer.post-bottom { margin-top: 40px; }