0.12.0-3 Plugin Integration

frontend/src/styles/app.css

@@ -1872,7 +1872,7 @@ body {
 }
 
 .drive-list-item {
-  padding: 0.4rem 0.6rem;
+  padding: 0.35rem 0.55rem;
   border: 1px solid var(--rip-border);
   border-radius: 0.4rem;
   background: var(--rip-panel-soft);
@@ -1882,14 +1882,14 @@ body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
 }
 
 .drive-list-info {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.4rem;
+  gap: 0.28rem;
   min-width: 0;
 }
 
@@ -1906,41 +1906,104 @@ body {
 .drive-list-model {
   font-size: 0.75rem;
   color: var(--rip-muted);
+  max-width: 14rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .drive-list-disc-arg {
-  font-size: 0.7rem;
+  font-size: 0.72rem;
   color: var(--rip-muted);
-  opacity: 0.7;
+  opacity: 0.85;
+  flex: 0 0 auto;
 }
 
 .drive-list-state {
   justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
 }
 
-.drive-list-status-tag.p-tag {
-  max-width: 10rem;
-  padding: 0.15rem 0.45rem;
-  font-size: 0.68rem;
-  line-height: 1.2;
+.drive-list-status-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: var(--rip-muted);
+}
+
+.drive-list-status-icon.tone-success {
+  color: #1c8a3a;
+}
+
+.drive-list-status-icon.tone-danger {
+  color: #9c2d2d;
+}
+
+.drive-list-status-icon.tone-warning {
+  color: #b45309;
+}
+
+.drive-list-status-icon.tone-info {
+  color: #24588b;
+}
+
+.drive-list-status-icon.tone-secondary {
+  color: var(--rip-muted);
+}
+
+.drive-list-lock-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.08rem 0.32rem;
+  border: 1px solid rgba(155, 111, 22, 0.4);
+  border-radius: 999px;
+  background: rgba(251, 233, 194, 0.65);
+  color: #8a5a0a;
+  font-size: 0.66rem;
+  font-weight: 600;
+  line-height: 1.1;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+.drive-list-lock-indicator .pi {
+  font-size: 0.62rem;
 }
 
 .drive-list-actions {
   display: flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.16rem;
   justify-self: end;
 }
 
+.drive-list-action-btn.p-button.p-button-icon-only {
+  width: 1.65rem;
+  height: 1.65rem;
+  padding: 0;
+}
+
+.drive-list-action-btn .p-button-icon {
+  font-size: 0.82rem;
+}
+
+.drive-list-disc-meta {
+  margin-top: 0.08rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
 .drive-list-disc-label {
   font-size: 0.82rem;
-  margin-top: 0.2rem;
+  min-width: 0;
+  flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2903,7 +2966,7 @@ body {
   min-width: 0;
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
+  align-items: center;
   gap: 0.15rem 0.4rem;
 }
 
@@ -2911,8 +2974,8 @@ body {
   min-width: 0;
   flex: 1 1 auto;
   display: flex;
-  align-items: baseline;
-  gap: 0.35rem;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .job-path-field-value > span {
@@ -2925,6 +2988,16 @@ body {
   flex-shrink: 0;
 }
 
+.job-path-download-button.p-button.p-button-icon-only {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+}
+
+.job-path-download-button .p-button-icon {
+  font-size: 0.8rem;
+}
+
 .job-meta-col-span-2 {
   grid-column: 1 / -1;
 }