X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fprimeng-custom.scss;h=9c9b5d4fcf73eca387f9563f26ce2d528043b1ed;hb=63a2058b38ed14dcbe376f26a342681d7494727f;hp=e935566233e40779b25b88ff1ec8e4b5d681160a;hpb=e6ad43168587eaa4a6ae1f239df233bc88b723d4;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index e93556623..9c9b5d4fc 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -503,6 +503,10 @@ p-table {
       display: inline-flex;
       align-items: center;
 
+      .left-buttons {
+        padding-left: 15px;
+      }
+
       .input-group-text {
         background-color: transparent;
       }
@@ -512,6 +516,9 @@ p-table {
   th {
     background-color: pvar(--mainBackgroundColor) !important;
     outline: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   td, th {
@@ -540,7 +547,7 @@ p-table {
     height: 46px;
 
     &.p-highlight {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
 
       td, td > a {
         color: pvar(--mainForegroundColor) !important;
@@ -551,11 +558,12 @@ p-table {
   .p-datatable-tbody {
     tr {
       &:hover {
-        background-color: pvar(--submenuColor) !important;
+        background-color: pvar(--submenuBackgroundColor) !important;
       }
 
       td {
         border: none !important;
+        white-space: normal !important;
       }
 
       &:first-child td {
@@ -582,16 +590,16 @@ p-table {
   th {
     border: none !important;
     border-bottom: 1px solid !important;
-    border-color: pvar(--submenuColor) !important;
+    border-color: pvar(--submenuBackgroundColor) !important;
     text-align: left !important;
     padding: 5px 0 5px 15px !important;
     font-weight: $font-semibold !important;
     color: pvar(--mainForegroundColor) !important;
 
     &.p-sortable-column:hover {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
       border: 1px solid !important;
-      border-color: pvar(--submenuColor) !important;
+      border-color: pvar(--submenuBackgroundColor) !important;
       border-width: 0 1px !important;
 
       &:first-child {
@@ -600,7 +608,7 @@ p-table {
     }
 
     &.p-highlight {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
 
       .pi {
         @extend .glyphicon;
@@ -626,8 +634,6 @@ p-table {
 
   .action-cell {
     width: 250px !important;
-    padding: 0 !important;
-    text-align: center;
 
     .dropdown-root,
     my-edit-button,
@@ -636,7 +642,7 @@ p-table {
       display: inline-block !important;
       margin-left: 5px;
 
-      :first-child {
+      &:first-child {
         margin-left: 0
       }
     }
@@ -648,7 +654,7 @@ p-table {
       position: relative;
       border: none;
       border-top: 1px solid !important;
-      border-color: pvar(--submenuColor) !important;
+      border-color: pvar(--submenuBackgroundColor) !important;
       height: 40px;
       display: flex;
       justify-content: center;
@@ -747,29 +753,32 @@ p-table {
 }
 
 // overflow data table
-@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
-  p-table {
-    .p-datatable-wrapper {
-      overflow-x: auto;
-      max-width: calc(100vw - #{$horizontal-margins * 2});
-
-      table {
-        min-width: $table-min-width;
-      }
-    }
+p-table {
+  .p-datatable-wrapper {
+    overflow-x: auto;
+    max-width: 100%;
 
-    @if $mobile-paginator {
-      p-paginator .p-paginator-bottom {
-        display: block;
+    table {
+      min-width: breakpoint(lg);
+    }
+  }
 
-        .p-paginator-current {
-          position: relative;
-          display: block;
-        }
+  @media screen and (max-width: #{breakpoint(lg)}) {
+    // Prevent overflow
+    p-paginator {
+      .p-paginator-current,
+      .p-dropdown {
+        top: 0;
+        margin-top: 30px;
+      }
+    }
+  }
 
-        a, .p-paginator-pages {
-          vertical-align: middle;
-        }
+  @media screen and (max-width: $mobile-view) {
+    // Prevent overflow
+    p-paginator {
+      .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
+        display: none;
       }
     }
   }