.embed-responsive {
height: 500px;
+
+ @media screen and (max-width: 600px) {
+ height: 300px;
+ }
}
#torrent-info {
}
}
-.embed-responsive {
- @media screen and (max-width: 600px) {
- height: 300px;
- }
-}
-
#video-info {
- border-top: 1px solid rgba(0, 0, 0, 0.1);
- margin-top: 10px;
- padding-top: 5px;
+ .video-name-views {
+ font-weight: bold;
+ font-size: 18px;
+ height: $video-watch-title-height;
+ line-height: $video-watch-title-height;
+
+ .video-name {
+ padding-left: $video-watch-info-padding-left;
+ }
- #video-name-actions {
+ .video-views {
+ text-align: right;
+ // Keep a symmetry with the video name
+ padding-right: $video-watch-info-padding-left
+ }
- #video-name {
- font-size: 20px;
+ }
+
+ .video-small-blocks {
+ height: $video-watch-info-height;
+ color: $video-watch-info-color;
+ border-color: $video-watch-border-color;
+ border-width: 1px 0px;
+ border-style: solid;
+
+ .video-small-block {
+ height: $video-watch-info-height;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+
+ a {
+ cursor: pointer;
+ transition: color 0.3s;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &, &:hover {
+ color: inherit;
+ text-decoration:none;
+ }
+
+ &:hover {
+ color: #000 !important;
+ }
+ }
+
+ .option .glyphicon {
+ font-size: 22px;
+ color: inherit;
+ opacity: 0.6;
+ margin-bottom: 10px;
+ }
+
+ .video-small-block-text {
+ font-size: 15px;
+ font-weight: bold;
+ }
}
- .btn .glyphicon {
- position: relative;
- top: 2px;
+ .video-small-block:not(:last-child) {
+ border-width: 0 1px 0 0;
+ border-color: $video-watch-border-color;
+ border-style: solid;
}
- #magnet-uri, #share, #more {
+ .video-small-block-author {
+ font-size: 15px;
font-weight: bold;
- opacity: 0.85;
+ text-align: left;
+ padding-left: $video-watch-info-padding-left;
}
- #more-menu .dropdown-item .glyphicon {
- margin-right: 5px;
+ .video-small-block-share, .video-small-block-more {
+ a.option {
+ display: block;
+
+ .glyphicon {
+ display: block;
+ }
+ }
}
- }
- #video-by-date {
- font-size: 13px;
- opacity: 0.6;
+ .video-small-block-more .video-small-block-dropdown {
+ position: relative;
- a {
- color: black;
+ .dropdown-item .glyphicon {
+ margin-right: 5px;
+ }
}
- #video-date:before {
- content: '\002022';
- margin: 0 5px;
+ .video-small-block-rating {
+
+ .video-small-block-like {
+ margin-bottom: 10px;
+ }
+
+ .video-small-block-text {
+ vertical-align: top;
+ }
+
+ .glyphicon {
+ font-size: 18px;
+ margin: 0 10px 0 0;
+ }
+
+ .interactive {
+ cursor: pointer;
+ transition: color 0.3s;
+
+ &.activated, &:hover {
+ color: #000;
+ }
+ }
}
}
- #video-tags {
- margin-top: 10px;
+ .video-details {
+ margin-top: 30px;
- a {
- margin-right: 5px;
+ .video-details-date-description {
+ padding-left: $video-watch-info-padding-left;
+
+ .video-details-date {
+ font-weight: bold;
+ margin-bottom: 30px;
+ }
+ }
+
+ .video-details-attributes {
+ font-weight: bold;
+ font-size: 12px;
+
+ .video-details-attribute-label {
+ color: $video-watch-info-color;
+ display: inline-block;
+ width: 60px;
+ margin-right: 5px;
+ }
+ }
+
+ .video-details-tags {
+ display: inline-block;
+
+ a {
+ display: inline-block;
+ margin-right: 3px;
+ font-size: 11px;
+ }
}
}
- #video-description {
- margin-top: 15px;
+ @media screen and (max-width: 400px) {
+ .video-name-views {
+ font-size: 16px !important;
+ }
+ }
- #description-label {
- font-weight: bold;
+ @media screen and (max-width: 800px) {
+ .video-name-views {
+ .video-name {
+ padding-left: 5px;
+ padding-right: 0px;
+ }
+
+ .video-views {
+ padding-left: 0px;
+ padding-right: 5px;
+ }
+ }
+
+ .video-small-blocks {
+ a, .video-small-block-text {
+ font-size: 13px !important;
+ }
+
+ .glyphicon {
+ font-size: 18px !important;
+ }
+
+ .video-small-block-author {
+ padding-left: 10px;
+ }
+ }
+
+ .video-details {
+ .video-details-date-description {
+ padding-left: 10px;
+ font-size: 13px !important;
+ }
+
+ .video-details-attributes {
+ font-size: 11px !important;
+
+ .video-details-attribute-label {
+ width: 50px;
+ }
+ }
}
}
}