fabric_trade/fabric_trade_user
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve auth UI: theme toggle, inline register/login links, and mobile guest frame.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
safavimohadeseh78
2026-08-06 20:14:41 +02:00
co-authored by Cursor
parent 72ff454c90
commit 38864704f1
7 changed files with 151 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/app-shell.css
+43 -19
View File
@@ -104,36 +104,60 @@
}
}
/* ── Guest pages (login, checkout) ── */
/* ── Guest pages (login, register, checkout) — all breakpoints ── */
.app-shell--no-nav {
align-items: center;
justify-content: center;
padding: 16px;
background: var(--color-page-background);
}
.app-shell--no-nav .app-layout {
max-width: var(--form-max-width);
width: 100%;
height: auto;
max-height: calc(100dvh - 32px);
}
.app-shell--no-nav .app-frame {
max-width: var(--form-max-width);
width: 100%;
height: auto;
max-height: calc(100dvh - 32px);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-frame);
background: var(--color-surface);
}
.app-shell--no-nav .app-content {
padding-inline: var(--page-padding);
}
.app-shell--no-nav .page {
background: transparent;
}
.app-shell--no-nav.app-shell--wide .app-layout,
.app-shell--no-nav.app-shell--wide .app-frame {
max-width: min(var(--content-max-width), calc(100vw - 32px));
}
.app-shell--no-nav.app-shell--wide .app-frame {
background: var(--color-bg);
}
@media (min-width: 768px) {
.app-shell--no-nav {
align-items: center;
justify-content: center;
padding: 24px;
background: var(--color-page-background);
}
.app-shell--no-nav .app-layout {
max-width: var(--form-max-width);
width: 100%;
height: auto;
max-height: calc(100dvh - 48px);
}
.app-shell--no-nav .app-layout,
.app-shell--no-nav .app-frame {
max-width: var(--form-max-width);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-frame);
max-height: calc(100dvh - 48px);
background: var(--color-surface);
}
.app-shell--no-nav.app-shell--wide .app-layout,
.app-shell--no-nav.app-shell--wide .app-frame {
max-width: min(var(--content-max-width), calc(100vw - 48px));
}
.app-shell--no-nav.app-shell--wide .app-frame {
background: var(--color-bg);
}
}