kspace-bludit-theme/scss/components/_previews.scss

290 lines
5 KiB
SCSS
Raw Permalink Normal View History

2024-04-10 20:58:16 +02:00
$preview-height: 8*$lineheight;
$preview-content-height:165px;
$comment-peek-height:0px;
.preview-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include md() {
grid-template-columns: 1fr 1fr;
}
}
.preview-grid-3 {
@include xl() {
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;
max-width:360px;
}
.preview-link {
padding:0;
background-color: transparent;
margin:0!important;
text-decoration: none;
position:relative;
height: $preview-height;
.card-header {
letter-spacing: normal;
padding: $lineheight_half/2 $card-header-padding;
padding-bottom: $lineheight_half/2 !important;
&:before {
left: -$lineheight_half/2;
right: -$lineheight_half/2;
box-shadow: $btn-shadow;
}
position:absolute;
margin:0;
top:0.5rem;
z-index:1;
min-height:2.8rem;
display:flex;
flex-direction: column;
justify-content: center;
}
}
.preview-content {
font-size:0.9rem;
height: 100%;
width: 100%;
line-height: $lineheight !important;
text-align:justify;
background-color:rgba(0,0,0,0.00);
color: transparentize($color-font, 0.3);
position: relative;
overflow:hidden;
@include border-radius($card-radius);
box-shadow: $btn-shadow;
.preview-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding-top: $card-header-vmargin/2;
backdrop-filter: none;
transition: background-color 0.3s, backdrop-filter 0.3s;
overflow: hidden;
@include border-radius($card-radius);
}
&:hover {
.preview-overlay {
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4);
.metadata-pills {
opacity: .9;
transition: opacity .5s, height .5s;
}
.comment-text {
bottom:0px;
}
}
}
}
.preview-exerpt {
max-height: $preview-height;
overflow:hidden;
background-size: cover;
min-height:100%;
min-width:100%;
@include border-radius($card-radius);
font-size:0.85rem;
line-height:1.25rem;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
max-width:100%;
display:none;
}
& > p {
width:100%;
margin:auto;
&:not(.p-img) {
position:absolute;
top:3rem;
padding:0.5rem;
}
& > 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 {
color: $color-font-light;
height:100%;
overflow: hidden;
@include border-radius($card-radius);
.metadata-pills {
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;
padding-top:3rem;
}
}
.card-preview.head-info {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-secondary, 16);
background-color:$color-secondary;
}
}
.card-preview.card-grey {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-muted, 16);
background-color:$color-muted;
}
}
.comment-text {
color: $color-font-light;
background-color:$color-primary;
@include angled-edge('outside top', 'upper left', $color-primary, 16);
text-align: center;
position:absolute;
bottom:-$lineheight;
width:100%;
transition: bottom 0.3s;
}
.card-preview time {
margin-bottom:0.4em;
display:block;
}
// Author area
.author-area {
display:flex;
img.author-avatar, img.avatar {
display:block;
height: $lineheight*3;
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;
@include border-radius($card-radius);
}
.roman {
@include md() {
width:80%;
position:relative;
top:-240px;
margin:auto;
}
}