Restyle, topbar

uploadpage/index.php

@@ -14,18 +14,22 @@ function respond(){
 function filename(){
 	var name = document.getElementById("name");
 	name.innerHTML = document.getElementById("input").files[0].name;
-	name.style.color = "black";
 	name.style.fontWeight = "normal";
 }
 </script>
-<div class="container">
-	<div class="incontainer">
-		<h1>Stream Upload</h1>
-		<div class="user"><p>User: <b>'.$user.'</b></p>
+<div class="user"><p class="user">User:&nbsp;<b>'.$user.'</b></p>
 	<form action="check.php" method="post">
 		<input id="logoff" type="submit" name="logoff" value="Logoff">
 	</form></div>
+<div class="container">
+	<div class="incontainer">
+		<h1>Stream Upload</h1>
 		<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="respond()">
+			<div class="fileinput">
+				<input id="input" type="file" name="file" required accept=".mp4" onchange="filename()">
+				<input class="abs" id="fakeinput">
+				<p class="abs" id="name">Click to select the video</p>
+			</div>
 			<select name="target" id="target" required title="Click to select where to stream to">
 				<option value="" disabled selected hidden>Streaming Destination</option>
 				<option value="Restream">Restream</option>
@@ -35,11 +39,6 @@ function filename(){
 			<input type="text" name="streamkey" placeholder="Stream Key" required title="Enter a string of 0-9, a-z, A-Z, underscore or dash characters" pattern="[a-zA-Z0-9_-]+">
 			<input type="datetime-local" name="datetime" title="Click on the date to get a popup" required>
 			<!--input type="file" name="file" required accept=".mp4" title="Click to select a video"-->
-			<div class="fileinput">
-				<input id="input" type="file" name="file" required accept=".mp4" onchange="filename()">
-				<input class="abs">
-				<p class="abs" id="name">Click to select the video</p>
-			</div>
 			<input type="email" name="email" placeholder="Email to notify" title="Not required">
 			<input type="submit" value="Schedule Stream" name="schedule">
 			<p id="response"></p>

uploadpage/page.css

@@ -1,15 +1,32 @@
 body {
+	background-color:#eee;
 	margin:0;
 	font-family:sans-serif;
 	font-size:16px;
 	text-align:center;
 }
+.user {
+	display:flex;
+	width:100%;
+	justify-content:left;
+	background-color:#ccc;
+	box-sizing:border-box;
+}
+p.user {
+	margin:0;
+	padding:.9em;
+}
+#logoff {
+	margin:0;
+	background-color:darkorange;
+	width:100px;
+}
 .container {
 	display:flex;
 	flex-direction:column;
 	justify-content:center;
 	align-items:center;
-	height:100vh;
+	height:95vh;
 }
 .incontainer {
 	width:325px;
@@ -17,38 +34,36 @@ body {
 }
 h4 {
 	border-radius:4px;
-	color:white;
 	background-color:red;
 	padding:.9em;
 }
 input,select {
+	background-color:#fff;
 	text-align:center;
 	width:100%;
 	padding:12px 20px;
 	margin:3px 0;
 	display:inline-block;
-	border:1px solid #ccc;
+	border:1px solid #aaa;
 	border-radius:4px;
 	box-sizing:border-box;
 	font-size:16px;
 	font-weight:bold;
 }
 select {
-	margin-top:10px;
+	background-color:#fff;
+	margin-top:5px;
 	cursor:pointer;
 	padding-top:12px;
 	padding-bottom:-7px;
 }
 input[type=datetime-local] {
 	cursor:pointer;
-	margin-bottom:-3px;
 }
 input[type=email] {
 	margin-bottom:15px;
 }
 input[type=file] {
-	background-color:#4CAF50;
-	color:white;
 	text-align:left;
 	cursor:pointer;
 }
@@ -60,26 +75,17 @@ input[type=submit] {
 	border:none;
 	cursor:pointer;
 }
-.user {
-	display:flex;
-	width:100%;
-	justify-content:space-between;
-}
-#logoff {
-	width:100px;
-}
-/*::file-selector-button {
+::file-selector-button {
 	-moz-opacity:0;
 	filter:alpha(opacity:0);
 	opacity:0;
-}*/
+}
 .fileinput {
 	position:relative;
 	max-width:fit-content(325px);
 }
 #name {
 	padding-top:5px;
-	color:white;
 	font-weight:bold;
 	width:100%;
 	text-align:center;
@@ -88,11 +94,12 @@ input[type=submit] {
 	text-overflow:ellipsis;
 }
 input.abs {
-	background-color:#4CAF50;
+	background-color:#cfc;
 	padding:14px 20px;
 	margin:8px 0;
-	border:none;
+	border:1px solid #aaa;
 	border-radius:4px;
+	box-sizing:border-box;
 	cursor:pointer;
 	font-size:16px
 }