Cleanup title-page CSS

[github/Chocobozzz/PeerTube.git] / client / src / app / +stats / video / video-stats.component.scss

diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
index 190499b5c7855c33fb569f29a23491270ef6c821..007d5fa0e9ed364dddba39fca42865f26fb947d2 100644 (file)
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -2,17 +2,37 @@
 @use '_mixins' as *;
 @use '_nav' as *;
 
-.overall-stats-embed {
+.stats-embed {
   display: flex;
   justify-content: space-between;
 }
 
-.overall-stats {
+.overall-stats,
+.global-stats {
   display: flex;
   flex-wrap: wrap;
+
+  h2 {
+    font-size: 16px;
+    width: 100%;
+  }
 }
 
-.overall-stats-card {
+.overall-stats {
+  justify-content: space-between;
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .date-filter-wrapper {
+    margin-bottom: 10px;
+    min-width: 300px;
+  }
+}
+
+.stats-card {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -21,22 +41,23 @@
   min-width: 200px;
   margin-right: 15px;
   background-color: pvar(--submenuBackgroundColor);
+  margin-bottom: 15px;
 
   .label,
   .more-info {
     font-size: 14px;
   }
 
-  .label {
-    color: pvar(--greyForegroundColor);
-    font-weight: $font-semibold;
-    opacity: 0.8;
-  }
-
   .value {
     font-size: 24px;
     font-weight: $font-semibold;
   }
+
+  @media screen and (max-width: $mobile-view) {
+    min-height: fit-content;
+    min-width: fit-content;
+    padding: 15px;
+  }
 }
 
 my-embed {
@@ -45,10 +66,35 @@ my-embed {
   width: 100%;
 }
 
+.stats-with-date {
+  margin-top: 30px;
+  padding-top: 30px;
+  border-top: 1px solid $separator-border-color;
+}
+
+@include on-small-main-col {
+  my-embed {
+    display: none;
+  }
+}
+
 .tab-content {
-  margin-top: 15px;
+  margin-top: 5px;
 }
 
 .nav-tabs {
   @include peertube-nav-tabs($border-width: 2px);
 }
+
+.chart-container {
+  margin-bottom: 10px;
+}
+
+.zoom-container {
+  display: flex;
+  justify-content: center;
+
+  .description {
+    font-style: italic;
+  }
+}