X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fprimeng-custom.scss;h=7f65eded7f19a92822f8dd284107cc00133cc6c9;hb=0ef18e5b895c19bb3b7ba994fdc44f1a3694201c;hp=4cd27bea8249285bf3e0450188c41565149e5e67;hpb=27bc95867442c772841fb183a625bbda61dede51;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 4cd27bea8..7f65eded7 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,5 +1,6 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_icons' as *;
 
 /* stylelint-disable */
 @import '~primeng/resources/primeng.css';
@@ -444,74 +445,21 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   border: 1px solid #a80000;
 }
 
-// select button
-body .p-selectbutton .p-button {
-  background-color: #dadada;
-  border: 1px solid #dadada;
-  color: #333333;
-  overflow: hidden;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #666666;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: pvar(--mainColor);
-  border-color: pvar(--mainColor);
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: pvar(--mainColorLighter);
-  border-color: pvar(--mainColorLighter);
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body p-selectbutton.ng-dirty.ng-invalid .p-button {
-  border: 1px solid #a80000;
-}
-
-//
-
-@mixin glyphicon-light {
-  font-family: 'Glyphicons Halflings';
-  text-decoration: none !important;
-  color: pvar(--mainForegroundColor) !important;
-  font-display: swap;
-}
+// ---------------------------------------------------------------------------
+// PeerTube customizations
+// ---------------------------------------------------------------------------
 
-// data table customizations
 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;
@@ -532,7 +480,7 @@ p-table {
 
   td, th {
     font-family: $main-fonts;
-    font-size: 15px !important;
+    font-size: 15px;
     color: pvar(--mainForegroundColor) !important;
   }
 
@@ -607,36 +555,25 @@ p-table {
 
     &.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 {
       background-color: pvar(--submenuBackgroundColor) !important;
 
-      .pi {
-        @extend .glyphicon;
-
-        color: #000 !important;
-        font-size: 11px !important;
-        top: 0 !important;
-
-        &.pi-sort-amount-up-alt {
-          @extend .glyphicon-triangle-top;
-
-          color: pvar(--mainForegroundColor) !important;
-        }
+      .pi-sort-amount-up-alt,
+      .pi-sort-amount-down {
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        color: pvar(--mainForegroundColor) !important;
+      }
 
-        &.pi-sort-amount-down {
-          @extend .glyphicon-triangle-bottom;
+      .pi-sort-amount-up-alt {
+        @include arrow-up(5px);
+      }
 
-          color: pvar(--mainForegroundColor) !important;
-        }
+      .pi-sort-amount-down {
+        @include arrow-down(5px);
       }
     }
   }
@@ -683,23 +620,32 @@ 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;
+
+        @media screen and (max-width: $small-view) {
+          left: 0;
+          top: 40px;
+        }
       }
 
       .p-paginator-first,
       .p-paginator-prev,
       .p-paginator-next,
       .p-paginator-last {
-        @include glyphicon-light;
         padding: 5px 2px;
-        height: auto;
+        height: 100%;
         outline: none;
-        font-size: 13px;
-        top: -1px;
+        color: pvar(--mainForegroundColor);
 
         &.focus-within,
         &:focus {
@@ -711,23 +657,37 @@ p-table {
         }
 
         &.p-paginator-first {
-          @extend .glyphicon-step-backward;
+          .p-paginator-icon {
+            width: 18px;
+            height: 18px;
+            background: url('../assets/images/feather/skip-back.svg') no-repeat;
+            background-size: contain;
+          }
         }
 
         &.p-paginator-prev {
-          @extend .glyphicon-chevron-left;
-
           @include margin-right(10px);
+
+          .p-paginator-icon {
+            @include chevron-left-default;
+          }
         }
 
         &.p-paginator-next {
-          @extend .glyphicon-chevron-right;
-
           @include margin-left(10px);
+
+          .p-paginator-icon {
+            @include chevron-right-default;
+          }
         }
 
         &.p-paginator-last {
-          @extend .glyphicon-step-forward;
+          .p-paginator-icon {
+            width: 18px;
+            height: 18px;
+            background: url('../assets/images/feather/skip-forward.svg') no-repeat;
+            background-size: contain;
+          }
         }
       }
 
@@ -759,6 +719,11 @@ p-table {
       }
     }
   }
+
+  .pt-badge {
+    font-size: 12px;
+    text-transform: uppercase;
+  }
 }
 
 // overflow data table
