diff --git a/main/windows.js b/main/windows.js index 329b7e69..326c1f26 100644 --- a/main/windows.js +++ b/main/windows.js @@ -21,12 +21,12 @@ function createMainWindow (menu) { backgroundColor: '#282828', darkTheme: true, // Forces dark theme (GTK+3 only) minWidth: 375, - minHeight: 38 + (120 * 2), // header height + two torrents + minHeight: 38 + (120 * 2), // header height + 2 torrents show: false, // Hide window until DOM finishes loading title: config.APP_NAME, titleBarStyle: 'hidden-inset', // Hide OS chrome, except traffic light buttons (OS X) width: 450, - height: 600 + height: 38 + (120 * 4) // header height + 4 torrents }) win.loadURL(config.INDEX) diff --git a/renderer/index.css b/renderer/index.css index 7b1d29eb..08556222 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -11,18 +11,21 @@ html, body { background: rgb(40, 40, 40); - color: #FFF; cursor: default; height: 100%; - font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif; - font-size: 14px; - line-height: 1.5em; margin: 0; padding: 0; width: 100%; overflow: hidden; } +body { + color: #FFF; + font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif; + font-size: 14px; + line-height: 1.5em; +} + .loading { display: flex; flex-direction: column; @@ -150,6 +153,8 @@ a:not(.disabled):hover, i:not(.disabled):hover { right: 0; z-index: 1000; transition: opacity 0.15s ease-out; + font-size: 14px; + line-height: 1.5em; } .view-player .header { @@ -245,19 +250,22 @@ a:not(.disabled):hover, i:not(.disabled):hover { padding-top: 37px; } -.drop-target { - margin: 10px; +.torrent-placeholder { + padding: 10px; + color: #666; + font-size: 1.1em; +} + +.torrent-placeholder span { border: 5px #444 dashed; border-radius: 5px; - color: #666; - font-size: 16px; - flex: 1 1 auto; + height: 100%; display: flex; align-items: center; justify-content: center; } -body.drag .drop-target { +body.drag .torrent-placeholder { border-color: #def; color: #def; } @@ -272,22 +280,10 @@ body.drag .drop-target { animation: fadein .4s; } -.torrent, .drop-target { +.torrent, .torrent-placeholder { height: 120px; } -@media only screen and (min-width: 700px) { - .torrent, .drop-target { - height: 150px; - } -} - -@media only screen and (min-width: 900px) { - .torrent, .drop-target { - height: 180px; - } -} - .torrent:not(:last-child) { border-bottom: 1px solid rgb(20, 20, 20); } @@ -507,3 +503,27 @@ body.drag .drop-target { margin-top: 0; margin-left: 0; } + +/* + * MEDIA QUERIES + */ + +@media only screen and (min-width: 700px) { + body { + font-size: 16px; + line-height: 1.5em; + } + .torrent, .torrent-placeholder { + height: 150px; + } +} + +@media only screen and (min-width: 900px) { + body { + font-size: 18px; + line-height: 1.5em; + } + .torrent, .torrent-placeholder { + height: 180px; + } +} diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index 6d96b33f..3d75909b 100644 --- a/renderer/views/torrent-list.js +++ b/renderer/views/torrent-list.js @@ -11,8 +11,8 @@ function TorrentList (state, dispatch) { return hx`
${list} -
-

Drop a torrent file here or paste a magnet link

+
+ Drop a torrent file here or paste a magnet link
` }