fix(styles): correct animation duration syntax and enhance header blur effect
This commit is contained in:
fynks
parent
6e9fc22c34
commit
09dbd77cc0
2 changed files with 13 additions and 126 deletions
93
dist/css/styles.css
vendored
93
dist/css/styles.css
vendored
|
|
@ -3,9 +3,9 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: .01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: .01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important
|
||||
}
|
||||
}
|
||||
|
|
@ -150,9 +150,9 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: .01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: .01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important
|
||||
}
|
||||
}
|
||||
|
|
@ -333,10 +333,10 @@ button:focus-visible {
|
|||
.header-blur-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
backdrop-filter: blur(0) saturate(100%);
|
||||
-webkit-backdrop-filter: blur(0) saturate(100%);
|
||||
border-bottom: 1px solid transparent;
|
||||
background: rgba(255, 255, 255, .9);
|
||||
backdrop-filter: blur(12px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
transition: all var(--transition-normal);
|
||||
z-index: -1;
|
||||
will-change: backdrop-filter, background, border-bottom;
|
||||
|
|
@ -365,7 +365,7 @@ button:focus-visible {
|
|||
}
|
||||
|
||||
[data-theme="dark"] .header-blur-bg {
|
||||
background: rgba(15, 23, 42, 0);
|
||||
background: rgba(15, 23, 42, .9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-header.is-scrolled .header-blur-bg {
|
||||
|
|
@ -4265,51 +4265,6 @@ table tbody tr[tabindex="0"] {
|
|||
}
|
||||
}
|
||||
|
||||
/* ===== ENHANCED LOADING STATES ===== */
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
filter: grayscale(0.3);
|
||||
}
|
||||
|
||||
.btn:disabled:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Loading spinner animation */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid var(--border-primary);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Search results animation */
|
||||
.search-results {
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== IMPROVED TOUCH TARGETS ===== */
|
||||
@media (pointer: coarse) {
|
||||
button,
|
||||
|
|
@ -4408,36 +4363,6 @@ table tbody tr[tabindex="0"] {
|
|||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* ===== LOAD ALL BUTTON ENHANCEMENTS ===== */
|
||||
.load-all-container {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.load-all-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.load-all-btn svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.load-all-btn:hover:not(:disabled) svg {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
/* ===== COMPARISON TABLE MOBILE IMPROVEMENTS ===== */
|
||||
@media (max-width: 767px) {
|
||||
.comparison-table {
|
||||
|
|
|
|||
46
dist/index.html
vendored
46
dist/index.html
vendored
|
|
@ -29,8 +29,8 @@
|
|||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<!-- Preload critical resources -->
|
||||
<link rel="preload" as="style" href="/css/styles-min.css">
|
||||
<link rel="preload" as="script" href="/js/app-min.js">
|
||||
<link rel="preload" as="style" href="/css/styles-min.css?v=1dt4yi7">
|
||||
<link rel="preload" as="script" href="/js/app-min.js?v=1d1dl7l">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preload" as="style"
|
||||
|
|
@ -63,17 +63,6 @@
|
|||
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="preload" as="style"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
|
||||
onload="this.rel='stylesheet'">
|
||||
<noscript>
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
|
||||
</noscript>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
|
|
@ -286,7 +275,7 @@
|
|||
|
||||
|
||||
<link rel="stylesheet" href="./css/styles.css">
|
||||
<script src="js/app.js" defer></script>
|
||||
<script src="./js/app-min.js" defer></script>
|
||||
|
||||
<!-- Verification Tags -->
|
||||
<meta name="google-site-verification" content="yh6OZ9qZhOAVRs3tkFAwwBYIb3BKrveBy6C0QEVHpw0" />
|
||||
|
|
@ -2163,38 +2152,11 @@
|
|||
}
|
||||
})();
|
||||
|
||||
// Scrollspy & Smooth Scroll - Separate Module
|
||||
// Smooth Scroll - Separate Module
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const init = () => {
|
||||
const nav = document.getElementById('primary-navigation');
|
||||
if (!nav) return;
|
||||
|
||||
// Scrollspy for active nav link
|
||||
const sectionIds = Array.from(nav.querySelectorAll('a[href^="#"]') || [])
|
||||
.map(a => a.getAttribute('href'))
|
||||
.filter(Boolean);
|
||||
const sections = sectionIds.map(id => document.querySelector(id)).filter(Boolean);
|
||||
|
||||
if ('IntersectionObserver' in window && sections.length) {
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
const id = '#' + entry.target.id;
|
||||
const link = nav.querySelector(`a[href="${id}"]`);
|
||||
if (link && entry.isIntersecting) {
|
||||
nav.querySelectorAll('.nav-link.active').forEach(l => {
|
||||
l.classList.remove('active');
|
||||
l.removeAttribute('aria-current');
|
||||
});
|
||||
link.classList.add('active');
|
||||
link.setAttribute('aria-current', 'page');
|
||||
}
|
||||
});
|
||||
}, { rootMargin: '-40% 0px -50% 0px', threshold: [0, 0.25, 0.5, 1] });
|
||||
sections.forEach(sec => observer.observe(sec));
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue