838 lines
22 KiB
CSS
838 lines
22 KiB
CSS
@import "tailwindcss";
|
|
@import "@radix-ui/themes/styles.css";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--breakpoint-desktop-3xl : 1920px;
|
|
--breakpoint-offer-wrap : 1890px;
|
|
--breakpoint-desktop-2-3xl : 1664px;
|
|
--breakpoint-desktop-2xl : 1610px;
|
|
--breakpoint-desktop-xl : 1450px;
|
|
--breakpoint-desktop-l : 1376px;
|
|
--breakpoint-desktop-s : 1290px;
|
|
--breakpoint-desktop-xs : 1211px;
|
|
--breakpoint-desktop-xsx : 1110px;
|
|
--breakpoint-laptop-xl : 1034px;
|
|
--breakpoint-laptop-sl : 969px;
|
|
--breakpoint-laptop-l : 965px;
|
|
--breakpoint-laptop-s : 911px;
|
|
--breakpoint-tablet-xl : 810px;
|
|
--breakpoint-tablet-lg : 797px;
|
|
--breakpoint-tablet-l : 774px;
|
|
--breakpoint-tablet-xs : 734px;
|
|
--breakpoint-Wide-mobile-4xl : 645px;
|
|
--breakpoint-Wide-mobile-4-5xl : 626px;
|
|
--breakpoint-Wide-mobile-3xl : 605px;
|
|
--breakpoint-Wide-mobile-2xl : 573px;
|
|
--breakpoint-Wide-mobile-xl : 545px ;
|
|
--breakpoint-Wide-mobile-l : 539px;
|
|
--breakpoint-Wide-mobile-xss : 526px;
|
|
--breakpoint-Wide-mobile-s : 485px;
|
|
--breakpoint-Wide-mobile-xsss : 466px;
|
|
--breakpoint-Wide-mobile-sm : 430px;
|
|
--breakpoint-Wide-mobile-xs : 400px;
|
|
--breakpoint-mobile-xl : 365px;
|
|
--breakpoint-mobile-xlk : 381px;
|
|
--breakpoint-mobile-l : 335px;
|
|
--breakpoint-mobile-s : 245px;
|
|
|
|
|
|
}
|
|
/* مخفی کردن اسکرولبار در همه مرورگرها */
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none !important; /* IE و Edge */
|
|
scrollbar-width: none !important; /* Firefox */
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none !important; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
/* globals.css */
|
|
.input-no-spinner {
|
|
-moz-appearance: textfield; /* Firefox */
|
|
appearance: none; /* تمامی مرورگرها */
|
|
}
|
|
|
|
.input-no-spinner::-webkit-outer-spin-button,
|
|
.input-no-spinner::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm : calc(var(--radius) - 4px);
|
|
--radius-md : calc(var(--radius) - 2px);
|
|
--radius-lg : var(--radius);
|
|
--radius-xl : calc(var(--radius) + 4px);
|
|
--color-background : var(--background);
|
|
--color-foreground : var(--foreground);
|
|
--color-card : var(--card);
|
|
--color-card-foreground : var(--card-foreground);
|
|
--color-popover : var(--popover);
|
|
--color-popover-foreground : var(--popover-foreground);
|
|
--color-primary : var(--primary);
|
|
--color-primary-foreground : var(--primary-foreground);
|
|
--color-secondary : var(--secondary);
|
|
--color-secondary-foreground : var(--secondary-foreground);
|
|
--color-muted : var(--muted);
|
|
--color-muted-foreground : var(--muted-foreground);
|
|
--color-accent : var(--accent);
|
|
--color-accent-foreground : var(--accent-foreground);
|
|
--color-destructive : var(--destructive);
|
|
--color-border : var(--border);
|
|
--color-input : var(--input);
|
|
--color-ring : var(--ring);
|
|
--color-chart-1 : var(--chart-1);
|
|
--color-chart-2 : var(--chart-2);
|
|
--color-chart-3 : var(--chart-3);
|
|
--color-chart-4 : var(--chart-4);
|
|
--color-chart-5 : var(--chart-5);
|
|
--color-sidebar : var(--sidebar);
|
|
--color-sidebar-foreground : var(--sidebar-foreground);
|
|
--color-sidebar-primary : var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground : var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent : var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground : var(--sidebar-accent-foreground);
|
|
--color-sidebar-border : var(--sidebar-border);
|
|
--color-sidebar-ring : var(--sidebar-ring);}
|
|
|
|
:root {
|
|
--input: oklch(0 0 0 / 100%); /* مشکی کاملا */
|
|
--border: oklch(0 0 0 / 50%); /* خاکستری */
|
|
--ring: oklch(0 0 0 / 70%);
|
|
--radius : 0.625rem;
|
|
--background : oklch(1 0 0);
|
|
--foreground : oklch(0.145 0 0);
|
|
--card : oklch(1 0 0);
|
|
--card-foreground : oklch(0.145 0 0);
|
|
--popover : oklch(1 0 0);
|
|
--popover-foreground : oklch(0.145 0 0);
|
|
--primary : oklch(0.205 0 0);
|
|
--primary-foreground : oklch(0.985 0 0);
|
|
--secondary : oklch(0.97 0 0);
|
|
--secondary-foreground : oklch(0.205 0 0);
|
|
--muted : oklch(0.97 0 0);
|
|
--muted-foreground : oklch(0.556 0 0);
|
|
--accent : oklch(0.97 0 0);
|
|
--accent-foreground : oklch(0.205 0 0);
|
|
--destructive : oklch(0.577 0.245 27.325);
|
|
--border : oklch(0.922 0 0);
|
|
--input : oklch(0.922 0 0);
|
|
--ring : oklch(0.708 0 0);
|
|
--chart-1 : oklch(0.646 0.222 41.116);
|
|
--chart-2 : oklch(0.6 0.118 184.704);
|
|
--chart-3 : oklch(0.398 0.07 227.392);
|
|
--chart-4 : oklch(0.828 0.189 84.429);
|
|
--chart-5 : oklch(0.769 0.188 70.08);
|
|
--sidebar : oklch(0.985 0 0);
|
|
--sidebar-foreground : oklch(0.145 0 0);
|
|
--sidebar-primary : oklch(0.205 0 0);
|
|
--sidebar-primary-foreground : oklch(0.985 0 0);
|
|
--sidebar-accent : oklch(0.97 0 0);
|
|
--sidebar-accent-foreground : oklch(0.205 0 0);
|
|
--sidebar-border : oklch(0.922 0 0);
|
|
--sidebar-ring : oklch(0.708 0 0);}
|
|
|
|
.dark {
|
|
--input: oklch(1 0 0 / 100%); /* سفید کامل */
|
|
--border: oklch(1 0 0 / 50%);
|
|
--ring: oklch(1 0 0 / 70%);
|
|
--background : oklch(0.145 0 0);
|
|
--foreground : oklch(0.985 0 0);
|
|
--card : oklch(0.205 0 0);
|
|
--card-foreground : oklch(0.985 0 0);
|
|
--popover : oklch(0.205 0 0);
|
|
--popover-foreground : oklch(0.985 0 0);
|
|
--primary : oklch(0.922 0 0);
|
|
--primary-foreground : oklch(0.205 0 0);
|
|
--secondary : oklch(0.269 0 0);
|
|
--secondary-foreground : oklch(0.985 0 0);
|
|
--muted : oklch(0.269 0 0);
|
|
--muted-foreground : oklch(0.708 0 0);
|
|
--accent : oklch(0.269 0 0);
|
|
--accent-foreground : oklch(0.985 0 0);
|
|
--destructive : oklch(0.704 0.191 22.216);
|
|
--border : oklch(1 0 0 / 10%);
|
|
--input : oklch(1 0 0 / 15%);
|
|
--ring : oklch(0.556 0 0);
|
|
--chart-1 : oklch(0.488 0.243 264.376);
|
|
--chart-2 : oklch(0.696 0.17 162.48);
|
|
--chart-3 : oklch(0.769 0.188 70.08);
|
|
--chart-4 : oklch(0.627 0.265 303.9);
|
|
--chart-5 : oklch(0.645 0.246 16.439);
|
|
--sidebar : oklch(0.205 0 0);
|
|
--sidebar-foreground : oklch(0.985 0 0);
|
|
--sidebar-primary : oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground : oklch(0.985 0 0);
|
|
--sidebar-accent : oklch(0.269 0 0);
|
|
--sidebar-accent-foreground : oklch(0.985 0 0);
|
|
--sidebar-border : oklch(1 0 0 / 10%);
|
|
--sidebar-ring : oklch(0.556 0 0);}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;}
|
|
body {
|
|
@apply bg-background text-foreground;}}
|
|
|
|
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
direction: rtl;
|
|
}
|
|
button,
|
|
button:focus,
|
|
textarea {
|
|
outline: none;
|
|
}
|
|
|
|
input:focus,
|
|
button:focus,
|
|
select:focus {
|
|
outline: none;
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
/* Firefox */
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background-image: url("/images/icons/arrow-down.svg");
|
|
background-size: 15px;
|
|
background-repeat: no-repeat;
|
|
background-position-x: 10px;
|
|
background-position-y: 13px;
|
|
}
|
|
|
|
.dir-ltr {
|
|
direction: ltr;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
max-width: 992px;
|
|
}
|
|
}
|
|
|
|
.auth-page .rmdp-input {
|
|
border-radius: 1rem;
|
|
margin-top: 8px;
|
|
height: 36px;
|
|
color: #111;
|
|
width: 100%;
|
|
padding-right: 48px;
|
|
}
|
|
|
|
.project-date-field .rmdp-container,
|
|
.project-date-field .rmdp-input {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.project-date-field .rmdp-input {
|
|
text-align: center !important;
|
|
padding-left: 2.75rem !important;
|
|
padding-right: 2.75rem !important;
|
|
}
|
|
.address-page .mapboxgl-map {
|
|
max-height: 210px;
|
|
height: 100%;
|
|
width: 100% !important;
|
|
max-width: 300px;
|
|
border-radius: 12px !important;
|
|
overflow: hidden !important;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.address-page .map-g {
|
|
width: 100%;
|
|
border-radius: 12px !important;
|
|
margin-top: 12px;
|
|
}
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
/* ─── iOS Spinner & unified loading ─── */
|
|
@keyframes ios-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.animate-ios-spin {
|
|
animation: ios-spin 0.9s steps(12) infinite;
|
|
}
|
|
|
|
/* Legacy alias → use IOSSpinner component instead */
|
|
.custom-loader {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: conic-gradient(from 0deg, #007aff 0deg, transparent 60deg, transparent 300deg, #007aff 360deg);
|
|
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
|
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
|
|
animation: ios-spin 0.9s linear infinite;
|
|
}
|
|
|
|
/* ─── Glassmorphism utilities ─── */
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.72);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: none;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.dark .glass-panel {
|
|
background: rgba(28, 28, 30, 0.78);
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.chat-header-glass {
|
|
background: rgba(255, 255, 255, 0.62);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: none;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.dark .chat-header-glass {
|
|
background: rgba(28, 28, 30, 0.72);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.chat-header-status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
flex-shrink: 0;
|
|
border-radius: 9999px;
|
|
}
|
|
.chat-header-status-dot--online {
|
|
background: #22c55e;
|
|
}
|
|
.chat-header-status-dot--offline {
|
|
background: #9ca3af;
|
|
}
|
|
.dark .chat-header-status-dot--offline {
|
|
background: #6b7280;
|
|
}
|
|
|
|
.chat-timer-glass {
|
|
background: rgba(255, 255, 255, 0.58);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: none;
|
|
box-shadow: 0 2px 14px rgba(36, 140, 200, 0.12);
|
|
}
|
|
.dark .chat-timer-glass {
|
|
background: rgba(24, 37, 51, 0.72);
|
|
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.chat-timer-glass--active {
|
|
background: rgba(42, 171, 238, 0.18);
|
|
color: #248cc8;
|
|
box-shadow: 0 2px 14px rgba(42, 171, 238, 0.2);
|
|
}
|
|
.dark .chat-timer-glass--active {
|
|
background: rgba(42, 171, 238, 0.22);
|
|
color: #2aabee;
|
|
}
|
|
|
|
.chat-timer-badge-glass {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 1px 6px;
|
|
border-radius: 9999px;
|
|
background: rgba(255, 255, 255, 0.42);
|
|
backdrop-filter: blur(10px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(10px) saturate(160%);
|
|
border: none;
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
.chat-bubble-out .chat-timer-badge-glass {
|
|
background: rgba(255, 255, 255, 0.22);
|
|
color: inherit;
|
|
}
|
|
.chat-bubble-in .chat-timer-badge-glass {
|
|
color: #248cc8;
|
|
}
|
|
.dark .chat-timer-badge-glass {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
}
|
|
.dark .chat-bubble-in .chat-timer-badge-glass {
|
|
color: #2aabee;
|
|
}
|
|
|
|
.chat-message-highlight {
|
|
animation: message-highlight-flash 1.6s ease-out;
|
|
border-radius: 1rem;
|
|
}
|
|
@keyframes message-highlight-flash {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(42, 171, 238, 0);
|
|
}
|
|
25%,
|
|
65% {
|
|
box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.55);
|
|
}
|
|
}
|
|
|
|
.glass-chat-input {
|
|
background: rgba(255, 255, 255, 0.78);
|
|
backdrop-filter: blur(24px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(200%);
|
|
border: none;
|
|
box-shadow: 0 4px 20px rgba(15, 45, 70, 0.08);
|
|
}
|
|
.dark .glass-chat-input {
|
|
background: rgba(24, 37, 51, 0.78);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
/* ─── Gentle transitions ─── */
|
|
.gentle-transition {
|
|
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
/* ─── Reels / post feed vertical scroll (Instagram-like snap) ─── */
|
|
.reels-vertical-scroll {
|
|
scroll-snap-type: y mandatory;
|
|
scroll-behavior: auto;
|
|
overscroll-behavior-y: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.reels-vertical-scroll > * {
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
}
|
|
.reels-vertical-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.reels-horizontal-scroll {
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
overscroll-behavior-x: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.reels-horizontal-scroll > * {
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
}
|
|
.reels-horizontal-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* ─── Chat scrollbar ─── */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
border-radius: 4px;
|
|
}
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* ─── Safari floating header pill ─── */
|
|
.safari-header-pill {
|
|
max-width: min(100% - 2rem, 22rem);
|
|
}
|
|
|
|
/* ─── Chat theme — Modstagram: modeling · makeup · beauty · photography ─── */
|
|
:root {
|
|
--chat-accent: #2aabee;
|
|
/* Studio light: warm key + soft fill */
|
|
--chat-bg: #f3ece6;
|
|
--chat-bg-pattern: url("/images/chat/wallpaper-light.svg"),
|
|
radial-gradient(ellipse 90% 70% at 8% 12%, rgba(214, 164, 176, 0.32) 0%, transparent 58%),
|
|
radial-gradient(ellipse 85% 65% at 92% 88%, rgba(141, 175, 205, 0.26) 0%, transparent 55%),
|
|
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 248, 242, 0.5) 0%, transparent 70%),
|
|
linear-gradient(168deg, #faf4ef 0%, #f0e8f0 38%, #e8eef4 100%);
|
|
--chat-bg-pattern-size: 480px 480px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
|
|
--chat-bubble-out: #248cc8;
|
|
--chat-bubble-out-fg: #ffffff;
|
|
--chat-bubble-out-meta: rgba(255, 255, 255, 0.78);
|
|
--chat-bubble-in: #fffdfb;
|
|
--chat-bubble-in-fg: #1c1520;
|
|
--chat-bubble-in-meta: rgba(28, 21, 32, 0.46);
|
|
}
|
|
|
|
.dark {
|
|
--chat-accent: #2aabee;
|
|
/* Dark studio: tungsten key + cool rim */
|
|
--chat-bg: #0e1014;
|
|
--chat-bg-pattern: url("/images/chat/wallpaper-dark.svg"),
|
|
radial-gradient(ellipse 80% 55% at 10% 15%, rgba(196, 149, 127, 0.14) 0%, transparent 58%),
|
|
radial-gradient(ellipse 75% 50% at 88% 82%, rgba(42, 171, 238, 0.11) 0%, transparent 52%),
|
|
radial-gradient(ellipse 50% 40% at 50% 45%, rgba(180, 140, 170, 0.06) 0%, transparent 65%),
|
|
linear-gradient(168deg, #121018 0%, #0e1014 45%, #0a0c12 100%);
|
|
--chat-bg-pattern-size: 480px 480px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
|
|
--chat-bubble-out: #2aabee;
|
|
--chat-bubble-out-fg: #ffffff;
|
|
--chat-bubble-out-meta: rgba(255, 255, 255, 0.76);
|
|
--chat-bubble-in: #1a2029;
|
|
--chat-bubble-in-fg: #eceef3;
|
|
--chat-bubble-in-meta: rgba(236, 238, 243, 0.55);
|
|
}
|
|
|
|
.chat-page-bg {
|
|
position: relative;
|
|
background: transparent;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.chat-page-bg::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background-color: var(--chat-bg);
|
|
background-image: var(--chat-bg-pattern);
|
|
background-size: var(--chat-bg-pattern-size);
|
|
}
|
|
|
|
/* فقط لیست پیامها — بدون position:relative تا fixed هدر/فوتر خراب نشود */
|
|
.chat-page-bg > .chat-thread-messages {
|
|
z-index: 1;
|
|
}
|
|
|
|
.chat-bubble-out,
|
|
.ig-dm-out {
|
|
background: var(--chat-bubble-out);
|
|
color: var(--chat-bubble-out-fg);
|
|
}
|
|
.chat-bubble-out .message-time-inline,
|
|
.chat-text-bubble.chat-bubble-out .message-time-inline,
|
|
.chat-bubble-out .message-time-below {
|
|
color: var(--chat-bubble-out-meta);
|
|
}
|
|
|
|
.chat-bubble-in,
|
|
.ig-dm-in {
|
|
background: var(--chat-bubble-in);
|
|
color: var(--chat-bubble-in-fg);
|
|
box-shadow: 0 1px 2px rgba(26, 21, 32, 0.08);
|
|
}
|
|
.dark .chat-bubble-in,
|
|
.dark .ig-dm-in {
|
|
box-shadow: none;
|
|
}
|
|
.chat-bubble-in .message-time-inline,
|
|
.chat-text-bubble.chat-bubble-in .message-time-inline,
|
|
.chat-bubble-in .message-time-below {
|
|
color: var(--chat-bubble-in-meta);
|
|
}
|
|
|
|
.chat-text-bubble {
|
|
position: relative;
|
|
padding-bottom: 1.25rem;
|
|
min-width: 4rem;
|
|
max-width: min(85vw, 320px);
|
|
}
|
|
.chat-message-text {
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
.message-time-inline {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: 8px;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
.chat-bubble-out .message-time-inline,
|
|
.chat-text-bubble.chat-bubble-out .message-time-inline {
|
|
left: auto;
|
|
right: 8px;
|
|
}
|
|
.chat-bubble-in .message-time-inline,
|
|
.chat-text-bubble.chat-bubble-in .message-time-inline {
|
|
left: 8px;
|
|
right: auto;
|
|
}
|
|
|
|
.glass-panel-strong {
|
|
background: rgba(255, 255, 255, 0.72);
|
|
backdrop-filter: blur(24px) saturate(1.4);
|
|
-webkit-backdrop-filter: blur(24px) saturate(1.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.45);
|
|
}
|
|
.dark .glass-panel-strong {
|
|
background: rgba(30, 30, 30, 0.78);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.comments-modal-glass {
|
|
backdrop-filter: blur(28px) saturate(1.5);
|
|
-webkit-backdrop-filter: blur(28px) saturate(1.5);
|
|
}
|
|
|
|
.chat-action-btn {
|
|
background: linear-gradient(135deg, #0095f6 0%, #007aff 100%);
|
|
color: #fff;
|
|
box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
|
|
}
|
|
|
|
.chat-forward-btn {
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
|
color: #fff;
|
|
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
|
|
}
|
|
|
|
.dark .chat-forward-btn {
|
|
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
|
|
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
|
|
}
|
|
|
|
.header-offline {
|
|
background: linear-gradient(180deg, rgba(220, 38, 38, 0.92) 0%, rgba(185, 28, 28, 0.88) 100%) !important;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.header-syncing .brand-logo {
|
|
opacity: 0;
|
|
}
|
|
.header-syncing-dots span {
|
|
animation: typing-bounce 1.2s ease-in-out infinite;
|
|
}
|
|
.header-syncing-dots span:nth-child(2) { animation-delay: 0.15s; }
|
|
.header-syncing-dots span:nth-child(3) { animation-delay: 0.3s; }
|
|
|
|
.tab-active-glass {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.55);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
|
|
}
|
|
.dark .tab-active-glass {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.chat-input-area {
|
|
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
.chat-input-area--thread {
|
|
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.ig-dm-send-btn {
|
|
background: var(--chat-bubble-out);
|
|
color: var(--chat-bubble-out-fg);
|
|
}
|
|
|
|
/* ─── Instagram-style typing dots (waving) ─── */
|
|
@keyframes typing-bounce {
|
|
0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.45; }
|
|
30% { transform: translateY(-5px) scale(1.15); opacity: 1; }
|
|
}
|
|
.typing-dot {
|
|
animation: typing-bounce 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
|
|
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
|
|
|
|
/* ─── Read receipt check animation ─── */
|
|
@keyframes check-pop {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
60% { transform: scale(1.15); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
.read-check-animate {
|
|
animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
@keyframes nearby-radar-sweep {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes nearby-blip-glow {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 4px 1px rgba(57, 255, 20, 0.55);
|
|
opacity: 0.85;
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 10px 3px rgba(57, 255, 20, 0.95);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.nearby-radar-sweep {
|
|
animation: nearby-radar-sweep 4s linear infinite;
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.nearby-blip-glow {
|
|
animation: nearby-blip-glow 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes story-ring-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.story-ring-live {
|
|
animation: story-ring-spin 3s linear infinite;
|
|
}
|
|
|
|
/* Message enter — handled by framer-motion in ChatMessageCard */
|
|
|
|
/* ─── Shrink header ─── */
|
|
.header-shrink {
|
|
transform: scale(0.92) translateY(-2px);
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
/* استایل اختصاصی برای پلیر در تم روشن */
|
|
.custom-audio-player::-webkit-media-controls-enclosure {
|
|
background-color: #e5e7eb; /* خاکستری تیره تر برای تم روشن */
|
|
}
|
|
|
|
/* برای اینکه دکمهها و نوشتههای پلیر در تم روشن تیره بمانند */
|
|
.custom-audio-player {
|
|
filter: contrast(1.1) brightness(0.9);
|
|
}
|
|
|
|
/* در تم تاریک، پلیر را به رنگهای روشن معکوس میکنیم */
|
|
.dark .custom-audio-player {
|
|
filter: invert(1) hue-rotate(180deg) brightness(1.2);
|
|
}
|
|
|
|
.profile-avatar {
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* ─── Design system: buttons & modals ─── */
|
|
:root {
|
|
--btn-border-color: #C3C3C3;
|
|
--btn-accent: #FC8EAC;
|
|
--btn-accent-hover: #f07898;
|
|
--btn-accent-text: #ffffff;
|
|
}
|
|
|
|
.btn-modern {
|
|
border: 1px solid var(--btn-border-color);
|
|
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.btn-modern:hover:not(:disabled) {
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.btn-modern:active:not(:disabled) {
|
|
transform: scale(0.98);
|
|
}
|
|
.dark .btn-modern {
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
|
|
}
|
|
.dark .btn-modern:hover:not(:disabled) {
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
|
|
}
|
|
|
|
.btn-modern--primary {
|
|
background: var(--btn-accent);
|
|
color: var(--btn-accent-text);
|
|
border-color: var(--btn-border-color);
|
|
}
|
|
.btn-modern--primary:hover:not(:disabled) {
|
|
background: var(--btn-accent-hover);
|
|
}
|
|
|
|
.btn-modern--selected {
|
|
background: var(--btn-accent);
|
|
color: var(--btn-accent-text);
|
|
border-color: var(--btn-accent);
|
|
}
|
|
.btn-modern--selected:hover:not(:disabled) {
|
|
background: var(--btn-accent-hover);
|
|
border-color: var(--btn-accent-hover);
|
|
}
|
|
|
|
.glass-modal-overlay {
|
|
background: rgba(8, 8, 10, 0.52);
|
|
backdrop-filter: blur(20px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(120%);
|
|
}
|
|
.dark .glass-modal-overlay {
|
|
background: rgba(0, 0, 0, 0.62);
|
|
backdrop-filter: blur(22px) saturate(110%);
|
|
-webkit-backdrop-filter: blur(22px) saturate(110%);
|
|
}
|
|
.glass-modal-overlay--dark {
|
|
background: rgba(0, 0, 0, 0.72);
|
|
backdrop-filter: blur(24px) saturate(110%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(110%);
|
|
}
|
|
.dark .glass-modal-overlay--dark {
|
|
background: rgba(0, 0, 0, 0.82);
|
|
}
|
|
|
|
.glass-modal-panel {
|
|
background: rgba(255, 255, 255, 0.78);
|
|
backdrop-filter: blur(28px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
|
|
}
|
|
.dark .glass-modal-panel {
|
|
background: rgba(28, 28, 30, 0.84);
|
|
border-color: rgba(255, 255, 255, 0.14);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.48);
|
|
}
|
|
|
|
.glass-modal-panel--sheet {
|
|
border-radius: 1.5rem 1.5rem 0 0;
|
|
}
|
|
.glass-modal-panel--center {
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
/* English LTR page shells (applied page-by-page later) */
|
|
.locale-page-shell--ltr {
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
|
|
html[dir="ltr"] body {
|
|
direction: ltr;
|
|
}
|
|
|
|
html[dir="ltr"] .rtl\:flex-row-reverse {
|
|
flex-direction: row;
|
|
} |