Add explicit step and aria-current attribute in register form

[github/Chocobozzz/PeerTube.git] / client / src / app / search / search.component.scss

diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 3343a276dc4f171ba57946d41501b05e9eaf9703..6e59adb600d4890fb68861cb861567791eea05c7 100644 (file)
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -62,7 +62,7 @@
 
           display: flex;
           align-items: baseline;
-          color: var(--mainForegroundColor);
+          color: pvar(--mainForegroundColor);
           width: fit-content;
 
           .video-channel-display-name {
@@ -81,31 +81,91 @@
   }
 }
 
-@media screen and (max-width: $small-view) {
-  .video-channel-names {
+@media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) {
+  .video-channel-info .video-channel-names {
     flex-direction: column !important;
 
     .video-channel-name {
+      @include ellipsis; // Ellipsis and max-width on channel-name to not break screen
+
+      max-width: 250px;
       margin-left: 0 !important;
     }
   }
+
+  :host-context(.main-col:not(.expanded)) {
+    // Override the min-width: 500px to not break screen
+    ::ng-deep .video-miniature-information {
+      min-width: 300px !important;
+    }
+  }
 }
 
-@media screen and (max-width: $mobile-view) {
-  .search-result {
-    padding: 20px 10px;
+@media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) {
+  :host-context(.main-col:not(.expanded)) {
+    .video-channel-info .video-channel-names {
+      .video-channel-name {
+        max-width: 160px;
+      }
+    }
 
-    .results-header {
-      font-size: 15px !important;
+    // Override the min-width: 500px to not break screen
+    ::ng-deep .video-miniature-information {
+      min-width: $video-thumbnail-width !important;
     }
+  }
 
-    .entry {
+  :host-context(.expanded) {
+    // Override the min-width: 500px to not break screen
+    ::ng-deep .video-miniature-information {
+      min-width: 300px !important;
+    }
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .search-result {
+    .entry.video-channel,
+    .entry.video {
       flex-direction: column;
       height: auto;
       justify-content: center;
       align-items: center;
       text-align: center;
 
+      img {
+        margin: 0;
+      }
+
+      img {
+        margin: 0;
+      }
+
+      .video-channel-info .video-channel-names {
+        align-items: center;
+        flex-direction: column !important;
+
+        .video-channel-name {
+          margin-left: 0 !important;
+        }
+      }
+
+      my-subscribe-button {
+        margin-top: 5px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .search-result {
+    padding: 20px 10px;
+
+    .results-header {
+      font-size: 15px !important;
+    }
+
+    .entry {
       &.video {
         .video-info-name,
         .video-info-account {
@@ -115,7 +175,7 @@
         my-video-thumbnail {
           margin-right: 0 !important;
 
-          /deep/ .video-thumbnail {
+          ::ng-deep .video-thumbnail {
             width: 100%;
             height: auto;
 
@@ -126,16 +186,6 @@
           }
         }
       }
-
-      &.video-channel {
-        .video-channel-info .video-channel-names {
-          align-items: center;
-        }
-
-        my-subscribe-button {
-          margin-top: 5px;
-        }
-      }
     }
   }
 }