File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090017/69319090017/style.css

Back
/* Custom Styles for Portfolio / :root { / Default: Noir Silver Glow / --brand-primary: #ffffff; --brand-secondary: #a3a3a3; --brand-accent: #ffffff; --brand-deep: #000000; --brand-card: #0a0a0a; --brand-border: #262626; --brand-text-glow: rgba(255, 255, 255, 0.2); --brand-glow-color: rgba(255, 255, 255, 0.55); } [data-theme="blue"] { / Noir Cyan Glow / --brand-primary: #ffffff; --brand-secondary: #06b6d4; --brand-accent: #22d3ee; --brand-deep: #000000; --brand-card: #08090c; --brand-border: #162030; --brand-text-glow: rgba(6, 182, 212, 0.3); --brand-glow-color: rgba(34, 211, 238, 0.65); } [data-theme="teal"] { / Noir Violet Glow / --brand-primary: #ffffff; --brand-secondary: #d946ef; --brand-accent: #f472b6; --brand-deep: #000000; --brand-card: #0c0812; --brand-border: #2a113d; --brand-text-glow: rgba(217, 70, 239, 0.3); --brand-glow-color: rgba(244, 114, 182, 0.65); } / Glowing Text Shadow on Headings / h1, h2, h3 { text-shadow: 0 0 8px var(--brand-text-glow) !important; } / Disable text shadow on gradient text to prevent rendering bugs and blurriness / .bg-clip-text, [class="bg-clip-text"], .text-transparent { text-shadow: none !important; } /* Custom theme overrides for text color / [data-theme="custom"] body, [data-theme="custom"] .text-slate-100, [data-theme="custom"] .text-slate-200, [data-theme="custom"] .text-slate-300, [data-theme="custom"] .text-white { color: var(--brand-primary) !important; } [data-theme="custom"] .text-slate-400, [data-theme="custom"] .text-slate-500 { color: color-mix(in srgb, var(--brand-primary) 70%, transparent) !important; } / Light theme overrides / .light-theme { --brand-primary: #0f172a; / Dark Slate default, can be overridden by custom text picker / --brand-secondary: #475569; --brand-accent: #0284c7; / Blue Accent / --brand-text-glow: rgba(0, 0, 0, 0.05) !important; --brand-glow-color: transparent !important; / No glow on light background / } .light-theme, .light-theme body { color: var(--brand-primary) !important; } / Override all the text-slate-X and text-white classes under .light-theme / .light-theme .text-slate-100, .light-theme .text-slate-200, .light-theme .text-slate-300, .light-theme .text-white { color: var(--brand-primary) !important; } .light-theme .text-slate-400, .light-theme .text-slate-500 { color: var(--brand-secondary) !important; } / Also make sure nav links hover state and buttons look correct / .light-theme .nav-link, .light-theme .mobile-nav-link, .light-theme .mobile-bottom-nav-link { color: var(--brand-secondary) !important; } .light-theme .nav-link:hover, .light-theme .mobile-nav-link:hover, .light-theme .mobile-bottom-nav-link.text-brand-primary { color: var(--brand-primary) !important; } .light-theme .bg-brand-card { background-color: var(--brand-card) !important; } .light-theme .border-brand-border { border-color: var(--brand-border) !important; } .light-theme .bg-brand-deep { background-color: var(--brand-deep) !important; } .light-theme h1, .light-theme h2, .light-theme h3 { text-shadow: none !important; color: var(--brand-primary) !important; } / Global Transition for Theme Switching / body, nav, section, footer, div, span, a, h1, h2, h3, p, label, input, textarea, button { transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); } / Custom Scrollbar / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--brand-deep); } ::-webkit-scrollbar-thumb { background: var(--brand-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); } / Nav Link Custom Underline Effect / .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background: linear-gradient(to right, var(--brand-primary), var(--brand-accent)); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } / Custom card glow & floating animation / .project-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .project-card:hover { transform: translateY(-8px); border-color: var(--brand-primary); box-shadow: 0 20px 40px -15px var(--brand-text-glow); } / Skill pills hover scale and glow / .skill-pill { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .skill-pill:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 20px -6px var(--brand-text-glow); } / Sticky Bottom Nav Safe Area Support & Custom highlight transitions */ #mobile-bottom-nav { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); } .mobile-bottom-nav-link.text-brand-primary i { filter: drop-shadow(0 0 8px var(--brand-glow-color)); } #mobile-bottom-sheet-content { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }

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