Design modals

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

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f7d83c5c38af9c932f6b0d133397a32e7269b940..0d96d5ec0bc2960d1bf671df49f1f33e53b74bff 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,9 +1,18 @@
-$FontPathSourceSansPro: "../fonts/source-sans-pro";
-@import '~source-sans-pro/source-sans-pro';
+@import '_variables';
+@import '_mixins';
+
+$icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
+@import '_bootstrap';
+
+$FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
+@import '~npm-font-source-sans-pro/source-sans-pro';
+
 @import '~primeng/resources/themes/bootstrap/theme.css';
 @import '~primeng/resources/primeng.css';
 @import '~video.js/dist/video-js.css';
-@import './video-js-custom.scss';
+
+@import './video-js-custom';
+@import './loading-bar';
 
 [hidden] {
   display: none !important;
@@ -107,30 +116,6 @@ label {
   font-weight: bold;
 }
 
-// On small screen, menu is absolute
-@media screen and (max-width: 800px) {
-  .title-menu-left {
-    width: 120px;
-    position: absolute !important;
-    z-index: 10000;
-  }
-
-  .main-col {
-    margin-left: 0;
-
-    &, &.expanded {
-      .margin-content {
-        //display: flex;
-        //flex-direction: column;
-        //align-items: center;
-        //justify-content: center;
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-  }
-}
-
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
   -animation: spin .7s infinite linear;
@@ -206,11 +191,18 @@ p-datatable {
     font-weight: $font-semibold !important;
     color: #000 !important;
 
-    &.ui-state-active, &.ui-sortable-column:hover {
+    &.ui-sortable-column:hover:not(.ui-state-active) {
       background-color: #f0f0f0 !important;
       border: 1px solid #f0f0f0 !important;
       border-width: 0 1px !important;
     }
+
+    &.ui-state-active {
+      color: #fff !important;
+      background-color: $orange-color !important;
+      border: 1px solid $orange-color !important;
+      border-width: 0 1px !important;
+    }
   }
 
   .action-cell {
@@ -266,9 +258,39 @@ p-datatable {
 .modal {
   .modal-header {
     border-bottom: none;
+    margin-bottom: 5px;
 
-    .title-page-single {
-      margin: 0;
+    .modal-title {
+      font-size: 20px;
+      font-weight: $font-semibold;
+    }
+
+    .close {
+      @include icon(24px);
+
+      position: relative;
+      right: -1px;
+      float: right;
+      background-image: url('../assets/images/global/cross.svg');
+    }
+  }
+
+  .inputs {
+    margin-top: 40px;
+    margin-bottom: 0;
+    text-align: right;
+
+    .action-button-cancel {
+      @include peertube-button;
+      @include grey-button;
+
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .action-button-submit {
+      @include peertube-button;
+      @include orange-button;
     }
   }
 }
@@ -305,7 +327,6 @@ p-datatable {
   }
 }
 
-
 .orange-button {
   @include peertube-button;
   @include orange-button;
@@ -325,3 +346,32 @@ p-datatable {
   @include peertube-button-link;
   @include grey-button;
 }
+
+// On small screen, menu is absolute
+@media screen and (max-width: 800px) {
+  .title-menu-left {
+    width: 150px !important;
+    position: absolute !important;
+    z-index: 10000;
+  }
+
+  .main-col {
+    margin-left: 0;
+
+    &, &.expanded {
+      .margin-content {
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+
+      .sub-menu {
+        padding-left: 10px;
+        margin-bottom: 10px;
+      }
+
+      input[type=text], input[type=password] {
+        width: 100% !important;
+      }
+    }
+  }
+}