Add japanese support

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

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 8d2bfb0776353154b343beab3c9afe7fab459d89..d847662408bfd54768c1d505f9e6fe4cbc758cb6 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,4 +1,4 @@
-$icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/';
+$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import '_bootstrap';
 
 @import '_variables';
@@ -9,7 +9,7 @@ $icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/
 @import '~video.js/dist/video-js.css';
 
 $assets-path: '../assets/';
-@import './player/player';
+@import './player/index';
 @import './loading-bar';
 
 @import './primeng-custom';
@@ -23,9 +23,11 @@ body {
   // now beware node-sass requires interpolation
   // for css custom properties #{$var}
   --mainColor: #{$orange-color};
-  --mainHoverColor: #{$orange-hoover-color};
+  --mainHoverColor: #{$orange-hover-color};
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
+  --menuBackgroundColor: #{$menu-background};
+  --menuForegroundColor: #{$menu-color};
   --submenuColor: #{$sub-menu-color};
   --inputColor: #{$input-background-color};
   --inputPlaceholderColor: #{$input-placeholder-color};
@@ -58,6 +60,10 @@ input, textarea {
   color: var(--mainForegroundColor);
 }
 
+.btn-outline-secondary {
+  border-color: $input-border-color;
+}
+
 label {
   font-weight: $font-bold;
   font-size: 15px;
@@ -98,7 +104,7 @@ label {
     background-color: var(--submenuColor);
     width: 100%;
     height: 81px;
-    margin-bottom: 30px;
+    margin-bottom: $sub-menu-margin-bottom;
     display: flex;
     align-items: center;
     padding-left: $not-expanded-horizontal-margins;
@@ -141,7 +147,7 @@ label {
   }
 
   @media screen and (max-width: 500px) {
-    margin-right: 20px;
+    margin-right: 15px;
   }
 }
 
@@ -193,9 +199,18 @@ label {
 
   .dropdown-item {
     padding: 3px 15px;
+
+    &:active {
+      color: #000 !important;
+    }
+  }
+
+  button {
+    @include disable-default-a-behaviour;
   }
 
   a {
+    @include disable-default-a-behaviour;
     color: #000 !important;
   }
 }
@@ -214,13 +229,12 @@ label {
       font-weight: $font-semibold;
     }
 
-    .close {
+    my-global-icon {
       @include icon(24px);
 
       position: relative;
       top: 3px;
       float: right;
-      background-image: url('../assets/images/global/cross.svg');
 
       margin: 0;
       padding: 0;
@@ -229,7 +243,6 @@ label {
   }
 
   .inputs {
-    margin-top: 40px;
     margin-bottom: 0;
     text-align: right;
 
@@ -279,6 +292,15 @@ ngb-tabset.bootstrap {
       color: var(--mainForegroundColor) !important;
     }
   }
+
+  .nav-pills .nav-link.active {
+    color: #000 !important;
+  }
+}
+
+.nav-tabs .nav-link.active {
+  background-color: var(--mainBackgroundColor) !important;
+  border-bottom: none;
 }
 
 .orange-button {
@@ -305,7 +327,7 @@ ngb-tabset.bootstrap {
 table {
   .action-button-edit, .action-button-delete {
     &:hover, &:active, &:focus, &[disabled], &.disabled {
-      background-color: $grey-color !important;
+      background-color: $grey-background-color !important;
     }
   }
 }
@@ -319,7 +341,7 @@ table {
   font-weight: $font-semibold;
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 1600px) {
   .main-col {
     &.expanded {
       .margin-content {
@@ -360,6 +382,8 @@ table {
       }
 
       .sub-menu {
+        width: 100vw;
+        overflow-x: auto;
         padding-left: 15px;
         padding-right: 15px;
         margin-bottom: 10px;
@@ -370,4 +394,4 @@ table {
       }
     }
   }
-}
\ No newline at end of file
+}