mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-21 15:06:41 +02:00
ace7fa8f7f
- Move finance, mail, moodlit to apps-archived for later development - Rename games/voxel-lava to games/voxelava 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
153 lines
3.1 KiB
CSS
153 lines
3.1 KiB
CSS
@import "tailwindcss";
|
|
@import "@manacore/shared-tailwind/themes.css";
|
|
|
|
/* Scan shared packages for Tailwind classes */
|
|
@source "../../../../../packages/shared-ui/src";
|
|
@source "../../../../../packages/shared-theme-ui/src";
|
|
|
|
/* Moods-specific CSS Variables */
|
|
@layer base {
|
|
:root {
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
}
|
|
}
|
|
|
|
/* Mood Card Styles */
|
|
.mood-card {
|
|
background-color: hsl(var(--color-surface));
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
border: 1px solid hsl(var(--color-border));
|
|
transition: all var(--transition-base);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mood-card:hover {
|
|
border-color: hsl(var(--color-primary) / 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Color Preview */
|
|
.color-preview {
|
|
width: 100%;
|
|
height: 120px;
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Animated Background */
|
|
.animated-background {
|
|
background-size: 400% 400%;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* Color Picker */
|
|
.color-picker-swatch {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-md);
|
|
border: 2px solid hsl(var(--color-border));
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.color-picker-swatch:hover {
|
|
border-color: hsl(var(--color-primary));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Card styles */
|
|
.card {
|
|
background-color: hsl(var(--color-surface));
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
border: 1px solid hsl(var(--color-border));
|
|
}
|
|
|
|
/* Button styles */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--radius-md);
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
transition: all var(--transition-base);
|
|
cursor: pointer;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: hsl(var(--color-primary));
|
|
color: hsl(var(--color-primary-foreground));
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: hsl(var(--color-primary) / 0.9);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: hsl(var(--color-secondary));
|
|
color: hsl(var(--color-secondary-foreground));
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: hsl(var(--color-secondary) / 0.8);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: hsl(var(--color-foreground));
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: hsl(var(--color-muted));
|
|
}
|
|
|
|
/* Input styles */
|
|
.input {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 2px solid hsl(var(--color-border));
|
|
border-radius: var(--radius-md);
|
|
background-color: hsl(var(--color-background));
|
|
color: hsl(var(--color-foreground));
|
|
font-size: 0.875rem;
|
|
transition: border-color var(--transition-fast);
|
|
}
|
|
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--color-primary));
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: hsl(var(--color-muted-foreground));
|
|
}
|