diff --git a/main/index.css b/main/index.css
index ba9063c6..dfc28222 100644
--- a/main/index.css
+++ b/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 {
diff --git a/main/index.html b/main/index.html
index 4994da4b..33161759 100644
--- a/main/index.html
+++ b/main/index.html
@@ -4,7 +4,6 @@
WebTorrent
-
diff --git a/main/views/header.js b/main/views/header.js
index 650cf5fa..5cd7015e 100644
--- a/main/views/header.js
+++ b/main/views/header.js
@@ -5,15 +5,19 @@ var h = require('virtual-dom/h')
function Header (state, dispatch) {
return h('.header', [
h('.title', state.title),
- h('.nav.left-nav', [
- h('a.back.icon-left-open.disabled'),
- h('a.forward.icon-right-open')
+ h('.nav.left', [
+ h('i.icon.back.disabled', 'chevron_left'),
+ h('i.icon.forward', 'chevron_right')
]),
- h('.nav.right-nav', [
- h('a.add.icon-plus', {
- onclick: onAddTorrent
- })
- ])
+ (function () {
+ if (state.player !== 'local') {
+ return h('.nav.right', [
+ h('i.icon.add', {
+ onclick: onAddTorrent
+ }, 'add')
+ ])
+ }
+ })()
])
function onAddTorrent (e) {
diff --git a/main/views/torrent-list.js b/main/views/torrent-list.js
index adfde22e..21d053be 100644
--- a/main/views/torrent-list.js
+++ b/main/views/torrent-list.js
@@ -6,7 +6,7 @@ function TorrentList (state, dispatch) {
var list = state.torrents.map(function (torrent) {
var style = {}
if (torrent.posterURL) {
- style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("' + torrent.posterURL + '")'
+ style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("' + torrent.posterURL + '")'
}
return h('.torrent', {
style: style
@@ -22,24 +22,24 @@ function TorrentList (state, dispatch) {
})()
])
]),
- h('a.btn.play', {
+ h('i.btn.icon.play', {
className: !torrent.ready ? 'disabled' : '',
onclick: openPlayer
- }, '▶'),
+ }, 'play_arrow'),
(function () {
if (state.chromecast) {
- return h('a.btn.chromecast', {
+ return h('i.btn.icon.chromecast', {
className: !torrent.ready ? 'disabled' : '',
onclick: openChromecast
- }, 'C')
+ }, 'cast')
}
})(),
(function () {
if (state.airplay) {
- return h('a.btn.airplay', {
+ return h('i.btn.icon.airplay', {
className: !torrent.ready ? 'disabled' : '',
onclick: openAirplay
- }, 'A')
+ }, 'airplay')
}
})()
])
diff --git a/vendor/MaterialIcons-Regular.woff2 b/vendor/MaterialIcons-Regular.woff2
new file mode 100644
index 00000000..20f1f674
Binary files /dev/null and b/vendor/MaterialIcons-Regular.woff2 differ
diff --git a/vendor/fontello/LICENSE.txt b/vendor/fontello/LICENSE.txt
deleted file mode 100644
index 83a0c493..00000000
--- a/vendor/fontello/LICENSE.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-Font license info
-
-
-## MFG Labs
-
- Copyright (C) 2012 by Daniel Bruce
-
- Author: MFG Labs
- License: SIL (http://scripts.sil.org/OFL)
- Homepage: http://www.mfglabs.com/
-
-
diff --git a/vendor/fontello/README.txt b/vendor/fontello/README.txt
deleted file mode 100644
index beaab336..00000000
--- a/vendor/fontello/README.txt
+++ /dev/null
@@ -1,75 +0,0 @@
-This webfont is generated by http://fontello.com open source project.
-
-
-================================================================================
-Please, note, that you should obey original font licenses, used to make this
-webfont pack. Details available in LICENSE.txt file.
-
-- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
- site in "About" section.
-
-- If your project is open-source, usually, it will be ok to make LICENSE.txt
- file publicly available in your repository.
-
-- Fonts, used in Fontello, don't require a clickable link on your site.
- But any kind of additional authors crediting is welcome.
-================================================================================
-
-
-Comments on archive content
----------------------------
-
-- /font/* - fonts in different formats
-
-- /css/* - different kinds of css, for all situations. Should be ok with
- twitter bootstrap. Also, you can skip style and assign icon classes
- directly to text elements, if you don't mind about IE7.
-
-- demo.html - demo file, to show your webfont content
-
-- LICENSE.txt - license info about source fonts, used to build your one.
-
-- config.json - keeps your settings. You can import it back into fontello
- anytime, to continue your work
-
-
-Why so many CSS files ?
------------------------
-
-Because we like to fit all your needs :)
-
-- basic file, .css - is usually enough, it contains @font-face
- and character code definitions
-
-- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
- directly into html
-
-- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
- rules, but still wish to benefit from css generation. That can be very
- convenient for automated asset build systems. When you need to update font -
- no need to manually edit files, just override old version with archive
- content. See fontello source code for examples.
-
-- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
- CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
- We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
- server headers. But if you ok with dirty hack - this file is for you. Note,
- that data url moved to separate @font-face to avoid problems with
-
-
-
-
-
-
-
-
-
-
-
icon-plus0xe801
-
icon-left-open0xe802
-
icon-right-open0xe803
-
-