media info

pytorrent/static/styles.css

@@ -4389,3 +4389,104 @@ body,
   vertical-align: middle;
   white-space: nowrap;
 }
+
+.file-row-actions {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.25rem;
+  justify-content: flex-end;
+}
+
+.media-info-modal .modal-header {
+  align-items: flex-start;
+}
+
+.media-info-subtitle {
+  color: var(--bs-secondary-color);
+  font-size: 0.82rem;
+  margin-top: 0.15rem;
+  overflow-wrap: anywhere;
+}
+
+.media-info-overview {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-bottom: 1rem;
+}
+
+.media-info-card {
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.75rem;
+  min-width: 0;
+  padding: 0.75rem;
+}
+
+.media-info-card b,
+.media-info-table th {
+  color: var(--bs-secondary-color);
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.media-info-card span {
+  display: block;
+  margin-top: 0.25rem;
+  overflow-wrap: anywhere;
+}
+
+.media-info-section {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.media-info-section h6 {
+  margin: 0;
+}
+
+.media-info-table th {
+  width: 14rem;
+  white-space: normal;
+}
+
+.media-info-table td {
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.media-info-raw {
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.75rem;
+  margin: 0;
+  max-height: 20rem;
+  overflow: auto;
+  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
+}
+
+.media-info-note {
+  align-items: center;
+  color: var(--bs-secondary-color);
+  display: flex;
+  font-size: 0.82rem;
+  gap: 0.4rem;
+  margin-top: 1rem;
+}
+
+@media (max-width: 900px) {
+  .media-info-overview {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .media-info-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .media-info-table th {
+    width: 9rem;
+  }
+}