.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 {
+ .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-views {
+ text-align: right;
+ // Keep a symmetry with the video name
+ padding-right: $video-watch-info-padding-left
+ }
+
}
-}
-#video-info {
- border-top: 1px solid rgba(0, 0, 0, 0.1);
- margin-top: 10px;
- padding-top: 5px;
+ .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;
+ }
- #video-name-actions {
+ &: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;
+ }
+ }
+
+ .video-small-block:not(:last-child) {
+ border-width: 0 1px 0 0;
+ border-color: $video-watch-border-color;
+ border-style: solid;
+ }
+
+ .video-small-block-author {
+ font-size: 15px;
+ font-weight: bold;
+ text-align: left;
+ padding-left: $video-watch-info-padding-left;
+ }
- #video-name {
- font-size: 20px;
+ .video-small-block-share, .video-small-block-more {
+ a.option {
+ display: block;
+
+ .glyphicon {
+ display: block;
+ }
+ }
}
- .btn .glyphicon {
+ .video-small-block-more .video-small-block-dropdown {
position: relative;
- top: 2px;
+
+ .dropdown-item .glyphicon {
+ margin-right: 5px;
+ }
}
- #rates {
- display: inline-block;
- margin-right: 20px;
+ .video-small-block-rating {
+
+ .video-small-block-like {
+ margin-bottom: 10px;
+ }
- // Remove focus style
- .btn:focus {
- outline: 0;
+ .video-small-block-text {
+ vertical-align: top;
}
- .activated-btn {
- color: #333;
- background-color: #e6e6e6;
- border-color: #8c8c8c;
+ .glyphicon {
+ font-size: 18px;
+ margin: 0 10px 0 0;
}
- .not-interactive-btn {
- cursor: default;
+ .interactive {
+ cursor: pointer;
+ transition: color 0.3s;
- &:hover, &:focus, &:active {
- color: #333;
- background-color: #fff;
- border-color: #ccc;
- box-shadow: none;
- outline: 0;
+ &.activated, &:hover {
+ color: #000;
}
}
}
+ }
- #share, #more {
- font-weight: bold;
- opacity: 0.85;
+ .video-details {
+ margin-top: 30px;
+
+ .video-details-date-description {
+ padding-left: $video-watch-info-padding-left;
+
+ .video-details-date {
+ font-weight: bold;
+ margin-bottom: 30px;
+ }
}
- #more-menu .dropdown-item .glyphicon {
- margin-right: 5px;
+ .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-by-date {
- font-size: 13px;
- opacity: 0.6;
+ .video-details-tags {
+ display: inline-block;
- a {
- color: black;
+ a {
+ display: inline-block;
+ margin-right: 3px;
+ font-size: 11px;
+ }
}
+ }
- #video-date:before {
- content: '\002022';
- margin: 0 5px;
+ @media screen and (max-width: 400px) {
+ .video-name-views {
+ font-size: 16px !important;
}
}
- #video-tags-views {
- margin-top: 10px;
+ @media screen and (max-width: 800px) {
+ .video-name-views {
+ .video-name {
+ padding-left: 5px;
+ padding-right: 0px;
+ }
- a {
- margin-right: 5px;
+ .video-views {
+ padding-left: 0px;
+ padding-right: 5px;
+ }
}
- #video-views {
- font-weight: bold;
- }
- }
+ .video-small-blocks {
+ a, .video-small-block-text {
+ font-size: 13px !important;
+ }
- #video-category {
- margin-top: 10px;
+ .glyphicon {
+ font-size: 18px !important;
+ }
- #category-label {
- font-weight: bold;
+ .video-small-block-author {
+ padding-left: 10px;
+ }
}
- }
- #video-description {
- margin-top: 10px;
+ .video-details {
+ .video-details-date-description {
+ padding-left: 10px;
+ font-size: 13px !important;
+ }
- #description-label {
- font-weight: bold;
+ .video-details-attributes {
+ font-size: 11px !important;
+
+ .video-details-attribute-label {
+ width: 50px;
+ }
+ }
}
}
}