Initial build

vr180player/vr180-player.css

@@ -1,16 +1,17 @@
-#vr-container {
+.vrwp {
 	position: relative;
 	display: inline-block;
 	width: 100%;
 }
 
-video {
+.vrwp-video,
+.vrwp canvas {
 	width: 100%;
 	height: auto;
-    aspect-ratio: 16/9;
+	aspect-ratio: 16 / 9;
 }
 
-#playBtn {
+.vrwp-play-button {
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -25,41 +26,39 @@ video {
 	z-index: 10;
 }
 
-#playBtn:hover {
+.vrwp-play-button:hover {
 	transform: translate(-50%, -50%) scale(1.1);
 }
 
-#playBtn:active {
+.vrwp-play-button:active {
 	transform: translate(-50%, -50%) scale(0.95);
 }
 
-#playBtn.hidden {
+.vrwp-play-button.hidden {
 	opacity: 0;
 	pointer-events: none;
 }
 
-#playBtn img {
+.vrwp-play-button img {
 	width: 100%;
 	height: 100%;
 }
 
-/* Responsive sizing */
 @media (max-width: 600px) {
-	#playBtn {
+	.vrwp-play-button {
 		width: 60px;
 		height: 60px;
 	}
 }
 
 @media (min-width: 900px) {
-	#playBtn {
+	.vrwp-play-button {
 		width: 100px;
 		height: 100px;
 	}
 }
 
-/* 2D Video Controls Panel */
-#panel {
+.vrwp-panel {
 	position: absolute;
 	bottom: 10%;
 	left: 50%;
@@ -69,7 +68,7 @@ video {
 	border-radius: 30px;
 	background: rgba(0, 0, 0, 0.70);
 	color: #fff;
-	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 	z-index: 100;
 	opacity: 0;
 	visibility: hidden;
@@ -77,38 +76,38 @@ video {
 	pointer-events: none;
 }
 
-#panel.visible {
+.vrwp-panel.visible {
 	opacity: 1;
 	visibility: visible;
 	pointer-events: auto;
 }
 
-#status {
+.vrwp-status {
 	margin: 0 12px 12px 12px;
 }
 
-#video-title {
+.vrwp-video-title {
 	text-align: center;
 	margin: 0 0 16px 0;
 	font-size: 1rem;
 	font-weight: 500;
 }
 
-#current-time,
-#total-time {
+.vrwp-current-time,
+.vrwp-total-time {
 	margin: 0;
 	font-size: 0.875rem;
 	font-variant-numeric: tabular-nums;
 }
 
-#progress {
+.vrwp-progress {
 	display: grid;
 	grid-template-columns: min-content 1fr min-content;
 	grid-gap: 8px;
 	align-items: center;
 }
 
-#bar {
+.vrwp-bar {
 	width: 100%;
 	height: 4px;
 	border-radius: 2px;
@@ -117,7 +116,7 @@ video {
 	position: relative;
 }
 
-#played {
+.vrwp-played {
 	border-radius: 2px;
 	background: #fff;
 	height: 4px;
@@ -125,20 +124,20 @@ video {
 	transition: width 0.1s ease;
 }
 
-#controls {
+.vrwp-controls {
 	display: grid;
 	grid-template-areas: "full lflex nav rflex mute";
 	grid-template-columns: 44px 1fr 156px 1fr 44px;
 	height: 44px;
 }
 
-#panel button {
+.vrwp-panel button {
 	cursor: pointer;
 	border: none;
 	background-color: transparent;
 }
 
-#fullscreen {
+.vrwp-fullscreen {
 	grid-area: full;
 	width: 44px;
 	height: 44px;
@@ -149,11 +148,11 @@ video {
 	transition: background-image 0.15s ease-in-out;
 }
 
-#fullscreen:hover {
+.vrwp-fullscreen:hover {
 	background-image: url(images/fullscreen-hover.png);
 }
 
-#mute {
+.vrwp-mute {
 	grid-area: mute;
 	width: 44px;
 	height: 44px;
@@ -164,27 +163,27 @@ video {
 	transition: background-image 0.15s ease-in-out;
 }
 
-#mute:hover {
+.vrwp-mute:hover {
 	background-image: url(images/mute-hover.png);
 }
 
-#mute.muted {
+.vrwp-mute.muted {
 	background-image: url(images/mute.png);
 }
 
-#mute.muted:hover {
+.vrwp-mute.muted:hover {
 	background-image: url(images/mute-hover.png);
 }
 
-#mute.unmuted {
+.vrwp-mute.unmuted {
 	background-image: url(images/unmute.png);
 }
 
-#mute.unmuted:hover {
+.vrwp-mute.unmuted:hover {
 	background-image: url(images/unmute-hover.png);
 }
 
-#nav {
+.vrwp-nav {
 	grid-area: nav;
 	display: grid;
 	grid-template-columns: 44px 44px 44px;
@@ -192,7 +191,7 @@ video {
 	height: 44px;
 }
 
-#back {
+.vrwp-back {
 	width: 44px;
 	height: 44px;
 	background-image: url(images/back.png);
@@ -202,11 +201,11 @@ video {
 	transition: background-image 0.15s ease-in-out;
 }
 
-#back:hover {
+.vrwp-back:hover {
 	background-image: url(images/back-hover.png);
 }
 
-#play2 {
+.vrwp-play-toggle {
 	width: 44px;
 	height: 44px;
 	background-image: url(images/play2.png);
@@ -216,27 +215,27 @@ video {
 	transition: background-image 0.15s ease-in-out;
 }
 
-#play2:hover {
+.vrwp-play-toggle:hover {
 	background-image: url(images/play2-hover.png);
 }
 
-#play2.paused {
+.vrwp-play-toggle.paused {
 	background-image: url(images/play2.png);
 }
 
-#play2.paused:hover {
+.vrwp-play-toggle.paused:hover {
 	background-image: url(images/play2-hover.png);
 }
 
-#play2.playing {
+.vrwp-play-toggle.playing {
 	background-image: url(images/pause.png);
 }
 
-#play2.playing:hover {
+.vrwp-play-toggle.playing:hover {
 	background-image: url(images/pause-hover.png);
 }
 
-#forward {
+.vrwp-forward {
 	width: 44px;
 	height: 44px;
 	background-image: url(images/forward.png);
@@ -246,6 +245,6 @@ video {
 	transition: background-image 0.15s ease-in-out;
 }
 
-#forward:hover {
+.vrwp-forward:hover {
 	background-image: url(images/forward-hover.png);
 }