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-weight: $font-semibold;
  18   }
  19
  20   .plugin-version {
  21     opacity: 0.7;
  22   }
  23
  24   .plugin-icon {
  25     @include margin-left(10px);
  26
  27     my-global-icon {
  28       @include apply-svg-color(pvar(--greyForegroundColor));
  29
  30       &[iconName=npm] {
  31         @include fill-svg-color(pvar(--greyForegroundColor));
  32       }
  33     }
  34   }
  35
  36   .buttons {
  37     @include margin-left(auto);
  38
  39     width: max-content;
  40   }
  41 }
  42
  43 .second-row {
  44   display: grid;
  45   grid-template-columns: 1fr auto;
  46   align-items: center;
  47   justify-content: space-between;
  48
  49   .description {
  50     opacity: 0.8;
  51   }
  52 }
  53
  54 .action-button {
  55   @include peertube-button-link;
  56   @include button-with-icon(21px, 0, -2px);
  57 }
  58
  59 @media screen and (max-width: $small-view) {
  60   .first-row {
  61     flex-wrap: wrap;
  62
  63     .buttons {
  64       flex-basis: 100%;
  65       margin-top: 10px;
  66     }
  67   }
  68 }