File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less.lib/components/blog.less
/*
Created on : 02.10.2015, 13:50:01
Author : DFD
Styels for : New blog style
*/
.dfd-blog-loop,
#layout.single-post .dfd-single-style-advanced {
.post {
&.format-audio {
.entry-media {
padding-top: 30px;
margin-bottom: 25px;
}
.audioplayer {
background: @third-site-dark-color;
border: none;
.rounded(2px);
.audioplayer-playpause,
.audioplayer-volume {
border: none;
}
.audioplayer-playpause {
a {
&:before {
left: 0;
color: @main-site-dark-color;
}
}
}
.audioplayer-volume {
a {
&:before {
left: 0;
color: fade(@main-site-dark-color, 50%);
}
}
}
.audioplayer-time {
color: fade(@main-site-dark-color, 50%);
}
.audioplayer-bar {
top: 0;
left: 55px;
right: 55px;
height: 100%;
margin: 0;
background: fade(@main-site-dark-color, 15%);
&:before {
.hide();
}
.audioplayer-bar-played {
height: 100%;
background: @third-site-light-color;
}
.audioplayer-bar-loaded {
background: fade(@main-site-dark-color, 15%);
}
}
.audioplayer-volume {
.audioplayer-volume-adjust {
height: 100%;
background: @third-site-dark-color;
border: none;
.rounded-top-left(2px);
.rounded-bottom-left(2px);
> div {
width: 100%;
height: 100%;
margin: 0;
&:before {
.hide();
}
> div {
left: auto;
right: 0;
height: 100%;
background: @third-site-light-color;
}
}
}
}
}
}
&.format-quote {
.entry-media,
.entry-content {
.rel();
padding: 35px;
margin-top: 15px;
background: transparent;
border: 1px solid @border-color;
.rounded(2px);
.icon-wrap {
.abs();
top: -10px;
right: -20px;
margin: 0;
i {
font-size: 44px;
color: fade(@block-title-color, 20%);
}
}
a.quote-content {
font-size: @subtitles-font-size + 2;
line-height: 2.5;
text-decoration: underline;
padding-bottom: 0;
color: @block-title-color;
p {
font-size: inherit;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
}
.quote-author {
font-size: @box-name-font-size;
text-transform: @box-name-text-transform;
color: @box-name-color;
}
.post-like-wrap {
.block();
}
}
.cover {
.dfd-news-categories {
margin-top: 0;
}
}
}
}
}
#layout.single-post .dfd-single-style-base {
.dfd-meta-container {
.post-like-wrap .social-share {
padding: 0 17px;
background: transparent;
border: 1px solid @border-color;
.transition(border-color .3s ease);
a {
overflow: visible;
}
i {
font-size: 18px;
margin-right: 10px;
}
&:hover {
border-color: @main-site-light-color;
}
}
div.box-name {
text-transform: uppercase;
}
}
article.post + #comments,
article.post + #respond {
padding-top: 0;
}
#main-content {
#comments,
#respond {
padding-left: 0;
padding-right: 0;
}
}
}
.blog-top.row.full_width {
width: 100%;
margin: 0;
padding: 0 30px;
}
#layout.dfd-blog-loop {
margin-top: 40px;
margin-bottom: 40px;
}
.dfd-blog-loop {
> .row.full_width {
width: 100%;
margin: 0;
padding: 0 30px;
}
.dfd-blog-wrap {
.dfd-blog-masonry {
.post {
margin-bottom: 0;
&.format-quote {
.cover .dfd-news-categories {
margin-top: 0;
}
}
}
}
.dfd-blog-fitRows {
&.dfd-smart-grid {
.post {
overflow: hidden;
&.format-quote {
.entry-content {
font-size: @subtitles-font-size + 2;
font-family: @subtitles-font-family;
font-style: @subtitles-font-style;
line-height: 2;
text-decoration: underline;
p {
font-style: inherit;
line-height: inherit;
max-height: 6em;
}
}
}
&.format-audio {
.entry-media .entry-thumb {
&:after {
content: "\e8ac";
font-size: 40px;
font-family: @font-icons-main;
.abs();
left: 20px;
top: 50%;
line-height: 1;
margin-top: -.5em;
color: @blog-hover-text-color;
z-index: 2;
}
}
}
&.format-video {
.entry-media .entry-thumb {
&:before {
content: "";
.block();
width: 55px;
height: 36px;
.abs();
top: 50%;
left: 20px;
margin-top: -18px;
background: #cf5f49;
.rounded(3px);
z-index: 2;
}
&:after {
content: "";
.abs();
left: 44px;
top: 50%;
margin-top: -5px;
border-left: 10px solid @main-site-dark-color;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
z-index: 2;
}
}
}
.entry-media {
.rel();
margin: 0 !important;
&:before,
&:after {
content: "";
.block();
.abs();
top: 0; bottom: 0;
left: 0; right: 0;
background: fade(@blog-hover-bg, @blog-hover-bg-opacity);
z-index: 1;
}
&:before {
.opacity(0);
.transition(opacity .3s ease);
}
&:after {
.opacity(.3);
.transition(opacity .3s ease);
}
.post-comments-wrap {
left: auto;
right: 0;
z-index: 4;
&:after {
left: 0;
right: auto;
border-left-color: transparent;
border-right-color: @third-site-light-color;
}
+ .post-like-wrap {
right: 25px;
}
}
.post-like-wrap {
left: auto;
right: 0;
z-index: 4;
i {
right: 0;
}
span {
left: auto;
right: 25px;
.transform-origin(100% 50%);
}
}
}
.dfd-blog-heading-wrap,
.entry-content {
.abs();
left: 0;
right: 0;
max-height: 50%;
overflow: hidden;
z-index: 3;
}
.entry-content {
}
.dfd-blog-heading-wrap {
top: 0;
padding: 0 20px !important;
.dfd-blog-title {
font-size: @blog-title-font-size + 5;
line-height: 1.2;
color: @main-site-dark-color;
a {
background-image: -webkit-linear-gradient(to right, fade(@blog-hover-text-color,0%) 50%, fade(@blog-hover-text-color,20%) 50%);
background-image: -moz-linear-gradient(to right, fade(@blog-hover-text-color,0%) 50%, fade(@blog-hover-text-color,20%) 50%);
background-image: -ms-linear-gradient(to right, fade(@blog-hover-text-color,0%) 50%, fade(@blog-hover-text-color,20%) 50%);
background-image: -o-linear-gradient(to right, fade(@blog-hover-text-color,0%) 50%, fade(@blog-hover-text-color,20%) 50%);
background-image: linear-gradient(to right, fade(@blog-hover-text-color,0%) 50%, fade(@blog-hover-text-color,20%) 50%);
}
}
.entry-meta > * {
color: @blog-hover-text-color;
}
}
.entry-content {
bottom: 0;
margin-bottom: -55%;
padding: 20px !important;
color: @blog-hover-text-color;
.transition(margin-bottom .3s ease);
p {
overflow: hidden;
line-height: 1.5;
max-height: 4.5em;
color: inherit;
}
}
&:hover {
.entry-media {
&:before {
.opacity(1);
}
&:after {
.opacity(0);
}
}
.entry-content {
margin-bottom: 0;
}
}
}
}
.post {
margin-bottom: 0;
.dfd-read-share {
margin-bottom: 25px;
}
&.format-audio {
.entry-media {
padding-top: 0;
}
}
&.dfd-title-top {
.cover {
.entry-media {
margin-top: 10px;
}
}
}
&.format-quote {
&.dfd-title-top {
.cover {
.dfd-news-categories {
margin-top: 0;
}
}
}
.entry-media {
padding: 0;
margin: 0;
border: none;
.rounded(0);
}
.entry-content {
padding: 0;
background: transparent;
border: none;
}
}
}
}
.dfd-blog-left-image,
.dfd-blog-right-image {
margin: 0 -10px;
.post {
.clearfix();
.cover {
.dfd-news-categories {
margin-top: 0;
}
}
.entry-media {
width: 44.444%;
margin: 0;
padding: 0 10px;
}
.dfd-content-wrap {
width: 55.556%;
margin: 0;
padding: 0 10px;
}
&.format-gallery,
&.format-video {
.post-comments-wrap,
.post-like-wrap {
margin-left: 10px;
}
}
&.format-audio {
.entry-media {
padding-top: 0;
}
}
&.format-quote {
.entry-media {
padding: 0 10px;
border: none;
.entry-thumb {
.rel();
padding: 30px;
border: 1px solid @border-color;
.rounded(2px);
.icon-wrap {
top: 20px;
right: 10px;
}
}
.post-comments-wrap,
.post-like-wrap {
margin-left: 10px;
}
}
.dfd-content-wrap {
.entry-content {
.hide();
//padding: 0;
//background: transparent;
}
}
}
&:last-child {
margin-bottom: 0;
}
}
}
.dfd-blog-left-image {
.entry-media {
float: left;
}
.dfd-content-wrap {
float: right;
}
}
.dfd-blog-right-image {
.entry-media {
float: right;
}
.dfd-content-wrap {
float: left;
}
}
.post {
padding-bottom: 0;
border-bottom: none;
&.format-gallery {
.slider-control {
&.prev,
&.next {
width: 32px;
height: 32px;
line-height: 32px;
top: auto;
bottom: -35px;
margin: 0;
&:before {
font-size: 10px;
}
span {
.hide();
}
}
&.prev {
left: 0;
.transition(bottom .3s ease);
}
&.next {
left: 33px;
.transition(bottom .3s ease .3s);
}
}
&:hover {
.slider-control {
&.prev,
&.next {
bottom: 0;
}
}
}
}
&.format-audio {
.entry-media {
overflow: hidden;
}
.post-comments-wrap,
.post-like-wrap {
top: 5px;
}
}
&.dfd-title-top {
.cover {
.dfd-news-categories {
margin-top: 0;
}
.entry-media {
margin-top: 20px;
}
}
}
.cover {
.dfd-news-categories {
max-height: 25px;
margin-top: 20px;
.byline.category {
.inline-block();
a {
.link-style();
font-size: @link-font-size - 2;
.block();
float: left;
line-height: 1;
padding: 7px 13px;
color: @main-site-dark-color;
background: @third-site-light-color;
.transition(color .3s ease);
&:hover {
color: @box-name-color;
}
}
}
}
.entry-media {
margin-bottom: 0;
}
div.dfd-blog-title {
text-align: inherit;
margin-top: 15px;
a {
color: inherit;
}
}
.dfd-meta-wrap {
text-align: inherit;
margin-top: 5px;
> div.entry-meta {
.inline-block();
a {
.rel();
.link-decoration();
}
.byline {
font-family: inherit;
}
}
}
.entry-content {
text-align: inherit;
margin-top: 15px;
p {
margin-bottom: 0;
}
}
}
}
}
}