rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start Tailwind UI rebuild

Browse Source
This commit is contained in:
rajchales-monito
2026-08-06 17:25:09 +02:00
parent 782541338c
commit 0058493a54
5 changed files with 121 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/tailwind.css
+91
View File
@@ -6,13 +6,96 @@
--color-surface: #ffffff;
--color-ink: #17211d;
--color-muted: #647067;
--color-line: #dfe6e2;
--color-page: #f5f7f4;
}
@layer base {
html {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
@apply bg-page text-ink antialiased;
}
button,
input,
textarea,
select {
font: inherit;
}
}
@layer components {
.mf-page-shell {
@apply min-h-screen bg-page text-ink;
}
.mf-page-main {
@apply mx-auto grid w-full max-w-5xl gap-6 px-5 py-12 sm:py-14;
}
.mf-page-title {
@apply m-0 text-4xl font-extrabold tracking-normal text-ink sm:text-5xl;
}
.mf-page-copy {
@apply max-w-2xl text-base leading-7 text-muted;
}
.mf-card-grid {
@apply grid gap-4 md:grid-cols-3;
}
.mf-card {
@apply min-h-32 rounded-lg border border-line bg-white p-5 shadow-sm;
}
.mf-card-title {
@apply mb-4 block text-sm font-bold text-ink;
}
.mf-card-copy {
@apply m-0 text-sm leading-6 text-muted;
}
.mf-login-shell {
@apply grid min-h-screen place-items-center bg-page p-6;
}
.mf-login-card {
@apply grid w-full max-w-sm gap-4 rounded-lg border border-line bg-white p-6 shadow-sm;
}
.mf-login-title {
@apply m-0 pb-1 text-3xl font-extrabold tracking-normal text-ink;
}
.mf-field {
@apply grid gap-1.5 text-sm font-medium text-muted;
}
.mf-input {
@apply h-10 w-full rounded-md border border-line bg-white px-3 text-sm text-ink shadow-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/25;
}
.mf-textarea {
@apply min-h-20 w-full rounded-md border border-line bg-white px-3 py-2 text-sm text-ink shadow-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/25;
}
.mf-ui-button {
@apply inline-flex h-10 items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-3 text-sm font-semibold text-slate-800 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand/35;
}
.mf-ui-button-primary {
@apply inline-flex h-10 items-center justify-center gap-2 rounded-md border border-brand bg-brand px-4 text-sm font-semibold text-white shadow-sm transition hover:bg-brand/90 focus:outline-none focus:ring-2 focus:ring-brand/35;
}
.mf-icon-button {
@apply inline-grid h-8 w-8 place-items-center rounded-md border border-line bg-slate-50 text-ink transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-brand/25;
}
.mf-ui-panel-header {
@apply flex min-h-14 items-center justify-between border-b border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900;
}
@@ -20,4 +103,12 @@
.mf-ui-select {
@apply h-10 rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-800 shadow-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/25;
}
.mf-toolbar {
@apply flex h-14 items-center justify-between gap-3 border-b border-line bg-white px-3;
}
.mf-toolbar-title {
@apply m-0 text-lg font-extrabold tracking-normal text-ink;
}
}