client/src/app/shared/shared-user-subscription/subscribe-button.component.scss

   1 @use '_variables';
   2 @use '_mixins';
   3
   4 .btn-group-subscribe {
   5   @include peertube-button;
   6   @include disable-default-a-behaviour;
   7
   8   float: right;
   9   padding: 0;
  10
  11   > .btn,
  12   > .dropdown > .dropdown-toggle {
  13     font-size: 15px;
  14   }
  15
  16   &:not(.big) {
  17     white-space: nowrap;
  18   }
  19
  20   &.big {
  21     height: 35px;
  22
  23     > button:first-child {
  24       width: max-content;
  25       min-width: 175px;
  26     }
  27
  28     button .extra-text {
  29       span:first-child {
  30         line-height: 80%;
  31       }
  32
  33       span:not(:first-child) {
  34         font-size: 75%;
  35       }
  36     }
  37   }
  38
  39   // Unlogged
  40   > .dropdown > .dropdown-toggle span {
  41     @include padding-right(3px);
  42   }
  43
  44   // Logged
  45   > .btn {
  46     @include padding-right(4px);
  47
  48     + .dropdown > button {
  49       @include padding-left(2px);
  50
  51       &::after {
  52         position: relative;
  53         top: 1px;
  54       }
  55     }
  56   }
  57
  58   &.subscribe-button {
  59     .btn {
  60       @include orange-button;
  61       font-weight: 600;
  62     }
  63
  64     span.followers-count {
  65       @include padding-left(5px);
  66     }
  67   }
  68   &.unsubscribe-button {
  69     .btn {
  70       @include grey-button;
  71       font-weight: 600;
  72     }
  73   }
  74
  75   .dropdown-menu {
  76     cursor: default;
  77
  78     button {
  79       cursor: pointer;
  80     }
  81
  82     .dropdown-item-neutral {
  83       cursor: default;
  84
  85       &:hover,
  86       &:focus {
  87         background-color: inherit;
  88       }
  89     }
  90   }
  91
  92   ::ng-deep form {
  93     padding: 0.25rem 1rem;
  94   }
  95
  96   input {
  97     @include peertube-input-text(100%);
  98   }
  99 }
 100
 101 .extra-text {
 102   display: flex;
 103   flex-direction: column;
 104
 105   span:first-child {
 106     line-height: 75%;
 107   }
 108
 109   span:not(:first-child) {
 110     font-size: 60%;
 111     text-align: start;
 112   }
 113 }