mongoku/src/app.css

[](https://github.com/huggingface/Mongoku/actions/workflows/ci.yml)

@import "tailwindcss";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Light mode (Apple-style) */
:root[data-theme="light"] {
	--color-1: #f5f5f7;
	--color-1-5: #ffffff;
	--light-background: #ffffff;
	--color-3: #f0f0f2;
	--color-4: #e5e5e7;

	--background-color: var(--color-1);
	--border-color: var(--color-4);

	--text: #1d1d1f;
	--text-inverse: #ffffff;
	--text-darker: #6e6e73;
	--text-lighter: #000000;
	--text-secondary: #86868b;
	--link: #007aff;

	--error: #ff3b30;

	--button-danger: #ff3b30;
	--button-danger-l: #ff6961;
	--button-success: rgb(5 150 105);
	--button-light: #1d1d1f;
	--button-light-hover: #000000;

	--code-namespace: #0070c1;
	--code-boolean: #007aff;
	--code-null: #007aff;
	--code-numbers: #098658;
	--code-string: #d73a49;
	--code-links: #0451a5;
	--code-summary: #22863a;
	--code-regexp: #d16969;
	--code-function: #6f42c1;

	--border: 1px solid var(--color-4);
}

/* Dark mode (Apple-style) */
:root[data-theme="dark"] {
	--color-1: #1c1c1e;
	--color-1-5: #2c2c2e;
	--light-background: #2c2c2e;
	--color-3: #3a3a3c;
	--color-4: #48484a;

	--background-color: var(--color-1);
	--border-color: var(--color-3);

	--text: #f5f5f7;
	--text-inverse: #1c1c1e;
	--text-darker: #98989d;
	--text-lighter: #ffffff;
	--text-secondary: #8e8e93;
	--link: #0a84ff;

	--error: #ff453a;

	--button-danger: #ff453a;
	--button-danger-l: #ff6961;
	--button-success: #10b981;
	--button-light: #f5f5f7;
	--button-light-hover: #ffffff;

	--code-namespace: #9cdcfe;
	--code-boolean: #0a84ff;
	--code-null: #0a84ff;
	--code-numbers: #a5d6a7;
	--code-string: #ff8a65;
	--code-links: #4fc3f7;
	--code-summary: #81c784;
	--code-regexp: #ef9a9a;
	--code-function: #dcdcaa;

	--border: 1px solid var(--color-3);
}

/* Fallback for initial load before script runs (default to light) */
:root:not([data-theme]) {
	--color-1: #f5f5f7;
	--color-1-5: #ffffff;
	--light-background: #ffffff;
	--color-3: #f0f0f2;
	--color-4: #e5e5e7;

	--background-color: var(--color-1);
	--border-color: var(--color-4);

	--text: #1d1d1f;
	--text-inverse: #ffffff;
	--text-darker: #6e6e73;
	--text-lighter: #000000;
	--text-secondary: #86868b;
	--link: #007aff;

	--error: #ff3b30;

	--button-danger: #ff3b30;
	--button-danger-l: #ff6961;
	--button-success: rgb(5 150 105);
	--button-light: #1d1d1f;
	--button-light-hover: #000000;

	--code-namespace: #0070c1;
	--code-boolean: #007aff;
	--code-null: #007aff;
	--code-numbers: #098658;
	--code-string: #d73a49;
	--code-links: #0451a5;
	--code-summary: #22863a;
	--code-regexp: #d16969;
	--code-function: #6f42c1;

	--border: 1px solid var(--color-4);
}

@layer base {
	html {
		height: 100%;
	}

	body {
		background-color: var(--background-color);
		font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif;
		color: var(--text);
		min-height: 100vh;
		tab-size: 2;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	a:hover {
		text-decoration: underline;
	}

	input[type="text"],
	input[type="number"],
	textarea {
		@apply rounded-2xl px-4 py-3 text-sm;
		background-color: var(--color-3);
		color: var(--text);
		border: 1px solid var(--color-4);
		transition:
			border-color 0.2s,
			background-color 0.2s;
	}

	input[type="text"]:focus,
	input[type="number"]:focus,
	textarea:focus {
		outline: none;
		border-color: var(--link);
		background-color: var(--light-background);
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--text-secondary);
		opacity: 1;
	}

	::selection {
		background-color: rgba(0, 122, 255, 0.2);
		color: var(--text);
	}
}

@layer utilities {
	.dotted {
		border-bottom: 1px dotted var(--text);
		cursor: help;
	}

	.error {
		color: var(--error);
	}
}

@layer components {
	.btn {
		@apply px-4 py-2 rounded-xl cursor-pointer font-semibold transition-all duration-200 border;
		font-size: 14px;
	}

	.btn-sm {
		@apply px-3 py-2 text-sm;
	}

	.btn-default {
		background-color: var(--light-background);
		color: var(--text);
		border-color: var(--color-4);
	}

	.btn-default:hover:not(:disabled) {
		background-color: var(--color-1-5);
		filter: brightness(0.98);
	}

	.btn-danger {
		background-color: var(--button-danger);
		color: white;
		border-color: transparent;
	}

	.btn-danger:hover:not(:disabled) {
		filter: brightness(1.1);
	}

	.btn-success {
		background-color: var(--button-success);
		color: white;
		border-color: transparent;
	}

	.btn-success:hover:not(:disabled) {
		filter: brightness(1.05);
	}

	.btn-primary {
		background-color: var(--link);
		color: white;
		border-color: transparent;
	}

	.btn-primary:hover:not(:disabled) {
		filter: brightness(1.1);
	}

	.btn-outline-danger {
		background: transparent;
		color: var(--button-danger);
		border-color: rgba(255, 59, 48, 0.3);
	}

	.btn-outline-danger:hover:not(:disabled) {
		background-color: rgba(255, 59, 48, 0.1);
	}

	.btn-outline-success {
		background: transparent;
		color: var(--button-success);
		border-color: rgba(52, 199, 89, 0.3);
	}

	.btn-outline-success:hover:not(:disabled) {
		background-color: rgba(52, 199, 89, 0.1);
	}

	.btn-outline-light {
		background: transparent;
		color: var(--text);
		border-color: var(--color-4);
	}

	.btn-outline-light:hover:not(:disabled) {
		background-color: var(--color-3);
	}

	.btn-outline-primary {
		background: transparent;
		color: var(--link);
		border-color: var(--link);
	}

	.btn-outline-primary:hover:not(:disabled) {
		background-color: var(--link);
		color: white;
	}

	.btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.table {
		width: 100%;
		border-collapse: collapse;
	}

	.table thead tr {
		background-color: var(--color-3);
	}

	.table th,
	.table td {
		padding: 12px;
		text-align: left;
		border-bottom: 1px solid var(--border-color);
	}

	/* So that the bottom of the table doesn't overflow from the bottom of the panel. If too generic, we can move this to the panel component maybe */
	.table tbody tr:last-child td {
		border-bottom: none;
	}

	.table th {
		font-weight: 600;
		color: var(--text);
	}

	.table tbody tr:hover {
		background-color: var(--color-1-5);
	}

	.badge {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 8px;
		font-size: 12px;
		border: 1px solid var(--color-4);
		background-color: var(--light-background);
	}

	.badge-danger {
		background-color: var(--button-danger);
		color: white;
		border-color: transparent;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(4px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal {
		background-color: var(--light-background);
		border: 1px solid var(--color-4);
		border-radius: 1.25rem;
		max-width: 500px;
		width: 90%;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	}

	.modal-body {
		padding: 24px;
	}

	.modal-footer {
		border-top: 1px solid var(--color-4);
		padding: 16px 24px;
		display: flex;
		justify-content: flex-end;
		gap: 10px;
	}

	.loading {
		text-align: center;
		padding: 40px;
		color: var(--text-darker);
	}
}