client/src/app/+stats/video/video-stats.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_nav' as *;
   4
   5 .stats-embed {
   6   display: flex;
   7   justify-content: space-between;
   8 }
   9
  10 .overall-stats,
  11 .global-stats {
  12   display: flex;
  13   flex-wrap: wrap;
  14
  15   h2 {
  16     font-size: 16px;
  17     width: 100%;
  18   }
  19 }
  20
  21 .overall-stats {
  22   justify-content: space-between;
  23
  24   .cards {
  25     display: flex;
  26   }
  27 }
  28
  29 .stats-card {
  30   display: flex;
  31   justify-content: center;
  32   align-items: center;
  33   height: fit-content;
  34   min-height: 100px;
  35   min-width: 200px;
  36   margin-right: 15px;
  37   background-color: pvar(--submenuBackgroundColor);
  38   margin-bottom: 15px;
  39
  40   .label,
  41   .more-info {
  42     font-size: 14px;
  43   }
  44
  45   .value {
  46     font-size: 24px;
  47     font-weight: $font-semibold;
  48   }
  49
  50   @media screen and (max-width: $mobile-view) {
  51     min-height: fit-content;
  52     min-width: fit-content;
  53     padding: 15px;
  54   }
  55 }
  56
  57 my-embed {
  58   display: block;
  59   max-width: 500px;
  60   width: 100%;
  61 }
  62
  63 .stats-with-date {
  64   margin-top: 30px;
  65   padding-top: 30px;
  66   border-top: 1px solid $separator-border-color;
  67 }
  68
  69 @include on-small-main-col {
  70   my-embed {
  71     display: none;
  72   }
  73 }
  74
  75 .tab-content {
  76   margin-top: 5px;
  77 }
  78
  79 .nav-tabs {
  80   @include peertube-nav-tabs($border-width: 2px);
  81 }
  82
  83 .chart-container {
  84   margin-bottom: 10px;
  85 }
  86
  87 .zoom-container {
  88   display: flex;
  89   justify-content: center;
  90
  91   .description {
  92     font-style: italic;
  93   }
  94 }