UI progress, material icons

main/index.css

@@ -29,6 +29,36 @@ body {
   height: 100%;
 }
 
+/*
+ * MATERIAL ICONS
+ */
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../vendor/MaterialIcons-Regular.woff2) format('woff2');
+}
+
+.icon {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
 /*
  * UTILITY CLASSES
  */
@@ -47,13 +77,13 @@ body {
  * BUTTONS
  */
 
-a {
+a, i {
   cursor: default;
   -webkit-app-region: no-drag;
 }
 
-a:not(.disabled):hover {
-  -webkit-filter: brightness(1.5);
+a:not(.disabled):hover, i:not(.disabled):hover {
+  -webkit-filter: brightness(1.3);
 }
 
 .btn {
@@ -73,29 +103,30 @@ a:not(.disabled):hover {
 .header {
   border-bottom: 1px solid rgb(20, 20, 20);
   height: 37px;
-  padding-top: 8px;
+  padding-top: 6px;
   overflow: hidden;
 }
 
 .header .title {
   opacity: 0.6;
   position: absolute;
+  margin-top: 1px;
   width: 100%;
   text-align: center;
+  pointer-events: none;
 }
 
 .header .nav {
-  font-size: 17px;
   font-weight: bold;
-  margin-left: 80px;
+  margin-left: 78px;
   margin-right: 7px;
 }
 
-.header .left-nav {
+.header .nav.left {
   float: left;
 }
 
-.header .right-nav {
+.header .nav.right {
   float: right;
 }
 
@@ -104,15 +135,16 @@ a:not(.disabled):hover {
 }
 
 .header .nav .disabled {
-  opacity: 0.2;
+  opacity: 0.1;
 }
 
 .header .nav *:not(.disabled):hover {
   opacity: 1;
 }
 
-.header .nav .back {
-  padding-right: 8px;
+.header .nav .back, .header .nav .forward {
+  font-size: 32px;
+  margin-top: -4px;
 }
 
 /*
@@ -182,21 +214,20 @@ body.drag::before {
 .torrent .btn {
   float: right;
   margin-top: 20px;
-  margin-left: 20px;
+  margin-left: 15px;
   padding-top: 10px;
 }
 
 .torrent .play {
-  background-color: #C62828;
-  padding-left: 3px;
+  background-color: #F44336;
 }
 
 .torrent .chromecast {
-  background-color: #64B5F6;
+  background-color: #2196F3;
 }
 
 .torrent .airplay {
-  background-color: #607D8B;
+  background-color: #212121;
 }
 
 .torrent .name {