Cesar Mendivil
0ca2b36b5c
- Added StudioLeftSidebar component for scene management with add, delete, and duplicate functionalities. - Introduced StudioRightPanel component with tabs for brand settings, multimedia, sounds, video, QR code generation, countdown, and general settings. - Created StudioSidebar component for participant management, chat, and notes. - Developed StudioVideoArea component to handle video display for demo and live modes. - Configured demo data for scenes, participants, overlays, backgrounds, and sounds in demo.ts. - Set up a token server for LiveKit integration to manage participant access. - Updated Vite environment definitions for LiveKit configuration.
187 lines
3.0 KiB
CSS
187 lines
3.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
* {
|
|
border-color: #374151;
|
|
}
|
|
|
|
body {
|
|
background-color: #111827;
|
|
color: white;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/* Requiner Font for Logo */
|
|
|
|
/* LiveKit Styles Override */
|
|
.lk-room-container {
|
|
@apply bg-gray-950;
|
|
}
|
|
|
|
.lk-participant-tile {
|
|
@apply rounded-lg overflow-hidden border-2 border-gray-700;
|
|
}
|
|
|
|
.lk-participant-tile:hover {
|
|
@apply border-pink-500;
|
|
}
|
|
|
|
.lk-participant-metadata {
|
|
@apply bg-gradient-to-t from-black/80 to-transparent;
|
|
}
|
|
|
|
.lk-button {
|
|
@apply transition-all hover:scale-105;
|
|
}
|
|
|
|
/* Scrollbar personalizado */
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
@apply bg-gray-800;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-600 rounded-full;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-gray-500;
|
|
}
|
|
|
|
/* Control buttons */
|
|
.control-button {
|
|
@apply text-white transition-all duration-200 shadow-lg;
|
|
}
|
|
|
|
.control-button:hover {
|
|
@apply transform scale-105;
|
|
}
|
|
|
|
.control-button:active {
|
|
@apply transform scale-95;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
|
|
/* Requiner Font for Logo */
|
|
@font-face {
|
|
font-family: 'Requiner';
|
|
src: url('/assets/Requiner-6RRLM.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* LiveKit Custom Styles */
|
|
.lk-video-conference {
|
|
height: 100%;
|
|
background: #0a0a0f;
|
|
}
|
|
|
|
.lk-focus-layout {
|
|
background: #0a0a0f;
|
|
}
|
|
|
|
.lk-grid-layout {
|
|
background: #0a0a0f;
|
|
}
|
|
|
|
.lk-participant-tile {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #1a1a24;
|
|
}
|
|
|
|
.lk-participant-metadata {
|
|
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
|
|
}
|
|
|
|
.lk-participant-metadata-item {
|
|
color: white;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lk-button {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.lk-button:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Control buttons custom styles */
|
|
.control-button {
|
|
transition: all 0.2s;
|
|
color: white;
|
|
}
|
|
|
|
.control-button:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.control-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Studio Layout */
|
|
.studio-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #111827;
|
|
color: white;
|
|
}
|
|
|
|
.studio-room {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Scrollbar personalizado */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #1f2937;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #4b5563;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #6b7280;
|
|
}
|