389 lines
7.7 KiB
Plaintext
389 lines
7.7 KiB
Plaintext
.featured-posts-slider-w {
|
|
height: 95px;
|
|
overflow: hidden;
|
|
padding-top: 0px!important;
|
|
padding-bottom: 0px!important;
|
|
background-color: @postBackground;
|
|
.box-shadow(@postShadow);
|
|
border-bottom: @postBorder;
|
|
|
|
.featured-posts-slider-i {
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.post-body {
|
|
.clearfix;
|
|
}
|
|
|
|
.featured-posts-label {
|
|
position: absolute;
|
|
background-color: @menuDividerBackgroundColor;
|
|
color: #fff;
|
|
padding: 2px 4px;
|
|
font-size: 11px;
|
|
border-radius: 2px;
|
|
.rotate(90deg);
|
|
left: -15px;
|
|
top: 38px;
|
|
z-index: 9999;
|
|
}
|
|
.featured-posts-slider-controls {
|
|
position: absolute;
|
|
right: -5px;
|
|
top: 20px;
|
|
a {
|
|
text-decoration: none;
|
|
display: block;
|
|
width: 40px;
|
|
margin-bottom: 5px;
|
|
}
|
|
i {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.featured-post {
|
|
float: left;
|
|
height: 75px;
|
|
margin-top: 10px!important;
|
|
margin-bottom: 10px!important;
|
|
figure {
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
height: 75px;
|
|
img {
|
|
border-radius: @borderRadiusBase;
|
|
}
|
|
}
|
|
|
|
|
|
.post-media-body {
|
|
float: left;
|
|
width: 100px;
|
|
margin-right: 15px;
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
.post-content-body {
|
|
padding-right: 20px;
|
|
border-right: @postMetaBorder;
|
|
height: 75px;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.post-title {
|
|
margin: 0px;
|
|
color: @postTitleColor;
|
|
font-size: floor(@baseFontSize * 1);
|
|
line-height: floor(@baseFontSize * 0.9);
|
|
border-bottom: 1px solid transparent;
|
|
.transition(all 0.2s ease);
|
|
&:hover {
|
|
text-decoration: none;
|
|
border-color: @postTitleColor;
|
|
}
|
|
}
|
|
|
|
.figure-link {
|
|
display: block;
|
|
.figure-shade {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
.transition(all 0.4s ease);
|
|
background-color: transparent;
|
|
}
|
|
.figure-icon {
|
|
position: absolute;
|
|
bottom: -50%;
|
|
left: 50%;
|
|
font-size: 24px;
|
|
margin-bottom: -12px;
|
|
margin-left: -12px;
|
|
.transition(all 0.4s ease);
|
|
color: #fff;
|
|
}
|
|
&:hover {
|
|
.figure-shade {
|
|
background-color: @postFigureShadeBackgroundColor;
|
|
}
|
|
.figure-icon {
|
|
bottom: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ul.post-categories {
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
.clearfix;
|
|
margin-top: 5px;
|
|
padding-top: 8px;
|
|
border-top: @postMetaBorder;
|
|
li {
|
|
margin-right: 3px;
|
|
margin-bottom: 3px;
|
|
float: left;
|
|
}
|
|
li a {
|
|
display: block;
|
|
padding: 2px 4px;
|
|
background-color: @tagLinkBackground;
|
|
font-size: 9px;
|
|
line-height: 12px;
|
|
color: @tagLinkColor;
|
|
border: 1px solid @tagLinkBorderColor;
|
|
border-radius: 2px;
|
|
&:hover {
|
|
border-color: darken(@tagLinkBorderColor, 20%);
|
|
background-color: lighten(@tagLinkBackground, 20%);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.featured-carousel-w {
|
|
position: relative;
|
|
.featured-posts-label {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 10px;
|
|
padding: 5px 10px;
|
|
.font-headings();
|
|
color: #fff;
|
|
background-color: #FB4E23;
|
|
font-size: floor(@baseFontSize * 1.4);
|
|
z-index: 3;
|
|
}
|
|
}
|
|
.featured-carousel-post {
|
|
position: relative;
|
|
|
|
|
|
|
|
.figure-link {
|
|
display: block;
|
|
.figure-shade {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
.transition(all 0.4s ease);
|
|
background-color: transparent;
|
|
}
|
|
.figure-icon {
|
|
position: absolute;
|
|
bottom: -50%;
|
|
left: 50%;
|
|
font-size: 48px;
|
|
margin-bottom: -24px;
|
|
margin-left: -24px;
|
|
.transition(all 0.4s ease);
|
|
color: #fff;
|
|
}
|
|
}
|
|
figure {
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
img {
|
|
width: inherit;
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 0px auto;
|
|
}
|
|
}
|
|
|
|
.post-top-share {
|
|
.transition(all 0.7s ease);
|
|
.opacity(0);
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 15px;
|
|
background-color: rgba(0,0,0,0.8);
|
|
z-index: 1000;
|
|
padding: 0px 6px;
|
|
border-radius: 6px;
|
|
.box-shadow(0px 1px 4px 0px rgba(0,0,0,0.4));
|
|
i.share-activator-icon {
|
|
vertical-align: middle;
|
|
line-height: 24px;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
padding-right: 3px;
|
|
}
|
|
span.share-activator-label {
|
|
line-height: 24px;
|
|
vertical-align: middle;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
padding-left: 10px;
|
|
border-left: 1px solid #555;
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
i.share-activator-icon {
|
|
color: #fff;
|
|
}
|
|
span.share-activator-label {
|
|
color: #fff;
|
|
}
|
|
}
|
|
.os_social-head-w {
|
|
display: none;
|
|
margin-left: 2px;
|
|
vertical-align: middle;
|
|
.os_social {
|
|
font-size: 10px;
|
|
.clearfix;
|
|
img {
|
|
padding: 0px 4px;
|
|
width: 25px!important;
|
|
}
|
|
a {
|
|
float: left;
|
|
display: block;
|
|
&:hover {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.active {
|
|
span.share-activator-label {
|
|
display: none;
|
|
}
|
|
.os_social-head-w {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-content-body {
|
|
padding: 50px 20px 20px 20px;
|
|
#gradient > .vertical(@start-color: transparent; @end-color: rgba(0,0,0,0.9));
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
.post-title {
|
|
color: #fff;
|
|
font-size: floor(@baseFontSize * 1.2);
|
|
font-weight: @headingsFontWeight;
|
|
}
|
|
|
|
}
|
|
|
|
.post-categories {
|
|
list-style: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
line-height: floor(@baseFontSize * 0.80);
|
|
li {
|
|
font-size: floor(@baseFontSize * 0.70);
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
a {
|
|
color: #eee;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.post-top-share {
|
|
.opacity(1);
|
|
}
|
|
|
|
.figure-shade {
|
|
background-color: @postFigureShadeBackgroundColor;
|
|
}
|
|
.figure-icon {
|
|
bottom: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.owl-controls {
|
|
.owl-prev, .owl-next {
|
|
cursor: pointer;
|
|
.icon-w {
|
|
display: block;
|
|
font-size: 25px;
|
|
line-height: 25px;
|
|
background-color: rgba(0,0,0,0.5);
|
|
color: #fff;
|
|
padding: 7px 15px;
|
|
text-align: center;
|
|
position: absolute;
|
|
// top: 50%;
|
|
// left: 50%;
|
|
// .transform(translate(-50%, -50%));
|
|
top: 50%;
|
|
.transform(translateY(-50%));
|
|
left: 0px;
|
|
.transition(all 0.3s ease);
|
|
border-radius: @borderRadiusBase;
|
|
vertical-align: middle;
|
|
i {
|
|
line-height: 25px;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.transition(all 0.3s ease);
|
|
}
|
|
.owl-prev {
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0px;
|
|
right: auto;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
width: 80px;
|
|
// #sun_gradient > .horizontal(@start-color: rgba(255,255,255,0.8); @end-color: rgba(255,255,255,0));
|
|
.icon-w {
|
|
left: 20px;
|
|
}
|
|
&:hover {
|
|
.icon-w {
|
|
background-color: rgba(0,0,0,0.8);
|
|
}
|
|
}
|
|
}
|
|
.owl-next {
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: auto;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
width: 80px;
|
|
// #sun_gradient > .horizontal(@start-color: rgba(255,255,255,0); @end-color: rgba(255,255,255,.8));
|
|
.icon-w {
|
|
top: 50%;
|
|
.transform(translateY(-50%));
|
|
left: auto;
|
|
right: 20px;
|
|
}
|
|
&:hover {
|
|
.icon-w {
|
|
background-color: rgba(0,0,0,0.8);
|
|
}
|
|
}
|
|
}
|
|
} |