283 lines
7.4 KiB
CSS
283 lines
7.4 KiB
CSS
@import './tokens.css';
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
@apply bg-background text-ink font-sans antialiased;
|
|
background-image:
|
|
radial-gradient(1200px 600px at 0% -10%, rgba(244, 192, 78, 0.18), transparent 60%),
|
|
radial-gradient(900px 500px at 100% 110%, rgba(226, 120, 150, 0.18), transparent 55%);
|
|
background-attachment: fixed;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
@apply font-display text-ink;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
a {
|
|
@apply transition-colors;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* BEM-friendly classes: kept parallel to Tailwind utilities where possible. */
|
|
.app-shell {
|
|
@apply flex min-h-screen flex-col;
|
|
}
|
|
.app-shell__main {
|
|
@apply mx-auto w-full max-w-6xl flex-1 px-4 py-6 sm:px-6 sm:py-10 lg:px-8;
|
|
}
|
|
|
|
.app-header {
|
|
@apply mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8;
|
|
}
|
|
.app-header__inner {
|
|
@apply flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur;
|
|
}
|
|
.app-header__brand {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
.app-header__brand-mark {
|
|
@apply inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card;
|
|
}
|
|
.app-header__brand-title {
|
|
@apply font-display text-lg leading-tight;
|
|
}
|
|
.app-header__brand-subtitle {
|
|
@apply text-xs text-muted;
|
|
}
|
|
.app-header__nav {
|
|
@apply flex flex-wrap items-center gap-1;
|
|
}
|
|
.app-header__nav-link {
|
|
@apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-ink transition-colors hover:bg-ink/5;
|
|
}
|
|
.app-header__nav-link--active {
|
|
@apply bg-primary text-primary-foreground shadow-card hover:bg-primary;
|
|
}
|
|
.app-header__actions {
|
|
@apply flex items-center gap-1;
|
|
}
|
|
|
|
.app-footer {
|
|
@apply mx-auto mt-10 w-full max-w-6xl px-4 py-6 text-xs text-muted sm:px-6 lg:px-8;
|
|
}
|
|
.app-footer__inner {
|
|
@apply flex flex-col items-center justify-between gap-2 sm:flex-row;
|
|
}
|
|
.app-footer__brand {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
.app-footer__brand-name {
|
|
@apply font-display text-sm;
|
|
}
|
|
.app-footer__meta {
|
|
@apply flex items-center gap-3;
|
|
}
|
|
.app-footer__separator {
|
|
@apply opacity-50;
|
|
}
|
|
|
|
.language-switcher {
|
|
@apply inline-flex items-center gap-1 rounded-md border border-border bg-surface/90 p-1 text-xs shadow-card;
|
|
}
|
|
.language-switcher__icon {
|
|
@apply ml-1 h-3.5 w-3.5 text-muted;
|
|
}
|
|
.language-switcher__button {
|
|
@apply rounded px-2 py-1 font-semibold text-muted transition-colors hover:bg-surface-muted hover:text-ink;
|
|
}
|
|
.language-switcher__button--active {
|
|
@apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
|
|
}
|
|
|
|
.empty-state {
|
|
@apply flex flex-col items-center gap-2 rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card;
|
|
}
|
|
.empty-state__icon {
|
|
@apply h-10 w-10 text-muted;
|
|
}
|
|
.empty-state__icon--image {
|
|
@apply h-40 w-40 opacity-90;
|
|
}
|
|
.empty-state__title {
|
|
@apply text-xl font-semibold;
|
|
}
|
|
.empty-state__text {
|
|
@apply text-sm text-muted;
|
|
}
|
|
|
|
.page-section {
|
|
@apply grid gap-1;
|
|
}
|
|
.page-section__title {
|
|
@apply font-display text-3xl;
|
|
}
|
|
.page-section__text {
|
|
@apply text-sm text-muted;
|
|
}
|
|
|
|
.public-profile {
|
|
@apply flex min-h-screen flex-col;
|
|
}
|
|
.public-profile__toolbar {
|
|
@apply mx-auto flex w-full max-w-6xl justify-end px-4 pt-6 sm:px-6 lg:px-8;
|
|
}
|
|
.public-profile__main {
|
|
@apply mx-auto w-full max-w-6xl flex-1 px-4 py-10 sm:px-6 lg:px-8;
|
|
}
|
|
.public-profile__hero {
|
|
@apply mb-10 flex flex-col items-center gap-3 text-center;
|
|
}
|
|
.public-profile__avatar {
|
|
@apply inline-flex h-14 w-14 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground shadow-card;
|
|
}
|
|
.public-profile__avatar-image {
|
|
@apply h-14 w-14 rounded-full object-cover;
|
|
}
|
|
.public-profile__title {
|
|
@apply font-display text-4xl;
|
|
}
|
|
.public-profile__bio {
|
|
@apply max-w-xl text-muted;
|
|
}
|
|
|
|
.profile-form {
|
|
@apply grid gap-4 rounded-xl border border-border bg-surface p-6 shadow-card;
|
|
}
|
|
.profile-form__avatar-panel {
|
|
@apply flex flex-wrap items-center gap-4 rounded-md border border-border bg-surface-muted p-4;
|
|
}
|
|
.profile-form__avatar-preview {
|
|
@apply inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground;
|
|
}
|
|
.profile-form__avatar-image {
|
|
@apply h-16 w-16 object-cover;
|
|
}
|
|
.profile-form__avatar-copy {
|
|
@apply min-w-0 flex-1;
|
|
}
|
|
.profile-form__avatar-title {
|
|
@apply text-sm font-semibold;
|
|
}
|
|
.profile-form__avatar-hint {
|
|
@apply text-xs text-muted;
|
|
}
|
|
.profile-form__actions {
|
|
@apply flex items-center justify-end gap-2;
|
|
}
|
|
|
|
.modal {
|
|
@apply fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-6;
|
|
}
|
|
.modal__backdrop {
|
|
@apply absolute inset-0 animate-fade-in-up bg-ink/40 backdrop-blur-sm;
|
|
}
|
|
.modal__panel {
|
|
@apply relative flex max-h-[90vh] w-full animate-fade-in-up flex-col overflow-hidden rounded-t-xl bg-surface shadow-pop sm:rounded-xl;
|
|
}
|
|
.modal__panel--md {
|
|
@apply sm:max-w-lg;
|
|
}
|
|
.modal__panel--lg {
|
|
@apply sm:max-w-2xl;
|
|
}
|
|
.modal__header {
|
|
@apply flex items-start justify-between gap-4 border-b border-border px-5 py-4;
|
|
}
|
|
.modal__title-wrap {
|
|
@apply min-w-0;
|
|
}
|
|
.modal__title {
|
|
@apply text-lg font-semibold text-ink;
|
|
}
|
|
.modal__description {
|
|
@apply mt-1 text-sm text-muted;
|
|
}
|
|
.modal__body {
|
|
@apply overflow-y-auto px-5 py-5;
|
|
}
|
|
.modal__footer {
|
|
@apply flex items-center justify-end gap-2 border-t border-border px-5 py-4;
|
|
}
|
|
|
|
.wish-card {
|
|
@apply relative flex flex-col overflow-hidden rounded-lg bg-surface shadow-card transition-transform duration-200;
|
|
}
|
|
.wish-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.wish-card--completed {
|
|
filter: saturate(0.45) brightness(0.98);
|
|
}
|
|
.wish-card--completed .wish-card__title {
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: 2px;
|
|
text-decoration-color: rgb(var(--color-muted) / 0.6);
|
|
}
|
|
|
|
.wish-card__image-wrap {
|
|
@apply relative aspect-[4/3] bg-surface-muted overflow-hidden;
|
|
}
|
|
.wish-card__image {
|
|
@apply h-full w-full object-cover;
|
|
}
|
|
.wish-card__body {
|
|
@apply flex flex-col gap-2 p-4;
|
|
}
|
|
.wish-card__title {
|
|
@apply text-lg font-semibold leading-snug text-ink;
|
|
}
|
|
.wish-card__price {
|
|
@apply text-sm font-medium text-muted;
|
|
}
|
|
.wish-card__comment {
|
|
@apply text-sm text-muted line-clamp-2;
|
|
}
|
|
|
|
.wish-badge {
|
|
@apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide;
|
|
}
|
|
.wish-badge--new {
|
|
@apply bg-primary text-primary-foreground;
|
|
}
|
|
.wish-badge--completed {
|
|
@apply bg-ink/5 text-ink;
|
|
}
|
|
.wish-badge--archived {
|
|
@apply bg-warning/20 text-warning;
|
|
}
|
|
.wish-badge--deleted {
|
|
@apply bg-danger/15 text-danger;
|
|
}
|
|
|
|
.field {
|
|
@apply flex flex-col gap-1.5;
|
|
}
|
|
.field__label {
|
|
@apply text-sm font-medium text-ink;
|
|
}
|
|
.field__input,
|
|
.field__textarea,
|
|
.field__select {
|
|
@apply w-full rounded-md border border-border bg-surface px-3 py-2.5 text-ink outline-none transition-all duration-150 placeholder:text-muted focus:border-primary focus:shadow-[var(--shadow-focus)];
|
|
}
|
|
.field__error {
|
|
@apply text-xs text-danger;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.container-page {
|
|
@apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
|
|
}
|
|
}
|