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

   1 @import '_variables';
   2 @import '_mixins';
   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     font-size: 16px;
  16     margin-right: 10px;
  17     font-weight: $font-semibold;
  18   }
  19
  20   .plugin-version {
  21     opacity: 0.6;
  22   }
  23
  24   .plugin-icon {
  25     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     margin-left: auto;
  38     width: max-content;
  39
  40     > *:not(:last-child) {
  41       margin-right: 10px;
  42     }
  43   }
  44 }
  45
  46 .second-row {
  47   display: grid;
  48   grid-template-columns: 1fr auto;
  49   align-items: center;
  50   justify-content: space-between;
  51
  52   .description {
  53     opacity: 0.8;
  54   }
  55 }
  56
  57 .action-button {
  58   @include peertube-button-link;
  59   @include button-with-icon(21px, 0, -2px);
  60 }
  61
  62 @media screen and (max-width: $small-view) {
  63   .first-row {
  64     flex-wrap: wrap;
  65
  66     .buttons {
  67       flex-basis: 100%;
  68       margin-top: 10px;
  69     }
  70   }
  71 }