b5f0b50c4a
This commit updates all instances of the old domain name "go4.video" to the new domain name "video.folx.tv" across various frontend components, including modals, headers, cards, and page metadata. It also includes updates to sharing intent URLs for Twitter and WhatsApp to use the new domain. Additionally, CSS for Video.js loading animations has been added to `index.css`. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/jh6R7y2
554 lines
14 KiB
CSS
554 lines
14 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background: hsl(220, 13%, 9%);
|
|
--foreground: hsl(210, 40%, 95%);
|
|
--muted: hsl(220, 13%, 15%);
|
|
--muted-foreground: hsl(215, 20%, 55%);
|
|
--popover: hsl(220, 13%, 12%);
|
|
--popover-foreground: hsl(210, 40%, 95%);
|
|
--card: hsl(220, 13%, 12%);
|
|
--card-foreground: hsl(210, 40%, 95%);
|
|
--border: hsl(220, 13%, 20%);
|
|
--input: hsl(220, 13%, 15%);
|
|
--primary: hsl(340, 75%, 55%);
|
|
--primary-foreground: hsl(210, 40%, 95%);
|
|
--secondary: hsl(220, 13%, 15%);
|
|
--secondary-foreground: hsl(210, 40%, 85%);
|
|
--accent: hsl(340, 75%, 55%);
|
|
--accent-foreground: hsl(210, 40%, 95%);
|
|
--destructive: hsl(0, 62.8%, 30.6%);
|
|
--destructive-foreground: hsl(210, 40%, 98%);
|
|
--ring: hsl(340, 75%, 55%);
|
|
--radius: 0.75rem;
|
|
|
|
/* Custom video app colors - Temno sivo-črno z roza poudarki */
|
|
--bunny-dark: hsl(220, 13%, 9%);
|
|
--bunny-gray: hsl(220, 13%, 15%);
|
|
--bunny-blue: hsl(340, 75%, 55%);
|
|
--bunny-purple: hsl(350, 70%, 50%);
|
|
--bunny-light: hsl(210, 40%, 95%);
|
|
--bunny-muted: hsl(215, 20%, 55%);
|
|
}
|
|
|
|
.dark {
|
|
--background: hsl(220, 13%, 9%);
|
|
--foreground: hsl(210, 40%, 95%);
|
|
--muted: hsl(220, 13%, 15%);
|
|
--muted-foreground: hsl(215, 20%, 55%);
|
|
--popover: hsl(220, 13%, 12%);
|
|
--popover-foreground: hsl(210, 40%, 95%);
|
|
--card: hsl(220, 13%, 12%);
|
|
--card-foreground: hsl(210, 40%, 95%);
|
|
--border: hsl(220, 13%, 20%);
|
|
--input: hsl(220, 13%, 15%);
|
|
--primary: hsl(340, 75%, 55%);
|
|
--primary-foreground: hsl(210, 40%, 95%);
|
|
--secondary: hsl(220, 13%, 15%);
|
|
--secondary-foreground: hsl(210, 40%, 85%);
|
|
--accent: hsl(340, 75%, 55%);
|
|
--accent-foreground: hsl(210, 40%, 95%);
|
|
--destructive: hsl(0, 62.8%, 30.6%);
|
|
--destructive-foreground: hsl(210, 40%, 98%);
|
|
--ring: hsl(340, 75%, 55%);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply font-sans antialiased bg-background text-foreground;
|
|
background: linear-gradient(135deg, hsl(220, 13%, 9%) 0%, hsl(220, 13%, 12%) 50%, hsl(220, 13%, 15%) 100%);
|
|
color: hsl(210, 40%, 98%);
|
|
min-height: 100vh;
|
|
/* iOS PWA optimizacije */
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
overscroll-behavior: none;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.bunny-dark {
|
|
background: linear-gradient(135deg, hsl(220, 13%, 9%) 0%, hsl(220, 13%, 12%) 100%);
|
|
}
|
|
|
|
.bunny-gray {
|
|
background: linear-gradient(135deg, hsl(220, 13%, 12%) 0%, hsl(220, 13%, 15%) 100%);
|
|
}
|
|
|
|
.gradient-primary {
|
|
background: linear-gradient(135deg, hsl(340, 75%, 55%) 0%, hsl(350, 70%, 50%) 100%);
|
|
}
|
|
|
|
.gradient-card {
|
|
background: linear-gradient(135deg, rgba(30, 30, 35, 0.8) 0%, rgba(40, 40, 45, 0.8) 100%);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(220, 55, 95, 0.2);
|
|
}
|
|
|
|
.bunny-blue {
|
|
background-color: hsl(340, 75%, 55%);
|
|
}
|
|
|
|
.bunny-light {
|
|
color: hsl(210, 40%, 95%);
|
|
}
|
|
|
|
.bunny-muted {
|
|
color: hsl(215, 20%, 55%);
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Hide scrollbars for Netflix-style horizontal scrolling */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none; /* Safari and Chrome */
|
|
}
|
|
|
|
/* Video player volume slider styles */
|
|
.slider {
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slider::-webkit-slider-track {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
background: #ec4c73;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.slider::-moz-range-track {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
border: none;
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
background: #ec4c73;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
/* Animation delays for loading indicators */
|
|
.animation-delay-75 {
|
|
animation-delay: 75ms;
|
|
}
|
|
|
|
.animation-delay-150 {
|
|
animation-delay: 150ms;
|
|
}
|
|
|
|
/* Video.js Player Custom FOLX Theme */
|
|
.video-js .vjs-control-bar {
|
|
background: rgba(236, 76, 115, 0.9) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
}
|
|
|
|
.video-js .vjs-play-progress {
|
|
background: #ec4c73 !important;
|
|
}
|
|
|
|
.video-js .vjs-load-progress {
|
|
background: rgba(236, 76, 115, 0.3) !important;
|
|
}
|
|
|
|
.video-js .vjs-progress-control .vjs-progress-holder {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
}
|
|
|
|
.video-js .vjs-big-play-button {
|
|
background: rgba(236, 76, 115, 0.9) !important;
|
|
border-color: #ec4c73 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.video-js .vjs-big-play-button:hover {
|
|
background: rgba(236, 76, 115, 1) !important;
|
|
}
|
|
|
|
.video-js .vjs-button > .vjs-icon-placeholder:before,
|
|
.video-js .vjs-time-control {
|
|
color: white !important;
|
|
}
|
|
|
|
.video-js .vjs-button:hover {
|
|
background: rgba(236, 76, 115, 0.5) !important;
|
|
}
|
|
|
|
.video-js .vjs-volume-level {
|
|
background: #ec4c73 !important;
|
|
}
|
|
|
|
.video-js .vjs-volume-bar {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
}
|
|
|
|
.video-js .vjs-slider-horizontal .vjs-volume-level {
|
|
background: #ec4c73 !important;
|
|
}
|
|
|
|
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
|
|
background: rgba(236, 76, 115, 0.95) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
}
|
|
|
|
.video-js .vjs-menu li.vjs-selected {
|
|
background: rgba(236, 76, 115, 0.8) !important;
|
|
}
|
|
|
|
.video-js .vjs-menu li:hover {
|
|
background: rgba(236, 76, 115, 0.6) !important;
|
|
}
|
|
|
|
/* Video.js Loading Animation */
|
|
.video-js .vjs-loading-spinner {
|
|
border-color: rgba(236, 76, 115, 0.3) rgba(236, 76, 115, 0.3) rgba(236, 76, 115, 0.3) #ec4c73 !important;
|
|
}
|
|
|
|
.video-js .vjs-loading-spinner:before,
|
|
.video-js .vjs-loading-spinner:after {
|
|
border-color: rgba(236, 76, 115, 0.3) rgba(236, 76, 115, 0.3) rgba(236, 76, 115, 0.3) #ec4c73 !important;
|
|
}
|
|
|
|
/* Custom buffering spinner */
|
|
.video-buffering-spinner {
|
|
border: 2px solid rgba(236, 76, 115, 0.3);
|
|
border-radius: 50%;
|
|
border-top: 2px solid #ec4c73;
|
|
width: 16px;
|
|
height: 16px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
}
|
|
|
|
/* Video edit modal styles */
|
|
.video-edit-modal input,
|
|
.video-edit-modal textarea,
|
|
.video-edit-modal select,
|
|
input[data-testid*="input-video"],
|
|
textarea[data-testid*="input-video"] {
|
|
background-color: #374151 !important;
|
|
color: #ffffff !important;
|
|
border-color: #6b7280 !important;
|
|
}
|
|
|
|
.video-edit-modal input::placeholder,
|
|
.video-edit-modal textarea::placeholder,
|
|
input[data-testid*="input-video"]::placeholder,
|
|
textarea[data-testid*="input-video"]::placeholder {
|
|
color: #d1d5db !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.video-edit-modal {
|
|
background-color: #1f2937 !important;
|
|
}
|
|
|
|
.video-edit-modal label,
|
|
.video-edit-modal .text-gray-700,
|
|
.video-edit-modal .dark\:text-gray-300 {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.video-edit-modal select,
|
|
select[data-testid*="select"],
|
|
.video-edit-modal [role="combobox"],
|
|
.video-edit-modal button[role="combobox"] {
|
|
background-color: #374151 !important;
|
|
color: #ffffff !important;
|
|
border-color: #6b7280 !important;
|
|
}
|
|
|
|
/* Search input styles */
|
|
input[type="search"],
|
|
input[placeholder*="Search"],
|
|
input[data-testid*="search"] {
|
|
background-color: rgba(55, 65, 81, 0.8) !important;
|
|
color: #ffffff !important;
|
|
border-color: #6b7280 !important;
|
|
}
|
|
|
|
input[type="search"]::placeholder,
|
|
input[placeholder*="Search"]::placeholder,
|
|
input[data-testid*="search"]::placeholder {
|
|
color: #d1d5db !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Video card hover effects with gradients */
|
|
.video-card:hover {
|
|
transform: translateY(-2px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.video-card {
|
|
transition: all 0.3s ease;
|
|
background: linear-gradient(135deg, rgba(30, 30, 35, 0.6) 0%, rgba(40, 40, 45, 0.6) 100%);
|
|
border: 1px solid rgba(220, 55, 95, 0.15);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* Modern button styles */
|
|
.gradient-button {
|
|
background: linear-gradient(135deg, hsl(340, 75%, 55%) 0%, hsl(350, 70%, 50%) 100%);
|
|
border: none;
|
|
color: white;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(220, 55, 95, 0.4);
|
|
}
|
|
|
|
.gradient-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(220, 55, 95, 0.5);
|
|
}
|
|
|
|
/* Geometric triangle decorations */
|
|
.triangle-decoration-1 {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 35px solid transparent;
|
|
border-right: 35px solid transparent;
|
|
border-bottom: 50px solid rgba(220, 55, 95, 0.08);
|
|
transform: rotate(15deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.triangle-decoration-2 {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 25px solid transparent;
|
|
border-right: 25px solid transparent;
|
|
border-bottom: 35px solid rgba(220, 55, 95, 0.12);
|
|
transform: rotate(-25deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.triangle-decoration-3 {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 30px solid transparent;
|
|
border-right: 30px solid transparent;
|
|
border-bottom: 40px solid rgba(220, 55, 95, 0.10);
|
|
transform: rotate(45deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Static triangle decorations - no animations to prevent jumping */
|
|
.static-triangles {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Background go4.video logo decorations */
|
|
|
|
.bg-logo-large {
|
|
position: absolute;
|
|
width: clamp(200px, 20vw, 400px);
|
|
height: clamp(100px, 10vw, 200px);
|
|
background-image: url('@assets/folx_MT_poz_b_1756991830394.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
user-select: none;
|
|
opacity: 0.15;
|
|
filter: blur(1px);
|
|
}
|
|
|
|
.bg-logo-medium {
|
|
position: absolute;
|
|
width: clamp(150px, 15vw, 300px);
|
|
height: clamp(75px, 7.5vw, 150px);
|
|
background-image: url('@assets/folx_MT_poz_b_1756991830394.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
user-select: none;
|
|
opacity: 0.12;
|
|
filter: blur(0.5px);
|
|
}
|
|
|
|
.bg-logo-small {
|
|
position: absolute;
|
|
width: clamp(100px, 10vw, 200px);
|
|
height: clamp(50px, 5vw, 100px);
|
|
background-image: url('@assets/folx_MT_poz_b_1756991830394.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
user-select: none;
|
|
opacity: 0.08;
|
|
filter: blur(0.5px);
|
|
}
|
|
|
|
/* Fixed header */
|
|
.header-sticky {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
z-index: 100 !important;
|
|
backdrop-filter: blur(8px);
|
|
background: rgba(30, 20, 40, 0.85) !important;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Add padding to body to account for fixed header */
|
|
.has-fixed-header {
|
|
padding-top: 80px;
|
|
}
|
|
|
|
/* Mobile specific adjustments for header */
|
|
@media (max-width: 768px) {
|
|
.header-sticky {
|
|
background: transparent !important;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.has-fixed-header {
|
|
padding-top: 70px; /* Slightly less padding on mobile */
|
|
}
|
|
}
|
|
|
|
/* Container for main content layout */
|
|
.container {
|
|
max-width: 1400px; /* malo večja širina za več kartic */
|
|
margin: 0 auto; /* centriranje */
|
|
padding: 0 20px; /* malo notranjega roba */
|
|
}
|
|
|
|
/* iOS PWA safe area optimizacije */
|
|
@supports (padding: max(0px)) {
|
|
.has-fixed-header {
|
|
padding-top: max(80px, env(safe-area-inset-top));
|
|
}
|
|
}
|
|
|
|
/* PWA full screen optimizacije za iOS */
|
|
@media (display-mode: standalone) {
|
|
body {
|
|
/* Prepreči povlečenje za osvežitev na iOS */
|
|
overscroll-behavior-y: none;
|
|
/* Prilagodi safe area */
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
.header-sticky {
|
|
top: env(safe-area-inset-top) !important;
|
|
}
|
|
}
|
|
|
|
/* Dodatne mobile optimizacije */
|
|
@media (max-width: 768px) {
|
|
/* Prepreči zoom pri fokusiranju input polj */
|
|
input, select, textarea {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
/* Optimiziraj touch targets za iOS */
|
|
button, a, [role="button"] {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Premakni video kartice malenkost navzgor na mobil */
|
|
[data-testid="grid-videos"] {
|
|
margin-top: -25px;
|
|
}
|
|
|
|
/* Specifični selektorji za mobilne razmike */
|
|
h2.text-lg.font-medium.text-bunny-light.mb-1 {
|
|
margin-bottom: -8px !important;
|
|
margin-top: -10px !important;
|
|
}
|
|
|
|
.md\:hidden.flex.justify-center.mt-1 {
|
|
margin-top: 1px !important;
|
|
margin-bottom: 1px !important;
|
|
}
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes slideLeftRight {
|
|
0%, 100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
50% {
|
|
transform: translateX(150%);
|
|
}
|
|
}
|
|
|
|
/* Skrij Vite error overlay */
|
|
vite-error-overlay {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Test grid overlay - onemogočena */
|
|
/* @media (max-width: 768px) {
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
background-image:
|
|
linear-gradient(rgba(255, 0, 0, 0.3) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 0, 0, 0.3) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
} */ |