@import '_mixins';
+@import '_miniature';
-.videos {
- text-align: center;
+.videos-header {
+ display: flex;
+ height: 80px;
+ align-items: center;
- my-video-miniature {
- text-align: left;
+ .title-page.title-page-single {
+ margin: 0 5px 0 0;
}
-}
-.title-page.title-page-single {
- margin-right: 5px;
-}
+ my-feed {
+ display: inline-block;
+ top: 1px;
+ min-width: 60px;
+ }
-my-video-feed {
- display: inline-block;
+ .moderation-block {
+ display: flex;
+ flex-grow: 1;
+ justify-content: flex-end;
+ align-items: center;
+ }
}
-@media screen and (max-width: 500px) {
- .videos {
- text-align: center;
-
- /deep/ .video-miniature {
- padding-right: 0;
- height: auto;
- width: 100%;
- margin-bottom: 20px;
-
- .video-miniature-information {
- width: 100% !important;
-
- span {
- width: 100%;
- }
- }
-
- .video-thumbnail {
- width: 100%;
- height: auto;
-
- img {
- width: 100%;
- height: auto;
- }
- }
+.margin-content {
+ width: $video-miniature-width * 6;
+ margin: auto !important;
+
+ @media screen and (max-width: 1800px) {
+ width: $video-miniature-width * 5;
+ }
+
+ @media screen and (max-width: 1800px - $video-miniature-width) {
+ width: $video-miniature-width * 4;
+ }
+
+ @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
+ width: $video-miniature-width * 3;
+ }
+
+ @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
+ width: $video-miniature-width * 2;
+ }
+
+ @media screen and (max-width: 500px) {
+ width: auto;
+ margin: 0 !important;
+
+ .videos {
+ @include video-miniature-small-screen;
}
}
}
+