fix TailwindCSS missing some classes
This commit is contained in:
nahakubuilde
2
.gitignore
vendored
2
.gitignore
vendored
@@ -5,4 +5,4 @@ wordlist.txt
|
||||
*.db
|
||||
|
||||
/app_build/README.md
|
||||
/app_build/tailwindcss-linux-x64
|
||||
tailwindcss-linux-x64
|
||||
@@ -2,12 +2,10 @@
|
||||
|
||||
# Tailwind CSS Build Script for Header Analyzer
|
||||
# This script downloads Tailwind CLI and generates CSS for production
|
||||
|
||||
# ./tailwindcss-linux-x64 -o web/style-tailwind.css --minify
|
||||
set -e
|
||||
|
||||
PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
||||
TAILWIND_CLI="$PROJECT_ROOT/app_build/tailwindcss-linux-x64"
|
||||
INPUT_CSS="$PROJECT_ROOT/web/style-input.css"
|
||||
OUTPUT_CSS="$PROJECT_ROOT/web/style-tailwind.css"
|
||||
CONFIG_FILE="$PROJECT_ROOT/tailwind.config.js"
|
||||
|
||||
@@ -51,13 +49,13 @@ fi
|
||||
echo "🔨 Building Tailwind CSS..."
|
||||
if [ "$1" = "--watch" ]; then
|
||||
echo "👀 Starting watch mode..."
|
||||
"$TAILWIND_CLI" -i "$INPUT_CSS" -o "$OUTPUT_CSS" --watch
|
||||
"$TAILWIND_CLI" -o "$OUTPUT_CSS" --watch
|
||||
elif [ "$1" = "--dev" ]; then
|
||||
echo "🛠️ Building development CSS..."
|
||||
"$TAILWIND_CLI" -i "$INPUT_CSS" -o "$OUTPUT_CSS"
|
||||
"$TAILWIND_CLI" -o "$OUTPUT_CSS"
|
||||
else
|
||||
echo "📦 Building production CSS (minified)..."
|
||||
"$TAILWIND_CLI" -i "$INPUT_CSS" -o "$OUTPUT_CSS" --minify
|
||||
"$TAILWIND_CLI" -o "$OUTPUT_CSS" --minify
|
||||
fi
|
||||
|
||||
echo "✅ Tailwind CSS build complete!"
|
||||
|
||||
@@ -30,10 +30,10 @@
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
{{block "head" .}}{{end}}
|
||||
</head>
|
||||
<body class="bg-dark-bg text-dark-text min-h-screen">
|
||||
<body class="bg-gray-900 text-gray-100 min-h-screen">
|
||||
<!-- Floating Navigation -->
|
||||
<div class="fixed top-4 right-4 z-50 floating-nav rounded-full">
|
||||
<div class="flex bg-dark-surface border border-dark-border rounded-full overflow-hidden">
|
||||
<div class="flex bg-gray-800 border border-gray-700 rounded-full overflow-hidden">
|
||||
<!-- Home Button -->
|
||||
<a href="/" class="flex items-center justify-center w-12 h-12 bg-blue-600 hover:bg-blue-700 transition-colors duration-200 text-white">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
@@ -42,7 +42,7 @@
|
||||
</a>
|
||||
|
||||
<!-- Menu Button -->
|
||||
<button id="menuButton" class="flex items-center justify-center w-12 h-12 bg-dark-surface hover:bg-gray-700 transition-colors duration-200 text-dark-text">
|
||||
<button id="menuButton" class="flex items-center justify-center w-12 h-12 bg-gray-800 hover:bg-gray-700 transition-colors duration-200 text-gray-100">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||
</svg>
|
||||
@@ -56,10 +56,10 @@
|
||||
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeNavigationPopup()"></div>
|
||||
|
||||
<!-- Popup Content -->
|
||||
<div class="relative bg-dark-surface border border-dark-border rounded-xl p-6 w-full max-w-lg shadow-2xl z-10 transition-transform duration-300 scale-95 my-auto">
|
||||
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-6 w-full max-w-lg shadow-2xl z-10 transition-transform duration-300 scale-95 my-auto">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-bold text-dark-text">Navigation</h2>
|
||||
<button onclick="closeNavigationPopup()" class="p-1 text-dark-muted hover:text-dark-text hover:bg-dark-bg rounded-lg transition-colors duration-200">
|
||||
<h2 class="text-xl font-bold text-gray-100">Navigation</h2>
|
||||
<button onclick="closeNavigationPopup()" class="p-1 text-gray-400 hover:text-gray-100 hover:bg-gray-900 rounded-lg transition-colors duration-200">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
@@ -70,7 +70,7 @@
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-semibold text-blue-400 uppercase tracking-wide mb-3">IT Tools</h3>
|
||||
<div class="space-y-2">
|
||||
<a href="/analyze" class="flex items-center p-3 rounded-lg hover:bg-dark-bg transition-colors duration-200 group">
|
||||
<a href="/analyze" class="flex items-center p-3 rounded-lg hover:bg-gray-900 transition-colors duration-200 group">
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-green-600 rounded-lg mr-4 group-hover:bg-green-700 transition-colors">
|
||||
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
|
||||
@@ -78,20 +78,20 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-dark-text font-medium">Email Header Analyzer</div>
|
||||
<div class="text-dark-muted text-sm">Analyze email headers for security</div>
|
||||
<div class="text-gray-100 font-medium">Email Header Analyzer</div>
|
||||
<div class="text-gray-400 text-sm">Analyze email headers for security</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/dns" class="flex items-center p-3 rounded-lg hover:bg-dark-bg transition-colors duration-200 group">
|
||||
<a href="/dns" class="flex items-center p-3 rounded-lg hover:bg-gray-900 transition-colors duration-200 group">
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-purple-600 rounded-lg mr-4 group-hover:bg-purple-700 transition-colors">
|
||||
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-dark-text font-medium">DNS Tools</div>
|
||||
<div class="text-dark-muted text-sm">DNS lookups and network diagnostics</div>
|
||||
<div class="text-gray-100 font-medium">DNS Tools</div>
|
||||
<div class="text-gray-400 text-sm">DNS lookups and network diagnostics</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -101,27 +101,27 @@
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-blue-400 uppercase tracking-wide mb-3">Online Security</h3>
|
||||
<div class="space-y-2">
|
||||
<a href="/pwgenerator" class="flex items-center p-3 rounded-lg hover:bg-dark-bg transition-colors duration-200 group">
|
||||
<a href="/pwgenerator" class="flex items-center p-3 rounded-lg hover:bg-gray-900 transition-colors duration-200 group">
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-yellow-600 rounded-lg mr-4 group-hover:bg-yellow-700 transition-colors">
|
||||
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-0.257-.257A6 6 0 1118 8zm-1.5 0a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 7a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-dark-text font-medium">Password Generator</div>
|
||||
<div class="text-dark-muted text-sm">Generate secure passwords</div>
|
||||
<div class="text-gray-100 font-medium">Password Generator</div>
|
||||
<div class="text-gray-400 text-sm">Generate secure passwords</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/pwpush" class="flex items-center p-3 rounded-lg hover:bg-dark-bg transition-colors duration-200 group">
|
||||
<a href="/pwpush" class="flex items-center p-3 rounded-lg hover:bg-gray-900 transition-colors duration-200 group">
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-red-600 rounded-lg mr-4 group-hover:bg-red-700 transition-colors">
|
||||
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-dark-text font-medium">Password Pusher</div>
|
||||
<div class="text-dark-muted text-sm">Share sensitive text securely</div>
|
||||
<div class="text-gray-100 font-medium">Password Pusher</div>
|
||||
<div class="text-gray-400 text-sm">Share sensitive text securely</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -133,7 +133,7 @@
|
||||
{{block "content" .}}
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-bold mb-4">HeaderAnalyzer</h1>
|
||||
<p class="text-dark-muted text-lg">Welcome to HeaderAnalyzer - your comprehensive toolkit for IT and security tools.</p>
|
||||
<p class="text-gray-400 text-lg">Welcome to HeaderAnalyzer - your comprehensive toolkit for IT and security tools.</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</main>
|
||||
|
||||
@@ -1,625 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Import all custom CSS variables from style.css */
|
||||
.bg-yellow-900 { background-color: #713f12; }
|
||||
.bg-yellow-900\/20 { background-color: rgb(113 63 18 / 0.2); }
|
||||
|
||||
/* Gradient backgrounds */
|
||||
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
|
||||
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(37 99 235 / 0)); }
|
||||
.to-blue-700 { --tw-gradient-to: #1d4ed8; }
|
||||
.hover\:from-blue-700:hover { --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 78 216 / 0)); }
|
||||
.hover\:to-blue-800:hover { --tw-gradient-to: #1e40af; }
|
||||
|
||||
/* Additional hover states for gradients */
|
||||
.hover\:bg-green-600:hover { background-color: #16a34a; }
|
||||
.hover\:bg-red-600:hover { background-color: #dc2626; }
|
||||
|
||||
/* Responsive font sizes */oot {
|
||||
--bg-color: #0f172a;
|
||||
--text-color: #e2e8f0;
|
||||
--section-bg: #1e293b;
|
||||
--border-color: #334155;
|
||||
--highlight: #3b82f6;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
--dark-bg: #1e293b;
|
||||
--dark-text: #f8fafc;
|
||||
--dark-muted: #94a3b8;
|
||||
--dark-border: #475569;
|
||||
}
|
||||
|
||||
/* Force inclusion of all classes used in the project */
|
||||
@layer utilities {
|
||||
/* Custom dark theme classes from style.css */
|
||||
.bg-dark-bg { background-color: var(--dark-bg); }
|
||||
.bg-dark-surface { background-color: var(--section-bg); }
|
||||
.text-dark-text { color: var(--dark-text); }
|
||||
.text-dark-muted { color: var(--dark-muted); }
|
||||
.border-dark-border { border-color: var(--dark-border); }
|
||||
|
||||
/* Ensure all gray colors are included */
|
||||
.bg-gray-50 { background-color: #f9fafb; }
|
||||
.bg-gray-100 { background-color: #f3f4f6; }
|
||||
.bg-gray-200 { background-color: #e5e7eb; }
|
||||
.bg-gray-300 { background-color: #d1d5db; }
|
||||
.bg-gray-400 { background-color: #9ca3af; }
|
||||
.bg-gray-500 { background-color: #6b7280; }
|
||||
.bg-gray-600 { background-color: #4b5563; }
|
||||
.bg-gray-700 { background-color: #374151; }
|
||||
.bg-gray-800 { background-color: #1f2937; }
|
||||
.bg-gray-900 { background-color: #111827; }
|
||||
|
||||
.text-gray-50 { color: #f9fafb; }
|
||||
.text-gray-100 { color: #f3f4f6; }
|
||||
.text-gray-200 { color: #e5e7eb; }
|
||||
.text-gray-300 { color: #d1d5db; }
|
||||
.text-gray-400 { color: #9ca3af; }
|
||||
.text-gray-500 { color: #6b7280; }
|
||||
.text-gray-600 { color: #4b5563; }
|
||||
.text-gray-700 { color: #374151; }
|
||||
.text-gray-800 { color: #1f2937; }
|
||||
.text-gray-900 { color: #111827; }
|
||||
|
||||
.border-gray-50 { border-color: #f9fafb; }
|
||||
.border-gray-100 { border-color: #f3f4f6; }
|
||||
.border-gray-200 { border-color: #e5e7eb; }
|
||||
.border-gray-300 { border-color: #d1d5db; }
|
||||
.border-gray-400 { border-color: #9ca3af; }
|
||||
.border-gray-500 { border-color: #6b7280; }
|
||||
.border-gray-600 { border-color: #4b5563; }
|
||||
.border-gray-700 { border-color: #374151; }
|
||||
.border-gray-800 { border-color: #1f2937; }
|
||||
.border-gray-900 { border-color: #111827; }
|
||||
|
||||
/* Blue colors */
|
||||
.bg-blue-100 { background-color: #dbeafe; }
|
||||
.bg-blue-400 { background-color: #60a5fa; }
|
||||
.bg-blue-500 { background-color: #3b82f6; }
|
||||
.bg-blue-600 { background-color: #2563eb; }
|
||||
.bg-blue-700 { background-color: #1d4ed8; }
|
||||
|
||||
.text-blue-100 { color: #dbeafe; }
|
||||
.text-blue-200 { color: #bfdbfe; }
|
||||
.text-blue-400 { color: #60a5fa; }
|
||||
.text-blue-500 { color: #3b82f6; }
|
||||
.text-blue-600 { color: #2563eb; }
|
||||
.text-blue-700 { color: #1d4ed8; }
|
||||
|
||||
.border-blue-500 { border-color: #3b82f6; }
|
||||
.border-blue-600 { border-color: #2563eb; }
|
||||
|
||||
/* Green colors */
|
||||
.bg-green-500 { background-color: #22c55e; }
|
||||
.bg-green-600 { background-color: #16a34a; }
|
||||
.bg-green-700 { background-color: #15803d; }
|
||||
.bg-green-900 { background-color: #14532d; }
|
||||
.text-green-200 { color: #bbf7d0; }
|
||||
.text-green-400 { color: #4ade80; }
|
||||
.text-green-600 { color: #16a34a; }
|
||||
.text-green-700 { color: #15803d; }
|
||||
.border-green-500 { border-color: #22c55e; }
|
||||
.border-green-600 { border-color: #16a34a; }
|
||||
|
||||
/* Red colors */
|
||||
.bg-red-400 { background-color: #f87171; }
|
||||
.bg-red-600 { background-color: #dc2626; }
|
||||
.bg-red-700 { background-color: #b91c1c; }
|
||||
.bg-red-900 { background-color: #7f1d1d; }
|
||||
.text-red-100 { color: #fee2e2; }
|
||||
.text-red-200 { color: #fecaca; }
|
||||
.text-red-400 { color: #f87171; }
|
||||
.text-red-600 { color: #dc2626; }
|
||||
.text-red-700 { color: #b91c1c; }
|
||||
.border-red-600 { border-color: #dc2626; }
|
||||
|
||||
/* Purple colors */
|
||||
.bg-purple-600 { background-color: #9333ea; }
|
||||
.bg-purple-700 { background-color: #7c3aed; }
|
||||
.text-purple-400 { color: #c084fc; }
|
||||
.border-purple-500 { border-color: #a855f7; }
|
||||
|
||||
/* Yellow colors */
|
||||
.bg-yellow-600 { background-color: #ca8a04; }
|
||||
.bg-yellow-700 { background-color: #a16207; }
|
||||
.bg-yellow-900 { background-color: #713f12; }
|
||||
.bg-yellow-900\/20 { background-color: rgb(113 63 18 / 0.2); }
|
||||
.text-yellow-100 { color: #fef3c7; }
|
||||
.text-yellow-200 { color: #fde68a; }
|
||||
.text-yellow-400 { color: #fbbf24; }
|
||||
.border-yellow-500 { border-color: #eab308; }
|
||||
.border-yellow-600 { border-color: #ca8a04; }
|
||||
|
||||
/* White colors */
|
||||
.bg-white { background-color: #ffffff; }
|
||||
.text-white { color: #ffffff; }
|
||||
|
||||
/* Ring colors with opacity */
|
||||
.ring-blue-500\/20 { --tw-ring-color: rgb(59 130 246 / 0.2); }
|
||||
.focus\:ring-blue-500\/20:focus { --tw-ring-color: rgb(59 130 246 / 0.2); }
|
||||
|
||||
/* Background opacity */
|
||||
.bg-opacity-20 { --tw-bg-opacity: 0.2; }
|
||||
|
||||
/* Text sizes */
|
||||
.text-xs { font-size: 0.75rem; line-height: 1rem; }
|
||||
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
|
||||
.text-base { font-size: 1rem; line-height: 1.5rem; }
|
||||
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
|
||||
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
|
||||
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
|
||||
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
|
||||
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
|
||||
.text-5xl { font-size: 3rem; line-height: 1; }
|
||||
.text-6xl { font-size: 3.75rem; line-height: 1; }
|
||||
|
||||
/* Layout and positioning */
|
||||
.flex { display: flex; }
|
||||
.flex-1 { flex: 1 1 0%; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
|
||||
.gap-2 { gap: 0.5rem; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
.gap-6 { gap: 1.5rem; }
|
||||
.gap-8 { gap: 2rem; }
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* Essential flexbox utilities */
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
/* Additional utility classes */
|
||||
.text-center { text-align: center; }
|
||||
.inline-block { display: inline-block; }
|
||||
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
|
||||
.pb-2 { padding-bottom: 0.5rem; }
|
||||
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
|
||||
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
||||
.uppercase { text-transform: uppercase; }
|
||||
.tracking-wide { letter-spacing: 0.025em; }
|
||||
.block { display: block; }
|
||||
|
||||
/* Sizing */
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
.min-w-0 { min-width: 0; }
|
||||
.max-w-lg { max-width: 32rem; }
|
||||
.max-w-md { max-width: 28rem; }
|
||||
.max-w-3xl { max-width: 48rem; }
|
||||
.max-w-4xl { max-width: 56rem; }
|
||||
.max-w-6xl { max-width: 72rem; }
|
||||
|
||||
/* Positioning */
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
.static { position: static; }
|
||||
.top-0 { top: 0; }
|
||||
.top-4 { top: 1rem; }
|
||||
.bottom-0 { bottom: 0; }
|
||||
.left-0 { left: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.right-2 { right: 0.5rem; }
|
||||
.right-4 { right: 1rem; }
|
||||
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
.top-1\/2 { top: 50%; }
|
||||
.-translate-y-1\/2 { transform: translateY(-50%); }
|
||||
.left-1\/2 { left: 50%; }
|
||||
.-translate-x-1\/2 { transform: translateX(-50%); }
|
||||
|
||||
/* Z-index */
|
||||
.z-10 { z-index: 10; }
|
||||
.z-40 { z-index: 40; }
|
||||
.z-50 { z-index: 50; }
|
||||
|
||||
/* Responsive flexbox and grid */
|
||||
@media (min-width: 640px) {
|
||||
.sm\\:flex-row { flex-direction: row; }
|
||||
.sm\\:items-center { align-items: center; }
|
||||
}
|
||||
|
||||
/* Responsive grid for large screens */
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* Essential missing classes */
|
||||
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
|
||||
.focus\\:border-blue-500:focus { border-color: #3b82f6; }
|
||||
.focus\\:ring-2:focus {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.focus\\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
|
||||
|
||||
/* Font weights */
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace; }
|
||||
|
||||
/* Spacing - margin */
|
||||
.m-0 { margin: 0; }
|
||||
.mb-2 { margin-bottom: 0.5rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
.mb-6 { margin-bottom: 1.5rem; }
|
||||
.mb-8 { margin-bottom: 2rem; }
|
||||
.mb-16 { margin-bottom: 4rem; }
|
||||
.mr-4 { margin-right: 1rem; }
|
||||
.mt-1 { margin-top: 0.25rem; }
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* Spacing - padding */
|
||||
.p-2 { padding: 0.5rem; }
|
||||
.p-3 { padding: 0.75rem; }
|
||||
.p-4 { padding: 1rem; }
|
||||
.p-6 { padding: 1.5rem; }
|
||||
.p-12 { padding: 3rem; }
|
||||
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
|
||||
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
||||
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
||||
.px-8 { padding-left: 2rem; padding-right: 2rem; }
|
||||
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
|
||||
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
||||
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
|
||||
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
|
||||
/* Border radius */
|
||||
.rounded { border-radius: 0.25rem; }
|
||||
.rounded-md { border-radius: 0.375rem; }
|
||||
.rounded-lg { border-radius: 0.5rem; }
|
||||
.rounded-xl { border-radius: 0.75rem; }
|
||||
.rounded-3xl { border-radius: 1.5rem; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
|
||||
/* Width and height */
|
||||
.w-4 { width: 1rem; }
|
||||
.w-5 { width: 1.25rem; }
|
||||
.w-6 { width: 1.5rem; }
|
||||
.w-10 { width: 2.5rem; }
|
||||
.w-12 { width: 3rem; }
|
||||
.w-full { width: 100%; }
|
||||
.h-4 { height: 1rem; }
|
||||
.h-5 { height: 1.25rem; }
|
||||
.h-6 { height: 1.5rem; }
|
||||
.h-10 { height: 2.5rem; }
|
||||
.h-12 { height: 3rem; }
|
||||
.h-full { height: 100%; }
|
||||
.h-px { height: 1px; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
|
||||
/* Max width */
|
||||
.max-w-lg { max-width: 32rem; }
|
||||
.max-w-md { max-width: 28rem; }
|
||||
.max-w-3xl { max-width: 48rem; }
|
||||
.max-w-4xl { max-width: 56rem; }
|
||||
.max-w-6xl { max-width: 72rem; }
|
||||
|
||||
/* Flexbox */
|
||||
.flex { display: flex; }
|
||||
.flex-1 { flex: 1 1 0%; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
|
||||
/* Grid */
|
||||
.grid { display: grid; }
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||
|
||||
/* Responsive grid classes */
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* Gap */
|
||||
.gap-1 { gap: 0.25rem; }
|
||||
.gap-2 { gap: 0.5rem; }
|
||||
.gap-3 { gap: 0.75rem; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
.gap-6 { gap: 1.5rem; }
|
||||
.gap-8 { gap: 2rem; }
|
||||
|
||||
/* Spacing utilities */
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); }
|
||||
.space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); }
|
||||
.space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); }
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); }
|
||||
.space-y-12 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3rem * var(--tw-space-y-reverse)); }
|
||||
|
||||
/* Shadows */
|
||||
.shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
|
||||
|
||||
/* Display */
|
||||
.block { display: block; }
|
||||
.inline-block { display: inline-block; }
|
||||
.hidden { display: none; }
|
||||
|
||||
/* Text alignment */
|
||||
.text-center { text-align: center; }
|
||||
|
||||
/* Position */
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
|
||||
/* Inset positioning */
|
||||
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
.top-0 { top: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.bottom-0 { bottom: 0; }
|
||||
.left-0 { left: 0; }
|
||||
.top-4 { top: 1rem; }
|
||||
.right-4 { right: 1rem; }
|
||||
.left-4 { left: 1rem; }
|
||||
|
||||
/* Z-index */
|
||||
.z-40 { z-index: 40; }
|
||||
.z-50 { z-index: 50; }
|
||||
|
||||
/* Top/bottom/left/right */
|
||||
.top-4 { top: 1rem; }
|
||||
.right-4 { right: 1rem; }
|
||||
.top-1\/2 { top: 50%; }
|
||||
.left-1\/2 { left: 50%; }
|
||||
.right-2 { right: 0.5rem; }
|
||||
|
||||
/* Transform */
|
||||
.transform { transform: var(--tw-transform); }
|
||||
.-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
|
||||
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
|
||||
.hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
|
||||
|
||||
/* Transitions */
|
||||
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
||||
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
||||
.duration-200 { transition-duration: 200ms; }
|
||||
.duration-300 { transition-duration: 300ms; }
|
||||
|
||||
/* Cursor */
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
|
||||
/* Focus states */
|
||||
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
|
||||
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
|
||||
.focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); }
|
||||
|
||||
/* Missing classes from headeranalyzer.html */
|
||||
|
||||
/* Word breaking and text wrapping */
|
||||
.break-all { word-break: break-all; }
|
||||
.break-words { word-break: break-word; }
|
||||
.whitespace-pre-wrap { white-space: pre-wrap; }
|
||||
|
||||
/* Overflow utilities */
|
||||
.overflow-x-auto { overflow-x: auto; }
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
|
||||
/* Table utilities */
|
||||
.divide-y { border-top-width: 0; }
|
||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(75 85 99 / var(--tw-divide-opacity));
|
||||
}
|
||||
|
||||
/* Additional width/height classes */
|
||||
.w-8 { width: 2rem; }
|
||||
.w-48 { width: 12rem; }
|
||||
.h-8 { height: 2rem; }
|
||||
|
||||
/* Text alignment */
|
||||
.text-left { text-align: left; }
|
||||
|
||||
/* Border sides */
|
||||
.border-r { border-right-width: 1px; border-right-style: solid; }
|
||||
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
|
||||
|
||||
/* Resize utilities */
|
||||
.resize-y { resize: vertical; }
|
||||
|
||||
/* Placeholder colors */
|
||||
.placeholder-gray-400::placeholder { color: #9ca3af; }
|
||||
|
||||
/* Focus ring with opacity */
|
||||
.focus\:ring-blue-500\/20:focus {
|
||||
--tw-ring-color: rgb(59 130 246 / 0.2);
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
/* Background opacity variants */
|
||||
.bg-gray-700\/50 { background-color: rgb(55 65 81 / 0.5); }
|
||||
.bg-red-900\/20 { background-color: rgb(127 29 29 / 0.2); }
|
||||
.bg-yellow-900\/20 { background-color: rgb(113 63 18 / 0.2); }
|
||||
|
||||
/* Additional spacing */
|
||||
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
/* Additional margin */
|
||||
.mt-1 { margin-top: 0.25rem; }
|
||||
.mt-2 { margin-top: 0.5rem; }
|
||||
.mt-4 { margin-top: 1rem; }
|
||||
|
||||
/* Inline flex */
|
||||
.inline-flex { display: inline-flex; }
|
||||
|
||||
/* Additional text sizes */
|
||||
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
|
||||
|
||||
/* Hover states */
|
||||
.hover\:bg-gray-600:hover { background-color: #4b5563; }
|
||||
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
|
||||
.hover\:bg-green-700:hover { background-color: #15803d; }
|
||||
.hover\:bg-red-700:hover { background-color: #b91c1c; }
|
||||
.hover\:text-blue-400:hover { color: #60a5fa; }
|
||||
.hover\:text-blue-300:hover { color: #93c5fd; }
|
||||
.hover\:border-green-500:hover { border-color: #22c55e; }
|
||||
.hover\:bg-gray-700\/50:hover { background-color: rgb(55 65 81 / 0.5); }
|
||||
|
||||
/* Responsive classes */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row { flex-direction: row; }
|
||||
.sm\:items-center { align-items: center; }
|
||||
.sm\:flex { display: flex; }
|
||||
.sm\:mb-0 { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
|
||||
.md\:text-6xl { font-size: 3.75rem; line-height: 1; }
|
||||
.md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
|
||||
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom CSS variables and styles */
|
||||
:root {
|
||||
--bg-color: #0f172a;
|
||||
--text-color: #e2e8f0;
|
||||
--section-bg: #1e293b;
|
||||
--border-color: #334155;
|
||||
--highlight: #3b82f6;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
--dark-bg: #1e293b;
|
||||
--dark-text: #f8fafc;
|
||||
--dark-muted: #94a3b8;
|
||||
--dark-border: #475569;
|
||||
}
|
||||
|
||||
/* Custom Tailwind theme extensions */
|
||||
.bg-dark-bg { background-color: var(--dark-bg); }
|
||||
.text-dark-text { color: var(--dark-text); }
|
||||
.text-dark-muted { color: var(--dark-muted); }
|
||||
.border-dark-border { border-color: var(--dark-border); }
|
||||
|
||||
/* Custom animations */
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(100%); opacity: 0; }
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slideInRight 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-out-right {
|
||||
animation: slideOutRight 0.3s ease-in forwards;
|
||||
}
|
||||
|
||||
/* Backdrop blur for popup */
|
||||
/* Backdrop filters */
|
||||
.backdrop-blur-none { backdrop-filter: blur(0); }
|
||||
.backdrop-blur-sm { backdrop-filter: blur(4px); }
|
||||
.backdrop-blur { backdrop-filter: blur(8px); }
|
||||
.backdrop-blur-md { backdrop-filter: blur(12px); }
|
||||
.backdrop-blur-lg { backdrop-filter: blur(16px); }
|
||||
.backdrop-blur-xl { backdrop-filter: blur(24px); }
|
||||
|
||||
.backdrop-blur-popup {
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Floating button styles */
|
||||
.floating-nav {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Custom component styles that extend Tailwind */
|
||||
.password-generator {
|
||||
max-width: 56rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--section-bg);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
transform: scale(1.05);
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background-color: var(--highlight);
|
||||
color: white;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user