186 lines
4.2 KiB
CSS
186 lines
4.2 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
:root {
|
|
/* Primary - soft pink */
|
|
--md-primary: #d4a0a8;
|
|
--md-on-primary: #ffffff;
|
|
--md-primary-container: #fce4ec;
|
|
--md-on-primary-container: #5d3a3e;
|
|
/* Secondary - sky blue #66ccff */
|
|
--md-secondary: #7fb8cc;
|
|
--md-on-secondary: #ffffff;
|
|
--md-secondary-container: #e0f2f8;
|
|
--md-on-secondary-container: #2a5a6a;
|
|
/* Tertiary - warm beige */
|
|
--md-tertiary: #c4b5a5;
|
|
--md-on-tertiary: #ffffff;
|
|
--md-tertiary-container: #f0ebe4;
|
|
--md-on-tertiary-container: #5a4e42;
|
|
/* Error - muted rose */
|
|
--md-error: #c06060;
|
|
--md-on-error: #ffffff;
|
|
--md-error-container: #fde0e0;
|
|
--md-on-error-container: #5c1a1a;
|
|
/* Surface - near white */
|
|
--md-surface: #fafafa;
|
|
--md-surface-dim: #e8e4e6;
|
|
--md-surface-bright: #fefefe;
|
|
--md-surface-container-lowest: #ffffff;
|
|
--md-surface-container-low: #f8f6f7;
|
|
--md-surface-container: #f3f1f2;
|
|
--md-surface-container-high: #edebec;
|
|
--md-surface-container-highest: #e7e5e6;
|
|
--md-on-surface: #2c2a2b;
|
|
--md-on-surface-variant: #6b6568;
|
|
/* Outline */
|
|
--md-outline: #9e9598;
|
|
--md-outline-variant: #d6cfd2;
|
|
/* Inverse */
|
|
--md-inverse-surface: #3a3638;
|
|
--md-inverse-on-surface: #f5f0f2;
|
|
--md-inverse-primary: #f0c4ca;
|
|
/* Shadow */
|
|
--md-shadow: rgba(0, 0, 0, 0.06);
|
|
--md-shadow-elevated: rgba(0, 0, 0, 0.10);
|
|
/* Success - muted sage */
|
|
--md-success: #7ba87b;
|
|
--md-success-container: #e6f2e6;
|
|
--md-on-success-container: #1e3a1e;
|
|
/* Warning - muted amber */
|
|
--md-warning: #c4a55a;
|
|
--md-warning-container: #faf0d6;
|
|
--md-on-warning-container: #4a3a10;
|
|
/* Shape */
|
|
--md-shape-xs: 4px;
|
|
--md-shape-sm: 8px;
|
|
--md-shape-md: 12px;
|
|
--md-shape-lg: 16px;
|
|
--md-shape-xl: 28px;
|
|
--md-shape-full: 9999px;
|
|
/* Spacing */
|
|
--md-spacing-xs: 4px;
|
|
--md-spacing-sm: 8px;
|
|
--md-spacing-md: 12px;
|
|
--md-spacing-lg: 16px;
|
|
--md-spacing-xl: 24px;
|
|
--md-spacing-2xl: 32px;
|
|
--md-spacing-3xl: 48px;
|
|
/* Typography */
|
|
--md-font-xs: 11px;
|
|
--md-font-sm: 12px;
|
|
--md-font-base: 13px;
|
|
--md-font-md: 14px;
|
|
--md-font-lg: 16px;
|
|
--md-font-xl: 18px;
|
|
--md-font-2xl: 24px;
|
|
--md-font-3xl: 32px;
|
|
/* Elevation */
|
|
--md-elevation-0: none;
|
|
--md-elevation-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
|
|
--md-elevation-2: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08);
|
|
--md-elevation-3: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
|
|
--md-elevation-4: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.10);
|
|
/* Transition */
|
|
--md-transition-fast: 0.15s ease;
|
|
--md-transition-normal: 0.2s ease;
|
|
--md-transition-slow: 0.3s ease;
|
|
|
|
font-family: 'Google Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
'Noto Sans SC', sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
color: var(--md-on-surface);
|
|
background-color: var(--md-surface);
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
font-weight: 500;
|
|
color: var(--md-primary);
|
|
text-decoration: none;
|
|
transition: color var(--md-transition-fast);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--md-on-primary-container);
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--md-outline-variant);
|
|
border-radius: var(--md-shape-full);
|
|
transition: background var(--md-transition-fast);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--md-outline);
|
|
}
|
|
|
|
/* Ant Design overrides */
|
|
.ant-table-tbody > tr:hover > td {
|
|
background: var(--md-primary-container) !important;
|
|
}
|
|
|
|
.ant-btn {
|
|
transition: all var(--md-transition-normal);
|
|
}
|
|
|
|
.ant-card {
|
|
transition: box-shadow var(--md-transition-normal);
|
|
}
|
|
|
|
.ant-tag {
|
|
border: none;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|