.video-info-first-row {
display: flex;
- & > div {
+ & > div:first-child {
flex-grow: 1;
}
.video-info-name {
margin-right: 30px;
- height: 40px; // Align with the action buttons
+ min-height: 40px; // Align with the action buttons
font-size: 27px;
font-weight: $font-semibold;
flex-grow: 1;
.video-actions-rates {
display: flex;
flex-direction: column;
- align-items: end;
+ align-items: flex-end;
.video-actions {
height: 40px; // Align with the title
- min-width: 215px;
display: flex;
align-items: center;
font-weight: $font-semibold;
display: inline-block;
padding: 0 10px 0 10px;
+ white-space: nowrap;
.icon {
@include icon(21px);
background-image: url('../../../assets/images/video/dislike-grey.svg');
}
+ &.icon-support {
+ background-image: url('../../../assets/images/video/heart.svg');
+ }
+
&.icon-share {
background-image: url('../../../assets/images/video/share.svg');
}
}
}
+ &.action-button-share {
+ width: 82px;
+ }
+
&.action-button-like.activated {
background-color: #39CC0B;
margin: 20px 0;
font-size: 15px;
+ .video-info-description-html {
+ word-break: break-all;
+ }
+
.description-loading {
display: inline-block;
}
}
-@media screen and (max-width: 1300px) {
- .other-videos {
- display: none;
- }
-
+@media screen and (max-width: 1600px) {
.video-bottom {
.video-info {
margin-right: 0;
}
}
+@media screen and (max-width: 1200px) {
+ .other-videos {
+ display: none;
+ }
+}
+
@media screen and (max-width: 600px) {
.video-bottom {
margin: 20px 0 0 0;
}
}
}
+
+@media screen and (max-width: 450px) {
+ .video-bottom .action-button .icon-text {
+ display: none !important;
+ }
+}