.plugin {
margin: 15px 0;
- background-color: var(--submenuColor);
+ background-color: pvar(--submenuBackgroundColor);
}
.first-row {
+ display: flex;
+ align-items: center;
margin-bottom: 10px;
.plugin-name {
.plugin-version {
opacity: 0.6;
}
-}
-.second-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
+ .plugin-icon {
+ margin-left: 10px;
- .description {
- opacity: 0.8
+ my-global-icon {
+ @include apply-svg-color(pvar(--greyForegroundColor));
+
+ &[iconName=npm] {
+ @include fill-svg-color(pvar(--greyForegroundColor));
+ }
+ }
}
.buttons {
+ margin-left: auto;
+ width: max-content;
> *:not(:last-child) {
margin-right: 10px;
}
}
}
+.second-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ justify-content: space-between;
+
+ .description {
+ opacity: 0.8;
+ }
+}
+
.action-button {
@include peertube-button-link;
@include button-with-icon(21px, 0, -2px);