File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090020/Portfolio/020 สิปปกร วงค์พรหม/style.css

Back
/* Custom CSS for Sippakorn Wongprom's Premium Portfolio Handles fine-tuned UI transitions, glassmorphism borders, and interactive animations. / @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap'); :root { --font-display: 'Outfit', 'Sarabun', sans-serif; } body { font-family: var(--font-display); scroll-behavior: smooth; transition: background-color 0.5s ease, color 0.3s ease; } / Glassmorphism custom styles / .glass-panel { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05); } .dark .glass-panel { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } / Floating animation for tech graphics / @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } } .animate-float { animation: float 6s ease-in-out infinite; } / Pulse Glow effect / @keyframes pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } } .pulse-glow-violet { animation: pulse-glow 8s ease-in-out infinite; } / Custom transitions / .transition-theme { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } / Hover glow for project cards / .project-card { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } @media (hover: hover) { .project-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.25); } .dark .project-card:hover { box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.45); } } / Dynamic Gradient Background Circles / .gradient-blob { position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(100px); z-index: 0; pointer-events: none; } / Mobile responsive fixes / @media (max-width: 640px) { .gradient-blob { width: 250px; height: 250px; filter: blur(60px); } } / Yellow Theme Overrides / .theme-yellow { --color-primary: #fbbf24; } / Force all green, emerald, and teal text colors (including opacity classes) to turn yellow/amber / .theme-yellow [class="text-emerald"], .theme-yellow [class="text-teal"], .theme-yellow [class="text-green"] { color: #fbbf24 !important; } /* Solid background overrides / .theme-yellow .bg-emerald-500, .theme-yellow .bg-emerald-600, .theme-yellow .bg-teal-500, .theme-yellow .bg-emerald-550, .theme-yellow .bg-emerald-100, .theme-yellow .bg-green-100, .theme-yellow .bg-teal-100 { background-color: #fbbf24 !important; color: #000000 !important; } / Low-opacity background overrides (for cards, inputs, decorative elements) / .theme-yellow .bg-emerald-50, .theme-yellow .bg-teal-50, .theme-yellow [class="bg-emerald-950"], .theme-yellow [class="bg-teal-950"], .theme-yellow [class="bg-green-950"], .theme-yellow [class="bg-emerald-500/"], .theme-yellow [class="bg-teal-500/"] { background-color: rgba(251, 191, 36, 0.15) !important; } /* Border overrides / .theme-yellow [class="border-emerald"], .theme-yellow [class="border-teal"], .theme-yellow [class="border-green"], .theme-yellow .border-slate-200\/60 { border-color: rgba(251, 191, 36, 0.4) !important; } /* Gradient overrides / .theme-yellow .from-emerald-500, .theme-yellow .from-emerald-600 { --tw-gradient-from: #fbbf24 !important; --tw-gradient-to: rgb(251 191 36 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .theme-yellow .via-green-400 { --tw-gradient-stops: var(--tw-gradient-from), #f59e0b 50%, var(--tw-gradient-to) !important; } .theme-yellow .to-teal-400, .theme-yellow .to-teal-500, .theme-yellow .dark\:to-teal-300 { --tw-gradient-to: #d97706 !important; } / Update glow blobs too / .theme-yellow .gradient-blob { background-color: rgba(251, 191, 36, 0.15) !important; } / Glow/border highlight when locked in yellow theme / .profile-container.is-locked { border: 3px solid #fbbf24 !important; box-shadow: 0 0 20px rgba(251, 191, 36, 0.6) !important; } / Ensure all link icons and text are yellow in the yellow theme / .theme-yellow a svg, .theme-yellow a i, .theme-yellow a span { color: #fbbf24 !important; } / Let hover color inherit properly when user hovers / .theme-yellow a:hover svg, .theme-yellow a:hover i { color: inherit !important; } / Red/Rose Theme Overrides (For Light Mode contrast) / .theme-red { --color-primary: #f43f5e; } / Force all green, emerald, and teal text colors to turn rose/pink / .theme-red [class="text-emerald"], .theme-red [class="text-teal"], .theme-red [class="text-green"] { color: #f43f5e !important; } /* Solid background overrides / .theme-red .bg-emerald-500, .theme-red .bg-emerald-600, .theme-red .bg-teal-500, .theme-red .bg-emerald-550, .theme-red .bg-emerald-100, .theme-red .bg-green-100, .theme-red .bg-teal-100 { background-color: #f43f5e !important; color: #ffffff !important; } / Low-opacity background overrides / .theme-red .bg-emerald-50, .theme-red .bg-teal-50, .theme-red [class="bg-emerald-950"], .theme-red [class="bg-teal-950"], .theme-red [class="bg-green-950"], .theme-red [class="bg-emerald-500/"], .theme-red [class="bg-teal-500/"] { background-color: rgba(244, 63, 94, 0.15) !important; } /* Border overrides / .theme-red [class="border-emerald"], .theme-red [class="border-teal"], .theme-red [class="border-green"], .theme-red .border-slate-200\/60 { border-color: rgba(244, 63, 94, 0.4) !important; } /* Gradient overrides (Rose to Pink) / .theme-red .from-emerald-500, .theme-red .from-emerald-600 { --tw-gradient-from: #f43f5e !important; --tw-gradient-to: rgb(244 63 94 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .theme-red .via-green-400 { --tw-gradient-stops: var(--tw-gradient-from), #ec4899 50%, var(--tw-gradient-to) !important; } .theme-red .to-teal-400, .theme-red .to-teal-500, .theme-red .dark\:to-teal-300 { --tw-gradient-to: #db2777 !important; } / Update glow blobs too / .theme-red .gradient-blob { background-color: rgba(244, 63, 94, 0.15) !important; } / Glow/border highlight when locked in red theme / .theme-red .profile-container.is-locked { border: 3px solid #f43f5e !important; box-shadow: 0 0 20px rgba(244, 63, 94, 0.6) !important; } / Ensure all link icons and text are rose in the red theme / .theme-red a svg, .theme-red a i, .theme-red a span { color: #f43f5e !important; } .theme-red a:hover svg, .theme-red a:hover i { color: inherit !important; } / Safe area padding for mobile bottom bar / .safe-bottom { padding-bottom: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } / Bottom active link highlight class / .mobile-bottom-link.active { color: #10b981 !important; / Emerald-500 / } .dark .mobile-bottom-link.active { color: #34d399 !important; / Emerald-400 / } / Yellow theme override for active state / .theme-yellow .mobile-bottom-link.active { color: #fbbf24 !important; } / Red theme override for active state / .theme-red .mobile-bottom-link.active { color: #f43f5e !important; } / Sidebar link glow active state / .sidebar-link.active { color: #10b981 !important; / Emerald-500 / background: rgba(16, 185, 129, 0.1); box-shadow: 0 0 15px rgba(16, 185, 129, 0.25); border: 1px solid rgba(16, 185, 129, 0.25); } .dark .sidebar-link.active { color: #34d399 !important; / Emerald-400 / background: rgba(52, 211, 153, 0.15); box-shadow: 0 0 20px rgba(52, 211, 153, 0.35); border: 1px solid rgba(52, 211, 153, 0.3); } / Yellow theme override for active sidebar link / .theme-yellow .sidebar-link.active { color: #fbbf24 !important; background: rgba(251, 191, 36, 0.15) !important; box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important; border: 1px solid rgba(251, 191, 36, 0.4) !important; } / Red theme override for active sidebar link */ .theme-red .sidebar-link.active { color: #f43f5e !important; background: rgba(244, 63, 94, 0.15) !important; box-shadow: 0 0 20px rgba(244, 63, 94, 0.4) !important; border: 1px solid rgba(244, 63, 94, 0.4) !important; }

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