/* |-------------------------------------------------------------------------- | VIDEO DRIVE GALLERY | AUTO THUMBNAIL GENERATOR |-------------------------------------------------------------------------- */ /* ========================================== WRAPPER ========================================== */ .vdg-auto-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#fff; padding:20px; box-sizing:border-box; user-select:none; transition:.35s; box-shadow: 0 8px 25px rgba(0,0,0,.15); } /* ========================================== HOVER ========================================== */ .vdg-item:hover .vdg-auto-thumb, .pdg-item:hover .vdg-auto-thumb{ transform:translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.25); } /* ========================================== PATTERN ========================================== */ .vdg-pattern{ position:absolute; inset:0; opacity:.10; pointer-events:none; } /* ========================================== CIRCLE 1 ========================================== */ .vdg-auto-thumb::before{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; top:-80px; right:-70px; background:rgba(255,255,255,.15); } /* ========================================== CIRCLE 2 ========================================== */ .vdg-auto-thumb::after{ content:""; position:absolute; width:160px; height:160px; border-radius:50%; bottom:-60px; left:-40px; background:rgba(255,255,255,.10); } /* ========================================== ICON ========================================== */ .vdg-icon{ position:relative; z-index:5; font-size:72px; line-height:1; margin-bottom:20px; text-shadow: 0 4px 15px rgba(0,0,0,.25); } /* ========================================== TITLE ========================================== */ .vdg-auto-title{ position:relative; z-index:5; font-size:20px; font-weight:700; line-height:1.45; max-width:95%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow: 0 2px 5px rgba(0,0,0,.30); } /* ========================================== FOOTER ========================================== */ .vdg-auto-footer{ position:absolute; left:0; right:0; bottom:0; padding:12px; background:rgba(0,0,0,.18); backdrop-filter:blur(10px); font-size:11px; letter-spacing:2px; font-weight:700; text-transform:uppercase; } /* ========================================== PDF ========================================== */ .vdg-auto-thumb.pdf .vdg-icon{ font-size:68px; } /* ========================================== GLASS ========================================== */ .vdg-auto-thumb .glass{ position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,255,255,.15), rgba(255,255,255,0) ); } /* ========================================== ANIMATION ========================================== */ @keyframes vdgFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } 100%{ transform:translateY(0); } } .vdg-icon{ animation: vdgFloat 4s ease-in-out infinite; } /* ========================================== SHINE ========================================== */ .vdg-auto-thumb .shine{ position:absolute; top:-100%; left:-40%; width:60%; height:300%; transform:rotate(25deg); background: rgba(255,255,255,.18); } .vdg-item:hover .shine, .pdg-item:hover .shine{ animation: vdgShine .8s; } @keyframes vdgShine{ from{ left:-60%; } to{ left:140%; } } /* ========================================== STRIPES ========================================== */ .pattern-stripes{ background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 10px, transparent 10px, transparent 20px ); } /* ========================================== DOTS ========================================== */ .pattern-dots{ background-image: radial-gradient( rgba(255,255,255,.16) 2px, transparent 2px ); background-size:28px 28px; } /* ========================================== GRID ========================================== */ .pattern-grid{ background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:30px 30px; } /* ========================================== WAVES ========================================== */ .pattern-wave{ background-image: radial-gradient( circle at 0 0, rgba(255,255,255,.08), transparent 40% ); } /* ========================================== MOBILE ========================================== */ @media(max-width:768px){ .vdg-icon{ font-size:56px; } .vdg-auto-title{ font-size:17px; } .vdg-auto-footer{ font-size:10px; letter-spacing:1px; } } @media(max-width:480px){ .vdg-icon{ font-size:48px; } .vdg-auto-title{ font-size:15px; } }/* |-------------------------------------------------------------------------- | VIDEO DRIVE GALLERY | AUTO THUMBNAIL GENERATOR |-------------------------------------------------------------------------- */ /* ========================================== WRAPPER ========================================== */ .vdg-auto-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#fff; padding:20px; box-sizing:border-box; user-select:none; transition:.35s; box-shadow: 0 8px 25px rgba(0,0,0,.15); } /* ========================================== HOVER ========================================== */ .vdg-item:hover .vdg-auto-thumb, .pdg-item:hover .vdg-auto-thumb{ transform:translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.25); } /* ========================================== PATTERN ========================================== */ .vdg-pattern{ position:absolute; inset:0; opacity:.10; pointer-events:none; } /* ========================================== CIRCLE 1 ========================================== */ .vdg-auto-thumb::before{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; top:-80px; right:-70px; background:rgba(255,255,255,.15); } /* ========================================== CIRCLE 2 ========================================== */ .vdg-auto-thumb::after{ content:""; position:absolute; width:160px; height:160px; border-radius:50%; bottom:-60px; left:-40px; background:rgba(255,255,255,.10); } /* ========================================== ICON ========================================== */ .vdg-icon{ position:relative; z-index:5; font-size:72px; line-height:1; margin-bottom:20px; text-shadow: 0 4px 15px rgba(0,0,0,.25); } /* ========================================== TITLE ========================================== */ .vdg-auto-title{ position:relative; z-index:5; font-size:20px; font-weight:700; line-height:1.45; max-width:95%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow: 0 2px 5px rgba(0,0,0,.30); } /* ========================================== FOOTER ========================================== */ .vdg-auto-footer{ position:absolute; left:0; right:0; bottom:0; padding:12px; background:rgba(0,0,0,.18); backdrop-filter:blur(10px); font-size:11px; letter-spacing:2px; font-weight:700; text-transform:uppercase; } /* ========================================== PDF ========================================== */ .vdg-auto-thumb.pdf .vdg-icon{ font-size:68px; } /* ========================================== GLASS ========================================== */ .vdg-auto-thumb .glass{ position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,255,255,.15), rgba(255,255,255,0) ); } /* ========================================== ANIMATION ========================================== */ @keyframes vdgFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } 100%{ transform:translateY(0); } } .vdg-icon{ animation: vdgFloat 4s ease-in-out infinite; } /* ========================================== SHINE ========================================== */ .vdg-auto-thumb .shine{ position:absolute; top:-100%; left:-40%; width:60%; height:300%; transform:rotate(25deg); background: rgba(255,255,255,.18); } .vdg-item:hover .shine, .pdg-item:hover .shine{ animation: vdgShine .8s; } @keyframes vdgShine{ from{ left:-60%; } to{ left:140%; } } /* ========================================== STRIPES ========================================== */ .pattern-stripes{ background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 10px, transparent 10px, transparent 20px ); } /* ========================================== DOTS ========================================== */ .pattern-dots{ background-image: radial-gradient( rgba(255,255,255,.16) 2px, transparent 2px ); background-size:28px 28px; } /* ========================================== GRID ========================================== */ .pattern-grid{ background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:30px 30px; } /* ========================================== WAVES ========================================== */ .pattern-wave{ background-image: radial-gradient( circle at 0 0, rgba(255,255,255,.08), transparent 40% ); } /* ========================================== MOBILE ========================================== */ @media(max-width:768px){ .vdg-icon{ font-size:56px; } .vdg-auto-title{ font-size:17px; } .vdg-auto-footer{ font-size:10px; letter-spacing:1px; } } @media(max-width:480px){ .vdg-icon{ font-size:48px; } .vdg-auto-title{ font-size:15px; } } /*================================================== = STYLE 1 - OCEAN BLUE = ==================================================*/ .style-1{ background: linear-gradient(135deg,#1565C0,#42A5F5); } .style-1 .vdg-pattern{ background-image: radial-gradient( rgba(255,255,255,.18) 2px, transparent 2px ); background-size:26px 26px; } /*================================================== = STYLE 2 - EMERALD = ==================================================*/ .style-2{ background: linear-gradient(135deg,#00796B,#26A69A); } .style-2 .vdg-pattern{ background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.10), rgba(255,255,255,.10) 12px, transparent 12px, transparent 24px ); } /*================================================== = STYLE 3 - SUNSET = ==================================================*/ .style-3{ background: linear-gradient(135deg,#FF6F00,#FFB300); } .style-3 .vdg-pattern{ background-image: linear-gradient( rgba(255,255,255,.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.08) 1px, transparent 1px ); background-size:30px 30px; } /*================================================== = STYLE 4 - PURPLE = ==================================================*/ .style-4{ background: linear-gradient(135deg,#6A1B9A,#AB47BC); } .style-4 .vdg-pattern{ background-image: radial-gradient( circle, rgba(255,255,255,.12), transparent 60% ); } /*================================================== = STYLE 5 - CRIMSON = ==================================================*/ .style-5{ background: linear-gradient(135deg,#C62828,#EF5350); } .style-5 .vdg-pattern{ background-image: repeating-radial-gradient( circle, rgba(255,255,255,.12), rgba(255,255,255,.12) 6px, transparent 6px, transparent 20px ); } /*================================================== = STYLE 6 - CYAN = ==================================================*/ .style-6{ background: linear-gradient(135deg,#0097A7,#4DD0E1); } .style-6 .vdg-pattern{ background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 10px, transparent 10px, transparent 20px ); } /*================================================== = STYLE 7 - TEAL = ==================================================*/ .style-7{ background: linear-gradient(135deg,#00695C,#4DB6AC); } .style-7 .vdg-pattern{ background-image: radial-gradient( rgba(255,255,255,.14) 3px, transparent 3px ); background-size:32px 32px; } /*================================================== = STYLE 8 - INDIGO = ==================================================*/ .style-8{ background: linear-gradient(135deg,#283593,#5C6BC0); } .style-8 .vdg-pattern{ background-image: linear-gradient( 135deg, rgba(255,255,255,.08), transparent ); } /*================================================== = STYLE 9 - DARK = ==================================================*/ .style-9{ background: linear-gradient(135deg,#263238,#455A64); } .style-9 .vdg-pattern{ background-image: linear-gradient( rgba(255,255,255,.05) 2px, transparent 2px ), linear-gradient( 90deg, rgba(255,255,255,.05) 2px, transparent 2px ); background-size:34px 34px; } /*================================================== = STYLE 10 - GOLD = ==================================================*/ .style-10{ background: linear-gradient(135deg,#C79100,#FFD54F); } .style-10 .vdg-pattern{ background-image: repeating-linear-gradient( 90deg, rgba(255,255,255,.10), rgba(255,255,255,.10) 8px, transparent 8px, transparent 16px ); } /*================================================== = STYLE 11 - AURORA = ==================================================*/ .style-11{ background: linear-gradient(135deg,#00C9A7,#845EC2); } .style-11 .vdg-pattern{ background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.12), transparent 45%); } /*================================================== = STYLE 12 - GALAXY = ==================================================*/ .style-12{ background: linear-gradient(135deg,#0F2027,#203A43,#2C5364); } .style-12 .vdg-pattern{ background-image: radial-gradient( rgba(255,255,255,.25) 1px, transparent 1px ); background-size:18px 18px; } /*================================================== = STYLE 13 - NEON = ==================================================*/ .style-13{ background: linear-gradient(135deg,#00E5FF,#651FFF); } .style-13 .vdg-pattern{ background-image: repeating-linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 6px, transparent 6px, transparent 18px ); } /*================================================== = STYLE 14 - FOREST = ==================================================*/ .style-14{ background: linear-gradient(135deg,#1B5E20,#43A047); } .style-14 .vdg-pattern{ background-image: repeating-radial-gradient( circle, rgba(255,255,255,.08), rgba(255,255,255,.08) 8px, transparent 8px, transparent 24px ); } /*================================================== = STYLE 15 - ROSE = ==================================================*/ .style-15{ background: linear-gradient(135deg,#D81B60,#F06292); } .style-15 .vdg-pattern{ background-image: radial-gradient( rgba(255,255,255,.15) 2px, transparent 2px ); background-size:22px 22px; } /*================================================== = STYLE 16 - SKY = ==================================================*/ .style-16{ background: linear-gradient(135deg,#29B6F6,#81D4FA); } .style-16 .vdg-pattern{ background-image: linear-gradient( rgba(255,255,255,.10) 1px, transparent 1px ); background-size:26px 26px; } /*================================================== = STYLE 17 - LAVA = ==================================================*/ .style-17{ background: linear-gradient(135deg,#BF360C,#FF7043); } .style-17 .vdg-pattern{ background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 12px, transparent 12px, transparent 24px ); } /*================================================== = STYLE 18 - MIDNIGHT = ==================================================*/ .style-18{ background: linear-gradient(135deg,#232526,#414345); } .style-18 .vdg-pattern{ background-image: radial-gradient( rgba(255,255,255,.10) 2px, transparent 2px ); background-size:20px 20px; } /*================================================== = STYLE 19 - PREMIUM BLACK = ==================================================*/ .style-19{ background: linear-gradient(135deg,#111111,#434343); } .style-19 .vdg-pattern{ background-image: linear-gradient( 45deg, rgba(255,255,255,.06), transparent ); } /*================================================== = STYLE 20 - RAINBOW = ==================================================*/ .style-20{ background: linear-gradient( 135deg, #ff512f, #dd2476, #7b1fa2, #3949ab, #00897b ); } .style-20 .vdg-pattern{ background-image: radial-gradient( rgba(255,255,255,.12) 2px, transparent 2px ); background-size:30px 30px; } /*================================================== = PREMIUM GLASS EFFECT = ==================================================*/ .vdg-auto-thumb{ isolation:isolate; } .vdg-auto-thumb::before{ backdrop-filter:blur(25px); } .vdg-auto-thumb::after{ backdrop-filter:blur(10px); } /*================================================== = LIGHT OVERLAY = ==================================================*/ .vdg-auto-thumb .light{ position:absolute; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40% ); } /*================================================== = DARK OVERLAY = ==================================================*/ .vdg-auto-thumb .dark{ position:absolute; inset:0; pointer-events:none; background: linear-gradient( to top, rgba(0,0,0,.28), transparent 55% ); } /*================================================== = RIBBON = ==================================================*/ .vdg-auto-thumb .ribbon{ position:absolute; top:18px; left:-40px; width:150px; text-align:center; transform:rotate(-35deg); background:rgba(255,255,255,.18); color:#fff; font-size:10px; font-weight:700; letter-spacing:2px; padding:5px 0; text-transform:uppercase; } /*================================================== = CORNER BADGE = ==================================================*/ .vdg-auto-thumb .corner{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:18px; backdrop-filter:blur(10px); } /*================================================== = ICON GLOW = ==================================================*/ .vdg-icon{ filter: drop-shadow( 0 0 15px rgba(255,255,255,.18) ); } /*================================================== = TITLE SHADOW = ==================================================*/ .vdg-auto-title{ text-shadow: 0 3px 12px rgba(0,0,0,.35); } /*================================================== = FOOTER SHADOW = ==================================================*/ .vdg-auto-footer{ box-shadow: inset 0 1px rgba(255,255,255,.12); } /*================================================== = HOVER ZOOM = ==================================================*/ .vdg-item:hover .vdg-auto-thumb{ transform: translateY(-5px) scale(1.02); } /*================================================== = ICON SCALE = ==================================================*/ .vdg-item:hover .vdg-icon, .pdg-item:hover .vdg-icon{ transform:scale(1.08); transition:.35s; } /*================================================== = TITLE SCALE = ==================================================*/ .vdg-item:hover .vdg-auto-title, .pdg-item:hover .vdg-auto-title{ letter-spacing:.4px; } /*================================================== = NOISE = ==================================================*/ .vdg-auto-thumb .noise{ position:absolute; inset:0; opacity:.05; pointer-events:none; background-image: repeating-radial-gradient( circle, rgba(255,255,255,.30), rgba(255,255,255,.30) 1px, transparent 2px, transparent 5px ); } /*================================================== = GRID LINES = ==================================================*/ .vdg-auto-thumb.grid::before{ background-image: linear-gradient( rgba(255,255,255,.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.06) 1px, transparent 1px ); background-size:32px 32px; } /*================================================== = CIRCLE PATTERN = ==================================================*/ .vdg-auto-thumb.circle .vdg-pattern{ background-image: radial-gradient( rgba(255,255,255,.12) 2px, transparent 2px ); background-size:22px 22px; } /*================================================== = DIAGONAL PATTERN = ==================================================*/ .vdg-auto-thumb.diagonal .vdg-pattern{ background-image: repeating-linear-gradient( 135deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 8px, transparent 8px, transparent 20px ); } /*================================================== = WAVES = ==================================================*/ .vdg-auto-thumb.wave .vdg-pattern{ background-image: radial-gradient( circle at 0 0, rgba(255,255,255,.10), transparent 45% ); } /*================================================== = BORDER = ==================================================*/ .vdg-auto-thumb{ border: 1px solid rgba(255,255,255,.08); } /*================================================== = PDF ICON = ==================================================*/ .vdg-auto-thumb.pdf .vdg-icon{ color:#fff; } /*================================================== = VIDEO ICON = ==================================================*/ .vdg-auto-thumb:not(.pdf) .vdg-icon{ color:#fff; } /*================================================== = RESPONSIVE = ==================================================*/ @media(max-width:992px){ .vdg-auto-thumb{ border-radius:14px; } } @media(max-width:768px){ .vdg-auto-thumb{ padding:16px; } .vdg-auto-title{ font-size:17px; } .vdg-icon{ font-size:58px; } } @media(max-width:576px){ .vdg-auto-thumb{ border-radius:12px; } .vdg-auto-title{ font-size:15px; } .vdg-icon{ font-size:46px; } .vdg-auto-footer{ font-size:9px; } } .vdg-thumb-image, .pdg-thumb-image{ width:100%; height:100%; position:relative; } .vdg-fallback-thumb, .pdg-fallback-thumb{ width:100%; height:100%; display:flex; } /*================================================== = END = ==================================================*/