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     font-size: 15px;
  27
  28     button {
  29       @include peertube-button;
  30       @include grey-button;
  31     }
  32   }
  33 }
  34
  35 .video {
  36   @include row-blocks;
  37
  38   my-video-thumbnail {
  39     margin-right: 10px;
  40   }
  41
  42   .video-info {
  43     flex-grow: 1;
  44
  45     .video-info-name {
  46       @include disable-default-a-behaviour;
  47
  48       color: var(--mainForegroundColor);
  49       display: block;
  50       width: fit-content;
  51       font-size: 18px;
  52       font-weight: $font-semibold;
  53     }
  54
  55     .video-info-date-views {
  56       font-size: 14px;
  57     }
  58
  59     .video-info-account {
  60       @include disable-default-a-behaviour;
  61       @include ellipsis;
  62
  63       display: block;
  64       width: fit-content;
  65       font-size: 14px;
  66       color: $grey-foreground-color;
  67
  68       &:hover {
  69         color: $grey-foreground-hover-color;
  70       }
  71     }
  72   }
  73 }
  74
  75 @media screen and (max-width: $small-view) {
  76   .video {
  77     flex-direction: column;
  78     height: auto;
  79     text-align: center;
  80
  81     .video-info-name {
  82       margin: auto;
  83     }
  84
  85     input[type=checkbox] {
  86       display: none;
  87     }
  88
  89     my-video-thumbnail {
  90       margin-right: 0;
  91     }
  92
  93     .video-buttons {
  94       margin-top: 10px;
  95     }
  96   }
  97 }