Torrent details

Show file list, open folder containing downloaded files, open individual files, play/pause individual videos

renderer/index.css

@@ -145,12 +145,14 @@ table {
  * BUTTONS
  */
 
-a, i {
+a,
+i {
   cursor: default;
   -webkit-app-region: no-drag;
 }
 
-a:not(.disabled):hover, i:not(.disabled):hover {
+a:not(.disabled):hover,
+i:not(.disabled):hover {
   -webkit-filter: brightness(1.3);
 }
 
@@ -210,7 +212,7 @@ a:not(.disabled):hover, i:not(.disabled):hover {
 
 .header .nav {
   font-weight: bold;
-  margin-right: 7px;
+  margin-right: 9px;
 }
 
 .header .nav.left {
@@ -237,7 +239,8 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   opacity: 1;
 }
 
-.header .nav .back, .header .nav .forward {
+.header .nav .back,
+.header .nav .forward {
   font-size: 30px;
   margin-top: -3px;
 }
@@ -370,7 +373,8 @@ input {
   animation: fadein .4s;
 }
 
-.torrent, .torrent-placeholder {
+.torrent,
+.torrent-placeholder {
   height: 120px;
 }
 
@@ -390,11 +394,14 @@ input {
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
+.torrent .metadata span:not(:last-child)::after {
+  content: ' — ';
+}
+
 .torrent .buttons {
   position: absolute;
   top: 25px;
-  right: 0;
-  height: 100%;
+  right: 10px;
   display: none;
 }
 
@@ -403,7 +410,7 @@ input {
 }
 
 .torrent .buttons > * {
-  margin-right: 6px; /* space buttons apart, align the Xs under the + */
+  margin-left: 6px; /* space buttons apart */
 }
 
 .torrent .buttons .download {
@@ -413,7 +420,6 @@ input {
   border-radius: 14px;
   font-size: 18px;
   padding-top: 6px;
-  margin-right: 10px; /* download and play btns need more space to look good */
 }
 
 .torrent .buttons .download.downloading {
@@ -467,24 +473,27 @@ input {
 }
 
 .torrent .buttons .delete {
+  position: relative;
+  top: 2px;
   opacity: 0.5;
 }
 
+.torrent .buttons .delete:hover {
+  opacity: 0.7;
+}
+
 .torrent .name {
   font-size: 1.5em;
   font-weight: bold;
   line-height: 1.5em;
 }
 
-.torrent .status, .torrent .status2 {
+.torrent .status,
+.torrent .status2 {
   font-size: 1em;
   line-height: 1.5em;
 }
 
-.torrent span:not(:last-child)::after {
-  content: ' — ';
-}
-
 /*
  * TORRENT LIST: DRAG-DROP TARGET
  */
@@ -520,10 +529,20 @@ body.drag .torrent-placeholder span {
   padding: 8em 20px 20px 20px;
 }
 
+.torrent-details .open-folder {
+  float: right;
+}
+
 .torrent-details table {
   width: 100%;
-  max-width: 1000px;
   white-space: nowrap;
+  border: none;
+  border-spacing: 0;
+}
+
+.torrent-details tr:hover,
+.torrent-details .open-folder:hover {
+  background-color: rgba(200, 200, 200, 0.3);
 }
 
 .torrent-details td {
@@ -531,6 +550,16 @@ body.drag .torrent-placeholder span {
   padding: 0;
 }
 
+.torrent-details td.col-icon {
+  width: 2em;
+}
+
+.torrent-details td.col-icon .icon {
+  font-size: 18px;
+  position: relative;
+  top: 3px;
+}
+
 .torrent-details td.col-name {
   width: auto;
   text-overflow: ellipsis;
@@ -667,7 +696,8 @@ body.drag .torrent-placeholder span {
     font-size: 16px;
     line-height: 1.5em;
   }
-  .torrent, .torrent-placeholder {
+  .torrent,
+  .torrent-placeholder {
     height: 150px;
   }
 }
@@ -677,7 +707,8 @@ body.drag .torrent-placeholder span {
     font-size: 18px;
     line-height: 1.5em;
   }
-  .torrent, .torrent-placeholder {
+  .torrent,
+  .torrent-placeholder {
     height: 180px;
   }
 }