styles.cssā¢1.81 kB
/* Custom styles for OAuth Code Extractor */
.copy-success {
animation: pulse-green 0.6s ease-in-out;
}
@keyframes pulse-green {
0%, 100% {
background-color: rgb(34, 197, 94);
color: white;
}
50% {
background-color: rgb(22, 163, 74);
color: white;
}
}
.status-success {
background-color: rgb(220, 252, 231);
color: rgb(22, 101, 52);
border: 1px solid rgb(187, 247, 208);
}
.status-error {
background-color: rgb(254, 226, 226);
color: rgb(153, 27, 27);
border: 1px solid rgb(252, 165, 165);
}
.status-info {
background-color: rgb(219, 234, 254);
color: rgb(30, 64, 175);
border: 1px solid rgb(147, 197, 253);
}
.status-warning {
background-color: rgb(254, 243, 199);
color: rgb(146, 64, 14);
border: 1px solid rgb(253, 224, 71);
}
/* Smooth transitions */
input:focus {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
button:hover {
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
}
/* Loading state */
.loading {
position: relative;
overflow: hidden;
}
.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: loading-shimmer 1.5s infinite;
}
@keyframes loading-shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}