client/src/app/+admin/plugins/shared/plugin-card.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .plugin {
   5   margin: 15px 0;
   6   background-color: pvar(--submenuBackgroundColor);
   7 }
   8
   9 .first-row {
  10   display: flex;
  11   align-items: center;
  12   margin-bottom: 10px;
  13
  14   .plugin-name {
  15     @include margin-right(10px);
  16
  17     font-size: 16px;
  18     font-weight: $font-semibold;
  19   }
  20
  21   .plugin-version {
  22     opacity: 0.6;
  23   }
  24
  25   .plugin-icon {
  26     @include margin-left(10px);
  27
  28     my-global-icon {
  29       @include apply-svg-color(pvar(--greyForegroundColor));
  30
  31       &[iconName=npm] {
  32         @include fill-svg-color(pvar(--greyForegroundColor));
  33       }
  34     }
  35   }
  36
  37   .buttons {
  38     @include margin-left(auto);
  39
  40     width: max-content;
  41   }
  42 }
  43
  44 .second-row {
  45   display: grid;
  46   grid-template-columns: 1fr auto;
  47   align-items: center;
  48   justify-content: space-between;
  49
  50   .description {
  51     opacity: 0.8;
  52   }
  53 }
  54
  55 .action-button {
  56   @include peertube-button-link;
  57   @include button-with-icon(21px, 0, -2px);
  58 }
  59
  60 @media screen and (max-width: $small-view) {
  61   .first-row {
  62     flex-wrap: wrap;
  63
  64     .buttons {
  65       flex-basis: 100%;
  66       margin-top: 10px;
  67     }
  68   }
  69 }