@therealtinhtute/baroiplayer 1.0.0

package/src/styles/globals.css

@@ -0,0 +1,462 @@
+/* BaroiPlayer Global Styles
+ * Modern media player with Tailwind CSS v4 integration
+ * Includes design tokens, accessibility features, and responsive design
+ */
+
+/* Import Tailwind CSS base styles */
+@import "tailwindcss";
+
+/* Import design tokens from UI package if available */
+@import "@rp/ui/styles/design-tokens.css";
+
+/* ===== ROOT STYLES & CSS VARIABLES ===== */
+:root {
+	/* Media Player Colors */
+	--media-primary: oklch(62% 0.25 240);
+	--media-secondary: oklch(75% 0.18 180);
+	--media-accent: oklch(85% 0.12 60);
+
+	/* Player Background */
+	--media-bg: oklch(8% 0.02 240);
+	--media-surface: oklch(12% 0.02 240);
+	--media-overlay: oklch(15% 0.02 240 / 0.9);
+
+	/* Text Colors */
+	--media-text-primary: oklch(95% 0.005 240);
+	--media-text-secondary: oklch(75% 0.008 240);
+	--media-text-muted: oklch(60% 0.01 240);
+
+	/* Control States */
+	--media-control-idle: oklch(68% 0.20 142);
+	--media-control-hover: oklch(85% 0.08 240);
+	--media-control-active: oklch(72% 0.15 30);
+	--media-control-disabled: oklch(45% 0.005 240);
+
+	/* Progress Bar */
+	--media-progress-bg: oklch(25% 0.02 240);
+	--media-progress-fill: oklch(75% 0.18 240);
+	--media-progress-buffered: oklch(60% 0.12 240);
+
+	/* Focus & Accessibility */
+	--media-focus-outline: 2px solid var(--media-secondary);
+	--media-focus-offset: 2px;
+
+	/* Animations */
+	--media-transition: 200ms;
+	--media-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--media-bg: oklch(6% 0.01 240);
+		--media-surface: oklch(10% 0.01 240);
+		--media-text-primary: oklch(98% 0.003 240);
+	}
+}
+
+/* ===== BASE STYLES ===== */
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	background-color: var(--media-bg);
+	color: var(--media-text-primary);
+	line-height: 1.5;
+}
+
+/* ===== MEDIA PLAYER COMPONENT STYLES ===== */
+
+/* Base Player Container */
+.media-player {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background-color: var(--media-bg);
+	border-radius: 0.5rem;
+	overflow: hidden;
+}
+
+/* Player Video Element */
+.media-player video,
+.media-player audio {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+/* Control Panel */
+.media-player-controls {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: linear-gradient(to top, var(--media-overlay), transparent);
+	padding: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	transition: opacity var(--media-transition) var(--media-ease);
+}
+
+/* Play/Pause Button */
+.media-player-play-button {
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 50%;
+	background-color: var(--media-control-idle);
+	border: none;
+	color: white;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--media-transition) var(--media-ease);
+}
+
+.media-player-play-button:hover {
+	background-color: var(--media-control-hover);
+	transform: scale(1.05);
+}
+
+.media-player-play-button:focus {
+	outline: var(--media-focus-outline);
+	outline-offset: var(--media-focus-offset);
+}
+
+/* Progress Bar */
+.media-player-progress {
+	flex: 1;
+	height: 0.5rem;
+	background-color: var(--media-progress-bg);
+	border-radius: 0.25rem;
+	position: relative;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+.media-player-progress-bar {
+	height: 100%;
+	background-color: var(--media-progress-fill);
+	border-radius: 0.25rem;
+	position: relative;
+	transition: width 0.1s linear;
+}
+
+.media-player-progress-buffered {
+	height: 100%;
+	background-color: var(--media-progress-buffered);
+	border-radius: 0.25rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+/* Volume Control */
+.media-player-volume {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.media-player-volume-slider {
+	width: 6rem;
+	height: 0.25rem;
+	background-color: var(--media-progress-bg);
+	border-radius: 0.125rem;
+	outline: none;
+	cursor: pointer;
+}
+
+.media-player-volume-slider::-webkit-slider-thumb {
+	appearance: none;
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+	background-color: var(--media-control-idle);
+	cursor: pointer;
+}
+
+/* Time Display */
+.media-player-time {
+	font-size: 0.875rem;
+	color: var(--media-text-secondary);
+	font-variant-numeric: tabular-nums;
+	min-width: 5rem;
+	text-align: center;
+}
+
+/* Fullscreen Button */
+.media-player-fullscreen-button {
+	width: 2rem;
+	height: 2rem;
+	border-radius: 0.25rem;
+	background-color: transparent;
+	border: 1px solid var(--media-control-idle);
+	color: var(--media-text-primary);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--media-transition) var(--media-ease);
+}
+
+.media-player-fullscreen-button:hover {
+	background-color: var(--media-control-hover);
+}
+
+/* Settings Menu */
+.media-player-settings {
+	position: absolute;
+	bottom: 4rem;
+	right: 1rem;
+	background-color: var(--media-surface);
+	border: 1px solid var(--media-progress-bg);
+	border-radius: 0.5rem;
+	padding: 0.5rem;
+	min-width: 12rem;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.media-player-settings-item {
+	padding: 0.5rem 0.75rem;
+	border-radius: 0.25rem;
+	cursor: pointer;
+	color: var(--media-text-primary);
+	transition: background-color var(--media-transition) var(--media-ease);
+}
+
+.media-player-settings-item:hover {
+	background-color: var(--media-control-hover);
+}
+
+/* Loading Spinner */
+.media-player-loading {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 3rem;
+	height: 3rem;
+	border: 3px solid var(--media-progress-bg);
+	border-top-color: var(--media-progress-fill);
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+
+/* Error Display */
+.media-player-error {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: var(--media-surface);
+	padding: 1.5rem;
+	border-radius: 0.5rem;
+	text-align: center;
+	max-width: 80%;
+}
+
+.media-player-error-title {
+	color: var(--media-text-primary);
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.media-player-error-message {
+	color: var(--media-text-secondary);
+	font-size: 0.875rem;
+}
+
+/* Subtitle Display */
+.media-player-subtitles {
+	position: absolute;
+	bottom: 4rem;
+	left: 0;
+	right: 0;
+	text-align: center;
+	padding: 0 1rem;
+	pointer-events: none;
+}
+
+.media-player-subtitle-text {
+	display: inline-block;
+	background-color: rgba(0, 0, 0, 0.8);
+	color: white;
+	padding: 0.25rem 0.5rem;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+	line-height: 1.4;
+}
+
+/* Picture-in-Picture Button */
+.media-player-pip-button {
+	width: 2rem;
+	height: 2rem;
+	border-radius: 0.25rem;
+	background-color: transparent;
+	border: 1px solid var(--media-control-idle);
+	color: var(--media-text-primary);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--media-transition) var(--media-ease);
+}
+
+.media-player-pip-button:hover {
+	background-color: var(--media-control-hover);
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+	.media-player-controls {
+		padding: 0.75rem;
+		gap: 0.5rem;
+	}
+
+	.media-player-play-button {
+		width: 2rem;
+		height: 2rem;
+	}
+
+	.media-player-volume-slider {
+		width: 4rem;
+	}
+
+	.media-player-time {
+		font-size: 0.75rem;
+		min-width: 4rem;
+	}
+
+	.media-player-fullscreen-button,
+	.media-player-pip-button {
+		width: 1.75rem;
+		height: 1.75rem;
+	}
+}
+
+/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
+
+/* Focus Management */
+.media-player *:focus {
+	outline: var(--media-focus-outline);
+	outline-offset: var(--media-focus-offset);
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+	:root {
+		--media-focus-outline: 3px solid currentColor;
+		--media-focus-offset: 3px;
+	}
+
+	.media-player-play-button,
+	.media-player-fullscreen-button,
+	.media-player-pip-button {
+		border-width: 2px;
+	}
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+	* {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+/* Screen Reader Only */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* ===== MINIMAL PLAYER VARIANT ===== */
+
+.minimal-player {
+	--minimal-bg: transparent;
+	--minimal-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.minimal-player .media-player-controls {
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+	border-top: var(--minimal-border);
+}
+
+.minimal-player .media-player-play-button {
+	background-color: rgba(255, 255, 255, 0.1);
+	backdrop-filter: blur(8px);
+}
+
+.minimal-player .media-player-settings {
+	background-color: rgba(20, 20, 20, 0.95);
+	backdrop-filter: blur(12px);
+}
+
+/* ===== KEYBOARD NAVIGATION ===== */
+
+/* Keyboard shortcut help */
+.media-player-keyboard-help {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	background-color: var(--media-surface);
+	border: 1px solid var(--media-progress-bg);
+	border-radius: 0.5rem;
+	padding: 1rem;
+	min-width: 16rem;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+	z-index: 1000;
+}
+
+.media-player-keyboard-help h3 {
+	margin: 0 0 0.5rem 0;
+	color: var(--media-text-primary);
+	font-size: 0.875rem;
+	font-weight: 600;
+}
+
+.media-player-keyboard-help-item {
+	display: flex;
+	justify-content: space-between;
+	padding: 0.25rem 0;
+	font-size: 0.75rem;
+}
+
+.media-player-keyboard-help-key {
+	color: var(--media-text-secondary);
+	font-family: monospace;
+}
+
+/* ===== PRINT STYLES ===== */
+@media print {
+	.media-player {
+		break-inside: avoid;
+		border: 1px solid currentColor;
+	}
+
+	.media-player-controls,
+	.media-player-loading,
+	.media-player-error {
+		display: none;
+	}
+}