fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify page and card surfaces

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 11:01:52 +07:00
parent fa0648c71b
commit 2b6ef46e65
3 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/css/main.css
View File

@@ -96,10 +96,10 @@ body {
.lk-content-canvas { .lk-content-canvas {
border: 0; border: 0;
border-radius: 2rem; border-radius: 2rem;
background: color-mix(in oklab, var(--color-base-200) 78%, white); background: color-mix(in oklab, #edf3ef 82%, white);
box-shadow: box-shadow:
0 22px 60px rgba(16, 73, 44, 0.12), 0 18px 46px rgba(16, 73, 44, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.35); inset 0 1px 0 rgba(255, 255, 255, 0.32);
padding: clamp(1rem, 1.2vw, 1.5rem); padding: clamp(1rem, 1.2vw, 1.5rem);
} }
@@ -107,17 +107,24 @@ body {
border: 0; border: 0;
background: #fff; background: #fff;
box-shadow: none; box-shadow: none;
transition: box-shadow 0.2s ease; transition:
} box-shadow 0.2s ease,
transform 0.2s ease;
.surface-card:hover {
box-shadow: 0 14px 32px rgba(24, 66, 44, 0.1);
} }
.surface-subcard { .surface-subcard {
border: 0; border: 0;
border-radius: 1.5rem; border-radius: 1.5rem;
background: color-mix(in oklab, #ffffff 78%, var(--brand-surface)); background: #fff;
}
.surface-card-interactive {
cursor: pointer;
}
.surface-card-interactive:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(18, 56, 36, 0.12);
} }
.manager-hero { .manager-hero {
@@ -199,7 +206,7 @@ body {
.manager-mini-card { .manager-mini-card {
border: 0; border: 0;
border-radius: 1.2rem; border-radius: 1.2rem;
background: color-mix(in oklab, white 72%, var(--brand-muted)); background: #fff;
padding: 0.9rem 1rem; padding: 0.9rem 1rem;
} }

2
app/components/orders/OrderSummaryCard.vue
View File

@@ -70,7 +70,7 @@ const codeLabel = computed(() => formatOrderCode(props.code));
<template> <template>
<NuxtLink <NuxtLink
:to="to" :to="to"
class="surface-card group block rounded-[30px] border border-[#dbece2] bg-white px-4 py-4 transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_rgba(18,56,36,0.08)] md:px-5" class="surface-card surface-card-interactive group block rounded-[30px] bg-white px-4 py-4 md:px-5"
> >
<div class="grid gap-4 md:grid-cols-4 md:items-center md:gap-6"> <div class="grid gap-4 md:grid-cols-4 md:items-center md:gap-6">
<div class="min-w-0"> <div class="min-w-0">

4
app/pages/clients/index.vue
View File

@@ -151,7 +151,7 @@ function userInitials(fullName: string) {
v-for="user in filteredUsers" v-for="user in filteredUsers"
:key="user.id" :key="user.id"
:to="`/clients/${user.id}`" :to="`/clients/${user.id}`"
class="surface-card flex min-h-[280px] flex-col rounded-[32px] p-6" class="surface-card surface-card-interactive flex min-h-[280px] flex-col rounded-[32px] p-6"
> >
<div class="flex justify-center"> <div class="flex justify-center">
<img <img
@@ -189,7 +189,7 @@ function userInitials(fullName: string) {
v-for="request in filteredRequests" v-for="request in filteredRequests"
:key="request.id" :key="request.id"
:to="`/clients/${request.id}?tab=requests`" :to="`/clients/${request.id}?tab=requests`"
class="surface-card rounded-3xl p-5" class="surface-card surface-card-interactive rounded-3xl p-5"
> >
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div class="space-y-1"> <div class="space-y-1">