Remove deprecated files and templates: Delete unused files including deployment scripts, environment configurations, and various HTML templates to streamline the project structure. This cleanup enhances maintainability and reduces clutter in the codebase.
This commit is contained in:
104
static/css/assistant.css
Normal file
104
static/css/assistant.css
Normal file
@@ -0,0 +1,104 @@
|
||||
/* ChatGPT Assistent Styles */
|
||||
#chatgpt-assistant {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
#assistant-chat {
|
||||
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#assistant-toggle {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#assistant-toggle:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#assistant-history {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
||||
}
|
||||
|
||||
#assistant-history::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#assistant-history::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#assistant-history::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dark #assistant-history::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.3);
|
||||
}
|
||||
|
||||
/* Mach Platz für Notifications, damit sie nicht mit dem Assistenten überlappen */
|
||||
.notification-area {
|
||||
bottom: 5rem;
|
||||
}
|
||||
|
||||
/* Verbesserter Glassmorphism-Effekt */
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.dark .glass-morphism {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Dunkleres Dark Theme */
|
||||
.dark {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.dark .bg-dark-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.dark .bg-dark-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(15, 23, 42, var(--tw-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.dark .bg-dark-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(23, 33, 64, var(--tw-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
/* Footer immer unten */
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
426
static/css/base-styles.css
Normal file
426
static/css/base-styles.css
Normal file
@@ -0,0 +1,426 @@
|
||||
/* Globale Variablen */
|
||||
:root {
|
||||
--dark-bg: #0e1220;
|
||||
--dark-card-bg: rgba(24, 28, 45, 0.8);
|
||||
--dark-element-bg: rgba(24, 28, 45, 0.8);
|
||||
--light-bg: #f0f4f8;
|
||||
--light-card-bg: rgba(255, 255, 255, 0.85);
|
||||
--accent-color: #b38fff;
|
||||
--accent-gradient: linear-gradient(135deg, #b38fff, #58a9ff);
|
||||
--accent-gradient-hover: linear-gradient(135deg, #c7a8ff, #70b5ff);
|
||||
--blur-amount: 20px;
|
||||
--border-radius: 28px;
|
||||
--card-border-radius: 24px;
|
||||
--button-radius: 18px;
|
||||
--nav-item-radius: 14px;
|
||||
}
|
||||
|
||||
/* Dark Mode Einstellungen */
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
html, body {
|
||||
background-color: var(--dark-bg) !important;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
overflow-x: hidden;
|
||||
transition: background-color 0.5s ease, color 0.5s ease;
|
||||
}
|
||||
|
||||
/* Sicherstellen, dass der dunkle Hintergrund die gesamte Seite abdeckt */
|
||||
#app-container, .container, main, .mx-auto, .py-12, #content-wrapper {
|
||||
background-color: transparent !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Light Mode Einstellungen */
|
||||
html.light, html.light body {
|
||||
background-color: var(--light-bg) !important;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
/* Große Headings mit verbesserten Stilen */
|
||||
h1.hero-heading {
|
||||
font-size: clamp(2.5rem, 8vw, 5rem);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h2.section-heading {
|
||||
font-size: clamp(1.75rem, 5vw, 3rem);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
/* Verbesserte Glasmorphismus-Stile */
|
||||
.glass-morphism {
|
||||
background: var(--dark-card-bg);
|
||||
backdrop-filter: blur(var(--blur-amount));
|
||||
-webkit-backdrop-filter: blur(var(--blur-amount));
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-morphism:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.glass-morphism-light {
|
||||
background: var(--light-card-bg);
|
||||
backdrop-filter: blur(var(--blur-amount));
|
||||
-webkit-backdrop-filter: blur(var(--blur-amount));
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-morphism-light:hover {
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Verbesserte Navbar-Styles */
|
||||
.glass-navbar-dark {
|
||||
background: rgba(14, 18, 32, 0.85);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
.glass-navbar-light {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
/* Verbesserte Button-Stile mit besserer Lesbarkeit und stärkeren Farbverläufen */
|
||||
.btn, button, .button, [type="button"], [type="submit"] {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: var(--button-radius);
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn:hover, button:hover, .button:hover, [type="button"]:hover, [type="submit"]:hover {
|
||||
background: linear-gradient(135deg, rgba(129, 140, 248, 0.9), rgba(192, 132, 252, 0.9));
|
||||
transform: translateY(-3px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), 0 0 12px rgba(179, 143, 255, 0.35);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:active, button:active, .button:active, [type="button"]:active, [type="submit"]:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Navigation Stile mit verbesserten Farbverläufen */
|
||||
.nav-link {
|
||||
transition: all 0.25s ease;
|
||||
border-radius: var(--nav-item-radius);
|
||||
padding: 0.625rem 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: rgba(179, 143, 255, 0.2);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-link-active {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(139, 92, 246, 0.3));
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.nav-link-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
|
||||
}
|
||||
|
||||
/* Light-Mode Navigation Stile */
|
||||
.nav-link-light {
|
||||
color: rgba(26, 32, 44, 0.85);
|
||||
}
|
||||
|
||||
.nav-link-light:hover {
|
||||
background: rgba(179, 143, 255, 0.15);
|
||||
color: rgba(26, 32, 44, 1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-link-light-active {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(139, 92, 246, 0.2));
|
||||
color: rgba(26, 32, 44, 1);
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-link-light-active::after {
|
||||
background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
|
||||
}
|
||||
|
||||
/* Entfernung von Gradient-Hintergrund überall */
|
||||
.gradient-bg, .purple-gradient, .gradient-purple-bg {
|
||||
background: var(--dark-bg) !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Verbesserte Light-Mode-Stile für Buttons */
|
||||
html.light .btn, html.light button, html.light .button,
|
||||
html.light [type="button"], html.light [type="submit"] {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.7), rgba(139, 92, 246, 0.7));
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
html.light .btn:hover, html.light button:hover, html.light .button:hover,
|
||||
html.light [type="button"]:hover, html.light [type="submit"]:hover {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(168, 85, 247, 0.85));
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 0 12px rgba(179, 143, 255, 0.2);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Verbesserte Buttons mit Glasmorphismus */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, rgba(179, 143, 255, 0.8), rgba(88, 169, 255, 0.8));
|
||||
backdrop-filter: blur(var(--blur-amount));
|
||||
-webkit-backdrop-filter: blur(var(--blur-amount));
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: var(--button-radius);
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
|
||||
background: linear-gradient(135deg, rgba(190, 160, 255, 0.9), rgba(100, 180, 255, 0.9));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(32, 36, 55, 0.8);
|
||||
backdrop-filter: blur(var(--blur-amount));
|
||||
-webkit-backdrop-filter: blur(var(--blur-amount));
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--button-radius);
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
padding: 0.75rem 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
|
||||
background: rgba(38, 42, 65, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Steuerungsbutton-Stil */
|
||||
.control-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(32, 36, 55, 0.8);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(38, 42, 65, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Verbesserter Farbverlauf-Text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, rgba(200, 170, 255, 1), rgba(100, 180, 255, 1));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
|
||||
filter: drop-shadow(0 2px 6px rgba(179, 143, 255, 0.3));
|
||||
}
|
||||
|
||||
/* Globaler Hintergrund */
|
||||
.full-page-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--dark-bg);
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
html.light .full-page-bg {
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
|
||||
/* Animationen für Hintergrundeffekte */
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12px); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 0.7; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
100% { opacity: 0.7; transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Verbesserter Container für konsistente Layouts */
|
||||
.page-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
/* Dark Mode Toggle Stile */
|
||||
.dot {
|
||||
transform: translateX(0);
|
||||
transition: transform 0.3s ease-in-out, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
input:checked ~ .dot {
|
||||
transform: translateX(100%);
|
||||
background-color: #58a9ff;
|
||||
}
|
||||
|
||||
input:checked ~ .block {
|
||||
background-color: rgba(88, 169, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Feature Cards mit Glasmorphismus und Farbverlauf */
|
||||
.feature-card {
|
||||
border-radius: var(--card-border-radius);
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(145deg, rgba(32, 36, 55, 0.7), rgba(24, 28, 45, 0.9));
|
||||
backdrop-filter: blur(var(--blur-amount));
|
||||
-webkit-backdrop-filter: blur(var(--blur-amount));
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: linear-gradient(145deg, rgba(40, 44, 65, 0.8), rgba(28, 32, 50, 0.95));
|
||||
}
|
||||
|
||||
html.light .feature-card {
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 250, 0.9));
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
html.light .feature-card:hover {
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 255, 0.95));
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.feature-card .icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(139, 92, 246, 0.6));
|
||||
color: white;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
html.light .feature-card h3 {
|
||||
color: rgba(26, 32, 44, 0.95);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
html.light .feature-card p {
|
||||
color: rgba(26, 32, 44, 0.75);
|
||||
}
|
||||
3884
static/css/main.css
Normal file
3884
static/css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
207
static/css/src/input.css
Normal file
207
static/css/src/input.css
Normal file
@@ -0,0 +1,207 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-800 dark:bg-dark-800 dark:text-gray-100 font-sans;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-bold text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl md:text-5xl lg:text-6xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl md:text-4xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl md:text-3xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl md:text-2xl;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
@apply bg-white border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-dark-700 dark:border-dark-500 dark:focus:ring-primary-400 dark:focus:border-primary-400;
|
||||
}
|
||||
|
||||
label {
|
||||
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@apply text-gray-400 dark:text-gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm text-base;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn bg-primary-600 hover:bg-primary-700 text-white focus:ring-primary-500 hover:shadow-md active:translate-y-0.5 dark:bg-primary-700 dark:hover:bg-primary-600;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn bg-secondary-600 hover:bg-secondary-700 text-white focus:ring-secondary-500 hover:shadow-md active:translate-y-0.5 dark:bg-secondary-700 dark:hover:bg-secondary-600;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply btn border-2 border-gray-300 dark:border-dark-500 bg-white dark:bg-transparent text-gray-700 dark:text-gray-200 hover:bg-gray-50 hover:border-primary-500 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:border-primary-400 dark:hover:text-primary-400 focus:ring-gray-500 active:translate-y-0.5;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white shadow-md dark:bg-dark-700 rounded-lg overflow-hidden border border-gray-200 dark:border-dark-600 hover:shadow-lg transition-shadow duration-300;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
@apply text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600 dark:from-primary-500 dark:to-secondary-500 font-bold;
|
||||
}
|
||||
|
||||
.node-tooltip {
|
||||
@apply max-w-xs p-3 bg-white text-gray-800 dark:bg-dark-800 dark:text-white rounded-lg shadow-lg text-sm z-50 border border-gray-200 dark:border-dark-600;
|
||||
}
|
||||
|
||||
.mindmap-node {
|
||||
@apply cursor-pointer transition-all duration-200 hover:shadow-lg border-2 border-gray-200 dark:border-dark-600;
|
||||
}
|
||||
|
||||
/* Mindmap-spezifische Stile */
|
||||
.mindmap-container {
|
||||
@apply bg-gray-50/80 dark:bg-dark-800/80 rounded-lg p-4 shadow-inner;
|
||||
}
|
||||
|
||||
.mindmap-node-root {
|
||||
@apply bg-primary-100 dark:bg-primary-900 text-primary-900 dark:text-primary-100 border-primary-300 dark:border-primary-700;
|
||||
}
|
||||
|
||||
.mindmap-node-branch {
|
||||
@apply bg-secondary-100 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100 border-secondary-300 dark:border-secondary-700;
|
||||
}
|
||||
|
||||
.mindmap-node-leaf {
|
||||
@apply bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-dark-500;
|
||||
}
|
||||
|
||||
.mindmap-link {
|
||||
@apply stroke-gray-400 dark:stroke-gray-500 stroke-[2];
|
||||
}
|
||||
|
||||
.mindmap-link-active {
|
||||
@apply stroke-primary-500 dark:stroke-primary-400 stroke-[3];
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.ascii-art {
|
||||
@apply font-mono text-xs leading-none whitespace-pre tracking-tight select-none text-primary-700 dark:text-primary-400 opacity-80 dark:opacity-60 font-bold;
|
||||
}
|
||||
|
||||
/* Verbesserte Formulareingabefelder */
|
||||
.form-input,
|
||||
.form-textarea,
|
||||
.form-select {
|
||||
@apply w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-800 shadow-sm
|
||||
focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50
|
||||
dark:border-dark-500 dark:bg-dark-700 dark:text-gray-100 dark:focus:border-primary-400 dark:focus:ring-primary-400;
|
||||
}
|
||||
|
||||
.form-input-lg {
|
||||
@apply py-3 text-lg;
|
||||
}
|
||||
|
||||
.form-input-sm {
|
||||
@apply py-1 text-sm;
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio {
|
||||
@apply h-5 w-5 rounded border-gray-300 text-primary-600 shadow-sm
|
||||
focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50
|
||||
dark:border-dark-500 dark:bg-dark-700 dark:focus:border-primary-400 dark:focus:ring-primary-400;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
@apply mt-1 text-sm text-red-600 dark:text-red-400;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.tech-gradient {
|
||||
@apply bg-gradient-to-r from-primary-600 to-secondary-500;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
@apply bg-white/95 backdrop-blur-md border border-gray-200 shadow-md dark:bg-dark-800/90 dark:border-dark-700/50 dark:shadow-xl;
|
||||
}
|
||||
|
||||
.focus-ring {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-primary-400 dark:focus:ring-offset-dark-800;
|
||||
}
|
||||
|
||||
.input-focus {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form validation styles */
|
||||
.is-valid {
|
||||
@apply border-green-500 dark:border-green-400;
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
@apply border-red-500 dark:border-red-400;
|
||||
}
|
||||
|
||||
.is-valid:focus {
|
||||
@apply ring-green-500/30 border-green-500 dark:ring-green-400/30 dark:border-green-400;
|
||||
}
|
||||
|
||||
.is-invalid:focus {
|
||||
@apply ring-red-500/30 border-red-500 dark:ring-red-400/30 dark:border-red-400;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
@apply text-xs text-gray-500 dark:text-gray-400 mt-1;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
@apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
@apply pl-10;
|
||||
}
|
||||
1444
static/css/style.css
Normal file
1444
static/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user