This repository has been archived on 2024-04-03. You can view files and clone it, but cannot push or open issues or pull requests.
qdouze2-wordpress-theme/scss/components/_previews.scss

265 lines
4.4 KiB
SCSS
Raw Normal View History

2022-12-17 19:46:29 +01:00
/*
* 4. Previews
* Special style for previews cards
*
*/
$preview-height: 8*$lineheight;
2022-12-17 22:34:02 +01:00
$preview-content-height:165px;
$comment-peek-height:0px;
$comment-height:30px;
2022-12-17 19:46:29 +01:00
.previews-section {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include xl() {
grid-template-columns: 1fr 1fr;
}
@include xxl() {
grid-template-columns: 1fr 1fr 1fr;
}
}
.preview-container {
width:100%;
}
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
.prev-col-2 .preview-container {
width:50%;
}
.prev-col-3 .preview-container {
width:33%;
}
.prev-col-4 .preview-container {
width:25%;
}
}
.card-preview {
padding:0;
width:100%;
margin:auto;
box-shadow: $large-shadow, $inset-shadow;
}
.preview-link {
padding:0;
background-color: transparent;
2022-12-17 22:34:02 +01:00
margin:0!important;
2022-12-17 19:46:29 +01:00
}
.preview-item {
height: $preview-height;
font-size:0.9rem;
line-height: $lineheight !important;
text-align:justify;
background-color:rgba(0,0,0,0.00);
2022-12-17 22:34:02 +01:00
color:dim(getFontColor());
2022-12-17 19:46:29 +01:00
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
.preview-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
2022-12-17 22:34:02 +01:00
padding-top: $card-header-vmargin/2;
2022-12-17 19:46:29 +01:00
backdrop-filter: none;
transition: background-color 0.3s;
2022-12-17 22:34:02 +01:00
@include border-radius($card-radius);
2022-12-17 19:46:29 +01:00
h1, h2, h3, h4, h5, h6 {
2022-12-17 22:34:02 +01:00
color: $color-font-light;
2022-12-17 19:46:29 +01:00
font-size: 1rem;
line-height: $lineheight;
font-weight:$fontweight_big;
}
.card-header {
font-family: $basefont;
font-size: 1rem;
2022-12-17 22:34:02 +01:00
@include panel-header($lineheight_half);
@include colorize-shape($color-primary);
color:getTextColorFromBackground($color-primary);
2022-12-17 19:46:29 +01:00
font-weight: $fontweight_big;
2022-12-17 22:34:02 +01:00
margin-top:0px;
2022-12-17 19:46:29 +01:00
}
}
&:hover {
.preview-overlay {
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4);
.metadata-pills {
opacity: .9;
transition: opacity .5s, height .5s;
2022-12-17 22:34:02 +01:00
height:$preview-content-height - $comment-height;
2022-12-17 19:46:29 +01:00
}
}
}
}
.preview-content {
max-height: $preview-height;
overflow:hidden;
background-size: cover;
min-height:100%;
min-width:100%;
2022-12-17 22:34:02 +01:00
@include border-radius($card-radius);
font-size:0.85rem;
line-height:1.25rem;
2022-12-17 19:46:29 +01:00
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
max-width:100%;
display:none;
}
& > p {
width:100%;
margin:auto;
& > img {
max-width:100%;
height:auto;
vertical-align:middle;
margin:auto;
text-align:center;
}
&.p-img {
text-align:center;
margin:auto;
padding:auto;
display: block;
width:100%;
}
}
}
.preview-metadata {
2022-12-17 22:34:02 +01:00
color: $color-font-light;
height:$preview-content-height;
2022-12-17 19:46:29 +01:00
overflow: hidden;
2022-12-17 22:34:02 +01:00
@include border-radius($card-radius);
2022-12-17 19:46:29 +01:00
.metadata-pills {
2022-12-17 22:34:02 +01:00
height:$preview-content-height - $comment-peek-height;
2022-12-17 19:46:29 +01:00
opacity: 0;
transition: opacity .3s, height .3s;
display:flex;
justify-content:space-between;
padding-left: $lineheight/2;
padding-right: $lineheight/2;
font-size:0.9em;
}
}
2022-12-17 22:34:02 +01:00
.card-preview.head-info {
2022-12-17 19:46:29 +01:00
.comment-text {
2022-12-18 09:46:44 +01:00
background-color:$color-secondary;
2022-12-17 19:46:29 +01:00
}
}
.card-preview.card-grey {
.comment-text {
2022-12-17 22:34:02 +01:00
background-color:$color-muted;
2022-12-17 19:46:29 +01:00
}
}
.comment-text {
2022-12-17 22:34:02 +01:00
color: $color-font-light;
background-color:$color-primary;
2022-12-17 19:46:29 +01:00
text-align: center;
}
.card-preview time {
margin-bottom:0.4em;
display:block;
}
// Author area
.author-area {
display:flex;
img.author-avatar, img.avatar {
display:block;
2022-12-17 22:34:02 +01:00
height: $lineheight*3;
2022-12-17 19:46:29 +01:00
width:auto;
border-radius:100%;
padding:0;
margin:0;
margin-right:$lineheight;
}
.author-metadata {
align-items:center;
display:flex;
flex-direction:column;
justify-content: center;
align-items: flex-start;
}
.author-date {
font-style:italic;
}
&:not(:last-child) {
margin-bottom:$lineheight;
}
}
.pigimg {
display:block;
max-width: 100%;
height:auto;
margin:auto;
}
.avatar {
background: transparent;
}
.mwarea {
padding-bottom: $lineheight;
.avatar {
width:80%;
height:auto;
display:block;
margin:auto;
}
}
.cover {
width:100%;
height:auto;
2022-12-17 22:34:02 +01:00
@include border-radius($card-radius);
2022-12-17 19:46:29 +01:00
}
.roman {
@include md() {
width:80%;
position:relative;
top:-240px;
margin:auto;
}
}