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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .btn-group-subscribe {
   5   @include peertube-button;
   6
   7   padding: 0;
   8
   9   button.dropdown-toggle {
  10     font-size: $button-font-size;
  11     line-height: 1.2;
  12   }
  13
  14   &:not(.big) {
  15     white-space: nowrap;
  16   }
  17
  18   &.big {
  19     height: 35px;
  20
  21     > button:first-child {
  22       width: max-content;
  23       min-width: 175px;
  24     }
  25
  26     button .extra-text {
  27       span:first-child {
  28         line-height: 80%;
  29       }
  30
  31       span:not(:first-child) {
  32         font-size: 75%;
  33       }
  34     }
  35   }
  36
  37   // Unlogged
  38   > .dropdown > .dropdown-toggle span {
  39     @include padding-right(5px);
  40   }
  41
  42   // Logged
  43   > .btn {
  44     @include padding-right(4px);
  45
  46     + .dropdown > button {
  47       @include padding-left(2px);
  48
  49       &::after {
  50         position: relative;
  51         top: 1px;
  52       }
  53     }
  54   }
  55
  56   &.subscribe-button {
  57     .btn {
  58       @include orange-button;
  59       font-weight: 600;
  60     }
  61
  62     span.followers-count {
  63       @include padding-left(5px);
  64     }
  65   }
  66
  67   &.unsubscribe-button {
  68     .btn {
  69       @include grey-button;
  70
  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 }