From 862bc0594a4bc43ed302081e788db19531f593cd Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Sat, 25 Aug 2018 06:01:38 +0200
Subject: [PATCH] Improve styling.

---
 src/index.js    | 18 +++++++++++++-----
 src/player.styl | 16 ++++++++++++----
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/index.js b/src/index.js
index f0cdc89..0e50ca1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,6 +17,7 @@ window.addEventListener('load', () => {
   const playContainer = document.createElement('div');
   playContainer.classList.add(style.play);
   const playButton = document.createElement('button');
+  playButton.classList.add(style.playInner);
   playButton.classList.add('icon');
   playButton.classList.add('icon-play'); // fontello icon
   playContainer.appendChild(playButton);
@@ -27,6 +28,11 @@ window.addEventListener('load', () => {
   statusContent.classList.add(style.statusInner);
   statusContainer.appendChild(statusContent);
 
+  const playerContainer = document.createElement('video');
+  playerContainer.classList.add(style.video);
+  playerContainer.loop = true;
+  playerContainer.controls = false;
+
   function showStatus() {
     if (!(style['status--visible'] in statusContainer.classList)) {
       statusContainer.classList.add(style['status--visible']);
@@ -51,12 +57,13 @@ window.addEventListener('load', () => {
     playContainer.classList.remove(style['play--visible']);
   }
 
-  showStatus('Constructing your clock...');
+  function showPlayer() {
+    if (!(style['video--visible'] in playerContainer.classList)) {
+      playerContainer.classList.add(style['video--visible']);
+    }
+  }
 
-  const playerContainer = document.createElement('video');
-  playerContainer.classList.add(style.video);
-  playerContainer.loop = true;
-  playerContainer.controls = false;
+  showStatus('Constructing your clock...');
 
   const parsedHash = queryString.parse(window.location.query || window.location.hash);
   let secondsOfDay;
@@ -114,6 +121,7 @@ window.addEventListener('load', () => {
   player.on('playbackPlaying', () => {
     hideStatus();
     hidePlayButton();
+    showPlayer();
 
     // resync video position with current time if necessary
     if (parsedHash.s === undefined && Math.abs(player.time() - getSecondsOfDay()) > 1) {
diff --git a/src/player.styl b/src/player.styl
index 780ab72..5e1f68a 100644
--- a/src/player.styl
+++ b/src/player.styl
@@ -32,7 +32,7 @@ body
 	z-index: 10
 	display: none
 
-	&.status__inner
+	>.status__inner
 		background: rgba(0, 0, 0, .5)
 
 	&.status--visible
@@ -41,7 +41,10 @@ body
 
 .video
 	fullscreen()
-	animation: fadein .25s linear
+	opacity: 0
+	transition: opacity .25s linear
+	&.video--visible
+		opacity: 1
 
 .play
 	fullscreen()
@@ -52,10 +55,15 @@ body
 	opacity: 0
 	display: none
 	z-index: 10
-	font-size: 5em
 
-	&.play__inner
+	>.play__inner
 		background: rgba(0, 0, 0, .5)
+		border: #fff 1px solid
+		border-radius: 4px
+		color: #fff
+		font-size: 5em
+		width: 2.5em
+		height: 2.5em
 
 	&.play--visible
 		opacity: 1