This repository has been archived on 2023-08-21. You can view files and clone it, but cannot push or open issues or pull requests.
bluesky-bootstrap-theme/scss/components/_previews.scss

136 lines
2.6 KiB
SCSS
Raw Normal View History

2019-11-06 16:11:27 +01:00
2019-11-05 12:49:13 +01:00
.previews-section {
2019-11-06 16:11:27 +01:00
@include md {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-gap: 1.5rem;
padding-bottom: 1.5rem;
}
@include xxl {
grid-template-columns: auto auto auto;
}
2019-11-05 12:49:13 +01:00
}
.preview-container {
width:100%
2019-11-05 12:49:13 +01:00
}
.card-preview {
@include border-radius();
width:100%;
margin:auto;
box-shadow: $large-shadow, $inset-shadow;
2019-11-06 16:11:27 +01:00
margin-bottom: 1.5rem;
@include lg {
margin-bottom:0;
}
2019-11-05 12:49:13 +01:00
}
.preview-link:hover {
text-decoration:none!important;
2019-11-05 12:49:13 +01:00
}
.preview-item {
height:200px;
overflow:hidden;
font-size:0.9em;
line-height: 1.5em !important;
padding:0.2em;
text-align:justify;
2019-11-06 12:18:15 +01:00
background-color: get-color("light");
color:rgba(0,0,0,0.4);
position: relative;
2019-11-05 12:49:13 +01:00
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
2019-11-05 12:49:13 +01:00
}
.preview-content {
max-height:200px;
& > p {
width:100%;
margin:auto;
&.p-img {
text-align:center;
margin:auto;
padding:auto;
display: block;
width:100%;
}
& > img {
max-width:100%;
height:auto;
vertical-align:middle;
margin:auto;
text-align:center;
}
}
2019-11-05 12:49:13 +01:00
}
.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
margin-bottom:0px;
max-width:100%;
display:none;
2019-11-05 12:49:13 +01:00
}
.preview-item h1 {
display:none;
2019-11-05 12:49:13 +01:00
}
.preview-overlay {
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity .5s;
color: #FFF;
background-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
backdrop-filter: none;
h1 {
max-width:100%;
padding-top:0.3em;
margin:auto;
margin-bottom:0px;
text-align:center;
display:block;
font-size:2em;
color: white;
}
2019-11-05 12:49:13 +01:00
}
.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 {
color:white;
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
2019-11-05 12:49:13 +01:00
}
.preview-item:hover .preview-overlay {
opacity: .9;
transition: opacity .5s;
backdrop-filter: blur(2px);
2019-11-05 12:49:13 +01:00
}
.comment-text {
margin-top:0.8em;
2019-11-05 12:49:13 +01:00
}
.card-preview time {
margin-bottom:0.4em;
display:block;
2019-11-05 12:49:13 +01:00
}