File: /home/vhosts/harpoeditore.it/httpdocs/wp-content/themes/dt-the7/css/static-less/single.less
/* #Single
================================================== */
.content > .single-postlike,
.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 {
.flex-display(@display: flex);
.flex-flow( row wrap);
overflow: hidden;
.content-align-center &,
.content-align-centre &,
.related-projects & {
.justify-content(@justify: center);
}
}
.blog-content .entry-meta {
padding: 0 0 10px 0;
}
.portfolio-categories {
padding: 0 0 10px 0;
}
.project-post .portfolio-categories {
padding: 0px 0 0 0;
margin-bottom: 10px;
}
.entry-meta > a,
.entry-meta > span,
.portfolio-categories > a,
.portfolio-categories > span {
position: relative;
display: inline-block;
text-decoration: none;
}
.portfolio-categories a {
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;
.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: 10px 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;
}
.single-postlike .entry-author img,
.post .entry-author img {
max-width: none;
}
.blog .post .wp-smiley {
width: auto;
}
//new post inner
.single-postlike:not(.type-event) .post-thumbnail,
.post:not(.type-event) .post-thumbnail {
.single & {
position: relative;
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;
.horizontal-centering;
&:hover {
cursor: pointer;
}
}
}
.share-link-description {
display: block;
margin-bottom: 10px;
font-weight: bold;
text-align: center;
& .share-link-icon {
display: none;
}
.show-on-hover & {
.flex-display(@display: flex);
.align-items(@align: center);
.flex-flow( column wrap);
& .share-link-icon {
.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);
transition: all 200ms ease;
font-size: 14px;
line-height: 1;
& svg {
width: 14px;
}
}
}
}
.share-buttons {
.single-share-box & {
.flex-display(@display: flex);
.justify-content(@justify: center);
line-height: 0;
}
.single-share-box:not(.show-on-hover) & {
.flex-flow( row wrap);
}
& .soc-font-icon {
display: none;
}
.show-on-hover & {
position: absolute;
.flex-flow( column wrap);
.horizontal-centering;
bottom: 100%;
min-width: 180px;
margin-bottom: 10px;
background: #fff;
box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.3);
opacity: 0;
visibility: hidden;
transform: translate3d(-50%,10px, 0);
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;
transform: translate3d(-50%,0, 0);
}
.share-buttons a {
.single-share-box & {
display: inline-flex;
justify-content: center;
align-items: center;
width: 50px;
height: 30px;
min-width: 50px;
min-height: 30px;
:not(.show-on-hover)& {
& .social-text {
display: none;
}
}
.show-on-hover& {
display: flex;
justify-content: flex-start;
align-items: center;
width: auto;
line-height: 1;
text-align: left;
padding: 10px 5px 10px 10px;
}
margin: 0 4px 4px 0;
border: 1px solid;
text-transform: none;;
font-size: 16px;
line-height: 30px;
text-decoration: none;
text-align: center;
transition: border-color 200ms ease;
.box-sizing (border-box);
& .icon {
display: none;
}
&.facebook {
border-color: fade(#4c69c7, 30%);
&:hover {
border-color: #4c69c7;
}
& svg {
fill: #4c69c7;
}
}
&.twitter {
border-color: fade(#2abeeb, 30%);
&:hover {
border-color: #2abeeb;
}
& svg {
fill: #2abeeb;
}
}
&.google {
border-color: fade(#e64235, 30%);
&:hover {
border-color: #e64235;
}
& svg {
fill: #e64235;
}
}
&.pinterest {
border-color: fade(#cf2834, 30%);
&:hover {
border-color: #cf2834;
}
& svg {
fill: #cf2834;
}
}
&.linkedin {
border-color: fade(#007bc7, 30%);
&:hover {
border-color: #007bc7;
}
& svg {
color: #007bc7;
}
}
&.whatsapp {
border-color: fade(#36b74d, 30%);
&:hover {
border-color: #36b74d;
}
& svg {
fill: #36b74d;
}
}
}
}
.share-buttons a {
.show-on-hover & {
height: auto;
border: none;
font-size: 14px;
line-height: 18px !important;
margin: 0;
& svg {
margin-right: 5px;
}
& *,
& svg {
color: #222;
fill: #222;
}
&:hover *,
&:hover svg {
color: #fff;
fill: #fff;
}
&.facebook {
&:hover {
background-color: #4c69c7;
}
}
&.twitter {
&:hover {
background-color: #2abeeb;
}
}
&.google {
&:hover {
background-color: #e64235;
}
}
&.pinterest {
&:hover {
background-color: #cf2834;
}
}
&.linkedin {
&:hover {
background-color: #007bc7;
}
}
&.whatsapp {
&:hover {
background-color: #36b74d;
}
}
}
}
.author-info {
.flex-display(@display: flex);
.flex-flow( row nowrap);
}
.author-avatar {
.flex(@columns: 0 0 80px);
margin-right: 30px;
}
.author-avatar.no-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
.author-avatar.no-avatar.no-avatar svg {
width: 36px;
height: auto;
}
.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 [class^="dt-icon-"] {
font-size: 24px;
}
}
.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;
.rtl & {
.flex-order(@order: 1);
}
}
.nav-previous {
width: 45%;
padding-left: 35px;
margin-right: 30px;
& svg {
position: absolute;
left: 0;
.vertical-centering;
width: 32px;
}
& .post-title {
.align-self(@align: flex-start);
.rtl & {
.align-self(@align: flex-end);
}
max-width: 100%;
}
.rtl & {
.flex-order(@order: 2);
.align-items(@align: flex-end);
}
}
.nav-next {
.post-navigation & {
padding-right: 35px;
margin-left: 30px;
width: 45%;
text-align: right;
& svg {
position: absolute;
right: 0;
.vertical-centering;
width: 32px;
}
& .post-title {
.align-self(@align: flex-end);
.rtl & {
.align-self(@align: flex-start);
}
max-width: 100%;
}
}
.rtl & {
.flex-order(@order: 0);
}
}
/* #Single Portfolio/ Gallery
================================================== */
.project-post {
position: relative;
}
.single .project-slider {
margin-bottom: 45px;
}
.single-gallery-media {
padding-bottom: 45px;
}
.single .project-content {
margin-bottom: 55px;
&:last-child {
margin-bottom: 0;
}
}
/* 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;
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;
.box-sizing (border-box);
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 0;
text-indent: -9999px;
}
/*Slideshow description:end*/
.single-related-posts {
padding-bottom: 35px;
margin-bottom: 50px;
border-bottom: 1px solid;
&:last-child {
margin-bottom: 0;
}
& .items-grid {
.flex-display(@display: flex);
.flex-flow( row wrap);
margin: 0 -25px -25px -25px;
& > .related-item {
position: relative;
.flex-display(@display: flex);
width: 33%;
padding: 0 25px 25px 25px;
box-sizing: border-box;
.sidebar-right &,
.sidebar-left & {
width: 50%;
}
}
}
}
.comments-area,
.single-related-posts,
.comment-respond {
.flex-display(@display: flex);
.flex-flow( column nowrap);
& > h3 {
margin-bottom: 30px;
}
}
.comment-respond a {
text-decoration: none;
}
.single-related-posts {
& > h3 {
margin-bottom: 30px;
}
.single-portfolio & {
padding-bottom: 60px;
& > h3 {
margin-bottom: 30px;
}
}
}
/* #Comments
================================================== */
#comments .comment-list,
#comments .children {
margin: 0;
padding: 0;
list-style: none;
}
#comments .comment-list {
padding-bottom: 50px;
&:last-child {
padding-bottom: 0;
}
}
.comment-list .comment-body {
position: relative;
padding: 20px 20px 10px 100px;
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 20px 15px -80px;
}
.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-reply-link {
margin-left: 10px;
}
.comment-reply-title > small {
display: block;
text-align: center;
}
.comment-reply-title #cancel-comment-reply-link {
float: left;
margin-top: 10px;
}
.comment-notes,
.logged-in-as {
margin-bottom: 15px;
}
.comment-form .form-fields {
overflow: hidden;
margin-bottom: 10px;
}
.dt-btn,
p.form-submit {
#page .comment-respond & {
margin-bottom: 0;
}
}
.dt-btn {
#page .comment-respond & {
.rtl & {
float: left;
}
}
}
// .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,
.dt-contact-form textarea {
width: 100%;
margin: 0 0 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 {
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;
font-size: 0;
}
.share-button.entry-share,
.btn-project-link,
.share-overlay .soc-ico a {
transition: all 200ms ease;
}
.photo-scroller .share-button.entry-share,
.slider-post-inner .share-button.entry-share,
.images-list-inner .share-button.entry-share {
text-decoration: none;
text-align: center;
&:before {
display: block;
background: #fff;
content: "";
-webkit-mask: url(../images/the7-share-fill.svg) no-repeat right center;
mask-image: url(../images/the7-share-fill.svg) no-repeat right center;
width: 16px;
height: 16px;
}
}
.project-share-overlay:not(.allways-visible-icons) .soc-ico {
position: absolute;
z-index: 999;
bottom: 46px;
width: 150px;
height: 36px;
padding: 0 3px;
visibility: hidden;
overflow: visible;
opacity: 0;
background-color: #fff;
text-align: center;
.horizontal-centering;
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 .soc-font-icon,
#page .project-share-overlay:not(.allways-visible-icons) .soc-ico a:hover .soc-font-icon {
color: #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;
}
}
}