labels and automatizations

pytorrent/static/styles.css

@@ -1238,37 +1238,60 @@ body.mobile-mode .mobile-card {
   color: var(--bs-primary-text-emphasis);
 }
 
-.automation-form-grid {
+.automation-shell {
+  display: grid;
+  gap: 0.75rem;
+}
+.automation-main-card {
+  padding: 0.75rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.75rem;
+  background: var(--bs-body-bg);
+}
+.automation-card-title {
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+}
+.automation-rule-grid,
+.automation-builder-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(160px, 1fr));
   gap: 0.5rem;
   align-items: center;
 }
-
-.auto-move-option,
-.auto-condition-option {
-  gap: 0.45rem;
+.automation-enabled,
+.automation-negate {
   margin: 0;
-}
-
-
-.automation-builder-list {
-  display: grid;
-  grid-column: 1 / -1;
-  gap: 0.4rem;
-}
-
-.automation-chip {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.4rem 0.55rem;
+  padding: 0.45rem 0.6rem 0.45rem 2.5rem;
   border: 1px solid var(--bs-border-color);
-  border-radius: 0.55rem;
-  background: var(--bs-secondary-bg);
+  border-radius: 0.5rem;
+}
+.automation-path-input {
+  grid-column: span 2;
+}
+.automation-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+.automation-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 999px;
+  background: var(--bs-tertiary-bg);
+  font-size: 0.82rem;
+}
+.automation-actions,
+.automation-row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
 }
-
 .automation-row {
   display: flex;
   justify-content: space-between;
@@ -1280,16 +1303,49 @@ body.mobile-mode .mobile-card {
   margin-bottom: 0.45rem;
   background: var(--bs-body-bg);
 }
-
-.automation-row-actions {
+.automation-row-main {
+  min-width: 0;
+}
+.automation-action-pill {
   display: inline-flex;
-  flex-shrink: 0;
-  gap: 0.35rem;
+  max-width: 100%;
+  margin: 0.1rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: 999px;
+  background: var(--bs-secondary-bg);
+  font-size: 0.78rem;
+  white-space: normal;
+}
+.automation-history-details {
+  max-width: min(620px, 60vw);
+}
+.automation-history-details summary {
+  cursor: pointer;
+  list-style-position: inside;
+}
+.automation-history-details pre,
+.automation-history-raw {
+  max-width: 100%;
+  max-height: 220px;
+  margin: 0.35rem 0 0;
+  padding: 0.5rem;
+  overflow: auto;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.5rem;
+  background: var(--bs-tertiary-bg);
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 @media (max-width: 900px) {
-  .automation-form-grid {
+  .automation-rule-grid,
+  .automation-builder-grid {
     grid-template-columns: 1fr;
   }
+  .automation-path-input,
+  .automation-history-details {
+    grid-column: auto;
+    max-width: 100%;
+  }
 }
 .disk-status {
   display: inline-flex;