Merge branch 'release/3.1.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / sass / application.scss

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c35574568a64cf95a0b8ee2678edbd2f5231e99b..fa9c0d9924d2ff7edc6580da515d7729f13bec65 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -6,11 +6,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 @import '_fonts';
 
-@import '~video.js/dist/video-js.css';
-
-$assets-path: '../../assets/';
-@import './player/index';
-
 @import './bootstrap';
 @import './primeng-custom';
 @import './ng-select.scss';
@@ -58,6 +53,7 @@ body {
   --activatedActionButtonColor: #{$activated-action-button-color};
 
   --horizontalMarginContent: #{$not-expanded-horizontal-margins};
+  --videosHorizontalMarginContent: 6vw;
   --mainColWidth: calc(100vw - #{$menu-width});
 
   font-family: $main-fonts;
@@ -332,16 +328,28 @@ ngx-loading-bar {
 }
 
 @media screen and (max-width: #{breakpoint(xxl)}) {
-  .main-col.expanded {
-    --horizontalMarginContent: #{$expanded-horizontal-margins/2};
+  .main-col {
+    & {
+      --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
+    }
+
+    &.expanded {
+      --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
+    }
+
+    --videosHorizontalMarginContent: 30px;
   }
 }
 
 @media screen and (max-width: #{breakpoint(lg)}) {
+  .main-col {
+    --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
+  }
+
   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
   .main-col,
   .main-col.expanded {
-    --horizontalMarginContent: #{$expanded-horizontal-margins/3};
+    --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
 
     .sub-menu {
       padding-left: 50px;