dino_landing_page/app/globals.css
2025-08-17 22:25:25 +05:30

174 lines
4.4 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom base styles */
@layer base {
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* Custom component styles */
@layer components {
.animate-in {
animation: fadeIn 0.3s ease-in-out;
}
.slide-in-from-top-2 {
animation: slideInFromTop 0.3s ease-out;
}
}
/* Custom animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Wallet button text layout fixes */
@layer utilities {
/* Fix Solana wallet button text layout */
.wallet-adapter-button {
white-space: nowrap !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.wallet-adapter-button-text {
white-space: nowrap !important;
line-height: 1 !important;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Override any default wallet button styles that might cause text wrapping */
[data-testid="wallet-adapter-button"] {
white-space: nowrap !important;
line-height: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
[data-testid="wallet-adapter-button"] span {
white-space: nowrap !important;
line-height: 1 !important;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Additional wallet adapter overrides */
.wallet-adapter-button-trigger {
white-space: nowrap !important;
line-height: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Ensure text stays within button boundaries */
.wallet-adapter-button,
.wallet-adapter-button-trigger,
[data-testid="wallet-adapter-button"] {
max-width: fit-content !important;
min-width: fit-content !important;
width: auto !important;
}
/* Force single line text and prevent line breaks */
.wallet-adapter-button *,
.wallet-adapter-button-trigger *,
[data-testid="wallet-adapter-button"] * {
white-space: nowrap !important;
line-height: 1 !important;
display: inline !important;
word-break: keep-all !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
}
/* Specific override for any text content */
.wallet-adapter-button-text,
.wallet-adapter-button span,
[data-testid="wallet-adapter-button"] span {
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
white-space: nowrap !important;
word-break: keep-all !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
}
/* Ensure proper text positioning within button */
.wallet-adapter-button,
.wallet-adapter-button-trigger,
[data-testid="wallet-adapter-button"] {
position: relative !important;
overflow: visible !important;
}
/* Center text vertically and horizontally */
.wallet-adapter-button > *,
.wallet-adapter-button-trigger > *,
[data-testid="wallet-adapter-button"] > * {
position: relative !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure proper flexbox behavior */
.wallet-adapter-button,
.wallet-adapter-button-trigger,
[data-testid="wallet-adapter-button"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
}
/* Prevent any unwanted spacing in flexbox */
.wallet-adapter-button > *,
.wallet-adapter-button-trigger > *,
[data-testid="wallet-adapter-button"] > * {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
}