TSM.ID
114 lines
3.0 KiB
CSS
114 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-brand: #00a884;
|
|
--color-brand-glow: rgba(0, 168, 132, 0.4);
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
:root {
|
|
/* LIGHT MODE (WhatsApp Web Light) */
|
|
--background: #f0f2f5;
|
|
--foreground: #111b21;
|
|
--header-bg: #f0f2f5;
|
|
--sidebar-bg: #ffffff;
|
|
--chat-list-bg: #ffffff;
|
|
--chat-active: #f0f2f5;
|
|
--chat-hover: #f5f6f6;
|
|
--chat-window-bg: #efeae2;
|
|
--bubble-me: #d9fdd3;
|
|
--bubble-other: #ffffff;
|
|
--bubble-text: #111b21;
|
|
--input-bg: #ffffff;
|
|
--panel-bg: #ffffff;
|
|
--panel-border: #e9edef;
|
|
--glass-bg: rgba(255, 255, 255, 0.85);
|
|
--glass-border: rgba(0, 0, 0, 0.08);
|
|
--wa-bg-opacity: 0.06;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* DARK MODE (WhatsApp Web Dark) */
|
|
--background: #0b141a;
|
|
--foreground: #e9edef;
|
|
--header-bg: #202c33;
|
|
--sidebar-bg: #111b21;
|
|
--chat-list-bg: #111b21;
|
|
--chat-active: #2a3942;
|
|
--chat-hover: #202c33;
|
|
--chat-window-bg: #0b141a;
|
|
--bubble-me: #005c4b;
|
|
--bubble-other: #202c33;
|
|
--bubble-text: #e9edef;
|
|
--input-bg: #2a3942;
|
|
--panel-bg: #202c33;
|
|
--panel-border: #222d34;
|
|
--glass-bg: rgba(32, 44, 51, 0.85);
|
|
--glass-border: rgba(255, 255, 255, 0.08);
|
|
--wa-bg-opacity: 0.06;
|
|
}
|
|
|
|
/* HarmonyOS, Samsung, Safari & Global Browser Parity Optimization */
|
|
html, body {
|
|
height: 100%;
|
|
min-height: -webkit-fill-available;
|
|
overflow-x: hidden;
|
|
-webkit-text-size-adjust: 100%;
|
|
-moz-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: transparent;
|
|
scroll-behavior: smooth;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans);
|
|
margin: 0;
|
|
padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
touch-action: manipulation;
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
/* Touch-Optimized Interactions */
|
|
button, a, input, select, textarea {
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
/* Custom Scrollbar for Premium Feel - Cross Browser */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: rgba(134, 150, 160, 0.2); border-radius: 10px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(134, 150, 160, 0.3); }
|
|
|
|
/* Firefox Scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(134, 150, 160, 0.2) transparent;
|
|
}
|
|
|
|
/* Android/Huawei/Samsung Input Reset */
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: var(--foreground) !important;
|
|
-webkit-box-shadow: 0 0 0px 1000px var(--background) inset !important;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-in {
|
|
animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|