@@ -768,7 +733,7 @@ p-table {
     max-width: 100%;
 
     table {
-      min-width: breakpoint(lg);
+      width: 100%;
     }
   }
 
@@ -806,8 +771,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .glyphicon-chevron-right;
-      @include glyphicon-light;
+      @include chevron-right-default;
 
       color: #000 !important;
       text-align: end;
@@ -818,8 +782,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .glyphicon-chevron-left;
-      @include glyphicon-light;
+      @include chevron-left-default;
 
       color: #000 !important;
       text-align: start;
@@ -833,15 +796,13 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .glyphicon-chevron-up;
-      @include glyphicon-light;
+      @include chevron-up-default;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .glyphicon-chevron-down;
-      @include glyphicon-light;
+      @include chevron-down-default;
 
       color: #000 !important;
     }
@@ -895,18 +856,16 @@ p-toast {
     width: auto;
     max-width: 300px;
     min-width: 200px;
-    z-index: z(notification) !important;
 
     .p-toast-icon-close {
-      font-family: "Glyphicons Halflings";
       opacity: 0;
       position: absolute;
       right: 5px;
       top: 5px;
-
-      &:after {
-        content: "\e014";
-      }
+      width: 18px;
+      height: 18px;
+      background: url('../assets/images/feather/x.svg') no-repeat;
+      background-size: contain;
     }
 
     &:hover .p-toast-icon-close {
@@ -924,22 +883,6 @@ p-toast {
     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
     overflow: hidden;
 
-    &.p-toast-message-success .glyphicon {
-      color: #8BC34A !important;
-    }
-
-    &.p-toast-message-error .glyphicon {
-      color: #F44336 !important;
-    }
-
-    &.p-toast-message-warn .glyphicon {
-      color: #F1680D !important;
-    }
-
-    &.p-toast-message-info .glyphicon {
-      color: #03A9F4 !important;
-    }
-
     .notification-block {
       display: flex;
       align-items: center;
@@ -947,35 +890,73 @@ p-toast {
       padding: 10px 20px;
 
       .message {
-        flex-grow: 1;
         @include margin-right(20px);
 
+        flex-grow: 1;
+
         h3 {
           font-size: 21px;
         }
 
         p {
-          font-size: 15px;
+          @include peertube-word-wrap;
+
           margin-bottom: 0;
         }
       }
+    }
+  }
+
+  .p-toast-message-success my-global-icon {
+    color: #8BC34A !important;
+  }
+
+  .p-toast-message-error my-global-icon {
+    color: #F44336 !important;
+  }
+
+  .p-toast-message-warn my-global-icon {
+    color: #F1680D !important;
+  }
+
+  .p-toast-message-info my-global-icon {
+    color: #03A9F4 !important;
+  }
+}
+
+@media screen and (max-width: $primeng-breakpoint) {
+  p-table {
+    td {
+      padding: 3px 0;
+
+      &.expand-cell {
+        padding: 5px;
+      }
+    }
 
-      .glyphicon {
-        font-size: 32px;
-        @include margin-right(5px);
+    .p-datatable-tbody {
+
+      td:last-child {
+        padding-bottom: 15px;
+        margin-bottom: 15px;
+        border-bottom: 1px solid $separator-border-color !important;
       }
     }
   }
 }
 
-.p-selectbutton {
-  .p-button:focus {
-    outline: none;
-  }
+@media screen and (max-width: $mobile-view) {
+  p-table {
+    .p-datatable-header {
+      .caption {
+        flex-wrap: wrap;
 
-  .p-button-label {
-    padding: 5px 15px;
-    font-size: 15px;
-    font-weight: 600;
+        > div {
+          width: 100%;
+          padding: 0 !important;
+          margin-bottom: 5px;
+        }
+      }
+    }
   }
 }