117 lines
3.7 KiB
CSS
117 lines
3.7 KiB
CSS
@import 'tailwindcss';
|
||
/*@import "@plugins/Toastra/src/message.css";*/
|
||
@import '@plugins/GlassToastra/style.css';
|
||
|
||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||
@source '../../storage/framework/views/*.php';
|
||
@source '../**/*.blade.php';
|
||
@source '../**/*.js';
|
||
|
||
@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-glass-bg: rgba(17, 24, 39, 0.55);
|
||
--color-glass-border: rgba(255, 255, 255, 0.08);
|
||
--color-glass-light: rgba(31, 41, 55, 0.4);
|
||
|
||
--color-accent: #06b6d4; /* cyan-500 */
|
||
--color-accent-600: #0891b2; /* cyan-600 */
|
||
--color-accent-700: #0e7490; /* cyan-700 */
|
||
--color-ring: rgba(34, 197, 94, .35); /* ein Hauch Grün im Focus-Glow */
|
||
}
|
||
|
||
|
||
/* Reusable utilities */
|
||
.glass-card {
|
||
@apply bg-glass-bg/70 backdrop-blur-md border border-glass-border rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,.25)];
|
||
}
|
||
.glass-input {
|
||
@apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100 placeholder-gray-400
|
||
focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)] focus:border-cyan-500/60
|
||
transition-colors;
|
||
}
|
||
.btn-primary {
|
||
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white font-medium
|
||
bg-gradient-to-b from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-600
|
||
focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)]
|
||
shadow-[inset_0_1px_0_rgba(255,255,255,.08),0_8px_20px_rgba(0,0,0,.25)];
|
||
}
|
||
.badge {
|
||
@apply text-xs px-2 py-0.5 rounded-md border border-glass-border text-gray-300/80 bg-glass-light/40;
|
||
}
|
||
.card-title {
|
||
@apply text-gray-100/95 font-semibold tracking-wide;
|
||
}
|
||
.card-subtle {
|
||
@apply text-gray-300/70 text-sm leading-relaxed;
|
||
}
|
||
|
||
/* Zustände für Inputs */
|
||
.input-error {
|
||
@apply border-red-400/50 focus:border-red-400/70 focus:ring-red-400/30;
|
||
}
|
||
.input-success {
|
||
@apply border-emerald-400/50 focus:border-emerald-400/70 focus:ring-emerald-400/30;
|
||
}
|
||
.input-disabled {
|
||
@apply opacity-60 cursor-not-allowed;
|
||
}
|
||
|
||
/* Label & Fehlermeldung */
|
||
.field-label {
|
||
@apply block text-sm text-gray-300 mb-1;
|
||
}
|
||
.field-error {
|
||
@apply mt-1 text-xs text-red-300;
|
||
}
|
||
.field-help {
|
||
@apply mt-1 text-xs text-gray-400;
|
||
}
|
||
|
||
/* Select im gleichen Look wie .glass-input */
|
||
.glass-select {
|
||
@apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100
|
||
focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)]
|
||
focus:border-cyan-500/60 transition-colors;
|
||
}
|
||
|
||
/* Input mit Icon links (Wrapper) */
|
||
.input-with-icon {
|
||
@apply relative;
|
||
}
|
||
.input-with-icon > .icon-left {
|
||
@apply absolute inset-y-0 left-3 flex items-center text-gray-400;
|
||
}
|
||
.input-with-icon > input {
|
||
@apply pl-10; /* Platz für Icon */
|
||
}
|
||
|
||
/* Karten-Interaktion (leichtes Hover-Lift) */
|
||
.glass-card:hover {
|
||
@apply shadow-[0_12px_38px_rgba(0,0,0,.3)];
|
||
}
|
||
|
||
/* Buttons – zusätzliche Varianten */
|
||
.btn-ghost {
|
||
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-gray-200
|
||
bg-white/5 border border-white/10 hover:bg-white/10
|
||
focus:outline-none focus:ring-4 focus:ring-[var(--color-ring)];
|
||
}
|
||
.btn-danger {
|
||
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white
|
||
bg-gradient-to-b from-rose-500 to-rose-600 hover:from-rose-400 hover:to-rose-600
|
||
focus:outline-none focus:ring-4 focus:ring-rose-400/40;
|
||
}
|
||
|
||
/* Checkbox/Switch im Glas-Look */
|
||
.glass-checkbox {
|
||
@apply h-4 w-4 rounded border border-glass-border bg-white/10
|
||
checked:bg-cyan-500 checked:border-cyan-500
|
||
focus:ring-2 focus:ring-[var(--color-ring)];
|
||
}
|
||
|
||
/* Trennlinie in Karten */
|
||
.divider {
|
||
@apply border-t border-glass-border/80 my-6;
|
||
}
|