Initial commit: Open sourcing all of the Maple Open Technologies code.
This commit is contained in:
commit
755d54a99d
2010 changed files with 448675 additions and 0 deletions
411
web/maplefile-frontend/src/index.css
Normal file
411
web/maplefile-frontend/src/index.css
Normal file
|
|
@ -0,0 +1,411 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom Font Import */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
|
||||
|
||||
/* CSS Variables for Design System */
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary-50: #fef2f2;
|
||||
--color-primary-100: #fee2e2;
|
||||
--color-primary-200: #fecaca;
|
||||
--color-primary-300: #fca5a5;
|
||||
--color-primary-400: #f87171;
|
||||
--color-primary-500: #ef4444;
|
||||
--color-primary-600: #dc2626;
|
||||
--color-primary-700: #b91c1c;
|
||||
--color-primary-800: #991b1b;
|
||||
--color-primary-900: #7f1d1d;
|
||||
|
||||
/* Neutral Colors */
|
||||
--color-gray-50: #fafafa;
|
||||
--color-gray-100: #f4f4f5;
|
||||
--color-gray-200: #e4e4e7;
|
||||
--color-gray-300: #d4d4d8;
|
||||
--color-gray-400: #a1a1aa;
|
||||
--color-gray-500: #71717a;
|
||||
--color-gray-600: #52525b;
|
||||
--color-gray-700: #3f3f46;
|
||||
--color-gray-800: #27272a;
|
||||
--color-gray-900: #18181b;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl:
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family:
|
||||
"Inter",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-900;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
at 40% 20%,
|
||||
rgb(251, 113, 133, 0.05) 0px,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
at 80% 0%,
|
||||
rgb(251, 207, 232, 0.05) 0px,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
at 0% 50%,
|
||||
rgb(252, 165, 165, 0.05) 0px,
|
||||
transparent 50%
|
||||
);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Typography Base */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 hover:bg-gray-400 rounded-full;
|
||||
transition: background-color var(--transition-base);
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
@apply bg-red-100 text-red-900;
|
||||
}
|
||||
|
||||
/* Focus Styles */
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
@apply ring-2 ring-red-500 ring-offset-2 rounded-md;
|
||||
}
|
||||
|
||||
/* Component Styles */
|
||||
@layer components {
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:shadow-lg hover:border-gray-300 hover:-translate-y-0.5 transform transition-all duration-200;
|
||||
}
|
||||
|
||||
/* Button Base */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn bg-gradient-to-r from-red-700 to-red-800 text-white hover:from-red-800 hover:to-red-900 focus:ring-red-500 shadow-sm hover:shadow-md;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply btn border border-red-300 text-red-700 bg-white hover:bg-red-50 focus:ring-red-500;
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input {
|
||||
@apply w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all duration-200 placeholder-gray-400;
|
||||
}
|
||||
|
||||
.input:hover:not(:focus) {
|
||||
@apply border-gray-400;
|
||||
}
|
||||
|
||||
/* Label Styles */
|
||||
.label {
|
||||
@apply block text-sm font-medium text-gray-700 mb-1.5;
|
||||
}
|
||||
|
||||
/* Section Headers */
|
||||
.section-header {
|
||||
@apply flex items-center space-x-3 mb-6;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
@apply flex items-center justify-center h-12 w-12 rounded-xl bg-gradient-to-br;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply badge bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply badge bg-yellow-100 text-yellow-800;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
@apply badge bg-red-100 text-red-800;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
@apply badge bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.spinner {
|
||||
@apply animate-spin rounded-full border-b-2 border-current;
|
||||
}
|
||||
|
||||
/* Skeleton Loading */
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-gray-200 rounded;
|
||||
}
|
||||
|
||||
/* Glass Effect */
|
||||
.glass {
|
||||
@apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.gradient-text {
|
||||
@apply bg-gradient-to-r from-red-700 to-red-900 bg-clip-text text-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-soft {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-fade-in {
|
||||
animation: fade-in var(--transition-slow) ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up var(--transition-slow) ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down var(--transition-slow) ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in var(--transition-slow) ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right var(--transition-slow) ease-out;
|
||||
}
|
||||
|
||||
.animate-pulse-soft {
|
||||
animation: pulse-soft 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Hover Lift Effect */
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-200 hover:-translate-y-1;
|
||||
}
|
||||
|
||||
/* Gradient Backgrounds */
|
||||
.bg-gradient-primary {
|
||||
@apply bg-gradient-to-r from-red-700 to-red-800;
|
||||
}
|
||||
|
||||
.bg-gradient-secondary {
|
||||
@apply bg-gradient-to-r from-gray-700 to-gray-800;
|
||||
}
|
||||
|
||||
.bg-gradient-subtle {
|
||||
@apply bg-gradient-to-br from-gray-50 via-white to-red-50;
|
||||
}
|
||||
|
||||
/* Responsive Utilities */
|
||||
@media (max-width: 640px) {
|
||||
.hide-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
body {
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
.loading-dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-dots::after {
|
||||
content: "";
|
||||
animation: loading-dots 1.5s steps(4, end) infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-dots {
|
||||
0% {
|
||||
content: "";
|
||||
}
|
||||
25% {
|
||||
content: ".";
|
||||
}
|
||||
50% {
|
||||
content: "..";
|
||||
}
|
||||
75% {
|
||||
content: "...";
|
||||
}
|
||||
100% {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
/* Transitions for Page Changes */
|
||||
.page-transition-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.page-transition-enter-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition:
|
||||
opacity 300ms ease-out,
|
||||
transform 300ms ease-out;
|
||||
}
|
||||
|
||||
.page-transition-exit {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.page-transition-exit-active {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition:
|
||||
opacity 200ms ease-in,
|
||||
transform 200ms ease-in;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue