Add ability for client to create server logs

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / system / logs / logs.component.scss

diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index 1a7c3be752e2c60da3bd027cc81ea6b4263acc31..128c71e40e1a990ac929b8f8427618d764992766 100644 (file)
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .logs {
   font-family: monospace;
@@ -19,8 +19,9 @@
   }
 
   .log-level {
+    @include margin-right(5px);
+
     font-weight: $font-semibold;
-    margin-right: 5px;
   }
 
   .log-by {
@@ -51,22 +52,48 @@
     @include peertube-select-container(150px);
   }
 
-  my-button,
-  .peertube-select-container,
-  ng-select {
-    margin-left: 10px;
+  my-select-tags {
+    min-width: 250px;
+    max-width: 400px;
+  }
+
+  > * {
+    @include margin-left(10px);
   }
 }
 
-@media screen and (max-width: $small-view) {
+.level-choice {
+  font-size: 80%;
+  vertical-align: text-top;
+
+  &.debug {
+    color: rgb(197, 197, 197);
+  }
+
+  &.info {
+    color: rgb(136, 204, 247);
+  }
+
+  &.warn {
+    color: rgb(252, 166, 7);
+  }
+
+  &.error {
+    color: rgb(250, 5, 5);
+  }
+
+}
+
+@include on-small-main-col {
   .header {
     flex-direction: column;
 
     .peertube-select-container,
     ng-select,
     my-button {
+      @include margin-left(0 !important);
+
       width: 100% !important;
-      margin-left: 0 !important;
       margin-bottom: 10px !important;
     }
 
@@ -75,23 +102,3 @@
     }
   }
 }
-
-@media screen and (max-width: #{$small-view + $menu-width}) {
-  :host-context(.main-col:not(.expanded)) {
-    .header {
-      flex-direction: column;
-
-      .peertube-select-container,
-      ng-select,
-      my-button {
-        width: 100% !important;
-        margin-left: 0 !important;
-        margin-bottom: 10px !important;
-      }
-
-      my-button {
-        text-align: center;
-      }
-    }
-  }
-}