Prefer using our icons for notifications

[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 1f50eea541a8efaf9dfcf737f84462575468487a..ef117ae34ad72763494ba7b7bd4f56e4c3eb4b54 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -2,7 +2,7 @@
 @use '_mixins' as *;
 
 /* stylelint-disable */
-@use 'primeng/resources/primeng';
+@import '~primeng/resources/primeng.css';
 
 // Override primeng style we don't want
 input[type=button] {
@@ -495,7 +495,7 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
   border: 1px solid #a80000;
 }
 
-//
+// data table customizations
 
 @mixin glyphicon-light {
   font-family: 'Glyphicons Halflings';
@@ -504,7 +504,6 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
   font-display: swap;
 }
 
-// data table customizations
 p-table {
   .p-datatable-header {
     border: none !important;
@@ -759,6 +758,11 @@ p-table {
       }
     }
   }
+
+  .pt-badge {
+    font-size: 12px;
+    text-transform: uppercase;
+  }
 }
 
 // overflow data table
@@ -768,7 +772,7 @@ p-table {
     max-width: 100%;
 
     table {
-      min-width: breakpoint(lg);
+      width: 100%;
     }
   }
 
@@ -895,7 +899,6 @@ p-toast {
     width: auto;
     max-width: 300px;
     min-width: 200px;
-    z-index: z(notification) !important;
 
     .p-toast-icon-close {
       font-family: "Glyphicons Halflings";
@@ -924,19 +927,19 @@ p-toast {
     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
     overflow: hidden;
 
-    &.p-toast-message-success .glyphicon {
+    &.p-toast-message-success my-global-icon {
       color: #8BC34A !important;
     }
 
-    &.p-toast-message-error .glyphicon {
+    &.p-toast-message-error my-global-icon {
       color: #F44336 !important;
     }
 
-    &.p-toast-message-warn .glyphicon {
+    &.p-toast-message-warn my-global-icon {
       color: #F1680D !important;
     }
 
-    &.p-toast-message-info .glyphicon {
+    &.p-toast-message-info my-global-icon {
       color: #03A9F4 !important;
     }
 
@@ -979,3 +982,40 @@ p-toast {
     font-weight: 600;
   }
 }
+
+@media screen and (max-width: $primeng-breakpoint) {
+  p-table {
+    td {
+      padding: 3px 0;
+
+      &.expand-cell {
+        padding: 5px;
+      }
+    }
+
+    .p-datatable-tbody {
+
+      td:last-child {
+        padding-bottom: 15px;
+        margin-bottom: 15px;
+        border-bottom: 1px solid $separator-border-color !important;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  p-table {
+    .p-datatable-header {
+      .caption {
+        flex-wrap: wrap;
+
+        > div {
+          width: 100%;
+          padding: 0 !important;
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+}