Fix video edit page overflow

[github/Chocobozzz/PeerTube.git] / client / src / sass / primeng-custom.scss

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 37e7a4275bfef9be2e7021f6a33db2523d48142b..a721663eafd2f355e1b8dc62c76e50b3f69771bf 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -88,9 +88,6 @@ body .p-paginator .p-paginator-current {
   min-width: 2.286em;
   line-height: 2.286em;
 }
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
 body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
   color: #848484;
 }
@@ -152,6 +149,7 @@ body .p-dropdown {
   background: #ffffff;
   border: 1px solid #a6a6a6;
   transition: border-color 0.2s, box-shadow 0.2s;
+  border-radius: 6px;
 }
 body .p-dropdown:not(.p-disabled):hover {
   border-color: #212121;
@@ -162,28 +160,41 @@ body .p-dropdown:not(.p-disabled).p-focus {
   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
   border-color: pvar(--mainColor);
 }
+body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+  @include padding-right(0);
+}
 body .p-dropdown .p-dropdown-label {
-  @include padding-right(2em);
+  background: transparent;
+  border: 0 none;
+}
+body .p-dropdown .p-dropdown-label.p-placeholder {
+  color: #6c757d;
+}
+body .p-dropdown .p-dropdown-label:enabled:focus {
+  outline: 0 none;
+  box-shadow: none;
 }
+
 body .p-dropdown .p-dropdown-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
+  background-color: transparent;
+  width: 2rem;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
   color: #848484;
 }
 body .p-dropdown .p-dropdown-clear-icon {
   color: #848484;
+  right: 2rem;
 }
 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
   @include padding-right(4em);
 }
 body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
   background-color: #ffffff;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border: 0 none;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 body .p-dropdown-panel .p-dropdown-filter-container {
   padding: 0.429em 0.857em 0.429em 0.857em;
@@ -450,12 +461,16 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 // ---------------------------------------------------------------------------
 
 p-table {
+  table {
+    table-layout: fixed;
+  }
+
   .p-datatable-header {
     border: none !important;
     background-color: pvar(--mainBackgroundColor) !important;
 
     .caption {
-      height: 40px;
+      min-height: 40px;
       width: 100%;
       display: inline-flex;
       align-items: center;
@@ -541,23 +556,21 @@ p-table {
   }
 
   th {
+    @include padding-left(15px);
+    @include padding-right(0px);
+
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+
     border: none !important;
     border-bottom: 1px solid !important;
     border-color: pvar(--submenuBackgroundColor) !important;
-    text-align: left !important;
-    padding: 5px 0 5px 15px !important;
+    text-align: start !important;
     font-weight: $font-semibold !important;
     color: pvar(--mainForegroundColor) !important;
 
     &.p-sortable-column:hover {
       background-color: pvar(--submenuBackgroundColor) !important;
-      border: 1px solid !important;
-      border-color: pvar(--submenuBackgroundColor) !important;
-      border-width: 0 1px !important;
-
-      &:first-child {
-        border-width: 0 1px 0 0 !important;
-      }
     }
 
     &.p-highlight {
@@ -609,10 +622,12 @@ p-table {
       justify-content: center;
       align-items: center;
 
-      .p-dropdown {
-        position: absolute;
-        top: 10px;
-        left: 0;
+      p-dropdown {
+        .p-dropdown {
+          @include padding-left(0.5rem);
+
+          align-items: center;
+        }
 
         &.p-focus {
           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
@@ -623,13 +638,25 @@ p-table {
         }
       }
 
+      .p-dropdown,
+      .p-dropdown-trigger {
+        color: pvar(--mainForegroundColor);
+        background-color: pvar(--mainBackgroundColor);
+      }
+
       .p-paginator-current {
-        position: absolute;
-        right: 0;
         color: pvar(--inputPlaceholderColor);
         overflow: visible;
       }
 
+      .p-paginator-first {
+        margin-left: auto;
+      }
+
+      .p-paginator-last {
+        margin-right: auto;
+      }
+
       .p-paginator-first,
       .p-paginator-prev,
       .p-paginator-next,
@@ -648,38 +675,17 @@ p-table {
           background-color: #fff !important;
         }
 
-        &.p-paginator-first {
-          .p-paginator-icon {
-            width: 18px;
-            height: 18px;
-            background: url('../assets/images/feather/skip-back.svg') no-repeat;
-            background-size: contain;
-          }
+        .p-paginator-icon {
+          width: 18px;
+          height: 18px;
         }
 
         &.p-paginator-prev {
           @include margin-right(10px);
-
-          .p-paginator-icon {
-            @extend .chevron-left !optional;
-          }
         }
 
         &.p-paginator-next {
           @include margin-left(10px);
-
-          .p-paginator-icon {
-            @extend .chevron-right !optional;
-          }
-        }
-
-        &.p-paginator-last {
-          .p-paginator-icon {
-            width: 18px;
-            height: 18px;
-            background: url('../assets/images/feather/skip-forward.svg') no-repeat;
-            background-size: contain;
-          }
         }
       }
 
@@ -729,19 +735,15 @@ p-table {
     }
   }
 
-  @media screen and (max-width: #{breakpoint(lg)}) {
-    // Prevent overflow
+  @media screen and (max-width: $small-view) {
     p-paginator {
-      .p-paginator-current,
-      .p-dropdown {
-        top: 0;
-        margin-top: 30px;
+      .p-paginator-current {
+        display: none !important;
       }
     }
   }
 
   @media screen and (max-width: $mobile-view) {
-    // Prevent overflow
     p-paginator {
       .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
         display: none;
@@ -763,7 +765,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .chevron-right !optional;
+      @include chevron-right-default;
 
       color: #000 !important;
       text-align: end;
@@ -774,7 +776,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .chevron-left !optional;
+      @include chevron-left-default;
 
       color: #000 !important;
       text-align: start;
@@ -788,13 +790,13 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .chevron-up !optional;
+      @include chevron-up-default;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .chevron-down !optional;
+      @include chevron-down-default;
 
       color: #000 !important;
     }
@@ -814,31 +816,9 @@ p-tablecheckbox:hover div .p-checkbox-box {
 
   .p-checkbox-box {
     &.p-highlight {
-      border-color: pvar(--mainColor) !important;
+      color: pvar(--mainBackgroundColor) !important;
       background-color: pvar(--mainColor) !important;
-    }
-
-    .p-checkbox-icon {
-      position: relative;
-      overflow: visible !important;
-
-      &:after {
-        content: '';
-        position: absolute;
-        bottom: -5px;
-        left: -2px;
-        width: 5px;
-        height: 12px;
-        opacity: 0;
-        transform: rotate(45deg) scale(0);
-        border-right: 2px solid pvar(--mainBackgroundColor);
-        border-bottom: 2px solid pvar(--mainBackgroundColor);
-      }
-
-      &.pi-check:after {
-        opacity: 1;
-        transform: rotate(45deg) scale(1);
-      }
+      border-color: pvar(--mainColor) !important;
     }
   }
 }