app/assets/stylesheets/video.css
.video-preview {
text-align: center;
margin-bottom: 10px;
position: relative;
overflow: hidden;
border: solid 1px #999;
img {
width: 100%;
}
&:hover {
.favorite {
opacity: 1;
}
}
.featured {
position: absolute;
top: 20px;
right: -40px;
width: 150px;
transform: rotate(45deg);
background-color: #1285AF;
color: white;
padding: 5px;
text-transform: uppercase;
font-family: 'Oxygen', sans-serif;
font-weight: bold;
}
.favorite {
transform: rotate(-45deg);
background-color: #fafafa;
position: absolute;
left: -29px;
top: -4px;
height: 35px;
width: 80px;
text-align: center;
z-index: 0.25;
padding: 12px 7px 2px 4px;
box-shadow: 0px 0px 1px rgba(0,0,0,0.2);
opacity: 0;
.glyphicon {
font-size: 18px;
transform: rotate(45deg);
display: block;
color: #999;
&:before {
content: "\E005";
}
&:hover {
cursor: pointer;
color: #FFCCCC;
&:before {
content: "\E005";
}
}
}
&.favorited {
opacity: 1;
.glyphicon {
color: #FFCCCC;
&:hover {
color: #999;
}
}
}
}
.video-block {
border: solid 1px #999;
border-top: none;
a {
text-decoration: none;
}
.video-info {
display: flex;
height: 50px;
.video-title {
flex: 1;
flex-grow: 1;
text-align: left;
padding: 5px;
}
.video-stats {
padding: 5px;
text-align: right;
color: #999;
.glyphicon {
margin-left: 5px;
margin-right: 2px;
&:first-child {
margin-left: 2px;
}
}
}
}
}
}
#vidframe {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.frame-wrapper {
position: relative;
width: 100%;
height: 0px;
padding-bottom: 60%;
margin-bottom: 25px;
}
.video-show {
.favorite.glyphicon-heart {
margin-right: 10px;
color: #999;
&:hover {
color: #FFCCCC;
cursor: pointer;
}
&.favorited {
color: #FFCCCC;
&:hover {
color: #999;
}
}
}
.icons {
display: inline-block;
color: #999;
margin-right: 10px;
.glyphicon-heart {
margin-left: 10px;
}
}
.tags-row {
margin-bottom: 15px;
.tags {
display: inline-block;
}
.glyphicon-plus {
margin-left: 5px;
&:hover {
cursor: pointer;
}
}
.Select {
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
}
}
}