Commit 3c332c43 authored by marcheing's avatar marcheing

Add stylesheets for videojs share button

The suggested video endcap css file is a requisite for the share button
styles.
parent 3553ff31
a#vjs-share-button-image-destination {
background-color: transparent;
display: block;
height: 40px;
left: auto;
position: absolute;
right: 20px;
top: 20px;
transition: visibility 0.1s ease 0s, opacity 0.1s ease 0s;
visibility: visible;
width: auto;
.ic-share {
background-image: url('ic-share-branco.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border-bottom: none;
cursor: pointer;
height: 40px;
vertical-align: middle;
width: 40px;
&:hover {
background-image: url('ic-share-branco-hover.svg');
}
}
}
.vjs-user-inactive a#vjs-share-button-image {
visibility: hidden;
}
.vjs-user-inactive.vjs-paused a#vjs-share-button-image {
visibility: visible;
}
.vjs-ad-playing a#vjs-share-button-image-destination {
display: none;
}
.vjs-share-box {
@extend .vjs-suggested-video-endcap;
.share-links-group {
margin-top: 10%;
text-align: center;
h3 {
color: $white;
}
}
.reveal {
color: $black;
.close-button {
color: $black;
}
}
.close-button {
color: $white;
}
}
.vjs-suggested-video-endcap {
background: rgba(0, 0, 0, .7);
display: none;
height: 100%;
left: 0;
overflow: hidden;
padding: 5px;
position: absolute;
right: 0;
top: 0;
width: 100%;
@include breakpoint(large) {
padding: 20px;
}
}
.vjs-suggested-video-endcap.is-active {
display: block;
}
.vjs-suggested-video-endcap-container {
-webkit-align-content: center;
align-content: center;
-webkit-align-items: baseline;
align-items: baseline;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.vjs-suggested-video-endcap-header {
font: 700 16px/1 Arial, sans-serif;
margin: 0 auto 20px;
text-align: center;
}
.vjs-suggested-video-endcap-link {
color: #fff;
font: 400 18px/1 Arial, sans-serif;
margin-bottom: 2px;
margin-right: 5px;
margin-top: 0;
position: relative;
width: 23%;
&:hover {
color: #fff;
}
.content-title {
font-size: 8px;
line-height: 1.25;
margin-bottom: 0;
}
.content-author {
font-size: 7px;
line-height: 1.25;
margin-bottom: 0;
}
@include breakpoint(medium) {
.content-title {
font-size: 12px;
}
.content-author {
font-size: 10px;
}
}
@include breakpoint(large) {
margin-bottom: 10px;
margin-right: 10px;
.content-title {
font-size: 16px;
}
.content-author {
font-size: 12px;
}
}
}
.vjs-suggested-video-endcap-link:nth-of-type(4n),
.vjs-suggested-video-endcap-link:last-of-type {
margin-right: 0;
}
.vjs-suggested-video-endcap-img {
height: auto;
margin-bottom: 1px;
width: 100%;
@include breakpoint(large) {
margin-bottom: 5px;
}
}
......@@ -57,4 +57,6 @@
@import 'header';
@import 'form-section';
@import 'content-detailed';
@import 'videojs-suggestedVideoEndcap';
@import 'videojs-shareButton';
@import 'footer';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment