108 lines
1.7 KiB
CSS
Executable File
108 lines
1.7 KiB
CSS
Executable File
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
@import './fonts.css';
|
|
|
|
@layer base {
|
|
html {
|
|
font-family: 'Kaspersky Sans Text', system-ui, sans-serif;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar styles */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: theme('colors.kaspersky.bg.DEFAULT');
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: theme('colors.kaspersky.accent');
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: theme('colors.kaspersky.primary');
|
|
}
|
|
|
|
/* Connection panel slide-in animation */
|
|
@keyframes slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slide-in 0.5s ease-out;
|
|
}
|
|
|
|
/* Shake animation for errors */
|
|
@keyframes shake {
|
|
0%, 100% {
|
|
transform: translateX(0);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
transform: translateX(-8px);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
transform: translateX(8px);
|
|
}
|
|
}
|
|
|
|
.animate-shake {
|
|
animation: shake 0.6s ease-in-out;
|
|
}
|
|
|
|
/* Fade in animation */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
|
|
/* Animated gradient background */
|
|
@keyframes gradient-shift {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
.animate-gradient {
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 15s ease infinite;
|
|
}
|
|
|
|
/* Animated background pattern */
|
|
@keyframes pattern-move {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 40px 40px;
|
|
}
|
|
}
|
|
|
|
.animate-pattern {
|
|
animation: pattern-move 20s linear infinite;
|
|
} |