client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .video-actions {
   5   height: 40px; // Align with the title
   6   display: flex;
   7   align-items: center;
   8   width: 100%;
   9   margin: 0 auto;
  10   max-width: initial;
  11
  12   .action-button:not(:first-child),
  13   .action-dropdown,
  14   my-video-actions-dropdown {
  15     @include margin-left(5px);
  16   }
  17
  18   ::ng-deep.action-button {
  19     @include peertube-button;
  20     @include button-with-icon(21px, 0, -1px);
  21
  22     font-size: 100%;
  23     font-weight: $font-semibold;
  24     display: inline-block;
  25     padding: 0 10px;
  26     white-space: nowrap;
  27     background-color: transparent !important;
  28     color: pvar(--actionButtonColor);
  29     text-transform: uppercase;
  30
  31     &::after {
  32       display: none;
  33     }
  34
  35     &:hover {
  36       opacity: 0.9;
  37     }
  38
  39     &.action-button-support {
  40       color: pvar(--supportButtonColor);
  41
  42       my-global-icon {
  43         @include apply-svg-color(pvar(--supportButtonColor));
  44       }
  45     }
  46
  47     &.action-button-support {
  48       my-global-icon {
  49         ::ng-deep path:first-child {
  50           fill: pvar(--supportButtonHeartColor) !important;
  51         }
  52       }
  53     }
  54
  55     &.action-button-save,
  56     &.action-button-download {
  57       my-global-icon {
  58         top: 0 !important;
  59         right: -1px;
  60       }
  61     }
  62
  63     .icon-text {
  64       @include margin-left(3px);
  65     }
  66   }
  67 }
  68
  69 .likes-dislikes-bar-outer-container {
  70   position: relative;
  71 }
  72
  73 .likes-dislikes-bar-inner-container {
  74   position: absolute;
  75   height: 20px;
  76 }
  77
  78 .likes-dislikes-bar {
  79   $likes-bar-height: 2px;
  80
  81   height: $likes-bar-height;
  82   margin-top: -$likes-bar-height;
  83
  84   width: 120px;
  85   background-color: #ccc;
  86   position: relative;
  87   top: 10px;
  88
  89   .likes-bar {
  90     height: 100%;
  91     background-color: #909090;
  92
  93     &.liked {
  94       background-color: pvar(--activatedActionButtonColor);
  95     }
  96   }
  97 }
  98
  99 @media screen and (max-width: 450px) {
 100   .action-button .icon-text {
 101     display: none !important;
 102   }
 103 }