From de6907a1f17831c92613aafdd9f12e92f71d5d27 Mon Sep 17 00:00:00 2001 From: Ryderjj89 Date: Wed, 1 Oct 2025 20:35:31 -0400 Subject: [PATCH] fix: Remove !important declarations and modal styles from assets/css/main.css --- assets/css/main.css | 340 +++++++++++++------------------------------- pages/admin.vue | 2 +- 2 files changed, 101 insertions(+), 241 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 6237585..719afe0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -2,327 +2,327 @@ /* CRITICAL: Apply Inter font to EVERY element */ html, body, * { - font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important; + font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* Global styling */ html, body { margin: 0; padding: 0; - background-color: #f9fafb !important; - color: #111827 !important; + background-color: #f9fafb; + color: #111827; line-height: 1.6; font-size: 16px; } /* Logo sizing - CRITICAL FIX */ img[alt*="New Life Christian Church"] { - height: 3rem !important; - width: auto !important; - max-height: 3rem !important; + height: 3rem; + width: auto; + max-height: 3rem; object-fit: contain; } /* Override Nuxt UI components */ .nui-card, .nui-button, .nui-input, .nui-select, .nui-textarea { - font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; + font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* Header styling */ header { - background-color: white !important; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; - border-bottom: 1px solid #e5e7eb !important; + background-color: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + border-bottom: 1px solid #e5e7eb; } header .container, header [class*="max-w"] { - padding: 1rem 1.5rem !important; + padding: 1rem 1.5rem; } /* Main content styling */ main { - background-color: #f9fafb !important; + background-color: #f9fafb; min-height: calc(100vh - 80px); - padding: 2rem 0 !important; + padding: 2rem 0; } main .container, main [class*="max-w"] { - padding: 0 1rem !important; + padding: 0 1rem; } /* Typography */ h1, h2, h3, h4, h5, h6 { - font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; - font-weight: 600 !important; - line-height: 1.25 !important; - margin: 0 !important; - color: #111827 !important; + font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; + font-weight: 600; + line-height: 1.25; + margin: 0; + color: #111827; } p { - font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; - margin: 0 !important; - color: #6b7280 !important; + font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; + margin: 0; + color: #6b7280; } /* Button styling */ button, .nui-button { - font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; - border-radius: 0.375rem !important; - font-weight: 500 !important; - cursor: pointer !important; + font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; + border-radius: 0.375rem; + font-weight: 500; + cursor: pointer; } /* Form styling */ input, textarea, select, .nui-input, .nui-textarea, .nui-select { - font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; - border-radius: 0.375rem !important; - border: 1px solid #d1d5db !important; - padding: 0.5rem 0.75rem !important; + font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; + border-radius: 0.375rem; + border: 1px solid #d1d5db; + padding: 0.5rem 0.75rem; } input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus { - border-color: #dc2626 !important; - box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important; - outline: none !important; + border-color: #dc2626; + box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); + outline: none; } /* Loading and empty states */ .text-center { - text-align: center !important; + text-align: center; } .py-12 { - padding: 3rem 0 !important; + padding: 3rem 0; } /* Grid layout */ .grid { - display: grid !important; + display: grid; } .gap-6 { - gap: 1.5rem !important; + gap: 1.5rem; } .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Responsive container */ .max-w-7xl { - max-width: 1280px !important; - margin: 0 auto !important; + max-width: 1280px; + margin: 0 auto; } .px-4 { - padding-left: 1rem !important; - padding-right: 1rem !important; + padding-left: 1rem; + padding-right: 1rem; } .sm\:px-6 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; + padding-left: 1.5rem; + padding-right: 1.5rem; } .lg\:px-8 { - padding-left: 2rem !important; - padding-right: 2rem !important; + padding-left: 2rem; + padding-right: 2rem; } /* Flexbox utilities */ .flex { - display: flex !important; + display: flex; } .justify-between { - justify-content: space-between !important; + justify-content: space-between; } .justify-center { - justify-content: center !important; + justify-content: center; } .items-center { - align-items: center !important; + align-items: center; } .space-x-4 > * + * { - margin-left: 1rem !important; + margin-left: 1rem; } /* Text sizing */ .text-2xl { - font-size: 1.5rem !important; - line-height: 2rem !important; + font-size: 1.5rem; + line-height: 2rem; } .text-lg { - font-size: 1.125rem !important; - line-height: 1.75rem !important; + font-size: 1.125rem; + line-height: 1.75rem; } .text-sm { - font-size: 0.875rem !important; - line-height: 1.25rem !important; + font-size: 0.875rem; + line-height: 1.25rem; } .text-gray-600 { - color: #4b5563 !important; + color: #4b5563; } .text-gray-900 { - color: #111827 !important; + color: #111827; } .text-gray-400 { - color: #9ca3af !important; + color: #9ca3af; } .text-gray-500 { - color: #6b7280 !important; + color: #6b7280; } .font-bold { - font-weight: 700 !important; + font-weight: 700; } .font-medium { - font-weight: 500 !important; + font-weight: 500; } .font-semibold { - font-weight: 600 !important; + font-weight: 600; } /* Margin and padding */ .mt-1 { - margin-top: 0.25rem !important; + margin-top: 0.25rem; } .mt-2 { - margin-top: 0.5rem !important; + margin-top: 0.5rem; } .mb-8 { - margin-bottom: 2rem !important; + margin-bottom: 2rem; } .py-4 { - padding: 1rem 0 !important; + padding: 1rem 0; } .py-8 { - padding: 2rem 0 !important; + padding: 2rem 0; } /* Border radius */ .rounded-lg { - border-radius: 0.5rem !important; + border-radius: 0.5rem; } /* Background colors */ .bg-white { - background-color: white !important; + background-color: white; } .bg-gray-50 { - background-color: #f9fafb !important; + background-color: #f9fafb; } .bg-blue-50 { - background-color: #eff6ff !important; + background-color: #eff6ff; } .bg-green-50 { - background-color: #f0fdf4 !important; + background-color: #f0fdf4; } .bg-red-50 { - background-color: #fef2f2 !important; + background-color: #fef2f2; } /* Border colors */ .border-blue-200 { - border-color: #bfdbfe !important; + border-color: #bfdbfe; } .border-green-200 { - border-color: #bbf7d0 !important; + border-color: #bbf7d0; } .border-red-200 { - border-color: #fecaca !important; + border-color: #fecaca; } /* Text colors */ .text-blue-900 { - color: #1e3a8a !important; + color: #1e3a8a; } .text-green-900 { - color: #14532d !important; + color: #14532d; } .text-red-800 { - color: #991b1b !important; + color: #991b1b; } /* Display utilities */ .block { - display: block !important; + display: block; } .inline-block { - display: inline-block !important; + display: inline-block; } /* Position utilities */ .relative { - position: relative !important; + position: relative; } .absolute { - position: absolute !important; + position: absolute; } /* Width utilities */ .w-48 { - width: 12rem !important; + width: 12rem; } .w-full { - width: 100% !important; + width: 100%; } /* Height utilities */ .h-8 { - height: 2rem !important; + height: 2rem; } .h-12 { - height: 3rem !important; + height: 3rem; } .w-8 { - width: 2rem !important; + width: 2rem; } .h-6 { - height: 1.5rem !important; + height: 1.5rem; } .w-6 { - width: 1.5rem !important; + width: 1.5rem; } /* Animation */ .animate-spin { - animation: spin 1s linear infinite !important; + animation: spin 1s linear infinite; } @keyframes spin { @@ -336,154 +336,14 @@ input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus { /* Icon styling */ .nui-icon { - display: inline-block !important; - vertical-align: middle !important; -} - -/* Modal styling - CRITICAL FIX - Must be more specific */ -div[class*="modal"], [class*="modal"] { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - z-index: 9999 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - background-color: rgba(0, 0, 0, 0.5) !important; - backdrop-filter: blur(4px) !important; -} - -div[class*="modal-overlay"], [class*="modal-overlay"] { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - background-color: rgba(0, 0, 0, 0.5) !important; - backdrop-filter: blur(4px) !important; -} - -div[class*="modal-content"], [class*="modal-content"] { - background: white !important; - border-radius: 0.5rem !important; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; - max-width: 400px !important; - max-height: 90vh !important; - overflow: auto !important; - position: relative !important; - z-index: 10000 !important; - margin: 1rem !important; - width: 100% !important; -} - -/* Specific Nuxt UI modal overrides */ -[data-modal] { - position: fixed !important; - inset: 0 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - background-color: rgba(0, 0, 0, 0.5) !important; - backdrop-filter: blur(4px) !important; -} - -[data-modal] > [data-modal-overlay] { - position: fixed !important; - inset: 0 !important; - background-color: rgba(0, 0, 0, 0.5) !important; -} - -[data-modal] > [data-modal-content] { - background: white !important; - border-radius: 0.5rem !important; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; - max-width: 400px !important; - width: 100% !important; + display: inline-block; + vertical-align: middle; } /* Force logo to be small */ img[src*="logo"], .logo-image { - height: 3rem !important; - width: auto !important; - max-height: 3rem !important; - object-fit: contain !important; -} - -/* Modal styling - FORCE overlay positioning */ -.nui-modal { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - z-index: 9999 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - background-color: rgba(0, 0, 0, 0.5) !important; - backdrop-filter: blur(4px) !important; -} - -.nui-modal-overlay { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - background-color: rgba(0, 0, 0, 0.5) !important; - backdrop-filter: blur(4px) !important; -} - -.nui-modal-content { - background: white !important; - border-radius: 0.5rem !important; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; - max-width: 400px !important; - max-height: 90vh !important; - overflow: auto !important; - position: relative !important; - z-index: 10000 !important; - margin: 1rem !important; - width: 100% !important; -} - -/* Login modal specific overrides */ -.login-modal { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - z-index: 9999 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - background-color: rgba(0, 0, 0, 0.5) !important; - backdrop-filter: blur(4px) !important; -} - -.login-modal .modal-overlay { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - background-color: rgba(0, 0, 0, 0.5) !important; - backdrop-filter: blur(4px) !important; -} - -.login-modal .modal-content { - background: white !important; - border-radius: 0.5rem !important; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; - max-width: 400px !important; - max-height: 90vh !important; - overflow: auto !important; - position: relative !important; - z-index: 10000 !important; - margin: 1rem !important; - width: 100% !important; - pointer-events: auto !important; + height: 3rem; + width: auto; + max-height: 3rem; + object-fit: contain; } diff --git a/pages/admin.vue b/pages/admin.vue index d88acaf..e2cc84b 100644 --- a/pages/admin.vue +++ b/pages/admin.vue @@ -26,7 +26,7 @@
- +