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