wmq
243 lines
7.4 KiB
CSS
243 lines
7.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 210 20% 98%;
|
|
--foreground: 215 28% 13%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 215 25% 16%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 215 25% 16%;
|
|
--primary: 221 83% 53%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 210 20% 96%;
|
|
--secondary-foreground: 215 20% 24%;
|
|
--muted: 210 20% 96%;
|
|
--muted-foreground: 215 12% 43%;
|
|
--accent: 214 100% 97%;
|
|
--accent-foreground: 221 83% 40%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 214 22% 91%;
|
|
--input: 214 18% 86%;
|
|
--ring: 221 83% 53%;
|
|
--radius: 0.75rem;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
letter-spacing: -0.006em;
|
|
background-image:
|
|
radial-gradient(circle at 75% -10%, rgba(37, 99, 235, 0.05), transparent 26rem),
|
|
linear-gradient(180deg, #ffffff 0, hsl(var(--background)) 22rem);
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-primary-200 text-primary-900;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(214 15% 80%) transparent;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
@apply rounded-full bg-border;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
.surface-panel {
|
|
@apply rounded-2xl border border-slate-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.03),0_10px_30px_rgba(15,23,42,0.025)];
|
|
}
|
|
.eyebrow {
|
|
@apply text-[11px] font-semibold uppercase tracking-[0.14em] text-primary-700;
|
|
}
|
|
}
|
|
|
|
.chat-wallpaper {
|
|
transition: background-color .28s ease, background-image .28s ease;
|
|
background-position: center, center, center, center, 0 0, center;
|
|
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 320px 320px, 100% 100%;
|
|
}
|
|
|
|
.chat-wallpaper-ocean {
|
|
background-color: #eaf2f9;
|
|
background-image:
|
|
radial-gradient(ellipse at 8% 10%, rgba(125, 211, 252, .42), transparent 45%),
|
|
radial-gradient(ellipse at 92% 8%, rgba(96, 165, 250, .34), transparent 44%),
|
|
radial-gradient(ellipse at 12% 92%, rgba(45, 212, 191, .24), transparent 43%),
|
|
radial-gradient(ellipse at 90% 90%, rgba(129, 140, 248, .25), transparent 46%),
|
|
url('/chat-pattern.svg'),
|
|
linear-gradient(145deg, rgba(245, 251, 255, .88), rgba(224, 236, 250, .94));
|
|
}
|
|
|
|
.chat-wallpaper-aurora {
|
|
background-color: #eff0ff;
|
|
background-image:
|
|
radial-gradient(ellipse at 8% 8%, rgba(167, 139, 250, .38), transparent 46%),
|
|
radial-gradient(ellipse at 92% 12%, rgba(244, 114, 182, .3), transparent 43%),
|
|
radial-gradient(ellipse at 10% 92%, rgba(34, 211, 238, .3), transparent 45%),
|
|
radial-gradient(ellipse at 90% 90%, rgba(99, 102, 241, .32), transparent 47%),
|
|
url('/chat-pattern.svg'),
|
|
linear-gradient(145deg, rgba(249, 244, 255, .9), rgba(228, 246, 255, .88));
|
|
}
|
|
|
|
.chat-wallpaper-sunset {
|
|
background-color: #fff3ed;
|
|
background-image:
|
|
radial-gradient(ellipse at 8% 10%, rgba(251, 191, 36, .34), transparent 44%),
|
|
radial-gradient(ellipse at 92% 8%, rgba(251, 113, 133, .33), transparent 45%),
|
|
radial-gradient(ellipse at 9% 92%, rgba(251, 146, 60, .28), transparent 43%),
|
|
radial-gradient(ellipse at 90% 90%, rgba(192, 132, 252, .28), transparent 47%),
|
|
url('/chat-pattern.svg'),
|
|
linear-gradient(145deg, rgba(255, 249, 232, .92), rgba(250, 235, 255, .9));
|
|
}
|
|
|
|
.chat-wallpaper-mint {
|
|
background-color: #eaf8f4;
|
|
background-image:
|
|
radial-gradient(ellipse at 8% 9%, rgba(52, 211, 153, .34), transparent 46%),
|
|
radial-gradient(ellipse at 92% 10%, rgba(34, 211, 238, .28), transparent 44%),
|
|
radial-gradient(ellipse at 10% 92%, rgba(163, 230, 53, .22), transparent 43%),
|
|
radial-gradient(ellipse at 90% 90%, rgba(96, 165, 250, .3), transparent 47%),
|
|
url('/chat-pattern.svg'),
|
|
linear-gradient(145deg, rgba(237, 253, 247, .92), rgba(229, 244, 255, .9));
|
|
}
|
|
|
|
.telegram-bubble-in {
|
|
border: 1px solid rgba(226, 232, 240, .96);
|
|
background: rgba(255, 255, 255, .97);
|
|
box-shadow: 0 2px 5px rgba(15, 23, 42, .06), 0 10px 24px -18px rgba(15, 23, 42, .22);
|
|
}
|
|
|
|
.telegram-bubble-in::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: -7px;
|
|
width: 12px;
|
|
height: 14px;
|
|
background: rgba(255, 255, 255, .97);
|
|
clip-path: polygon(100% 0, 0 100%, 100% 100%);
|
|
}
|
|
|
|
.telegram-bubble-out {
|
|
border: 1px solid rgba(147, 197, 253, .75);
|
|
background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 52%, #eff6ff 100%);
|
|
box-shadow: 0 3px 7px rgba(37, 99, 235, .1), 0 12px 28px -18px rgba(37, 99, 235, .38);
|
|
}
|
|
|
|
.telegram-bubble-out::before {
|
|
content: '';
|
|
position: absolute;
|
|
right: -7px;
|
|
bottom: -1px;
|
|
width: 12px;
|
|
height: 14px;
|
|
background: #e8f3ff;
|
|
clip-path: polygon(0 0, 0 100%, 100% 100%);
|
|
}
|
|
|
|
.group:hover .telegram-bubble-in {
|
|
box-shadow: 0 3px 8px rgba(15, 23, 42, .08), 0 14px 30px -20px rgba(15, 23, 42, .28);
|
|
}
|
|
|
|
.group:hover .telegram-bubble-out {
|
|
box-shadow: 0 4px 10px rgba(37, 99, 235, .13), 0 16px 32px -20px rgba(37, 99, 235, .45);
|
|
}
|
|
|
|
@keyframes message-in-left {
|
|
from { opacity: 0; transform: translate3d(-18px, 8px, 0) scale(.96); }
|
|
65% { opacity: 1; transform: translate3d(2px, -1px, 0) scale(1.01); }
|
|
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
|
|
}
|
|
|
|
@keyframes message-in-right {
|
|
from { opacity: 0; transform: translate3d(18px, 8px, 0) scale(.96); }
|
|
65% { opacity: 1; transform: translate3d(-2px, -1px, 0) scale(1.01); }
|
|
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
|
|
}
|
|
|
|
@keyframes incoming-notice {
|
|
from { opacity: 0; transform: translate3d(24px, -12px, 0) scale(.94); }
|
|
70% { opacity: 1; transform: translate3d(-3px, 1px, 0) scale(1.01); }
|
|
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
|
|
}
|
|
|
|
@keyframes conversation-select {
|
|
0% {
|
|
transform: translate3d(0, 2px, 0) scale(.988);
|
|
box-shadow: 0 0 0 rgba(37, 99, 235, 0);
|
|
}
|
|
58% {
|
|
transform: translate3d(0, -1px, 0) scale(1.003);
|
|
box-shadow: 0 12px 28px -15px rgba(37, 99, 235, .48);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
box-shadow: 0 9px 24px -15px rgba(37, 99, 235, .52), 0 0 0 1px rgba(96, 165, 250, .1);
|
|
}
|
|
}
|
|
|
|
@keyframes conversation-sheen {
|
|
from { transform: translate3d(-170%, 0, 0) skewX(-18deg); opacity: 0; }
|
|
18% { opacity: .7; }
|
|
to { transform: translate3d(470%, 0, 0) skewX(-18deg); opacity: 0; }
|
|
}
|
|
|
|
.conversation-selected {
|
|
animation: conversation-select .42s cubic-bezier(.2, .82, .2, 1) both;
|
|
}
|
|
|
|
.conversation-selected::after {
|
|
content: '';
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset-block: 0;
|
|
left: 0;
|
|
width: 24%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent);
|
|
animation: conversation-sheen .62s cubic-bezier(.2, .7, .2, 1) .04s both;
|
|
}
|
|
|
|
@layer utilities {
|
|
.animate-message-in-left { animation: message-in-left .34s cubic-bezier(.2,.8,.2,1) both; }
|
|
.animate-message-in-right { animation: message-in-right .34s cubic-bezier(.2,.8,.2,1) both; }
|
|
.animate-incoming-notice { animation: incoming-notice .42s cubic-bezier(.2,.9,.2,1) both; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.conversation-selected,
|
|
.conversation-selected::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* RTL 微调 */
|
|
[dir='rtl'] .rtl-flip {
|
|
transform: scaleX(-1);
|
|
}
|