/* #Single ================================================== */ .content > .post, .content > .project-post { .single & { margin-bottom: 50px; &:last-child { margin-bottom: 0; } } } /*!-Meta & tags*/ .entry-meta, .entry-tags { .post-meta & { .flex-display(@display: flex); .justify-content(@justify: center); .align-items(@align: center); .flex-flow( row wrap); } } //.entry-meta, .portfolio-categories { display: block; overflow: hidden; } .blog-content .entry-meta { padding: 0 0 10px 0; } .portfolio-categories { padding: 0 0 10px 0; } //.single .post .entry-meta, .project-post .portfolio-categories { padding: 0px 0 0 0; margin-bottom: 10px; } .single .fs-entry .entry-meta { float: none; } .entry-meta > a, .entry-meta > span, .portfolio-categories > a, .portfolio-categories > span { position: relative; display: inline-block; // margin: 0 0 0 6px; // padding-left: 9px; text-decoration: none; } //.entry-meta a, .portfolio-categories a { -webkit-transition: all 0.05s linear 0.05s; transition: all 0.05s linear 0.05s; } .entry-meta span a, .portfolio-categories > span a { text-decoration: none; } .entry-meta a:hover, .portfolio-categories a:hover { text-decoration: underline; } .portfolio-categories > a.data-link:hover { text-decoration: none; cursor: default; } .portfolio-categories > a, .portfolio-categories > span, .entry-meta > a, .entry-meta > span { margin: 0 6px 0 0; padding: 0 9px 0 0; &:last-child { padding: 0; margin: 0; } &:after { position: absolute; right: 0; // top: 50%; // -webkit-transform: translateY(-50%); // transform: translateY(-50%); .vertical-centering; width: 3px; height: 3px; content: ""; .static-border-radius; } &:last-child:after { display: none; } } .fullwidth-slider .portfolio-categories > a, .fullwidth-slider .portfolio-categories span { float: none; display: inline-block; } .entry-tags { display: block; overflow: hidden; padding: 15px 0 0 0; } .entry-tags, .entry-tags a, .entry-tags span { word-wrap: break-word; } .entry-tags span.single-tags { position: relative; float: left; } .single .entry-tags a { padding: 1px 6px; margin: 2px; border: 1px solid; font: normal 10px / 15px Arial, Verdana, sans-serif; text-decoration: none; letter-spacing: 0.3px; } /* #Single Blog ================================================== */ /*!-Post author*/ .entry-author { overflow: hidden; margin-bottom: 60px; padding: 30px 30px 25px 30px; .box-sizing (border-box); &:last-child { margin-bottom: 0; } } .entry-author-img { width: 115px; } .entry-author-info { vertical-align: top; } .entry-author .text-primary { font-weight: bold; } .entry-author .alignleft { margin-bottom: 10px; } .entry-author .alignleft img, .entry-author img.alignleft { .static-border-radius; } .post .entry-author img { max-width: none; } .blog .post .wp-smiley { width: auto; } //new post inner .post-thumbnail { .single & { margin-bottom: 45px; line-height: 0; &:last-child { margin-bottom: 0; } & img { width: 100%; } } } .entry-content { .single & { margin-bottom: 50px; &:last-child { margin-bottom: 0; } } } .post-meta { .single & { margin-bottom: 55px; &:last-child { margin-bottom: 0; } } } .single-share-box { position: relative; .single & { margin-top: -5px; margin-bottom: 60px; &:last-child { margin-bottom: 0; } } .page & { margin-top: 50px; } &.show-on-hover { z-index: 10; display: inline-block; // left: 50%; // -webkit-transform: translateX(-50%); // transform: translateX(-50%); .horizontal-centering; &:hover { cursor: pointer; } } } .share-link-description { display: block; margin-bottom: 10px; font-weight: bold; text-align: center; .show-on-hover & { .flex-display(@display: flex); .align-items(@align: center); .flex-flow( column wrap); &:before { .flex-display(@display: flex); .justify-content(@justify: center); .align-items(@align: center); width: 40px; height: 40px; border: 2px solid; margin-bottom: 5px; .static-border-radius; .box-sizing (border-box); -webkit-transition: all 200ms ease; transition: all 200ms ease; content: "\f1e0"; font: normal normal normal 14px/1 FontAwesome; } } } .share-buttons { .single-share-box & { .flex-display(@display: flex); .justify-content(@justify: center); line-height: 0; } .show-on-hover & { position: absolute; // left: 50%; // transform: translateX(-50%); .horizontal-centering; bottom: 100%; padding: 10px 5px 10px 10px; margin-bottom: 10px; background: #fff; -webkit-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.3); box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; -webkit-transform: translate3d(-50%,10px, 0); transform: translate3d(-50%,10px, 0); -webkit-transition: all .25s ease-out; transition: all .25s ease-out; /* CSS Triangle*/ &:after { position: absolute; left: 50%; bottom: -6px; margin-left: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; content: ""; } /* This bridges the gap so you can mouse into the tooltip without it disappearing */ &:before { position: absolute; left: 0; bottom: -20px; content: " "; display: block; width: 100%; height: 20px; } } } .show-on-hover:hover .share-buttons { visibility: visible; opacity: 1; pointer-events: auto; -webkit-transform: translate3d(-50%,0, 0); transform: translate3d(-50%,0, 0); } .share-buttons a { .single-share-box & { display: inline-block; width: 50px; height: 30px; margin-right: 4px; border: 1px solid; font: normal normal normal 14px/30px FontAwesome; text-decoration: none; text-align: center; -webkit-transition: border-color 200ms ease; transition: border-color 200ms ease; .box-sizing (border-box); & .icon { display: none; } &.facebook { border-color: fade(#4c69c7, 30%); &:hover { border-color: #4c69c7; } &:before { content: "\f09a"; } color: #4c69c7; } &.twitter { border-color: fade(#2abeeb, 30%); font-size: 15px; &:hover { border-color: #2abeeb; } &:before { content: "\f099"; } color: #2abeeb; } &.google { border-color: fade(#e64235, 30%); &:hover { border-color: #e64235; } &:before { content: "\f0d5"; } color: #e64235; } &.pinterest { border-color: fade(#cf2834, 30%); font-size: 15px; &:hover { border-color: #cf2834; } &:before { content: "\f0d2"; } color: #cf2834; } &.linkedin { border-color: fade(#007bc7, 30%); &:hover { border-color: #007bc7; } &:before { content: "\f0e1"; } color: #007bc7; } } } .author-info { .flex-display(@display: flex); .flex-flow( row nowrap); } .author-avatar { .flex(@columns: 1 0 auto); margin-right: 30px; } .author-description { & h4 { margin-bottom: 5px; } & .author-link { display: inline-block; margin-bottom: 20px; text-decoration: none; &:hover { text-decoration: underline; } } } .post-navigation { margin-bottom: 50px; &:last-child { margin-bottom: 0; } } .post-navigation .nav-links { .flex-display(@display: flex); .disabled-post-navigation& { .justify-content(@justify: center); } padding: 25px 0; border-width: 1px 0 1px 0; border-style: solid; & .back-to-list .fa { font-size: 28px; } } .meta-nav { margin-bottom: 5px; text-transform: uppercase; } .nav-previous, .nav-next, .back-to-list { .post-navigation & { position: relative; .flex-display(@display: flex); .flex-flow( column wrap); .justify-content(@justify: center); text-decoration: none; } } .back-to-list { width: 30px; } .nav-previous { width: 45%; padding-left: 35px; margin-right: 30px; & i { position: absolute; //top: 50%; left: 0; //transform: translateY(-50%); .vertical-centering; font-size: 42px; } & .post-title { .align-self(@align: flex-start); } } .nav-next { .post-navigation & { padding-right: 35px; margin-left: 30px; width: 45%; text-align: right; & i { position: absolute; //top: 50%; right: 0; //transform: translateY(-50%); .vertical-centering; font-size: 42px; } & .post-title { .align-self(@align: flex-end); } } } /* #Single Portfolio ================================================== */ .project-post { position: relative; } .single .project-slider { margin-bottom: 45px; } .single .project-content { margin-bottom: 55px; } .floating-content { position: relative; } /* List images*/ .images-container { line-height: 0; } .images-list { position: relative; margin-bottom: 20px; line-height: 0; } .images-list:last-child { margin-bottom: 0; } .images-list img { margin-bottom: 0; } .images-list-caption { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; z-index: 99; } .images-list-inner { position: absolute; bottom: 0; display: inline-block; margin: 0 20px; padding: 15px 0 15px; } .images-list-inner h4 { display: inline-block; margin: 5px 0 0; } .images-list-inner, .images-list-inner * { color: #fff; } .navigation-inner a, .project-details, .project-link, .project-zoom, .vc-item .vc_read_more { text-decoration: none; } /*!-Slideshow description*/ .slider-post-inner h4 { display: inline-block; vertical-align: middle; margin: 5px 0 0; } .slider-post-inner, #main .slider-post-inner h4, .images-list-inner, #main .images-list-inner h4 { text-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .slider-post-inner .album-content-btn, .images-list-inner .album-content-btn { display: block; float: left; width: 100%; margin-bottom: 0; } .images-list-inner p { margin-bottom: 0; } .slider-link { display: block; float: left; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' fill='white' xml:space='preserve'%3E%3Cpolygon points='14,14 2,14 2,2 5.011,2 5.011,0 2,0 0.011,0 0,0 0,14 0,16 2,16 16,16 16,15.989 16,14 16,10.989 14,10.989 '/%3E%3Cpolygon points='14,-0.019 14,0 8.993,0 8.993,2 12.637,2 6.5,8.137 7.863,9.5 14,3.364 14,6.981 16,6.981 16,-0.019 '/%3E%3C/svg%3E"); background-color: rgba(0, 0, 0, 0.4); .static-border-radius; background-repeat: no-repeat; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease; &:hover { background-color: rgba(0, 0, 0, 0.4); opacity: 0.7; } } .slider-link, .slider-post-inner .share-button.entry-share, .images-list-inner .share-button.entry-share { margin: 0 5px 5px 0; background-position: center center; .box-sizing (border-box); } /*Slideshow description:end*/ .single-related-posts { //padding-top: 10px; padding-bottom: 35px; margin-bottom: 50px; border-bottom: 1px solid; &:last-child { margin-bottom: 0; } } .comments-area, .single-related-posts, .comment-respond { .flex-display(@display: flex); .flex-flow( column nowrap); & > h3 { position: relative; .align-self(@align: center); padding-bottom: 10px; margin-bottom: 40px; //text-align: center; &:after { position: absolute; bottom: 0; left: 50%; width: 60px; height: 3px; margin-left: -30px; content: ""; } } } .single-related-posts { & > h3 { margin-bottom: 35px; } .single-portfolio & { padding-bottom: 60px; & > h3 { margin-bottom: 40px; } } } /* #Comments ================================================== */ #comments .comment-list, #comments .children { margin: 0; padding: 0; list-style: none; } #comments .comment-list { //overflow: hidden; // padding-top: 5px; padding-bottom: 50px; &:last-child { padding-bottom: 0; } } .comment-list .comment-body { position: relative; padding: 30px 30px 15px 120px; margin-top: 20px; .box-sizing (border-box); } .comment-list > li:first-child .comment-body { margin-top: 0; } #comments .children { margin-left: 90px; } .comment-author-name { display: block; margin-bottom: 5px; & a { font: inherit !important; } } .comment-metadata { margin-bottom: 20px; } .comment-author .avatar, .comment-author .rollover { float: left; margin: 0px 30px 15px -90px; } .comment-author .rollover i, .comment-author .rollover, .comment-author .avatar { .static-border-radius; } .comment-author .rollover .avatar { margin: 0; } .comment-content { overflow: hidden; margin-bottom: 10px; } .comment-list .reply { text-align: right; margin-bottom: 10px; } //.comment-meta, .comment-reply-link { margin-left: 10px; font-weight: bold; } .comment-reply-title > small { display: block; text-align: center; } .comment-reply-title #cancel-comment-reply-link { display: inline-block; float: none; padding-left: 15px; text-align: center; } .comment-notes, .logged-in-as { text-align: center; margin-bottom: 15px; } .comment-form .form-fields { overflow: hidden; margin-bottom: 10px; } .dt-btn, p.form-submit { #page .comment-respond & { margin-bottom: 0; } } .btn-3d #page .comment-respond .dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):hover, .btn-3d #page .comment-respond .dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):last-child:hover { margin-bottom: 1px; } .btn-3d #page .comment-respond .dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):active, .btn-3d #page .comment-respond .dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):last-child:active { margin-bottom: 2px; } .says { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; } /* !- Comments form */ .comment #respond { padding-top: 24px; } #respond #submit { display: none; } #commentform textarea, .contact-form textarea { width: 100%; margin: 0 0 10px; } .contact-form-ios #commentform textarea { margin-top: 10px; } .comment-reply-link, .comment-meta a, .fn a, .pingback a, .clear-form { text-decoration: none; } #reply-title small a:hover, .comment-reply-link:hover, .comment-meta a:hover, .pingback a:hover, .clear-form:hover { text-decoration: underline; } /* #Share buttons ================================================== */ .project-share-overlay { position: relative; display: inline-block; padding-top: 5px; padding-bottom: 5px; } .project-info-box { .flex-display(@display: flex); .align-items(@align: center); .flex-flow( column wrap); margin-bottom: 40px; } .project-post .btn-project-link { .flex-display(@display: flex); .align-items(@align: center); .justify-content(@justify: center); min-width: 220px; height: 50px; border: 2px solid; margin-bottom: 15px; font-weight: bold; text-decoration: none; .box-sizing (border-box); } .project-share-overlay .share-button.entry-share { /* display: block;*/ text-decoration: none; } #page .project-share-overlay .share-button.entry-share { padding: 0 0 0 23px; } .share-button.entry-share { display: inline-block; padding: 0 0 0 23px; } .share-button.entry-share.no-text, .btn-project-link.no-text { width: 36px; height: 36px; padding: 0; text-indent: -9999px; } .share-button.entry-share, .btn-project-link, .share-overlay .soc-ico a { -webkit-transition: all 200ms ease; transition: all 200ms ease; } .photo-scroller .share-button.entry-share, .slider-post-inner .share-button.entry-share, .images-list-inner .share-button.entry-share { .share-button-ico(white); } .share-button-ico(@colour){ background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='@{colour}'%3E%3Cpath d='M12.508,10.664c-0.61,0-1.213,0.287-1.663,0.633L6.236,8.531C6.261,8.39,6.289,8.148,6.289,8c0-0.15-0.058-0.39-0.083-0.532l4.64-2.796c0.451,0.347,1.053,0.659,1.663,0.659c1.475,0,2.666-1.194,2.666-2.664C15.174,1.191,13.982,0,12.508,0c-1.472,0-2.665,1.191-2.665,2.667c0,0.149,0.038,0.394,0.064,0.536L5.336,5.945C4.968,5.568,4.257,5.211,3.627,5.203C1.89,5.183,0.826,6.576,0.826,8.049c0,1.472,1.02,2.757,2.759,2.737c0.611-0.01,1.368-0.283,1.797-0.729l4.543,2.726c-0.027,0.141-0.082,0.401-0.082,0.548c0,1.476,1.193,2.669,2.665,2.669c1.475,0,2.666-1.193,2.666-2.669C15.174,11.859,13.982,10.664,12.508,10.664z'/%3E%3C/svg%3E"); } .project-share-overlay:not(.allways-visible-icons) .soc-ico { position: absolute; z-index: 999; //left: 50%; bottom: 46px; width: 150px; height: 36px; padding: 0 3px; visibility: hidden; overflow: visible; opacity: 0; background-color: #fff; text-align: center; // -ms-transform: translateX(-50%); // -webkit-transform: translateX(-50%); // transform: translateX(-50%); .horizontal-centering; -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.2); box-shadow: 0 0 2px 0 rgba(0,0,0,0.2); } .single-post .project-share-overlay:not(.allways-visible-icons) .soc-ico { bottom: 48px; } .project-content-btn .project-share-overlay:not(.allways-visible-icons) .soc-ico { bottom: 38px; } .project-share-overlay:not(.allways-visible-icons) .soc-ico:after, .project-share-overlay:not(.allways-visible-icons) .soc-ico:before { position: absolute; left: 50%; margin-left: -5px; bottom: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid white; content: ""; } .project-share-overlay:not(.allways-visible-icons) .soc-ico:before { margin-left: -6px; bottom: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(0,0,0, 0.1); } .project-share-overlay:not(.allways-visible-icons) .soc-ico a { display: none; float: none; width: 24px; margin: 7px 3px 0 3px; background: none !important; } #page .project-share-overlay:not(.allways-visible-icons) .soc-ico a { box-shadow: none; } .project-share-overlay:not(.allways-visible-icons) .soc-ico a:hover { background: none !important; opacity: 0.6; } .project-share-overlay:not(.allways-visible-icons) .soc-ico a:before, .project-share-overlay:not(.allways-visible-icons) .soc-ico a:after { display: none; } #page .project-share-overlay:not(.allways-visible-icons) .soc-ico a .icon, #page .project-share-overlay:not(.allways-visible-icons) .soc-ico a:hover .icon { fill: #000; } .project-share-overlay.allways-visible-icons .soc-ico { display: inline-block; vertical-align: middle; margin-left: 10px; } /*albums share*/ .slide-caption .share-button.entry-share, .slide-caption .btn-project-link { border-color: rgba(255,255,255,0.35); } .slide-caption .share-button.entry-share:hover, .slide-caption .btn-project-link:hover { background-color: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.35); } //Page single img article.type-attachment { .single-attachment & { text-align: center; & .rollover { display: inline-block; } } }