mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-18 18:55:49 +00:00
c5489fe3a7
Update css to v6 Add videos to xrpl overview page Update css to v6 Move video player up on screen Adjust vid position and size Fix expanded video sizing on more resolutions
96 lines
1.6 KiB
SCSS
96 lines
1.6 KiB
SCSS
.video-image {
|
|
transition: all 0.35s ease-out;
|
|
cursor: pointer;
|
|
&:hover {
|
|
-webkit-transform: translateY(-16px);
|
|
-moz-transform: translateY(-16px);
|
|
-ms-transform: translateY(-16px);
|
|
-o-transform: translateY(-16px);
|
|
transform: translateY(-16px);
|
|
}
|
|
}
|
|
|
|
#video-overlay {
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
z-index:1190;
|
|
height:100%;
|
|
width:100%;
|
|
background:#ffffff;
|
|
opacity:0.6;
|
|
display:none;
|
|
}
|
|
|
|
#video {
|
|
display: none;
|
|
position: fixed;
|
|
top: 10%;
|
|
left: 15%;
|
|
width: 70%;
|
|
z-index: 1200;
|
|
}
|
|
|
|
#video-container {
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
max-width: 982px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
#videoWrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: calc(90vh - 100px);
|
|
width: 80vw;
|
|
}
|
|
|
|
#videoWrapper iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#video-container iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.video-external-link {
|
|
color: $blue-purple-400;
|
|
font-weight: 600;
|
|
|
|
&::after {
|
|
content: "\00a0";
|
|
background-image: url(../img/icons/arrow-up-right.svg);
|
|
background-repeat: no-repeat;
|
|
display: inline-block;
|
|
background-size: 10px;
|
|
padding: 0 4px 0 8px;
|
|
width: 2rem;
|
|
background-position: left 8px bottom 6px;
|
|
transition: background-position 100ms ease-in-out;
|
|
}
|
|
|
|
&.video-external-link:hover::after {
|
|
background-position: left 12px bottom 8px;
|
|
}
|
|
}
|
|
|
|
.video-title{
|
|
line-height: 1.2;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|