diff --git a/renderer/index.css b/renderer/index.css
index 8a140783..80bab32e 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -114,14 +114,14 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   top: 0;
   right: 0;
   z-index: 1000;
-  transition: opacity 0.2s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
-.app.player .header {
+.view-player .header {
   opacity: 0;
 }
 
-.app.player:hover .header:not(.hide) {
+.view-player:hover .header:not(.hide) {
   opacity: 0.8;
   cursor: default;
 }
@@ -144,6 +144,10 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   float: left;
 }
 
+.darwin.not-fullscreen .header .nav.left {
+  margin-left: 78px;
+}
+
 .header .nav.right {
   float: right;
 }
@@ -302,7 +306,7 @@ body.drag::before {
   height: 38px;
   bottom: 0;
   opacity: 0;
-  transition: all 0.2s ease-out;
+  transition: all 0.15s ease-out;
 }
 
 .player:hover .player-controls {
diff --git a/renderer/views/app.js b/renderer/views/app.js
index a204e7d5..ca661fc0 100644
--- a/renderer/views/app.js
+++ b/renderer/views/app.js
@@ -11,10 +11,11 @@ var TorrentList = require('./torrent-list')
 var isOSX = process.platform === 'darwin'
 
 function App (state, dispatch) {
-  var cls = []
-  if (state.url === '/player') {
-    cls.push('player')
-  }
+  var cls = [
+    process.platform,
+    state.isFullScreen ? 'fullscreen' : 'not-fullscreen',
+    state.url === '/player' ? 'view-player' : ''
+  ]
 
   return hx`
     <div class='app ${cls.join(' ')}'>
diff --git a/renderer/views/header.js b/renderer/views/header.js
index bcd24e3f..d29365c9 100644
--- a/renderer/views/header.js
+++ b/renderer/views/header.js
@@ -8,14 +8,11 @@ function Header (state, dispatch) {
   var hideControls = state.url === '/player' &&
     state.video.mouseStationarySince !== 0 &&
     new Date().getTime() - state.video.mouseStationarySince > 2000
-  var navLeftStyle = (process.platform === 'darwin' && !state.isFullScreen)
-    ? { marginLeft: '78px' } /* OSX needs room on the left for min/max/close buttons */
-    : {} /* On Windows and Linux, the header is separate & underneath the title bar */
 
   return hx`
     <div class='header ${hideControls ? 'hide' : ''}'>
       ${getTitle()}
-      <div class='nav left' style=${navLeftStyle}>
+      <div class='nav left'>
         <i
           class='icon back'
           title='back'