additions and refactors

src/vr180player/styles/vr180-player.css

@@ -0,0 +1,207 @@
+.vrwp {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+}
+
+.vrwp [hidden] {
+	display: none !important;
+}
+
+.vrwp-media,
+.vrwp canvas {
+	width: 100%;
+	height: auto;
+	aspect-ratio: 16 / 9;
+	display: block;
+	object-fit: contain;
+}
+
+.vrwp-play-button {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	width: 80px;
+	height: 80px;
+	transition: opacity 0.3s ease, transform 0.2s ease;
+	z-index: 10;
+}
+
+.vrwp-play-button:hover {
+	transform: translate(-50%, -50%) scale(1.1);
+}
+
+.vrwp-play-button:active {
+	transform: translate(-50%, -50%) scale(0.95);
+}
+
+.vrwp-play-button.hidden {
+	opacity: 0;
+	pointer-events: none;
+}
+
+.vrwp-play-button .vrwp-icon {
+	width: 100%;
+	height: 100%;
+	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
+}
+
+@media (max-width: 600px) {
+	.vrwp-play-button {
+		width: 60px;
+		height: 60px;
+	}
+}
+
+@media (min-width: 900px) {
+	.vrwp-play-button {
+		width: 100px;
+		height: 100px;
+	}
+}
+
+.vrwp-panel {
+	position: absolute;
+	bottom: 10%;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 80%;
+	padding: 20px;
+	border-radius: 30px;
+	background: rgba(0, 0, 0, 0.70);
+	color: #fff;
+	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	z-index: 100;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.15s ease, visibility 0.15s ease;
+	pointer-events: none;
+}
+
+.vrwp-panel.visible {
+	opacity: 1;
+	visibility: visible;
+	pointer-events: auto;
+}
+
+.vrwp-status {
+	margin: 0 12px 12px 12px;
+}
+
+.vrwp-video-title {
+	text-align: center;
+	margin: 0 0 16px 0;
+	font-size: 1rem;
+	font-weight: 500;
+}
+
+.vrwp-current-time,
+.vrwp-total-time {
+	margin: 0;
+	font-size: 0.875rem;
+	font-variant-numeric: tabular-nums;
+}
+
+.vrwp-progress {
+	display: grid;
+	grid-template-columns: min-content 1fr min-content;
+	grid-gap: 8px;
+	align-items: center;
+}
+
+.vrwp-bar {
+	width: 100%;
+	height: 4px;
+	border-radius: 2px;
+	background: #666;
+	cursor: pointer;
+	position: relative;
+}
+
+.vrwp-played {
+	border-radius: 2px;
+	background: #fff;
+	height: 4px;
+	width: 0%;
+	transition: width 0.1s ease;
+}
+
+.vrwp-controls {
+	display: grid;
+	grid-template-areas: "full lflex nav rflex loop mute";
+	grid-template-columns: 44px 1fr 156px 1fr 44px 44px;
+	column-gap: 8px;
+	height: 44px;
+}
+
+.vrwp-panel button {
+	cursor: pointer;
+	border: none;
+	background-color: transparent;
+	color: #fff;
+	display: grid;
+	place-items: center;
+	padding: 0;
+	position: relative;
+	transition: color 0.15s ease-in-out;
+}
+
+.vrwp-panel button:hover {
+	color: #d8d8d8;
+}
+
+.vrwp-icon {
+	width: 28px;
+	height: 28px;
+	stroke: currentColor;
+}
+
+.vrwp-fullscreen,
+.vrwp-loop,
+.vrwp-mute,
+.vrwp-back,
+.vrwp-play-toggle,
+.vrwp-forward {
+	width: 44px;
+	height: 44px;
+}
+
+.vrwp-fullscreen {
+	grid-area: full;
+}
+
+.vrwp-mute {
+	grid-area: mute;
+}
+
+.vrwp-loop {
+	grid-area: loop;
+}
+
+.vrwp-loop.active {
+	color: #7dd3fc;
+}
+
+.vrwp-nav {
+	grid-area: nav;
+	display: grid;
+	grid-template-columns: 44px 44px 44px;
+	grid-gap: 12px;
+	height: 44px;
+}
+
+.vrwp-skip-label {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -48%);
+	font-size: 0.625rem;
+	font-weight: 700;
+	line-height: 1;
+	pointer-events: none;
+}