client/src/app/+my-account/my-account-history/my-account-history.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .no-history {
   5   display: flex;
   6   justify-content: center;
   7   margin-top: 50px;
   8   font-weight: $font-semibold;
   9   font-size: 16px;
  10 }
  11
  12 .top-buttons {
  13   margin-bottom: 20px;
  14   display: flex;
  15
  16   .history-switch {
  17     display: flex;
  18     flex-grow: 1;
  19
  20     label {
  21       margin: 0 0 0 5px;
  22     }
  23   }
  24
  25   .delete-history {
  26     @include peertube-button;
  27     @include grey-button;
  28     @include button-with-icon;
  29
  30     font-size: 15px;
  31   }
  32 }
  33
  34 .video {
  35   @include row-blocks;
  36
  37   my-video-thumbnail {
  38     margin-right: 10px;
  39   }
  40
  41   .video-info {
  42     flex-grow: 1;
  43
  44     .video-info-name {
  45       @include disable-default-a-behaviour;
  46
  47       color: var(--mainForegroundColor);
  48       display: block;
  49       width: fit-content;
  50       font-size: 18px;
  51       font-weight: $font-semibold;
  52     }
  53
  54     .video-info-date-views {
  55       font-size: 14px;
  56     }
  57
  58     .video-info-account {
  59       @include disable-default-a-behaviour;
  60       @include ellipsis;
  61
  62       display: block;
  63       width: fit-content;
  64       font-size: 14px;
  65       color: $grey-foreground-color;
  66
  67       &:hover {
  68         color: $grey-foreground-hover-color;
  69       }
  70     }
  71   }
  72 }
  73
  74 @media screen and (max-width: $small-view) {
  75   .video {
  76     flex-direction: column;
  77     height: auto;
  78     text-align: center;
  79
  80     .video-info-name {
  81       margin: auto;
  82     }
  83
  84     input[type=checkbox] {
  85       display: none;
  86     }
  87
  88     my-video-thumbnail {
  89       margin-right: 0;
  90     }
  91
  92     .video-buttons {
  93       margin-top: 10px;
  94     }
  95   }
  96 }