diff --git a/renderer/index.css b/renderer/index.css index 8ba15525..aeec9f28 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -113,28 +113,8 @@ table { opacity: 0.3; } -/* - * BUTTONS - */ - -a, -i { - cursor: default; - -webkit-app-region: no-drag; -} - -a:not(.disabled):hover, -i:not(.disabled):hover { - -webkit-filter: brightness(1.3); -} - -.btn { - width: 40px; - height: 40px; - border-radius: 20px; - font-size: 22px; - transition: all 0.1s ease-out; - text-align: center; +.float-right { + float: right; } /* @@ -266,14 +246,18 @@ i:not(.disabled):hover { width: calc(100% - 20px); max-width: 600px; box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.4); - background-color: white; + background-color: #eee; color: #222; padding: 20px; } -.create-torrent-modal input, +.modal label { + font-size: 16px; + font-weight: bold; +} + .open-torrent-address-modal input { - width: calc(100% - 100px) + width: 100%; } .create-torrent-modal .torrent-attribute { @@ -295,35 +279,71 @@ i:not(.disabled):hover { white-space: nowrap; } - - /* * BUTTONS + * See https://www.google.com/design/spec/components/buttons.html */ -button { +a, +i { /* Links and icons */ + cursor: default; + -webkit-app-region: no-drag; +} + +a:not(.disabled):hover, +i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */ + -webkit-filter: brightness(1.3); +} + +.button-round { /* Circular icon buttons, used on tags */ + width: 40px; + height: 40px; + border-radius: 20px; + font-size: 22px; + transition: all 0.1s ease-out; + text-align: center; +} + +button { /* Rectangular text buttons */ background: transparent; margin-left: 10px; padding: 0; border: none; + border-radius: 3px; font-size: 14px; font-weight: bold; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); cursor: pointer; color: #aaa; + outline: none; } -button.primary { - color: #0cf; +button.button-flat { + color: #222; + padding: 7px 18px; } -button:hover { - -webkit-filter: brightness(1.1); +button.button-flat:hover, +button.button-flat:focus { /* Material design: focused */ + background-color: rgba(153, 153, 153, 0.2); } -button:active { - -webkit-filter: brightness(1.1); - text-shadow: none; +button.button-flat:active { /* Material design: pressed */ + background-color: rgba(153, 153, 153, 0.4); +} + +button.button-raised { + background-color: #2196f3; + color: #eee; + padding: 7px 18px; +} + +button.button-raised:hover, +button.button-raised:focus { + background-color: #38a0f5; +} + +button.button-raised:active { + background-color: #51abf6; } /* @@ -336,7 +356,7 @@ input { padding: 6px; border: 1px solid #bbb; border-radius: 3px; - box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1); + outline: none; } /* diff --git a/renderer/views/open-torrent-address-modal.js b/renderer/views/open-torrent-address-modal.js index fe7d7175..2019efbe 100644 --- a/renderer/views/open-torrent-address-modal.js +++ b/renderer/views/open-torrent-address-modal.js @@ -9,11 +9,13 @@ var {dispatch} = require('../lib/dispatcher') function OpenTorrentAddressModal (state) { return hx`
-

Enter torrent address or magnet link

+

- - +

+

+ +

diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index 102d78f1..ef2c43bb 100644 --- a/renderer/views/torrent-list.js +++ b/renderer/views/torrent-list.js @@ -141,7 +141,7 @@ function TorrentList (state) { var playButton if (TorrentPlayer.isPlayableTorrent(torrentSummary)) { playButton = hx` - @@ -153,7 +153,7 @@ function TorrentList (state) { return hx`
${playButton} -