17 @media screen and (max-width: 600px) {
36 height: $video-watch-title-height;
37 line-height: $video-watch-title-height;
40 padding-left: $video-watch-info-padding-left;
45 // Keep a symmetry with the video name
46 padding-right: $video-watch-info-padding-left
52 height: $video-watch-info-height;
53 color: $video-watch-info-color;
54 border-color: $video-watch-border-color;
55 border-width: 1px 0px;
59 height: $video-watch-info-height;
61 flex-direction: column;
62 justify-content: center;
67 transition: color 0.3s;
70 text-overflow: ellipsis;
78 color: #000 !important;
81 &:hover > .glyphicon {
82 opacity: 1 !important;
91 transition: opacity 0.3s;
94 .video-small-block-text {
100 .video-small-block:not(:last-child) {
101 border-width: 0 1px 0 0;
102 border-color: $video-watch-border-color;
106 .video-small-block-author, .video-small-block-more {
116 .video-small-block-share, .video-small-block-more {
126 .video-small-block-more .video-small-block-dropdown {
129 .dropdown-item .glyphicon {
134 .video-small-block-rating {
136 .video-small-block-like {
140 .video-small-block-text {
152 transition: opacity, color 0.3s;
154 &.activated, &:hover {
165 .video-details-date-description {
166 padding-left: $video-watch-info-padding-left;
168 .video-details-date {
174 .video-details-attributes {
178 .video-details-attribute-label {
179 color: $video-watch-info-color;
180 display: inline-block;
186 .video-details-tags {
187 display: inline-block;
190 display: inline-block;
197 @media screen and (max-width: 400px) {
199 font-size: 16px !important;
203 @media screen and (max-width: 800px) {
216 .video-small-blocks {
217 a, .video-small-block-text {
218 font-size: 13px !important;
222 font-size: 18px !important;
225 .video-small-block-author {
231 .video-details-date-description {
233 font-size: 13px !important;
236 .video-details-attributes {
237 font-size: 11px !important;
239 .video-details-attribute-label {