File manager - Edit - /home/webapp69.cm.in.th/u69319090015/Portfolio/assets/css/style.css
Back
/* Custom Style - Portfolio Web Application */ :root { /* Light Mode values */ --color-bg: #F8FAFC; --color-bg-mesh: rgba(248, 250, 252, 0.95); --color-nav-bg: rgba(248, 250, 252, 0.8); --color-card: rgba(255, 255, 255, 0.7); --color-border: rgba(0, 0, 0, 0.08); --color-border-hover: rgba(99, 102, 241, 0.35); --color-primary: #4F46E5; --color-secondary: #0891B2; --color-emerald: #059669; --color-text: #1E293B; --color-nav-link: #64748B; --color-grid-line: rgba(0, 0, 0, 0.02); --color-glow-1: rgba(99, 102, 241, 0.05); --color-glow-2: rgba(6, 182, 212, 0.05); } [data-theme="dark"] { /* Dark Mode values */ --color-bg: #0B0F19; --color-bg-mesh: rgba(11, 15, 25, 0.95); --color-nav-bg: rgba(11, 15, 25, 0.75); --color-card: rgba(17, 24, 39, 0.7); --color-border: rgba(255, 255, 255, 0.08); --color-border-hover: rgba(99, 102, 241, 0.4); --color-primary: #6366F1; --color-secondary: #06B6D4; --color-emerald: #10B981; --color-text: #F3F4F6; --color-nav-link: #94A3B8; --color-grid-line: rgba(255, 255, 255, 0.007); --color-glow-1: rgba(99, 102, 241, 0.08); --color-glow-2: rgba(6, 182, 212, 0.08); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 9999px; border: 2px solid var(--color-bg); } ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.6); } /* Smooth Scrolling & Theme Transition */ html { scroll-behavior: smooth; font-family: 'Outfit', 'Prompt', sans-serif; background-color: var(--color-bg); color: var(--color-text); -webkit-tap-highlight-color: transparent; transition: background-color 0.3s ease, color 0.3s ease; } /* Base Body Grid Overlay background */ body { position: relative; min-height: 100vh; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } .bg-grid-glow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: radial-gradient(circle at 10% 20%, var(--color-glow-1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, var(--color-glow-2) 0%, transparent 40%), linear-gradient(var(--color-bg-mesh), var(--color-bg-mesh)); transition: background-image 0.3s ease; } /* Custom Grid Mesh effect */ .bg-grid-glow::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 70%, transparent 100%); pointer-events: none; transition: background-image 0.3s ease; } /* Glassmorphism Styles */ .glass-panel { background: var(--color-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] .glass-panel { box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); } .glass-panel:hover { border-color: var(--color-border-hover); box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.2); } .glass-nav { background: var(--color-nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); transition: background-color 0.3s ease, border-color 0.3s ease; } /* Custom Text typing animation cursor */ .typing-cursor::after { content: '|'; margin-left: 2px; animation: blink 0.8s steps(2, start) infinite; color: var(--color-secondary); } @keyframes blink { to { opacity: 0; } } /* Active Navigation link styles */ .nav-link { position: relative; color: var(--color-nav-link); transition: color 0.3s ease; } .nav-link.active, .nav-link:hover { color: var(--color-primary); } .glass-nav .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: width 0.3s ease; } .glass-nav .nav-link.active::after, .glass-nav .nav-link:hover::after { width: 100%; } /* Interactive Timeline Styles */ .timeline-dot::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--color-primary); opacity: 0.3; animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse-ring { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.6); opacity: 0; } } /* Floating Animation */ .float-animation { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1deg); } } /* Glowing Button Hover Effects */ .btn-glow { position: relative; overflow: hidden; z-index: 1; } .btn-glow::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); transition: 0.5s; z-index: -1; } .btn-glow:hover::before { left: 100%; } /* Modal Open state animations */ .modal-enter { opacity: 0; transform: scale(0.95); } .modal-enter-active { opacity: 1; transform: scale(1); transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-exit { opacity: 1; transform: scale(1); } .modal-exit-active { opacity: 0; transform: scale(0.95); transition: opacity 0.2s ease-in, transform 0.2s ease-in; }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.25 |
proxy
|
phpinfo
|
Settings