Initial commit - modstagram-next
This commit is contained in:
root
508
src/app/globals.css
Normal file
508
src/app/globals.css
Normal file
@@ -0,0 +1,508 @@
|
||||
@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;
|
||||
}
|
||||
.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: 1px solid rgba(255, 255, 255, 0.45);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.dark .glass-panel {
|
||||
background: rgba(28, 28, 30, 0.78);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.glass-chat-input {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(24px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(200%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
|
||||
}
|
||||
.dark .glass-chat-input {
|
||||
background: rgba(44, 44, 46, 0.88);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* ─── Gentle transitions ─── */
|
||||
.gentle-transition {
|
||||
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
/* ─── Instagram DM chat theme ─── */
|
||||
.chat-page-bg {
|
||||
background: #ffffff;
|
||||
}
|
||||
.dark .chat-page-bg {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
/* Outgoing — Instagram DM (RTL: tail bottom-left / outer edge) */
|
||||
.chat-bubble-out,
|
||||
.ig-dm-out {
|
||||
background: linear-gradient(135deg, #5b51d8 0%, #c13584 45%, #e1306c 100%);
|
||||
color: #fff;
|
||||
}
|
||||
.bubble-tail-out .chat-bubble-out,
|
||||
.bubble-tail-out .chat-text-bubble.chat-bubble-out {
|
||||
border-radius: 18px 18px 18px 4px;
|
||||
}
|
||||
/* Incoming — tail bottom-right */
|
||||
.chat-bubble-in,
|
||||
.ig-dm-in {
|
||||
background: #efefef;
|
||||
color: #000;
|
||||
}
|
||||
.bubble-tail-in .chat-bubble-in,
|
||||
.bubble-tail-in .chat-text-bubble.chat-bubble-in {
|
||||
border-radius: 18px 18px 4px 18px;
|
||||
}
|
||||
.dark .chat-bubble-in,
|
||||
.dark .ig-dm-in {
|
||||
background: #262626;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.bubble-tail-out .message-time-inline {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
.bubble-tail-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);
|
||||
}
|
||||
|
||||
.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: linear-gradient(135deg, #5b51d8 0%, #c13584 50%, #e1306c 100%);
|
||||
}
|
||||
|
||||
/* ─── Instagram-style typing dots ─── */
|
||||
@keyframes typing-bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-4px); opacity: 1; }
|
||||
}
|
||||
.typing-dot {
|
||||
animation: typing-bounce 1.2s ease-in-out infinite;
|
||||
}
|
||||
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
|
||||
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
/* ─── Message enter animation ─── */
|
||||
@keyframes message-in {
|
||||
from { opacity: 0; transform: translateY(12px) scale(0.96); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
.message-enter {
|
||||
animation: message-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
/* حذف پسزمینه سفید اضافی در برخی مرورگرها */
|
||||
.custom-audio-player::-webkit-media-controls-panel {
|
||||
background-color: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user