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     flex-wrap: wrap;
  27   }
  28
  29   .date-filter-wrapper {
  30     margin-bottom: 10px;
  31     min-width: 300px;
  32   }
  33 }
  34
  35 .stats-card {
  36   display: flex;
  37   justify-content: center;
  38   align-items: center;
  39   height: fit-content;
  40   min-height: 100px;
  41   min-width: 200px;
  42   margin-right: 15px;
  43   background-color: pvar(--submenuBackgroundColor);
  44   margin-bottom: 15px;
  45
  46   .label,
  47   .more-info {
  48     font-size: 14px;
  49   }
  50
  51   .value {
  52     font-size: 24px;
  53     font-weight: $font-semibold;
  54   }
  55
  56   @media screen and (max-width: $mobile-view) {
  57     min-height: fit-content;
  58     min-width: fit-content;
  59     padding: 15px;
  60   }
  61 }
  62
  63 my-embed {
  64   display: block;
  65   max-width: 500px;
  66   width: 100%;
  67 }
  68
  69 .stats-with-date {
  70   margin-top: 30px;
  71   padding-top: 30px;
  72   border-top: 1px solid $separator-border-color;
  73 }
  74
  75 @include on-small-main-col {
  76   my-embed {
  77     display: none;
  78   }
  79 }
  80
  81 .tab-content {
  82   margin-top: 5px;
  83 }
  84
  85 .nav-tabs {
  86   @include peertube-nav-tabs($border-width: 2px);
  87 }
  88
  89 .chart-container {
  90   margin-bottom: 10px;
  91 }
  92
  93 .zoom-container {
  94   display: flex;
  95   justify-content: center;
  96
  97   .description {
  98     font-style: italic;
  99   }
 100 }