This repository has been archived on 2022-11-21. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-static/scss/_commons.scss

187 lines
2.9 KiB
SCSS
Raw Normal View History

@import 'global';
2019-10-08 13:06:59 +02:00
@import 'cards';
2019-10-08 13:06:59 +02:00
/* ------------------ BUTTONS ------------------- */
2019-10-10 09:53:59 +02:00
@import 'buttons';
2019-10-08 13:06:59 +02:00
/* ------------------ PREVIEWS ------------------- */
2019-10-17 15:23:55 +02:00
$preview-height: 8*1.5rem;
2019-10-08 13:06:59 +02:00
.previews-section {
2019-10-17 15:23:55 +02:00
display: grid;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-gap: 1.5rem;
2019-10-08 13:06:59 +02:00
}
.preview-container {
2019-10-17 15:23:55 +02:00
width:100%;
2019-10-08 13:06:59 +02:00
}
@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 {
2019-10-17 15:23:55 +02:00
padding:0;
width:100%;
2019-10-08 13:06:59 +02:00
margin:auto;
box-shadow: $large-shadow, $inset-shadow;
}
.preview-link:hover {
text-decoration:none!important;
}
.preview-item {
2019-10-17 15:23:55 +02:00
height: $preview-height;
font-size:0.9rem;
line-height: 1.5rem !important;
2019-10-08 13:06:59 +02:00
padding:0.2em;
text-align:justify;
2019-10-17 15:23:55 +02:00
background-color:rgba(0,0,0,0.00);
2019-10-08 13:06:59 +02:00
color:rgba(0,0,0,0.4);
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
2019-10-17 15:23:55 +02:00
.preview-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding: 0.75rem;
backdrop-filter: none;
transition: background 0.3s;
h1, h2, h3, h4, h5, h6 {
color: $color-light;
font-size: 1rem;
line-height: 1.5rem;
font-weight:$fontweight_big;
2019-10-17 15:23:55 +02:00
}
.card-header {
font-family: $basefont;
2019-10-17 15:23:55 +02:00
font-size: 1rem;
background-color: $color-primary;
@include card-header(0.75rem);
font-weight: $fontweight_big;
2019-10-17 15:23:55 +02:00
}
}
2019-10-08 13:06:59 +02:00
2019-10-17 15:23:55 +02:00
&:hover {
.preview-overlay {
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4);
2019-10-08 13:06:59 +02:00
2019-10-17 15:23:55 +02:00
.preview-metadata {
opacity: .9;
transition: opacity .5s;
}
}
}
2019-10-08 13:06:59 +02:00
}
2019-10-17 15:23:55 +02:00
.preview-content {
max-height: $preview-height;
overflow:hidden;
2019-10-08 13:06:59 +02:00
2019-10-17 15:23:55 +02:00
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
max-width:100%;
display:none;
}
2019-10-08 13:06:59 +02:00
2019-10-17 15:23:55 +02:00
& > 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%;
}
}
2019-10-08 13:06:59 +02:00
}
2019-10-17 15:23:55 +02:00
.preview-metadata {
2019-10-08 13:06:59 +02:00
opacity: 0;
2019-10-17 15:23:55 +02:00
transition: opacity .3s;
color: $color-light;
2019-10-08 13:06:59 +02:00
}
2019-10-17 15:23:55 +02:00
2019-10-08 13:06:59 +02:00
.comment-text {
margin-top:0.8em;
}
.card-preview time {
margin-bottom:0.4em;
display:block;
}
2019-10-17 10:26:19 +02:00
2019-10-17 15:23:55 +02:00
// Author area
2019-10-17 10:26:19 +02:00
.author-area {
display:flex;
img.author-avatar {
display:block;
height: 4.5rem;
width:auto;
border-radius:100%;
padding:0;
margin:0;
margin-right:1.5rem;
}
.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:1.5rem;
}
}