🎉 Improved performance with optimized CSS file 📦🐛 in backend/static/css/performance-optimized.css & backend/templates/base.html.
This commit is contained in:
parent
612726698a
commit
3f34d40fe3
@ -1,7 +1,12 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(grep:*)"
|
||||
"Bash(grep:*)",
|
||||
"Bash(ls:*)",
|
||||
"Bash(for file in animations-optimized.css glassmorphism.css components.css professional-theme.css)",
|
||||
"Bash(do echo \"=== $file ===\")",
|
||||
"Bash(echo)",
|
||||
"Bash(done)"
|
||||
],
|
||||
"deny": []
|
||||
}
|
||||
|
||||
197
backend/static/css/performance-optimized.css
Normal file
197
backend/static/css/performance-optimized.css
Normal file
@ -0,0 +1,197 @@
|
||||
/* Performance-optimized CSS for MYP Application - Fast Rendering Focus */
|
||||
|
||||
/* ===== CRITICAL GLASSMORPHISM FOR NAVBAR - PRESERVED ===== */
|
||||
.glass-navbar {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .glass-navbar {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ===== SIMPLIFIED GLASS EFFECTS - NO ANIMATIONS ===== */
|
||||
.glass-base {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.glass-subtle {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Dark mode variants */
|
||||
.dark .glass-base {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .glass-strong {
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.dark .glass-subtle {
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* ===== SIMPLIFIED CARDS - NO SHADOWS OR TRANSITIONS ===== */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(229, 231, 235, 0.5);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.dark .glass-card {
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ===== BUTTONS - INSTANT FEEDBACK ===== */
|
||||
.btn-primary {
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #e5e7eb;
|
||||
color: #374151;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
/* ===== FORMS - SIMPLIFIED FOCUS STATES ===== */
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* ===== MODAL OVERLAYS - INSTANT APPEARANCE ===== */
|
||||
.modal-backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .modal-content {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
/* ===== TOOLTIPS - SIMPLIFIED ===== */
|
||||
.tooltip {
|
||||
background: #1f2937;
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* ===== LOADING STATES - MINIMAL ===== */
|
||||
.spinner {
|
||||
border: 2px solid #f3f4f6;
|
||||
border-top-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ===== PERFORMANCE UTILITIES ===== */
|
||||
.will-change-auto { will-change: auto; }
|
||||
.gpu-accelerated { transform: translateZ(0); }
|
||||
.no-transitions * { transition: none !important; }
|
||||
.no-animations * { animation: none !important; }
|
||||
|
||||
/* ===== REDUCED MOTION PREFERENCE ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== OPTIMIZED GRID LAYOUTS ===== */
|
||||
.grid-optimized {
|
||||
display: grid;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
/* ===== SIMPLIFIED BADGES ===== */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.125rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ===== OPTIMIZE PAINT AREAS ===== */
|
||||
.contain-paint { contain: paint; }
|
||||
.contain-layout { contain: layout; }
|
||||
.contain-strict { contain: strict; }
|
||||
|
||||
/* ===== CRITICAL RENDERING PATH OPTIMIZATION ===== */
|
||||
.above-fold {
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
.below-fold {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 0 500px;
|
||||
}
|
||||
@ -25,11 +25,16 @@
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
|
||||
<link rel="mask-icon" href="{{ url_for('static', filename='favicon.svg') }}" color="#000000">
|
||||
|
||||
<!-- CSS -->
|
||||
<!-- CSS - Performance Optimized -->
|
||||
<link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/components.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/professional-theme.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/optimization-animations.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/performance-optimized.css') }}" rel="stylesheet">
|
||||
<!-- Conditional loading for non-critical CSS -->
|
||||
<link href="{{ url_for('static', filename='css/components.min.css') }}" rel="stylesheet" media="print" onload="this.media='all'">
|
||||
<link href="{{ url_for('static', filename='css/professional-theme.min.css') }}" rel="stylesheet" media="print" onload="this.media='all'">
|
||||
<noscript>
|
||||
<link href="{{ url_for('static', filename='css/components.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/professional-theme.min.css') }}" rel="stylesheet">
|
||||
</noscript>
|
||||
|
||||
<!-- Preload critical resources -->
|
||||
<link rel="preload" href="{{ url_for('static', filename='js/ui-components.js') }}" as="script">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user