/**
* Recent Posts Widget
*/
.oceanwp-recent-posts {
li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
line-height: 1.6;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e9e9e9;
&:first-child {
margin-top: 0;
padding-top: 0;
border: 0;
}
}
.recent-posts-thumbnail {
position: relative;
width: 25%;
min-width: 68px;
margin-right: 4%;
img {
width: 100%;
border-radius: 3px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background-color: rgba(0,0,0,0.2);
opacity: 0;
text-align: center;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
}
&:hover .overlay {
opacity: 1;
}
}
.recent-posts-details {
width: 100%;
}
.recent-posts-title {
font-weight: 500;
letter-spacing: 0.4px;
}
.recent-posts-info {
display: block;
color: #aaa;
margin-top: 6px;
font-size: 10px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.2px;
.sep {
padding: 0 3px;
}
}
.recent-posts-date,
.recent-posts-comments {
display: inline-block;
i {
margin-right: 4px;
}
}
.recent-posts-comments a {
color: #999;
&:hover {
color: #32b6c0;
}
}
}
/*------------------------------------*
All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {
/* recent posts widget */
.oceanwp-recent-posts {
.recent-posts-thumbnail {
width: 15%;
margin-right: 3%;
}
}
}
/*------------------------------------*
Phone Landscape
*------------------------------------*/
@media only screen and (max-width: 480px) {
/* recent posts widget */
.oceanwp-recent-posts {
.recent-posts-thumbnail {
width: 25%;
margin-right: 4%;
}
}
} |