Merge pull request 'mobile_torrent_details' (#4) from mobile_torrent_details into master

Reviewed-on: #4

pytorrent/static/styles.css

@@ -4672,3 +4672,225 @@ body,
     min-height: 420px;
   }
 }
+
+/* Mobile torrent details */
+.mobile-card-header {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.mobile-card-header .name {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mobile-card-header .mobile-details-btn {
+  flex: 0 0 auto;
+  min-width: 34px;
+}
+
+.mobile-details-modal .modal-header {
+  align-items: flex-start;
+}
+
+.mobile-details-subtitle {
+  color: var(--bs-secondary-color);
+  font-size: 0.82rem;
+  margin-top: 0.15rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-summary,
+.mobile-details-section {
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.85rem;
+  margin-bottom: 0.85rem;
+  padding: 0.75rem;
+}
+
+.mobile-details-name {
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-path,
+.mobile-details-hash {
+  display: grid;
+  gap: 0.2rem;
+  margin-top: 0.45rem;
+}
+
+.mobile-details-path b,
+.mobile-details-hash b,
+.mobile-details-stat b {
+  color: var(--bs-secondary-color);
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.mobile-details-path span,
+.mobile-details-hash code {
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-stats {
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-bottom: 0.85rem;
+}
+
+.mobile-details-stat {
+  background: rgba(var(--bs-secondary-bg-rgb), 0.55);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.7rem;
+  min-width: 0;
+  padding: 0.6rem;
+}
+
+.mobile-details-stat span {
+  display: block;
+  margin-top: 0.2rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-section h6 {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: space-between;
+  margin: 0 0 0.65rem;
+}
+
+.mobile-details-section h6 small {
+  color: var(--bs-secondary-color);
+  font-size: 0.72rem;
+  font-weight: 500;
+}
+
+.mobile-details-collapsible > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.mobile-details-collapsible > summary::-webkit-details-marker {
+  display: none;
+}
+
+.mobile-details-collapsible > summary h6 {
+  margin-bottom: 0;
+}
+
+.mobile-details-collapsible[open] > summary h6 {
+  margin-bottom: 0.65rem;
+}
+
+.mobile-details-collapsible > summary h6::after {
+  color: var(--bs-secondary-color);
+  content: '\f107';
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 900;
+  margin-left: auto;
+}
+
+.mobile-details-collapsible[open] > summary h6::after {
+  content: '\f106';
+}
+
+.mobile-details-list {
+  display: grid;
+  gap: 0.45rem;
+  list-style: none;
+  margin: 0;
+  max-height: 18rem;
+  overflow: auto;
+  padding: 0;
+}
+
+.mobile-details-peer,
+.mobile-details-file,
+.mobile-details-tracker {
+  align-items: flex-start;
+  background: rgba(var(--bs-body-bg-rgb), 0.65);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.65rem;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 0.55rem;
+}
+
+.mobile-details-peer div,
+.mobile-details-file div {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.mobile-details-peer b,
+.mobile-details-file b,
+.mobile-details-tracker b {
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-peer span,
+.mobile-details-peer small,
+.mobile-details-file span,
+.mobile-details-tracker span {
+  color: var(--bs-secondary-color);
+  font-size: 0.78rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-peers-table,
+.mobile-details-files-table {
+  margin-bottom: 0;
+}
+
+.mobile-details-peers-table {
+  min-width: 720px;
+}
+
+.mobile-details-files-table {
+  min-width: 760px;
+}
+
+.mobile-details-files-table .file-progress {
+  min-width: 7.5rem;
+}
+
+.mobile-details-files-table .file-priority {
+  min-width: 6.5rem;
+}
+
+.mobile-details-file-path {
+  display: inline-block;
+  max-width: 24rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.mobile-details-empty,
+.mobile-details-message {
+  color: var(--bs-secondary-color);
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-warning {
+  font-size: 0.86rem;
+}
+
+@media (min-width: 576px) {
+  .mobile-details-stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+