Files
status-check/public/css/style.css
2025-07-04 02:44:12 -04:00

110 lines
2.0 KiB
CSS

@import "tailwindcss";
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.05);
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.animate-pulse-custom {
animation: pulse 2s infinite;
}
.animate-slide-in {
animation: slideIn 0.5s ease-out;
}
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a, #6b21a8, #be185d);
}
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
/* Ensure gradient text works across browsers */
.bg-clip-text {
-webkit-background-clip: text;
background-clip: text;
}
.loading-spinner {
display: none;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top: 4px solid #3B82F6;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Add fade-out animation for the banner alert */
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#copyAlert {
transition: opacity 0.3s ease-out;
}
#copyAlert.hidden {
opacity: 0;
}
input:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
color: #ffffff !important; /* Ensures text color stays white */
}
input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:autofill {
background-color: transparent !important;
background-image: none !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
color: #ffffff !important; /* Ensures text color stays white */
}