client/src/app/+admin/plugins/shared/plugin-list.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     width: max-content;
  40
  41     > *:not(:last-child) {
  42       @include margin-right(10px);
  43     }
  44   }
  45 }
  46
  47 .second-row {
  48   display: grid;
  49   grid-template-columns: 1fr auto;
  50   align-items: center;
  51   justify-content: space-between;
  52
  53   .description {
  54     opacity: 0.8;
  55   }
  56 }
  57
  58 .action-button {
  59   @include peertube-button-link;
  60   @include button-with-icon(21px, 0, -2px);
  61 }
  62
  63 @media screen and (max-width: $small-view) {
  64   .first-row {
  65     flex-wrap: wrap;
  66
  67     .buttons {
  68       flex-basis: 100%;
  69       margin-top: 10px;
  70     }
  71   }
  72 }