web-bak/src/index.css

* {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

:root {
	/* Primary */
	--md-primary: #5b5fc7;
	--md-on-primary: #ffffff;
	--md-primary-container: #e0e0ff;
	--md-on-primary-container: #161a72;
	/* Secondary */
	--md-secondary: #5c5d72;
	--md-on-secondary: #ffffff;
	--md-secondary-container: #e1e0f9;
	--md-on-secondary-container: #191a2c;
	/* Tertiary */
	--md-tertiary: #78536b;
	--md-on-tertiary: #ffffff;
	--md-tertiary-container: #ffd8ee;
	--md-on-tertiary-container: #2e1126;
	/* Error */
	--md-error: #ba1a1a;
	--md-on-error: #ffffff;
	--md-error-container: #ffdad6;
	--md-on-error-container: #410002;
	/* Surface */
	--md-surface: #fdfbff;
	--md-surface-dim: #dbd9e0;
	--md-surface-bright: #fdfbff;
	--md-surface-container-lowest: #ffffff;
	--md-surface-container-low: #f7f5fc;
	--md-surface-container: #f1eff6;
	--md-surface-container-high: #ebe9f0;
	--md-surface-container-highest: #e5e3ea;
	--md-on-surface: #1b1b21;
	--md-on-surface-variant: #46464f;
	/* Outline */
	--md-outline: #777680;
	--md-outline-variant: #c7c5d0;
	/* Inverse */
	--md-inverse-surface: #303036;
	--md-inverse-on-surface: #f3f0f7;
	--md-inverse-primary: #bec2ff;
	/* Shadow */
	--md-shadow: rgba(0, 0, 0, 0.08);
	--md-shadow-elevated: rgba(0, 0, 0, 0.12);
	/* Success */
	--md-success: #386a20;
	--md-success-container: #b8f397;
	--md-on-success-container: #072100;
	/* Warning */
	--md-warning: #7d5700;
	--md-warning-container: #ffdeab;
	--md-on-warning-container: #271900;
	/* 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;
	/* Elevation */
	--md-elevation-1: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
	--md-elevation-2: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.1);
	--md-elevation-3: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.1);

	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;
}

a:hover {
	color: var(--md-on-primary-container);
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--md-outline-variant);
	border-radius: var(--md-shape-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--md-outline);
}

/* Ant Design table row hover */
.ant-table-tbody > tr:hover > td {
	background: var(--md-primary-container) !important;
}

/* 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); }
}