TSM.ID
97 lines
2.7 KiB
CSS
97 lines
2.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-brand: #0b5cff;
|
|
--color-brand-glow: rgba(11, 92, 255, 0.4);
|
|
--color-dark-100: #f5f5f5;
|
|
--color-dark-200: #eaeaea;
|
|
--color-dark-300: #d4d4d4;
|
|
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--background: #f4f5f9;
|
|
--foreground: #222222;
|
|
--glass-bg: rgba(255, 255, 255, 0.85);
|
|
--glass-border: rgba(0, 0, 0, 0.08);
|
|
--panel-bg: #ffffff;
|
|
--panel-border: rgba(0, 0, 0, 0.05);
|
|
--color-brand: #0b5cff;
|
|
--safe-top: env(safe-area-inset-top);
|
|
--safe-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--background: #050b14; /* Deep space navy */
|
|
--foreground: #f5f5f5;
|
|
--glass-bg: rgba(10, 16, 29, 0.85);
|
|
--glass-border: rgba(255, 255, 255, 0.08);
|
|
--panel-bg: #111b21;
|
|
--panel-border: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* 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: var(--safe-top) 0 var(--safe-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(0, 0, 0, 0.1); border-radius: 10px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }
|
|
|
|
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }
|
|
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
|
|
|
|
/* Firefox Scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.1) 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;
|
|
}
|
|
|
|
.text-gradient {
|
|
background: linear-gradient(to right, var(--color-brand), #00d2ff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|