17 @media screen and (max-width: 600px) {
36 min-height: $video-watch-title-height;
41 padding-left: $video-watch-info-padding-left;
46 // Keep a symmetry with the video name
47 padding-right: $video-watch-info-padding-left
53 height: $video-watch-info-height;
54 color: $video-watch-info-color;
55 border-color: $video-watch-border-color;
56 border-width: 1px 0px;
60 height: $video-watch-info-height;
62 flex-direction: column;
63 justify-content: center;
68 transition: color 0.3s;
71 text-overflow: ellipsis;
79 color: #000 !important;
82 &:hover > .glyphicon {
83 opacity: 1 !important;
92 transition: opacity 0.3s;
95 .video-small-block-text {
101 .video-small-block:not(:last-child) {
102 border-width: 0 1px 0 0;
103 border-color: $video-watch-border-color;
107 .video-small-block-author, .video-small-block-more {
117 .video-small-block-share, .video-small-block-more {
127 .video-small-block-more .video-small-block-dropdown {
130 .dropdown-item .glyphicon {
135 .video-small-block-rating {
137 .video-small-block-like {
141 .video-small-block-text {
153 transition: opacity, color 0.3s;
155 &.activated, &:hover {
166 .video-details-date-description {
167 padding-left: $video-watch-info-padding-left;
169 .video-details-date {
175 .video-details-attributes {
179 .video-details-attribute {
182 .video-details-attribute-label {
183 color: $video-watch-info-color;
192 .video-details-tags {
203 @media screen and (max-width: 400px) {
205 font-size: 16px !important;
209 @media screen and (max-width: 800px) {
222 .video-small-blocks {
223 a, .video-small-block-text {
224 font-size: 13px !important;
228 font-size: 18px !important;
231 .video-small-block-author {
237 .video-details-date-description {
239 font-size: 13px !important;
242 .video-details-attributes {
243 font-size: 11px !important;
245 .video-details-attribute-label {