first commit
This commit is contained in:
commit
405df0a122
3083 changed files with 69203 additions and 0 deletions
70
resources/css/admin.css
Normal file
70
resources/css/admin.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
not Used
|
||||
*/
|
||||
@import "tailwindcss";
|
||||
@import "../../vendor/livewire/flux/dist/flux.css";
|
||||
|
||||
@source '../views';
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
||||
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--color-zinc-50: var(--color-neutral-50);
|
||||
--color-zinc-100: var(--color-neutral-100);
|
||||
--color-zinc-200: var(--color-neutral-200);
|
||||
--color-zinc-300: var(--color-neutral-300);
|
||||
--color-zinc-400: var(--color-neutral-400);
|
||||
--color-zinc-500: var(--color-neutral-500);
|
||||
--color-zinc-600: var(--color-neutral-600);
|
||||
--color-zinc-700: var(--color-neutral-700);
|
||||
--color-zinc-800: var(--color-neutral-800);
|
||||
--color-zinc-900: var(--color-neutral-900);
|
||||
--color-zinc-950: var(--color-neutral-950);
|
||||
|
||||
--color-accent: var(--color-sky-600);
|
||||
--color-accent-content: var(--color-sky-600);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: var(--color-sky-600);
|
||||
--color-accent-content: var(--color-sky-400);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
67
resources/css/portal.css
Normal file
67
resources/css/portal.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@import "tailwindcss";
|
||||
@import "../../vendor/livewire/flux/dist/flux.css";
|
||||
|
||||
@source '../views';
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
||||
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--color-zinc-50: var(--color-neutral-50);
|
||||
--color-zinc-100: var(--color-neutral-100);
|
||||
--color-zinc-200: var(--color-neutral-200);
|
||||
--color-zinc-300: var(--color-neutral-300);
|
||||
--color-zinc-400: var(--color-neutral-400);
|
||||
--color-zinc-500: var(--color-neutral-500);
|
||||
--color-zinc-600: var(--color-neutral-600);
|
||||
--color-zinc-700: var(--color-neutral-700);
|
||||
--color-zinc-800: var(--color-neutral-800);
|
||||
--color-zinc-900: var(--color-neutral-900);
|
||||
--color-zinc-950: var(--color-neutral-950);
|
||||
|
||||
--color-accent: #3ea3dc;
|
||||
--color-accent-content: #3ea3dc;
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: #3ea3dc;
|
||||
--color-accent-content: #5bb8e6;
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
102
resources/css/web/shared-styles.css
Normal file
102
resources/css/web/shared-styles.css
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
/**
|
||||
* Gemeinsame Styles für alle Frontend-Themes
|
||||
* Diese Datei wird von allen Web-Themes importiert
|
||||
*/
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Definiere wo Tailwind nach Klassen suchen soll */
|
||||
@source "../../views/web";
|
||||
@source "../../views/layouts/web";
|
||||
@source "../../views/livewire/web";
|
||||
@source "../../views/components/web";
|
||||
|
||||
/* Tailwind Base Layer für gemeinsame Elemente */
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased;
|
||||
}
|
||||
|
||||
/* Typography Defaults */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-bold leading-tight;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl md:text-5xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl md:text-4xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl md:text-3xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl md:text-2xl;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-lg md:text-xl;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply text-base md:text-lg;
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
a {
|
||||
@apply transition-colors duration-200;
|
||||
}
|
||||
|
||||
/* Focus Styles */
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-offset-2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gemeinsame Component Styles */
|
||||
@layer components {
|
||||
/* Button Base Styles */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200;
|
||||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply bg-white rounded-lg shadow-md overflow-hidden;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container-custom {
|
||||
@apply container mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* Section Spacing */
|
||||
.section {
|
||||
@apply py-12 md:py-16 lg:py-20;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
3
resources/css/web/test.css
Normal file
3
resources/css/web/test.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
291
resources/css/web/theme-businessportal24.css
Normal file
291
resources/css/web/theme-businessportal24.css
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
/**
|
||||
* Theme für Businessportal24 (businessportal24.test)
|
||||
* Primary: #cf3628 (Rot)
|
||||
* Secondary: #f0834a (Orange)
|
||||
* Font: Montserrat
|
||||
*/
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* Theme-spezifische CSS-Variablen */
|
||||
:root {
|
||||
/* Font-Familie */
|
||||
--font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-secondary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* HSL-Variablen basierend auf Primary Color #cf3628 */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 4 61% 20%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 4 61% 20%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 4 61% 20%;
|
||||
|
||||
/* Primary: #cf3628 -> hsl(4, 61%, 48%) */
|
||||
--primary: 4 61% 48%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-50: 4 60% 96%;
|
||||
--primary-100: 4 61% 92%;
|
||||
--primary-200: 4 61% 85%;
|
||||
--primary-300: 4 61% 75%;
|
||||
--primary-400: 4 61% 65%;
|
||||
--primary-500: 4 61% 55%;
|
||||
--primary-600: 4 61% 48%;
|
||||
--primary-700: 4 61% 40%;
|
||||
--primary-800: 4 61% 32%;
|
||||
--primary-900: 4 61% 25%;
|
||||
--primary-950: 4 61% 20%;
|
||||
|
||||
/* Secondary: #f0834a -> hsl(21, 84%, 62%) */
|
||||
--secondary: 21 84% 62%;
|
||||
--secondary-foreground: 4 61% 20%;
|
||||
|
||||
--muted: 4 10% 95%;
|
||||
--muted-foreground: 4 10% 45%;
|
||||
|
||||
--accent: 4 61% 48%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 4 10% 90%;
|
||||
--input: 4 10% 90%;
|
||||
--ring: 4 61% 48%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Gradient für Hero */
|
||||
--gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
|
||||
|
||||
/* Shadow-Token */
|
||||
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Warning Colors für Anzeige-Badge */
|
||||
--warning: 45 93% 47%;
|
||||
--warning-foreground: 26 83% 14%;
|
||||
}
|
||||
|
||||
/* Dark Mode Variablen (falls gewünscht) */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--background: 4 20% 10%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 4 20% 12%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 4 20% 12%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 21 84% 62%;
|
||||
--secondary: 4 61% 48%;
|
||||
|
||||
--muted: 4 20% 20%;
|
||||
--muted-foreground: 4 10% 70%;
|
||||
|
||||
--accent: 21 84% 62%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
|
||||
--border: 4 20% 20%;
|
||||
--input: 4 20% 20%;
|
||||
--ring: 21 84% 62%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme-spezifische Overrides */
|
||||
@layer base {
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
|
||||
background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
hsl(var(--primary) / 0.9),
|
||||
hsl(var(--secondary) / 0.9)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all duration-200 hover:bg-gray-50;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply rounded-xl border transition-all duration-300;
|
||||
background-color: hsl(var(--card));
|
||||
border-color: hsl(var(--border));
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:scale-[1.02];
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
.shadow-card {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.shadow-card-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input-primary {
|
||||
@apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200;
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.input-primary:focus {
|
||||
@apply outline-none;
|
||||
--tw-ring-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border;
|
||||
background-color: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border text-gray-700;
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
border-color: hsl(var(--secondary) / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
63
resources/css/web/theme-main.css
Normal file
63
resources/css/web/theme-main.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@source '../../views/web/layout.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--color-zinc-50: #fafafa;
|
||||
--color-zinc-100: #f5f5f5;
|
||||
--color-zinc-200: #e5e5e5;
|
||||
--color-zinc-300: #d4d4d4;
|
||||
--color-zinc-400: #a3a3a3;
|
||||
--color-zinc-500: #737373;
|
||||
--color-zinc-600: #525252;
|
||||
--color-zinc-700: #404040;
|
||||
--color-zinc-800: #262626;
|
||||
--color-zinc-900: #171717;
|
||||
--color-zinc-950: #0a0a0a;
|
||||
|
||||
--color-accent: var(--color-neutral-800);
|
||||
--color-accent-content: var(--color-neutral-800);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: var(--color-white);
|
||||
--color-accent-content: var(--color-white);
|
||||
--color-accent-foreground: var(--color-neutral-800);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
291
resources/css/web/theme-presseecho.css
Normal file
291
resources/css/web/theme-presseecho.css
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
/**
|
||||
* Theme für Presseecho (presseecho.test)
|
||||
* Primary: #345636 (Grün)
|
||||
* Secondary: #6b8f71 (Hellgrün)
|
||||
* Font: Montserrat
|
||||
*/
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* Theme-spezifische CSS-Variablen */
|
||||
:root {
|
||||
/* Font-Familie */
|
||||
--font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-secondary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* HSL-Variablen basierend auf Primary Color #345636 */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 126 24% 20%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 126 24% 20%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 126 24% 20%;
|
||||
|
||||
/* Primary: #345636 -> hsl(126, 24%, 27%) */
|
||||
--primary: 126 24% 27%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-50: 126 24% 96%;
|
||||
--primary-100: 126 24% 92%;
|
||||
--primary-200: 126 24% 85%;
|
||||
--primary-300: 126 24% 75%;
|
||||
--primary-400: 126 24% 65%;
|
||||
--primary-500: 126 24% 55%;
|
||||
--primary-600: 126 24% 48%;
|
||||
--primary-700: 126 24% 40%;
|
||||
--primary-800: 126 24% 32%;
|
||||
--primary-900: 126 24% 25%;
|
||||
--primary-950: 126 24% 20%;
|
||||
|
||||
/* Secondary: #6b8f71 -> hsl(130, 15%, 49%) */
|
||||
--secondary: 130 15% 49%;
|
||||
--secondary-foreground: 126 24% 20%;
|
||||
|
||||
--muted: 126 10% 95%;
|
||||
--muted-foreground: 126 10% 45%;
|
||||
|
||||
--accent: 126 24% 27%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 126 10% 90%;
|
||||
--input: 126 10% 90%;
|
||||
--ring: 126 24% 27%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Gradient für Hero */
|
||||
--gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
|
||||
|
||||
/* Shadow-Token */
|
||||
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Warning Colors für Anzeige-Badge */
|
||||
--warning: 45 93% 47%;
|
||||
--warning-foreground: 26 83% 14%;
|
||||
}
|
||||
|
||||
/* Dark Mode Variablen (falls gewünscht) */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--background: 126 20% 10%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 126 20% 12%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 126 20% 12%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 130 15% 49%;
|
||||
--secondary: 126 24% 27%;
|
||||
|
||||
--muted: 126 20% 20%;
|
||||
--muted-foreground: 126 10% 70%;
|
||||
|
||||
--accent: 130 15% 49%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
|
||||
--border: 126 20% 20%;
|
||||
--input: 126 20% 20%;
|
||||
--ring: 130 15% 49%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme-spezifische Overrides */
|
||||
@layer base {
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
|
||||
background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
hsl(var(--primary) / 0.9),
|
||||
hsl(var(--secondary) / 0.9)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all duration-200 hover:bg-gray-50;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply rounded-xl border transition-all duration-300;
|
||||
background-color: hsl(var(--card));
|
||||
border-color: hsl(var(--border));
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:scale-[1.02];
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
.shadow-card {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.shadow-card-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input-primary {
|
||||
@apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200;
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.input-primary:focus {
|
||||
@apply outline-none;
|
||||
--tw-ring-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border;
|
||||
background-color: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border text-gray-700;
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
border-color: hsl(var(--secondary) / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue