diff --git a/apps/web/src/components/JalaliDateInput.vue b/apps/web/src/components/JalaliDateInput.vue index bc5a29e..8733049 100644 --- a/apps/web/src/components/JalaliDateInput.vue +++ b/apps/web/src/components/JalaliDateInput.vue @@ -655,14 +655,15 @@ onBeforeUnmount(() => { .trigger { width: 100%; - min-height: 44px; + min-height: var(--control-h); + height: var(--control-h); display: flex; align-items: center; justify-content: space-between; - gap: 0.6rem; + gap: 0.45rem; border: 1px solid var(--line, #e2e8f0); - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + padding: 0 0.75rem; background: #fff; color: #0f172a; font: inherit; @@ -739,6 +740,9 @@ onBeforeUnmount(() => { .trigger span { min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .trigger .empty { diff --git a/apps/web/src/components/VoiceToTextButton.vue b/apps/web/src/components/VoiceToTextButton.vue index e309b59..0cc81b5 100644 --- a/apps/web/src/components/VoiceToTextButton.vue +++ b/apps/web/src/components/VoiceToTextButton.vue @@ -318,8 +318,9 @@ onBeforeUnmount(() => { border: 1px solid #d7e3dc; background: #f4faf7; color: #0f766e; - border-radius: 999px; - min-height: 36px; + border-radius: var(--radius); + min-height: var(--control-h); + height: var(--control-h); padding: 0 0.75rem; font: inherit; font-size: 0.8rem; @@ -335,13 +336,13 @@ onBeforeUnmount(() => { border-color: #5eead4; background: #042f2e; color: #ecfdf5; - min-height: 44px; + min-height: var(--control-h); padding-inline: 0.7rem 0.85rem; box-shadow: 0 10px 24px rgba(15, 118, 110, 0.22); } .vtt.busy { - min-height: 44px; + min-height: var(--control-h); border-color: #99f6e4; background: #ecfdf5; color: #0f766e; @@ -411,9 +412,10 @@ onBeforeUnmount(() => { .toolbar.wait .vtt { width: auto; height: auto; - min-height: 40px; + min-height: var(--control-h); + height: var(--control-h); padding: 0 0.7rem; - border-radius: 999px; + border-radius: var(--radius); } .toolbar .vtt.on { diff --git a/apps/web/src/components/activities/ActivityCommentSheet.vue b/apps/web/src/components/activities/ActivityCommentSheet.vue index 1e0def2..b8944e7 100644 --- a/apps/web/src/components/activities/ActivityCommentSheet.vue +++ b/apps/web/src/components/activities/ActivityCommentSheet.vue @@ -555,8 +555,9 @@ onBeforeUnmount(() => { } .act { - min-height: 48px; - border-radius: 14px; + min-height: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); font: inherit; font-weight: 800; cursor: pointer; diff --git a/apps/web/src/components/activities/ActivityPostponeSheet.vue b/apps/web/src/components/activities/ActivityPostponeSheet.vue index 917bb48..7f5579c 100644 --- a/apps/web/src/components/activities/ActivityPostponeSheet.vue +++ b/apps/web/src/components/activities/ActivityPostponeSheet.vue @@ -396,9 +396,10 @@ onBeforeUnmount(() => { .picker input { width: 100%; - min-height: 44px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid #e2e8f0; - border-radius: 12px; + border-radius: var(--radius); padding: 0.45rem 0.7rem; font: inherit; color: #0f172a; diff --git a/apps/web/src/components/person-profile/ProfileEmptyState.vue b/apps/web/src/components/person-profile/ProfileEmptyState.vue index bb191c2..69e0662 100644 --- a/apps/web/src/components/person-profile/ProfileEmptyState.vue +++ b/apps/web/src/components/person-profile/ProfileEmptyState.vue @@ -143,8 +143,9 @@ p { align-items: center; justify-content: center; gap: 0.4rem; - min-height: 48px; - border-radius: 16px; + min-height: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); font-weight: 700; font-size: 0.9rem; } @@ -188,9 +189,10 @@ p { .btn-primary, .btn-secondary { - min-height: 46px; + min-height: var(--control-h); + height: var(--control-h); font-size: 0.86rem; - border-radius: 14px; + border-radius: var(--radius); } } diff --git a/apps/web/src/components/ui/UiModal.vue b/apps/web/src/components/ui/UiModal.vue index 447bbb1..57b02f0 100644 --- a/apps/web/src/components/ui/UiModal.vue +++ b/apps/web/src/components/ui/UiModal.vue @@ -122,4 +122,78 @@ function onBackdrop(event: MouseEvent) { padding-top: 0; border-top: 1px solid #f1f5f9; } + +@media (max-width: 900px) { + .backdrop { + padding: 0; + place-items: stretch; + } + + .dialog { + width: 100%; + height: 100%; + max-height: 100dvh; + border-radius: 0; + border: 0; + } + + .head { + flex-shrink: 0; + padding: 0.75rem 1rem 0; + } + + .body { + flex: 1; + min-height: 0; + overflow: auto; + display: flex; + flex-direction: column; + padding: 0.75rem 1rem; + } + + .body:has(.page.embedded) { + overflow: hidden; + padding-bottom: 0; + } + + .body :deep(.page.embedded) { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + gap: 0.75rem; + } + + .body :deep(.page.embedded > .form), + .body :deep(.page.embedded > form) { + flex: 1 1 auto; + min-height: 0; + overflow: auto; + } + + .body :deep(.embed-actions) { + order: 20; + flex: 0 0 auto; + position: sticky; + bottom: 0; + margin-top: auto; + margin-inline: -1rem; + display: flex; + gap: 0.5rem; + padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); + background: #fff; + border-top: 1px solid #f1f5f9; + z-index: 3; + } + + .body :deep(.embed-actions .btn) { + flex: 1; + min-width: 0; + } + + .foot { + flex-shrink: 0; + padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); + } +} diff --git a/apps/web/src/layouts/AppLayout.vue b/apps/web/src/layouts/AppLayout.vue index 0d10b87..dada177 100644 --- a/apps/web/src/layouts/AppLayout.vue +++ b/apps/web/src/layouts/AppLayout.vue @@ -1038,15 +1038,17 @@ onUnmounted(() => { .sidebar.collapsed .brand-row { width: max-content; max-width: none; - height: 49px; + height: var(--control-h); + min-height: var(--control-h); box-sizing: border-box; + overflow: hidden; align-self: flex-start; align-items: center; justify-content: flex-start; z-index: 3; - padding: 0.25rem 0.55rem; + padding: 0 0.5rem; background: #fff; - border-radius: 18px; + border-radius: var(--radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } @@ -1055,7 +1057,7 @@ onUnmounted(() => { width: max-content; flex-direction: row; align-items: center; - gap: 1.5rem; + gap: 0.55rem; } .sidebar.collapsed .sidebar-logo, @@ -1080,22 +1082,16 @@ onUnmounted(() => { } .sidebar.collapsed .profile-card { - flex-direction: column; + flex-direction: row; align-items: center; - max-width: 4.8rem; + max-width: none; flex: 0 0 auto; - gap: 0.05rem; + gap: 0; padding: 0; } .sidebar.collapsed .profile-meta { - text-align: center; - } - - .sidebar.collapsed .profile-meta strong { - font-size: 0.62rem; - line-height: 1.1; - white-space: nowrap; + display: none; } .sidebar.collapsed .avatar-wrap, @@ -1163,10 +1159,10 @@ onUnmounted(() => { display: grid; place-items: center; flex-shrink: 0; - min-height: 42px; - height: 42px; + min-height: var(--control-h); + height: var(--control-h); padding: 0; - border-radius: 12px; + border-radius: var(--radius); position: relative; } @@ -1212,9 +1208,9 @@ onUnmounted(() => { display: grid; place-items: center; width: 100%; - min-height: 42px; + min-height: var(--control-h); padding: 0; - border-radius: 12px; + border-radius: var(--radius); color: #94a3b8; } @@ -1260,7 +1256,7 @@ onUnmounted(() => { .desktop-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; - align-items: start; + align-items: center; gap: 1rem; min-width: 0; /* همان فاصله بالای سایدبار شناور (14px) */ @@ -1307,9 +1303,9 @@ onUnmounted(() => { .round-btn { position: relative; - width: 42px; - height: 42px; - border-radius: 999px; + width: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); border: 0; background: #fff; color: #64748b; @@ -1334,8 +1330,10 @@ onUnmounted(() => { display: inline-flex; align-items: center; gap: 0.45rem; - padding: 0.55rem 0.85rem; - border-radius: 999px; + height: var(--control-h); + box-sizing: border-box; + padding: 0 0.75rem; + border-radius: var(--radius); background: #fff; color: #64748b; font-size: 0.84rem; diff --git a/apps/web/src/styles/main.css b/apps/web/src/styles/main.css index 0383aa0..cb5c1be 100644 --- a/apps/web/src/styles/main.css +++ b/apps/web/src/styles/main.css @@ -139,8 +139,4 @@ textarea { h1 { font-size: clamp(1.35rem, 5vw, 1.75rem); } - - .btn { - padding: 0.7rem 0.95rem; - } } diff --git a/apps/web/src/views/ActivitiesCalendarView.vue b/apps/web/src/views/ActivitiesCalendarView.vue index 25b6b44..29d1c9d 100644 --- a/apps/web/src/views/ActivitiesCalendarView.vue +++ b/apps/web/src/views/ActivitiesCalendarView.vue @@ -426,9 +426,9 @@ h2 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/ActivitiesView.vue b/apps/web/src/views/ActivitiesView.vue index 29797ef..348c2e8 100644 --- a/apps/web/src/views/ActivitiesView.vue +++ b/apps/web/src/views/ActivitiesView.vue @@ -644,9 +644,9 @@ h1 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/ActivityDetailView.vue b/apps/web/src/views/ActivityDetailView.vue index 979eaf3..7891a3f 100644 --- a/apps/web/src/views/ActivityDetailView.vue +++ b/apps/web/src/views/ActivityDetailView.vue @@ -585,8 +585,9 @@ dd { align-items: center; justify-content: center; gap: 0.3rem; - min-height: 46px; - border-radius: 14px; + min-height: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); border: 1px solid #99f6e4; background: #fff; color: #0f766e; diff --git a/apps/web/src/views/ActivityFormView.vue b/apps/web/src/views/ActivityFormView.vue index ee5897b..9cb1312 100644 --- a/apps/web/src/views/ActivityFormView.vue +++ b/apps/web/src/views/ActivityFormView.vue @@ -755,17 +755,26 @@ watch([id, isNew], () => void load(), { immediate: true }); .note-card textarea { width: 100%; border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.75rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; + box-sizing: border-box; +} + +.field textarea, +.note-card textarea { + min-height: 5.5rem; + padding: 0.65rem 0.85rem; } .picker { width: 100%; - min-height: 48px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid #e2e8f0; - border-radius: 12px; + border-radius: var(--radius); background: #fff; display: flex; align-items: center; @@ -917,15 +926,16 @@ watch([id, isNew], () => void load(), { immediate: true }); display: flex; align-items: center; justify-content: space-between; - min-height: 48px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.2rem; + border-radius: var(--radius); + padding: 0.15rem; } .stepper button { - width: 40px; - height: 40px; + width: 28px; + height: 28px; border: 0; border-radius: 10px; background: #f0fdfa; @@ -1000,7 +1010,8 @@ watch([id, isNew], () => void load(), { immediate: true }); .reminder :deep(.trigger) { border: 0; - min-height: 48px; + min-height: var(--control-h); + height: var(--control-h); padding-inline: 0.15rem; } @@ -1094,9 +1105,9 @@ watch([id, isNew], () => void load(), { immediate: true }); align-items: center; justify-content: center; gap: 0.35rem; - min-height: 44px; - border-radius: 12px; - padding: 0.55rem 0.95rem; + min-height: var(--control-h); + border-radius: var(--radius); + padding: 0 0.95rem; font: inherit; font-weight: 800; cursor: pointer; @@ -1134,8 +1145,9 @@ watch([id, isNew], () => void load(), { immediate: true }); .mobile-save .btn { width: 100%; - min-height: 50px; - border-radius: 14px; + min-height: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); } @media (min-width: 960px) { diff --git a/apps/web/src/views/AutomationsSettingsView.vue b/apps/web/src/views/AutomationsSettingsView.vue index 720b109..4fc0a8c 100644 --- a/apps/web/src/views/AutomationsSettingsView.vue +++ b/apps/web/src/views/AutomationsSettingsView.vue @@ -552,9 +552,9 @@ h2 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/CompanyFormView.vue b/apps/web/src/views/CompanyFormView.vue index 759b4a4..c44526a 100644 --- a/apps/web/src/views/CompanyFormView.vue +++ b/apps/web/src/views/CompanyFormView.vue @@ -307,8 +307,8 @@ h1 { } .icon-btn { - width: 40px; - height: 40px; + width: var(--control-h); + height: var(--control-h); border: 0; background: none; color: #0f766e; @@ -355,10 +355,17 @@ h1 { .field textarea { width: 100%; border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; + box-sizing: border-box; +} + +.field textarea { + min-height: 5.5rem; + padding: 0.65rem 0.85rem; } .muted { @@ -376,9 +383,9 @@ h1 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/ContactsView.vue b/apps/web/src/views/ContactsView.vue index ba857d5..3c7b3c3 100644 --- a/apps/web/src/views/ContactsView.vue +++ b/apps/web/src/views/ContactsView.vue @@ -593,9 +593,9 @@ h1 { } .add-btn { - width: 46px; - height: 46px; - border-radius: 50%; + width: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); background: #14b8a6; color: #fff; display: grid; @@ -665,10 +665,12 @@ h1 { gap: 0.45rem; background: #fff; border: 1px solid #e2e8f0; - border-radius: 12px; + border-radius: var(--radius); padding: 0 0.75rem; - min-height: 44px; + min-height: var(--control-h); + height: var(--control-h); color: #94a3b8; + box-sizing: border-box; } .search input { @@ -681,11 +683,13 @@ h1 { } .tool { - min-height: 44px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid #e2e8f0; background: #fff; - border-radius: 12px; + border-radius: var(--radius); padding: 0 0.75rem; + box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.35rem; @@ -1029,8 +1033,8 @@ strong.newcomer { } .add-btn { - width: 40px; - height: 40px; + width: var(--control-h); + height: var(--control-h); } .toolbar { diff --git a/apps/web/src/views/CurrencySettingsView.vue b/apps/web/src/views/CurrencySettingsView.vue index a994cca..f73c834 100644 --- a/apps/web/src/views/CurrencySettingsView.vue +++ b/apps/web/src/views/CurrencySettingsView.vue @@ -229,11 +229,13 @@ label { select, input[type='number'] { border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; width: 100%; + box-sizing: border-box; } .chips { @@ -287,9 +289,9 @@ input[type='number'] { display: inline-flex; align-items: center; justify-content: center; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/CustomFieldsSettingsView.vue b/apps/web/src/views/CustomFieldsSettingsView.vue index 8fb3408..9385e20 100644 --- a/apps/web/src/views/CustomFieldsSettingsView.vue +++ b/apps/web/src/views/CustomFieldsSettingsView.vue @@ -282,11 +282,13 @@ h1 { select, input[type='text'] { border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.8rem 0.95rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.95rem; background: #fff; font: inherit; width: 100%; + box-sizing: border-box; } .check-field { @@ -316,9 +318,9 @@ input[type='text'] { display: inline-flex; align-items: center; justify-content: center; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/DealFormView.vue b/apps/web/src/views/DealFormView.vue index cada46d..2f3d296 100644 --- a/apps/web/src/views/DealFormView.vue +++ b/apps/web/src/views/DealFormView.vue @@ -965,16 +965,18 @@ h1 { } .field :deep(.trigger) { - min-height: 48px; + min-height: var(--control-h); + height: var(--control-h); } .control, .amount, .picker { width: 100%; - min-height: 48px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid #e2e8f0; - border-radius: 12px; + border-radius: var(--radius); background: #fff; display: flex; align-items: center; @@ -1054,15 +1056,16 @@ h1 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; - padding: 0.28rem; - border-radius: 14px; + padding: 0.2rem; + border-radius: var(--radius); background: #f8fafc; } .segment button { - min-height: 44px; + min-height: calc(var(--control-h) - 4px); + height: calc(var(--control-h) - 4px); border: 0; - border-radius: 12px; + border-radius: 8px; background: transparent; color: #64748b; display: flex; @@ -1136,15 +1139,16 @@ h1 { display: flex; align-items: center; justify-content: space-between; - min-height: 48px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.2rem; + border-radius: var(--radius); + padding: 0.15rem; } .stepper button { - width: 40px; - height: 40px; + width: 28px; + height: 28px; border: 0; border-radius: 10px; background: #f0fdfa; @@ -1185,9 +1189,10 @@ h1 { } .mini { - min-height: 52px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid #eef2f6; - border-radius: 12px; + border-radius: var(--radius); background: #fff; display: flex; align-items: center; @@ -1336,9 +1341,9 @@ h1 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 44px; - border-radius: 12px; - padding: 0.55rem 0.95rem; + min-height: var(--control-h); + border-radius: var(--radius); + padding: 0 0.95rem; font: inherit; font-weight: 800; cursor: pointer; @@ -1379,8 +1384,9 @@ h1 { .mobile-save .btn { width: 100%; - min-height: 50px; - border-radius: 14px; + min-height: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); } @media (min-width: 960px) { diff --git a/apps/web/src/views/FaqSettingsView.vue b/apps/web/src/views/FaqSettingsView.vue index c6cba2b..80336ff 100644 --- a/apps/web/src/views/FaqSettingsView.vue +++ b/apps/web/src/views/FaqSettingsView.vue @@ -267,11 +267,18 @@ label { input, textarea { border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; width: 100%; + box-sizing: border-box; +} + +textarea { + min-height: 5.5rem; + padding: 0.65rem 0.85rem; } .check { @@ -286,9 +293,9 @@ textarea { display: inline-flex; align-items: center; justify-content: center; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/InvoiceFormView.vue b/apps/web/src/views/InvoiceFormView.vue index 2abb605..b174bd1 100644 --- a/apps/web/src/views/InvoiceFormView.vue +++ b/apps/web/src/views/InvoiceFormView.vue @@ -1597,7 +1597,7 @@ onMounted(load); --muted: #64748b; --line: #e2e8f0; --card: #fff; - --radius: 14px; + --radius: 10px; display: grid; gap: 1rem; min-width: 0; @@ -1631,12 +1631,15 @@ onMounted(load); border: 1px solid #e2e8f0; background: #fff; color: #334155; - border-radius: 12px; - padding: 0.55rem 0.9rem; + border-radius: var(--radius); + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.85rem; font: inherit; font-weight: 700; cursor: pointer; flex-shrink: 0; + box-sizing: border-box; } .back-btn :deep(.ico) { @@ -1724,16 +1727,17 @@ h1 { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.3rem; - padding: 0.28rem; - border-radius: 14px; + padding: 0.2rem; + border-radius: var(--radius); background: #f8fafc; margin-bottom: 0.15rem; } .seg-tabs button { - min-height: 40px; + min-height: var(--control-h); + height: var(--control-h); border: 0; - border-radius: 12px; + border-radius: 8px; background: transparent; color: #64748b; font: inherit; @@ -1799,11 +1803,20 @@ h1 { .summary :deep(input) { width: 100%; border: 1px solid var(--line); - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; color: var(--ink); + box-sizing: border-box; +} + +.field textarea { + height: auto; + min-height: 5.5rem; + padding: 0.65rem 0.85rem; } .control input, @@ -1830,9 +1843,10 @@ h1 { .days-row button { flex: 1; min-width: 4.2rem; - min-height: 38px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid var(--line); - border-radius: 10px; + border-radius: var(--radius); background: #fff; font: inherit; font-weight: 700; @@ -1859,8 +1873,9 @@ h1 { justify-content: space-between; border: 1px solid #eef2f6; background: #f8fafc; - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; font-weight: 800; color: var(--ink); @@ -1903,14 +1918,22 @@ h1 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 44px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); border: 1px solid transparent; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; + box-sizing: border-box; +} + +.btn.cancel { + background: #fff; + color: #64748b; + border-color: var(--line); } .btn.primary { @@ -1931,8 +1954,9 @@ h1 { } .btn.sm { - min-height: 36px; - padding: 0.35rem 0.7rem; + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.7rem; font-size: 0.85rem; } @@ -1975,7 +1999,6 @@ h1 { .search input { padding-inline-start: 2.2rem; - min-height: 42px; } .table-wrap { @@ -2055,9 +2078,10 @@ h1 { align-items: center; justify-content: space-between; min-width: 110px; - min-height: 40px; + min-height: var(--control-h); + height: var(--control-h); border: 1px solid var(--line); - border-radius: 12px; + border-radius: var(--radius); padding: 0.15rem; background: #fff; } @@ -2107,9 +2131,10 @@ h1 { .add-row { width: 100%; - min-height: 46px; + min-height: var(--control-h); + height: var(--control-h); border: 1.5px dashed var(--teal-border); - border-radius: 12px; + border-radius: var(--radius); background: var(--teal-soft); color: var(--teal); font: inherit; @@ -2141,8 +2166,6 @@ h1 { .sum-row .tax-input { max-width: 140px; text-align: start; - min-height: 40px; - padding: 0.45rem 0.65rem; } .sum-row.payable { @@ -2223,10 +2246,11 @@ h1 { } .icon-add { - width: 42px; - min-height: 42px; + width: var(--control-h); + min-height: var(--control-h); + height: var(--control-h); padding: 0; - border-radius: 12px; + border-radius: var(--radius); } .mob-unit { @@ -2240,9 +2264,9 @@ h1 { } .mob-back { - width: 42px; - height: 42px; - border-radius: 999px; + width: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); border: 1px solid var(--line); background: #fff; color: var(--teal); @@ -2380,6 +2404,19 @@ h1 { .side-actions { display: none; } + + .page.embedded .embed-actions { + display: none !important; + } + + .page.embedded .mob-bar { + bottom: 0; + margin-inline: -0.15rem; + padding: 0.65rem 0 calc(0.65rem + env(safe-area-inset-bottom)); + background: #fff; + border-top: 1px solid #f1f5f9; + z-index: 3; + } } @media (max-width: 700px) { diff --git a/apps/web/src/views/InvoicesView.vue b/apps/web/src/views/InvoicesView.vue index 7464ff1..2acddc6 100644 --- a/apps/web/src/views/InvoicesView.vue +++ b/apps/web/src/views/InvoicesView.vue @@ -700,21 +700,22 @@ h1 { margin: 0; font-size: 1.5rem; font-weight: 800; } .head-actions { position: relative; } .add-split { display: flex; position: relative; } .btn { - border: 0; border-radius: 12px; padding: 0.65rem 1rem; font-weight: 700; + border: 0; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); + padding: 0 0.95rem; font-weight: 700; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; text-decoration: none; } .btn.primary { background: var(--teal); color: #fff; } .btn.split { - border-radius: 12px 0 0 12px; padding-inline: 0.55rem; + border-radius: var(--radius) 0 0 var(--radius); padding-inline: 0.55rem; border-inline-start: 1px solid rgba(255,255,255,.25); } -.add-split .btn.primary:first-child { border-radius: 0 12px 12px 0; } +.add-split .btn.primary:first-child { border-radius: 0 var(--radius) var(--radius) 0; } .btn.ghost, .ghost-btn, .icon-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); - border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; + border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } -.ghost-btn { padding: 0.55rem 0.8rem; font-weight: 600; } -.icon-btn { width: 40px; height: 40px; position: relative; } +.ghost-btn { min-height: var(--control-h); height: var(--control-h); padding: 0 0.8rem; font-weight: 600; box-sizing: border-box; } +.icon-btn { width: var(--control-h); height: var(--control-h); position: relative; } .icon-btn.sm { width: 32px; height: 32px; } .icon-btn.ghost { border: 0; background: transparent; color: #94a3b8; } .add-doc { color: var(--teal); } @@ -764,20 +765,29 @@ h1 { margin: 0; font-size: 1.5rem; font-weight: 800; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .search { flex: 1 1 220px; display: flex; align-items: center; gap: 0.45rem; - border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.75rem; background: #fff; color: var(--muted); + border: 1px solid var(--line); border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); + padding: 0 0.75rem; background: #fff; color: var(--muted); box-sizing: border-box; } .search input { border: 0; outline: 0; width: 100%; background: transparent; color: var(--text); } .search .mob-ph { display: none; } .filters { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } .filter-chip { - display: inline-flex; align-items: center; gap: 0.35rem; - border: 1px solid var(--line); border-radius: 12px; padding: 0.25rem 0.55rem; - background: #fff; color: #94a3b8; min-height: 42px; + display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap; + border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0.55rem; + background: #fff; color: #94a3b8; min-height: var(--control-h); height: var(--control-h); + box-sizing: border-box; white-space: nowrap; } .filter-chip select, .filter-chip :deep(button), .filter-chip :deep(input) { - border: 0; background: transparent; outline: 0; min-height: 34px; color: var(--text); + border: 0; background: transparent; outline: 0; min-height: 0; height: 32px; color: var(--text); } -.filter-chip .sep { color: #cbd5e1; } +.filter-chip :deep(.wrap) { width: auto; flex: 0 1 auto; } +.filter-chip :deep(.trigger) { + width: auto; min-width: 5.4rem; height: 32px; min-height: 32px; + padding: 0 0.2rem; border: 0; box-shadow: none; +} +.filter-chip :deep(.trigger span) { white-space: nowrap; } +.filter-chip :deep(.trigger .ico) { display: none; } +.filter-chip .sep { color: #cbd5e1; flex-shrink: 0; } .table-wrap { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; overflow: auto; @@ -906,7 +916,7 @@ tbody tr:nth-child(even) { background: #fcfdff; } .search .mob-ph { display: block; } .toolbar { flex-wrap: nowrap; } .more-filters { - width: 44px; height: 44px; padding: 0; flex-shrink: 0; border-radius: 12px; + width: var(--control-h); height: var(--control-h); padding: 0; flex-shrink: 0; border-radius: var(--radius); } .page { padding-bottom: 6rem; } } diff --git a/apps/web/src/views/LeadFormBuilderView.vue b/apps/web/src/views/LeadFormBuilderView.vue index fedec73..1748eb1 100644 --- a/apps/web/src/views/LeadFormBuilderView.vue +++ b/apps/web/src/views/LeadFormBuilderView.vue @@ -562,7 +562,7 @@ h1 :deep(.ico) { color: var(--teal); } .top p, .back { color: #64748b; } .back { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; } .top-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; } -.btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0.45rem 0.9rem; border-radius: 12px; font: inherit; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; } +.btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: var(--control-h); height: var(--control-h); padding: 0 0.9rem; border-radius: var(--radius); font: inherit; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; box-sizing: border-box; } .btn.primary { background: var(--teal); color: #fff; } .btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; } .banner { margin: 0; padding: 0.6rem 0.8rem; border-radius: 12px; } @@ -604,7 +604,7 @@ h1 :deep(.ico) { color: var(--teal); } .preview-body p, .preview-body small { margin: 0; color: #64748b; font-size: 0.78rem; } .preview-body label { display: grid; gap: 0.25rem; font-size: 0.78rem; color: #475569; } .preview-body input, .preview-body textarea, .preview-body select { border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.45rem 0.6rem; font: inherit; background: #f8fafc; } -.send { border: 0; color: #fff; border-radius: 12px; min-height: 40px; font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; } +.send { border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; box-sizing: border-box; } .opts, .stars { color: #64748b; font-size: 0.75rem; display: grid; gap: 0.2rem; } .cover-box { width: 100%; min-height: 88px; border: 1.5px dashed #99f6e4; border-radius: 14px; background: #f0fdfa; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; } .cover-box img { width: 100%; height: 88px; object-fit: cover; display: block; } @@ -618,7 +618,7 @@ h1 :deep(.ico) { color: var(--teal); } .fops { display: flex; gap: 0.2rem; } .fops button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #f8fafc; cursor: pointer; color: #64748b; } .fops .danger { color: #dc2626; } -.add-field { width: 100%; min-height: 44px; border: 1.5px dashed #14b8a6; background: #f0fdfa; color: #0f766e; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; } +.add-field { width: 100%; min-height: var(--control-h); height: var(--control-h); border: 1.5px dashed #14b8a6; background: #f0fdfa; color: #0f766e; border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box; } .adv { background: none; border: 0; font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; text-align: right; } .toolbox h3 { margin: 0 0 0.5rem; font-size: 0.95rem; } .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 1rem; } diff --git a/apps/web/src/views/LeadFormPublicView.vue b/apps/web/src/views/LeadFormPublicView.vue index ca408b8..dbdadfa 100644 --- a/apps/web/src/views/LeadFormPublicView.vue +++ b/apps/web/src/views/LeadFormPublicView.vue @@ -189,9 +189,9 @@ header p, .muted, small { margin: 0; color: #64748b; } label { display: grid; gap: 0.35rem; color: #475569; font-size: 0.92rem; } .req { color: #b42318; } input, textarea, select { - border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.75rem 0.9rem; font: inherit; width: 100%; background: #f8fafc; + border: 1px solid #e2e8f0; border-radius: var(--radius); min-height: var(--control-h); padding: 0 0.9rem; font: inherit; width: 100%; background: #f8fafc; box-sizing: border-box; } -.btn { border: 0; color: #fff; border-radius: 12px; padding: 0.85rem 1rem; font: inherit; font-weight: 700; cursor: pointer; } +.btn { border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); padding: 0 1rem; font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box; } .error { color: #b42318; margin: 0; } .success { background: #e7f6ef; } .opts { display: grid; gap: 0.35rem; } diff --git a/apps/web/src/views/LeadFormsSettingsView.vue b/apps/web/src/views/LeadFormsSettingsView.vue index fcd66b4..212f8a1 100644 --- a/apps/web/src/views/LeadFormsSettingsView.vue +++ b/apps/web/src/views/LeadFormsSettingsView.vue @@ -101,7 +101,7 @@ h1 :deep(.ico) { color: #14b8a6; } .lead, .muted { margin: 0.25rem 0 0; color: #64748b; } .err { color: #b91c1c; } .btn, .link { font: inherit; cursor: pointer; } -.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.5rem 0.95rem; border-radius: 12px; font-weight: 700; border: 1px solid transparent; text-decoration: none; } +.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); height: var(--control-h); padding: 0 0.95rem; border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; text-decoration: none; box-sizing: border-box; } .btn.primary { background: #14b8a6; color: #fff; } .btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; } .link { background: none; border: 0; font-weight: 700; } diff --git a/apps/web/src/views/LoyaltyClubView.vue b/apps/web/src/views/LoyaltyClubView.vue index 3b5e1fd..9bdd117 100644 --- a/apps/web/src/views/LoyaltyClubView.vue +++ b/apps/web/src/views/LoyaltyClubView.vue @@ -1100,8 +1100,9 @@ h2 { margin: 0; font-size: 1.08rem; color: var(--ink); } border: 0; background: transparent; color: var(--teal-deep); - min-height: 40px; - border-radius: 10px; + min-height: var(--control-h); + height: var(--control-h); + border-radius: 8px; font: inherit; font-weight: 700; display: inline-flex; @@ -1138,9 +1139,11 @@ h2 { margin: 0; font-size: 1.08rem; color: var(--ink); } align-items: center; justify-content: center; gap: 0.35rem; - min-height: 40px; - padding: 0.5rem 0.95rem; - border-radius: 12px; + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); + box-sizing: border-box; font-weight: 700; border: 1px solid transparent; } diff --git a/apps/web/src/views/PersonFormView.vue b/apps/web/src/views/PersonFormView.vue index 37ccd0d..23213e1 100644 --- a/apps/web/src/views/PersonFormView.vue +++ b/apps/web/src/views/PersonFormView.vue @@ -362,8 +362,8 @@ h1 { } .icon-btn { - width: 40px; - height: 40px; + width: var(--control-h); + height: var(--control-h); border: 0; background: none; color: #0f766e; @@ -410,10 +410,17 @@ h1 { .field textarea { width: 100%; border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; + box-sizing: border-box; +} + +.field textarea { + min-height: 5.5rem; + padding: 0.65rem 0.85rem; } .moods { @@ -469,9 +476,9 @@ h1 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/ProductFormView.vue b/apps/web/src/views/ProductFormView.vue index 7e9247d..88e5987 100644 --- a/apps/web/src/views/ProductFormView.vue +++ b/apps/web/src/views/ProductFormView.vue @@ -514,10 +514,12 @@ h1 { align-items: center; gap: 0.45rem; border: 1px solid var(--line); - border-radius: 12px; - padding: 0.55rem 0.75rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.75rem; background: #fff; color: var(--muted); + box-sizing: border-box; } .control input, .control select, @@ -648,8 +650,9 @@ h1 { } .btn { border: 0; - border-radius: 12px; - padding: 0.75rem 1.15rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.95rem; font-weight: 700; display: inline-flex; align-items: center; diff --git a/apps/web/src/views/ProductsSettingsView.vue b/apps/web/src/views/ProductsSettingsView.vue index a853982..9f6940a 100644 --- a/apps/web/src/views/ProductsSettingsView.vue +++ b/apps/web/src/views/ProductsSettingsView.vue @@ -495,11 +495,14 @@ h1 { align-items: center; gap: 0.35rem; border: 0; - border-radius: 12px; - padding: 0.65rem 1rem; + border-radius: var(--radius); + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.95rem; font-weight: 700; text-decoration: none; cursor: pointer; + box-sizing: border-box; } .btn.primary { background: var(--accent); @@ -510,7 +513,7 @@ h1 { border: 1px solid var(--line); background: var(--surface); color: var(--text); - border-radius: 12px; + border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; @@ -518,12 +521,15 @@ h1 { cursor: pointer; } .icon-btn { - width: 42px; - height: 42px; + width: var(--control-h); + height: var(--control-h); } .ghost-btn { - padding: 0.55rem 0.85rem; + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.85rem; font-weight: 600; + box-sizing: border-box; } .toolbar { display: flex; @@ -538,9 +544,12 @@ h1 { gap: 0.45rem; border: 1px solid var(--line); background: var(--surface); - border-radius: 12px; - padding: 0.55rem 0.75rem; + border-radius: var(--radius); + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.75rem; color: var(--muted); + box-sizing: border-box; } .search input { border: 0; @@ -552,8 +561,11 @@ h1 { .filter-select { border: 1px solid var(--line); background: var(--surface); - border-radius: 12px; - padding: 0.55rem 0.75rem; + border-radius: var(--radius); + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.75rem; + box-sizing: border-box; color: var(--text); min-width: 140px; } diff --git a/apps/web/src/views/ProjectBoardView.vue b/apps/web/src/views/ProjectBoardView.vue index 82ff239..d4c5d88 100644 --- a/apps/web/src/views/ProjectBoardView.vue +++ b/apps/web/src/views/ProjectBoardView.vue @@ -357,9 +357,9 @@ h1 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/ProjectCardFormView.vue b/apps/web/src/views/ProjectCardFormView.vue index 3bed159..bda3ffb 100644 --- a/apps/web/src/views/ProjectCardFormView.vue +++ b/apps/web/src/views/ProjectCardFormView.vue @@ -258,9 +258,16 @@ textarea { width: 100%; min-width: 0; border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; + box-sizing: border-box; +} + +textarea { + min-height: 5.5rem; + padding: 0.65rem 0.85rem; } .btn { @@ -268,9 +275,9 @@ textarea { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/ReportsView.vue b/apps/web/src/views/ReportsView.vue index 7131536..20ff3ee 100644 --- a/apps/web/src/views/ReportsView.vue +++ b/apps/web/src/views/ReportsView.vue @@ -670,13 +670,16 @@ h1 { } .btn { border: 0; - border-radius: 12px; - padding: 0.6rem 0.95rem; + border-radius: var(--radius); + min-height: var(--control-h); + height: var(--control-h); + padding: 0 0.95rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; + box-sizing: border-box; } .btn.primary { background: var(--accent); diff --git a/apps/web/src/views/SalesForecastView.vue b/apps/web/src/views/SalesForecastView.vue index b9443b3..5749e08 100644 --- a/apps/web/src/views/SalesForecastView.vue +++ b/apps/web/src/views/SalesForecastView.vue @@ -777,8 +777,8 @@ h1 { margin: 0; font-size: 1.4rem; font-weight: 800; } position: absolute; inset-inline-start: 0.7rem; color: #94a3b8; pointer-events: none; z-index: 1; } .control input, .control select, .control textarea, .search input, .mob-filter select { - width: 100%; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.65rem 0.8rem; - background: #fff; font: inherit; color: inherit; + width: 100%; border: 1px solid #e2e8f0; border-radius: var(--radius); min-height: var(--control-h); + padding: 0 0.8rem; background: #fff; font: inherit; color: inherit; box-sizing: border-box; } .control input, .control select, .control textarea { padding-inline-start: 2.2rem; } .control.area textarea { min-height: 84px; resize: vertical; } @@ -790,7 +790,8 @@ h1 { margin: 0; font-size: 1.4rem; font-weight: 800; } margin: 0; display: flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; color: var(--teal); } .btn { - border: 0; border-radius: 12px; min-height: 44px; padding: 0.55rem 1rem; font-weight: 800; + border: 0; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); + padding: 0 1rem; font-weight: 800; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; cursor: pointer; } .btn.primary { background: var(--teal); color: #fff; } @@ -801,7 +802,8 @@ h1 { margin: 0; font-size: 1.4rem; font-weight: 800; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .search { flex: 1 1 180px; display: flex; align-items: center; gap: 0.4rem; - border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.45rem 0.7rem; color: #94a3b8; background: #fff; + border: 1px solid #e2e8f0; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); + padding: 0 0.7rem; color: #94a3b8; background: #fff; box-sizing: border-box; } .search input { border: 0; outline: 0; background: transparent; color: var(--text); } .status-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; } @@ -813,7 +815,8 @@ h1 { margin: 0; font-size: 1.4rem; font-weight: 800; } .status-tabs button.warn.on { background: #f59e0b; } .date-range { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid #e2e8f0; - border-radius: 12px; padding: 0.2rem 0.5rem; color: #94a3b8; background: #fff; + border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); + padding: 0 0.5rem; color: #94a3b8; background: #fff; box-sizing: border-box; } .date-range :deep(button), .date-range :deep(input) { border: 0; background: transparent; min-height: 34px; } @@ -923,10 +926,10 @@ th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap; .kpi-row { grid-template-columns: 1fr; } .mob-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; padding: 0.28rem; - background: #f1f5f9; border-radius: 14px; + background: #f1f5f9; border-radius: var(--radius); } .mob-tabs button { - border: 0; border-radius: 12px; min-height: 42px; background: transparent; color: #64748b; + border: 0; border-radius: 8px; min-height: var(--control-h); height: var(--control-h); background: transparent; color: #64748b; font-weight: 800; cursor: pointer; } .mob-tabs button.on { background: var(--teal); color: #fff; } diff --git a/apps/web/src/views/TahesabSettingsView.vue b/apps/web/src/views/TahesabSettingsView.vue index a674395..3eee78d 100644 --- a/apps/web/src/views/TahesabSettingsView.vue +++ b/apps/web/src/views/TahesabSettingsView.vue @@ -687,18 +687,21 @@ input[type='password'], input[type='url'], input[type='number'] { border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.55rem 0.7rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.7rem; background: #fff; color: #0f172a; font: inherit; width: 100%; + box-sizing: border-box; } select { border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.55rem 0.7rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.7rem; background: #fff; color: #0f172a; font: inherit; @@ -740,9 +743,9 @@ select { display: inline-flex; align-items: center; justify-content: center; - min-height: 42px; - padding: 0.55rem 0.9rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.9rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/TeamSettingsView.vue b/apps/web/src/views/TeamSettingsView.vue index 4df1815..46a5566 100644 --- a/apps/web/src/views/TeamSettingsView.vue +++ b/apps/web/src/views/TeamSettingsView.vue @@ -328,20 +328,22 @@ label { input, select { border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; color: #0f172a; + box-sizing: border-box; } .btn { display: inline-flex; align-items: center; justify-content: center; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; diff --git a/apps/web/src/views/TicketFormView.vue b/apps/web/src/views/TicketFormView.vue index d5efc57..dde090e 100644 --- a/apps/web/src/views/TicketFormView.vue +++ b/apps/web/src/views/TicketFormView.vue @@ -556,11 +556,18 @@ input, select, textarea { border: 1px solid var(--line); - border-radius: 12px; - padding: 0.7rem 0.85rem; + border-radius: var(--radius); + min-height: var(--control-h); + padding: 0 0.85rem; font: inherit; background: #fff; width: 100%; + box-sizing: border-box; +} + +textarea { + min-height: 5.5rem; + padding: 0.65rem 0.85rem; } .faq-hints { diff --git a/apps/web/src/views/TicketsView.vue b/apps/web/src/views/TicketsView.vue index 65b4693..fe4a74a 100644 --- a/apps/web/src/views/TicketsView.vue +++ b/apps/web/src/views/TicketsView.vue @@ -325,9 +325,9 @@ h1 { } .add-btn { - width: 48px; - height: 48px; - border-radius: 999px; + width: var(--control-h); + height: var(--control-h); + border-radius: var(--radius); background: #14b8a6; color: #fff; display: grid; @@ -377,9 +377,9 @@ h1 { align-items: center; justify-content: center; gap: 0.35rem; - min-height: 42px; - padding: 0.55rem 1rem; - border-radius: 12px; + min-height: var(--control-h); + padding: 0 0.95rem; + border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; @@ -664,8 +664,8 @@ h1 { @media (max-width: 520px) { .add-btn { - width: 44px; - height: 44px; + width: var(--control-h); + height: var(--control-h); } .sla-btn {