File manager - Edit - /home/webapp69.cm.in.th/u69319090040/01 Portfolio/style.css
Back
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root { --font-title: 'Kanit', sans-serif; --font-body: 'Prompt', sans-serif; --primary: 14, 165, 233; /* sky-500 */ --primary-hover: 2, 132, 199; /* sky-600 */ --accent: 59, 130, 246; /* blue-500 */ /* Light Theme Variables */ --bg-main: 248, 250, 252; /* slate-50 */ --bg-card: 255, 255, 255; --bg-nav: 255, 255, 255, 0.7; --text-main: 15, 23, 42; /* slate-900 */ --text-muted: 71, 85, 105; /* slate-600 */ --border-color: 226, 232, 240; /* slate-200 */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .dark { /* Dark Theme Variables */ --bg-main: 15, 23, 42; /* slate-900 */ --bg-card: 30, 41, 59; /* slate-800 */ --bg-nav: 15, 23, 42, 0.7; --text-main: 243, 244, 246; /* slate-100 */ --text-muted: 156, 163, 175; /* slate-400 */ --border-color: 51, 65, 85; /* slate-700 */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); } * { font-family: var(--font-body); scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(var(--bg-main), 1); } ::-webkit-scrollbar-thumb { background: rgb(var(--primary)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--primary-hover)); } /* Glassmorphism Classes */ .glass-panel { background: rgba(var(--bg-card), 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--border-color), 0.5); } .glass-nav { background: rgba(var(--bg-nav)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(var(--border-color), 0.3); } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 4s ease-in-out infinite; } @keyframes pulse-slow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.05); } } .animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; } /* Scroll reveal initial states */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-left.active { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(40px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-right.active { opacity: 1; transform: translateX(0); } /* Stagger reveals */ .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* Timeline connector styling */ .timeline-dot::after { content: ''; position: absolute; width: 12px; height: 12px; background-color: rgb(var(--primary)); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(var(--primary), 0.3); } /* Dark/Light mode overrides */ body { background-color: rgba(var(--bg-main), 1); color: rgba(var(--text-main), 1); transition: background-color 0.3s, color 0.3s, border-color 0.3s; } /* Loading Spinner */ .spinner { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(farthest-side, rgb(var(--primary)) 94%, #0000) top/9px 9px no-repeat, conic-gradient(#0000 30%, rgb(var(--primary))); -webkit-mask: radial-gradient(farthest-side, #0000 40px, #000 41px); mask: radial-gradient(farthest-side, #0000 40px, #000 41px); animation: spinner-c74ag5 1s infinite linear; } @keyframes spinner-c74ag5 { 100% { transform: rotate(1turn); } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.24 |
proxy
|
phpinfo
|
Settings