@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

package/src/styles/globals.css

@@ -1,462 +0,0 @@
-/* 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.2 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;
-	}
-}