spee.ch/client/scss/_asset-preview.scss

54 lines
1.3 KiB
SCSS
Raw Normal View History

2018-11-15 04:51:25 +01:00
.asset-preview {
position: relative;
}
2018-11-19 02:57:54 +01:00
.asset-preview__image {
2018-05-31 00:00:09 +02:00
width : 100%;
2018-10-12 14:00:03 +02:00
padding: 0;
margin : 0;
2018-05-31 00:00:09 +02:00
}
2018-11-19 02:57:54 +01:00
.asset-preview__video {
2018-05-31 00:00:09 +02:00
cursor: pointer;
background-color: #ffffff;
2018-10-12 14:00:03 +02:00
width: 100%;
2018-11-19 02:57:54 +01:00
position: relative;
2018-05-31 00:00:09 +02:00
}
2018-10-11 19:03:39 +02:00
2018-11-19 02:57:54 +01:00
h3.asset-preview__title {
2018-10-11 19:03:39 +02:00
margin: 0;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
line-height: 1em;
max-height: 2em;
}
2018-11-19 02:57:54 +01:00
.asset-preview__play-wrapper {
border: 0px;
padding: 0px;
margin: auto;
position: relative;
}
.asset-preview__play-overlay {
padding: 0;
border: 0;
position: absolute;
opacity: 0.80;
height: 25%;
top: 37.5%;
2018-11-19 02:57:54 +01:00
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
margin: 0 auto;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='black' stroke-width='2' fill='black' fill-rule='evenodd' stroke-linejoin='round'%3E %3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E %3Cg stroke='white' stroke-width='1' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='25 19 42 30 25 41'/%3E %3C/g%3E %3C/svg%3E");
2018-11-19 02:57:54 +01:00
background-repeat: no-repeat;
background-position: center;
}
.asset-preview__play-wrapper:hover .asset-preview__play-overlay {
opacity: 0.2;
2018-11-19 02:57:54 +01:00
}