UI progress, material icons
This commit is contained in:
Feross Aboukhadijeh
@@ -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 {
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<meta charset="utf-8">
|
||||
<title>WebTorrent</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../vendor/fontello/css/fontello.css" charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css" charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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')
|
||||
}
|
||||
})()
|
||||
])
|
||||
|
||||
Reference in New Issue
Block a user