Design video update

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

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index db63db5f5070ec194cbfab8dd98f475f2875de5f..0c999d6599a3148c1c3f9bf7c2263792e1a2b7f7 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -20,12 +20,19 @@ input.readonly {
   background-color: #fff !important;
 }
 
-.form-control, .btn {
-  border-radius: 0;
+label {
+  font-weight: $font-bold;
+  font-size: 15px;
 }
 
-.dropdown-menu {
-  border-radius: 0;
+.form-error {
+  display: block;
+  color: $red-error;
+  margin-top: 5px;
+}
+
+.input-error {
+  border-color: $red-error !important;
 }
 
 .glyphicon-black {
@@ -35,25 +42,9 @@ input.readonly {
 .main-col {
   margin-left: $menu-width;
 
-  .title-page {
-    color: #000;
-    font-size: 16px;
-    display: inline-block;
-    margin-right: 55px;
-    font-weight: $font-semibold;
-    @include disable-default-a-behaviour;
-
-    &.active, &.title-page-single {
-      border-bottom: 2px solid $orange-color;
-      font-weight: $font-bold;
-      margin-top: 30px;
-      margin-bottom: 25px;
-    }
-  }
-
   .margin-content {
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: $not-expanded-horizontal-margins;
+    margin-right: $not-expanded-horizontal-margins;
   }
 
   .sub-menu {
@@ -63,6 +54,7 @@ input.readonly {
     margin-bottom: 30px;
     display: flex;
     align-items: center;
+    padding-left: $not-expanded-horizontal-margins;
   }
 
   // Override some properties if the main content is expanded (no menu on the left)
@@ -80,6 +72,22 @@ input.readonly {
   }
 }
 
+.title-page {
+  color: #000;
+  font-size: 16px;
+  display: inline-block;
+  margin-right: 55px;
+  font-weight: $font-semibold;
+  @include disable-default-a-behaviour;
+
+  &.active, &.title-page-single {
+    border-bottom: 2px solid $orange-color;
+    font-weight: $font-bold;
+    margin-top: 30px;
+    margin-bottom: 25px;
+  }
+}
+
 // On small screen, menu is absolute and displayed over the page
 @media screen and (max-width: 500px) {
   .title-menu-left {
@@ -130,3 +138,47 @@ p-datatable {
     }
   }
 }
+
+.dropdown-menu {
+  border-radius: 3px;
+  box-shadow: 0 3px 6px;
+  font-size: 15px;
+
+  .dropdown-item {
+    padding: 3px 15px;
+  }
+
+  a {
+    color: #000 !important;
+  }
+}
+
+.modal {
+  .modal-header {
+    border-bottom: none;
+
+    .title-page-single {
+      margin: 0;
+    }
+  }
+}
+
+.orange-button {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
+}