File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090049/portfolio/style.css

Back
/* Style Sheet for Developer Portfolio (Natpathan Bunmee) Theme: Modern Cyber Dark Mode with Interactive Overclock Styling / @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap'); :root { / Color Palette - Default Mode (Shadow Monarch Theme - Violet/Cyan) / --bg-main: #07040f; / Deep Shadow Purple-Black / --bg-card: rgba(17, 8, 31, 0.65); / Translucent Deep Purple Card / --border-color: rgba(139, 92, 246, 0.15); / Violet Tinted Border / --text-primary: #f8fafc; --text-secondary: #a78bfa; / Soft Violet Secondary / --color-accent: #8b5cf6; / Monarch Purple Aura / --color-accent-rgb: 139, 92, 246; --color-secondary: #00d2ff; / Monarch Eye Blue/Cyan Glow / --color-secondary-rgb: 0, 210, 255; --glow-shadow: 0 0 22px rgba(139, 92, 246, 0.45); --glow-secondary: 0 0 22px rgba(0, 210, 255, 0.45); --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --transition-speed: 0.3s; } / Overclocked Mode (Awakened Monarch Domain - Pinkish Magenta/Crimson) / body.overclocked { --bg-main: #0f020a; / Deep Crimson-Magenta-Black / --bg-card: rgba(31, 5, 20, 0.65); --border-color: rgba(244, 63, 94, 0.2); --color-accent: #d946ef; / Awakened Magenta / --color-accent-rgb: 217, 70, 239; --color-secondary: #f43f5e; / Shadow Crimson Aura / --color-secondary-rgb: 244, 63, 94; --glow-shadow: 0 0 25px rgba(217, 70, 239, 0.6); --glow-secondary: 0 0 25px rgba(244, 63, 94, 0.6); } / Reset and Core Styles / { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } /* Hide default cursor on desktop screens / body { background-color: var(--bg-main); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; transition: background-color 0.8s cubic-bezier(0.25, 1, 0.5, 1), color var(--transition-speed); } / Background Canvas for Shadow Energy Particles / #shadow-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; } / Scrollbar Customization / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } / Base Layout & Utilities / .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } section { padding: 6rem 0; position: relative; z-index: 1; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; } .text-gradient { background: linear-gradient(135deg, var(--color-accent), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background var(--transition-speed); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.8rem; border-radius: 50px; font-family: var(--font-heading); font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease; border: none; } .btn-primary { background: linear-gradient(135deg, var(--color-accent), var(--color-secondary)); color: #fff; box-shadow: var(--glow-shadow); } .btn-primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 30px rgba(var(--color-accent-rgb), 0.4), 0 0 20px rgba(var(--color-secondary-rgb), 0.4); } .btn-secondary { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: rgba(var(--color-accent-rgb), 0.1); border-color: var(--color-accent); color: #fff; transform: translateY(-4px) scale(1.02); box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.3); } / Glass Card Style / .glass-card { background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .glass-card:hover { border-color: var(--color-accent); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(var(--color-accent-rgb), 0.25), inset 0 0 15px rgba(var(--color-accent-rgb), 0.1); transform: translateY(-5px); } / Header & Navigation / header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(10, 15, 29, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); transition: background var(--transition-speed); } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 80px; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--text-primary); text-decoration: none; letter-spacing: -0.5px; } .logo span { color: var(--color-accent); } .nav-menu { display: flex; list-style: none; gap: 2rem; align-items: center; } .nav-link { position: relative; color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: color 0.3s, text-shadow 0.3s; font-size: 0.95rem; } .nav-link:hover { color: var(--color-secondary); text-shadow: 0 0 10px rgba(var(--color-secondary-rgb), 0.7); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--color-accent), var(--color-secondary)); box-shadow: 0 0 8px var(--color-secondary); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-toggle { display: none; font-size: 1.5rem; color: var(--text-primary); cursor: pointer; transition: color var(--transition-speed); } .nav-toggle:hover { color: var(--color-accent); } / Overclock Trigger Widget / .oc-widget { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); padding: 0.4rem 1rem; border-radius: 50px; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; transition: all 0.3s ease; } .oc-widget:hover { background: rgba(var(--color-accent-rgb), 0.1); border-color: var(--color-accent); } .oc-indicator { width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 8px var(--color-accent); animation: pulse 1.5s infinite; } .oc-text { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } / Hero Section / .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 100px; background-image: radial-gradient(circle at 10% 20%, rgba(var(--color-accent-rgb), 0.05) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(var(--color-secondary-rgb), 0.05) 0%, transparent 40%); } .hero-wrapper { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; } .hero-badge { background: rgba(var(--color-accent-rgb), 0.1); color: var(--color-accent); border: 1px solid rgba(var(--color-accent-rgb), 0.2); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .hero-badge i { font-size: 0.8rem; } .hero-title { font-size: 4rem; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -1.5px; } .hero-desc { color: var(--text-secondary); font-size: 1.2rem; margin-bottom: 2.5rem; max-width: 600px; } .hero-actions { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 3rem; } .social-links { display: flex; gap: 1.2rem; } .social-icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 1.2rem; text-decoration: none; transition: all 0.3s ease; } .social-icon:hover { color: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.08); border-color: var(--color-accent); transform: translateY(-3px); } / System Dashboard Graphic (Hero Interactive Side) / .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .system-dashboard { width: 100%; max-width: 400px; padding: 2rem; background: rgba(10, 15, 29, 0.85); border: 1px solid var(--border-color); border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); position: relative; z-index: 2; } .sys-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1.5rem; } .sys-dots { display: flex; gap: 0.4rem; } .sys-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .sys-dots span:nth-child(1) { background: #ef4444; } .sys-dots span:nth-child(2) { background: #eab308; } .sys-dots span:nth-child(3) { background: #22c55e; } .sys-title { font-size: 0.75rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-secondary); } .stat-group { display: flex; flex-direction: column; gap: 1.2rem; } .stat-item { display: flex; flex-direction: column; gap: 0.4rem; } .stat-info { display: flex; justify-content: space-between; font-size: 0.85rem; } .stat-label { color: var(--text-secondary); } .stat-value { font-family: var(--font-heading); font-weight: 700; color: var(--color-accent); } .stat-bar-outer { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; } .stat-bar-inner { height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-secondary)); width: 45%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), background 0.8s; } .system-status-indicator { margin-top: 1.5rem; padding: 0.8rem; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 10px; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); } .system-status-indicator span { color: var(--color-accent); } / Background Ring Animations / .glow-ring { position: absolute; width: 120%; height: 120%; border: 1px dashed rgba(var(--color-accent-rgb), 0.15); border-radius: 50%; z-index: 1; animation: rotate 30s linear infinite; pointer-events: none; will-change: transform; } .glow-ring-2 { position: absolute; width: 140%; height: 140%; border: 1px solid rgba(var(--color-secondary-rgb), 0.05); border-radius: 50%; z-index: 1; animation: rotate-reverse 45s linear infinite; pointer-events: none; will-change: transform; } / About Section / .section-title-wrapper { text-align: center; margin-bottom: 4rem; } .section-tagline { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--color-accent); margin-bottom: 0.5rem; font-weight: 600; } .section-title { font-size: 2.5rem; letter-spacing: -1px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-text { display: flex; flex-direction: column; gap: 1.5rem; } .about-text p { color: var(--text-secondary); font-size: 1.05rem; } .personal-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; } .detail-item { display: flex; flex-direction: column; } .detail-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .detail-value { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); } .about-timeline { position: relative; border-left: 2px solid var(--border-color); padding-left: 2rem; margin-left: 0.5rem; } .timeline-item { position: relative; margin-bottom: 2.5rem; } .timeline-item:last-child { margin-bottom: 0; } .timeline-dot { position: absolute; left: calc(-2rem - 6px); top: 6px; width: 10px; height: 10px; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 10px var(--color-accent); } .timeline-date { font-size: 0.85rem; color: var(--color-accent); font-weight: 700; margin-bottom: 0.3rem; } .timeline-title { font-size: 1.2rem; margin-bottom: 0.5rem; } .timeline-desc { color: var(--text-secondary); font-size: 0.95rem; } / Skills Section / .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } .skills-column-title { font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; } .skills-column-title i { color: var(--color-accent); } .skills-list { display: flex; flex-direction: column; gap: 1.5rem; } .skill-card { display: flex; align-items: center; gap: 1.5rem; } .skill-icon { width: 50px; height: 50px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--color-accent); flex-shrink: 0; transition: all 0.3s; } .skill-card:hover .skill-icon { background: rgba(var(--color-accent-rgb), 0.1); border-color: var(--color-accent); transform: scale(1.05); } .skill-details { flex-grow: 1; } .skill-name-row { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 0.4rem; } .skill-level { color: var(--text-secondary); font-size: 0.85rem; } .skill-bar-outer { height: 5px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; } .skill-bar-inner { height: 100%; background: var(--color-accent); border-radius: 3px; transition: width 1s ease-out; } / Projects Section / .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 2rem; } .project-card { display: flex; flex-direction: column; height: 100%; } .project-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .project-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); font-weight: 600; } .project-links { display: flex; gap: 1rem; } .project-link { color: var(--text-secondary); font-size: 1.1rem; transition: color 0.3s; } .project-link:hover { color: var(--color-accent); } .project-title { font-size: 1.4rem; margin-bottom: 1rem; } .project-desc { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; } .project-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .project-tag { font-size: 0.75rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); padding: 0.3rem 0.8rem; border-radius: 50px; color: var(--text-secondary); font-weight: 500; } / Contact Section / .contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } .contact-info { display: flex; flex-direction: column; gap: 2rem; } .contact-info-title { font-size: 1.8rem; margin-bottom: 0.5rem; } .contact-info-desc { color: var(--text-secondary); } .contact-methods { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; } .contact-method-card-link { text-decoration: none; color: inherit; display: block; } .contact-method-card { display: flex; align-items: center; gap: 1.2rem; transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } .contact-method-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--color-accent); transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } .contact-method-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; } .contact-method-value { font-weight: 600; color: var(--text-primary); text-decoration: none; transition: color 0.25s ease; } / Hover effects directly on the card or card link container / .contact-method-card-link:hover .contact-method-card, .contact-method-card:hover { transform: translateX(6px); } .contact-method-card-link:hover .contact-method-icon, .contact-method-card:hover .contact-method-icon { background: rgba(var(--color-accent-rgb), 0.12); border-color: var(--color-accent); color: #ffffff; box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.35); transform: scale(1.05); } .contact-method-card-link:hover .contact-method-value, .contact-method-card:hover .contact-method-value { color: var(--color-accent); } / Clipboard Copy Tooltip / .copy-tooltip { position: absolute; background: var(--color-accent); color: #ffffff; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; transform: translateY(-2px); margin-left: 0.8rem; display: inline-block; vertical-align: middle; box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.5); font-weight: 600; } .copy-tooltip::after { content: ''; position: absolute; top: 50%; left: -4px; margin-top: -4px; border-width: 4px 4px 4px 0; border-style: solid; border-color: transparent var(--color-accent) transparent transparent; } .copy-tooltip.show { opacity: 1; transform: translateY(-2px) translateX(2px); } .contact-form-wrapper { width: 100%; } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); } .form-input { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.8rem 1rem; color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; transition: all 0.3s; } .form-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.15); background: rgba(255, 255, 255, 0.04); } textarea.form-input { resize: vertical; min-height: 150px; } / Footer / footer { padding: 3rem 0; border-top: 1px solid var(--border-color); text-align: center; background: rgba(10, 15, 29, 0.9); } .footer-logo { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; text-decoration: none; color: var(--text-primary); display: inline-block; margin-bottom: 1rem; } .footer-logo span { color: var(--color-accent); } .footer-text { font-size: 0.85rem; color: var(--text-secondary); } / Animations / @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.7); } 70% { box-shadow: 0 0 0 8px rgba(var(--color-accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } / Mobile & Cross-Device Responsiveness (PC, Mac, iOS, Android) / / General Overflow & Scroll Fixes (Especially for Safari macOS/iOS) / body { max-width: 100%; overflow-x: hidden; } section, header, footer { max-width: 100%; overflow: hidden; / standard modern overflow hidden / } #hero { overflow: hidden; / prevents glowing circles from breaking horizontal scroll on Safari / } / Laptops & Tablets (1024px and below) / @media (max-width: 1024px) { html { font-size: 15px; } .container { padding: 0 1.5rem; } section { padding: 5rem 0; } .hero-wrapper { gap: 2.5rem; } .hero-title { font-size: 3.2rem; } } / Tablets (992px and below) / @media (max-width: 992px) { .hero-wrapper { grid-template-columns: 1fr; gap: 3.5rem; text-align: center; } .hero-desc { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .social-links { justify-content: center; } .about-grid { grid-template-columns: 1fr; gap: 3rem; } .skills-grid { grid-template-columns: 1fr; gap: 2.5rem; } .contact-grid { grid-template-columns: 1fr; gap: 3.5rem; } } / Mobile Devices (768px and below) / @media (max-width: 768px) { / Responsive Header & Hamburger Menu / .nav-toggle { display: block; order: 3; } .oc-widget { order: 2; margin-right: 0.5rem; } .logo { order: 1; } .nav-menu { display: none; flex-direction: column; position: absolute; top: 80px; left: 0; width: 100%; background: rgba(10, 15, 29, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); padding: 2.5rem 1.5rem; gap: 1.5rem; text-align: center; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.55); z-index: 999; } .nav-menu.active { display: flex; } .form-row-2 { grid-template-columns: 1fr; gap: 1.5rem; } .hero-title { font-size: 2.8rem; } } / Small Smart Phones (480px and below - iPhone SE/Mini, Android) / @media (max-width: 480px) { html { font-size: 14px; } .container { padding: 0 1.2rem; } section { padding: 4rem 0; } .logo { font-size: 1.25rem; } .hero-title { font-size: 2.4rem; } .hero-actions { flex-direction: column; width: 100%; gap: 1rem; } .hero-actions .btn { width: 100%; } .personal-details { grid-template-columns: 1fr; gap: 1rem; } .about-timeline { padding-left: 1.2rem; } .timeline-dot { left: calc(-1.2rem - 6px); } .contact-form-wrapper { padding: 1.5rem; } .system-dashboard { padding: 1.5rem 1.2rem; } } / Ultra Small Screens (380px and below) / @media (max-width: 380px) { .oc-text { display: none; / Hide overclock mode text to fit on small iPhones / } .oc-widget { padding: 0.4rem 0.5rem; } } / Floating Music Player Widget / .music-player { position: fixed; bottom: 2rem; right: 2rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid var(--border-color); background: rgba(17, 8, 31, 0.85); box-shadow: var(--glow-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); width: 320px; } .music-player:hover { border-color: var(--color-accent); box-shadow: 0 15px 35px rgba(var(--color-accent-rgb), 0.25), inset 0 0 10px rgba(var(--color-accent-rgb), 0.05); } .music-info { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 0.6rem; } / Sound Wave Visualizer / .music-visualizer { display: flex; align-items: flex-end; gap: 2.5px; width: 38px; height: 24px; padding-bottom: 2px; } .music-visualizer span { width: 3px; height: 24px; / Set base height to full height / border-radius: 3px; background: linear-gradient(to top, var(--color-accent), var(--color-secondary)); filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.5)); transform-origin: bottom; / scale from the bottom up / transform: scaleY(0.25); / default initial scale / transition: transform 0.2s ease; animation: idle-wave 2s ease-in-out infinite alternate; will-change: transform; } / Staggered animation delays for the idle state / .music-visualizer span:nth-child(1) { animation-delay: 0.1s; } .music-visualizer span:nth-child(2) { animation-delay: 0.3s; } .music-visualizer span:nth-child(3) { animation-delay: 0.5s; } .music-visualizer span:nth-child(4) { animation-delay: 0.7s; } .music-visualizer span:nth-child(5) { animation-delay: 0.4s; } .music-visualizer span:nth-child(6) { animation-delay: 0.2s; } .music-visualizer span:nth-child(7) { animation-delay: 0.6s; } / Visualizer animation when playing / .music-visualizer.playing span { animation: bounce-wave 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate; } .music-visualizer.playing span:nth-child(1) { animation-delay: 0.05s; } .music-visualizer.playing span:nth-child(2) { animation-delay: 0.25s; } .music-visualizer.playing span:nth-child(3) { animation-delay: 0.45s; } .music-visualizer.playing span:nth-child(4) { animation-delay: 0.15s; } .music-visualizer.playing span:nth-child(5) { animation-delay: 0.35s; } .music-visualizer.playing span:nth-child(6) { animation-delay: 0.55s; } .music-visualizer.playing span:nth-child(7) { animation-delay: 0.20s; } @keyframes idle-wave { 0% { transform: scaleY(0.16); } / ~4px / 100% { transform: scaleY(0.42); } / ~10px / } @keyframes bounce-wave { 0% { transform: scaleY(0.2); } / ~5px / 100% { transform: scaleY(1.0); } / ~24px / } .music-text { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; } .music-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .music-artist { font-size: 0.7rem; color: var(--text-secondary); } / Controls / .music-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .music-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; flex-shrink: 0; } .music-btn:hover { background: rgba(var(--color-accent-rgb), 0.15); border-color: var(--color-accent); color: #fff; transform: scale(1.08); box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.3); } #music-play { background: linear-gradient(135deg, var(--color-accent), var(--color-secondary)); color: #fff; border: none; } #music-play:hover { box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.6); } / Volume range custom slider / .volume-container { display: flex; align-items: center; gap: 0.6rem; flex-grow: 1; max-width: 200px; } .volume-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--color-secondary) 0%, var(--color-accent) var(--volume-percent, 50%), rgba(255, 255, 255, 0.08) var(--volume-percent, 50%), rgba(255, 255, 255, 0.08) 100%); outline: none; transition: height 0.2s ease, background 0.1s ease; cursor: pointer; } .volume-container:hover .volume-slider { height: 6px; } / Webkit browser thumb support / .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; border: 2px solid var(--color-secondary); cursor: pointer; box-shadow: 0 0 8px rgba(var(--color-secondary-rgb), 0.5); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .volume-container:hover .volume-slider::-webkit-slider-thumb { transform: scale(1.2); background: var(--color-secondary); border-color: #ffffff; box-shadow: 0 0 12px var(--color-secondary); } .volume-slider::-webkit-slider-thumb:hover { transform: scale(1.4) !important; background: var(--color-accent); border-color: #ffffff; box-shadow: 0 0 18px var(--color-accent); } / Firefox browser thumb support */ .volume-slider::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--color-secondary); border-radius: 50%; background: #ffffff; cursor: pointer; box-shadow: 0 0 8px rgba(var(--color-secondary-rgb), 0.5); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .volume-container:hover .volume-slider::-moz-range-thumb { transform: scale(1.2); background: var(--color-secondary); border-color: #ffffff; box-shadow: 0 0 12px var(--color-secondary); } .volume-slider::-moz-range-thumb:hover { transform: scale(1.4) !important; background: var(--color-accent); border-color: #ffffff; box-shadow: 0 0 18px var(--color-accent); } @media (max-width: 768px) { .music-player { bottom: 1.5rem; right: 1.5rem; width: 280px; padding: 0.8rem 1rem; } .music-title { max-width: 180px; } }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.32 | proxy | phpinfo | Settings