75 lines
2.0 KiB
CSS
75 lines
2.0 KiB
CSS
@keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 10px #64ffca, 0 0 20px #a1faea, 0 0 30px #E6E6FA, 0 0 40px #E6E6FA, 0 0 50px #E6E6FA, 0 0 60px #E6E6FA, 0 0 70px #E6E6FA;
|
|
}
|
|
|
|
to {
|
|
text-shadow: 0 0 20px #10dcc4, 0 0 30px #00ffce, 0 0 40px #90fff5, 0 0 50px #00ffb6, 0 0 60px #FF4500, 0 0 70px #FF4500, 0 0 80px #FF4500;
|
|
}
|
|
}
|
|
|
|
.navbar-brand {
|
|
animation: glow 1.5s ease-in-out infinite alternate;
|
|
display: inline-block;
|
|
}
|
|
|
|
.navbar-brand:hover .magic-star {
|
|
animation: sparkle 0.5s forwards;
|
|
}
|
|
|
|
.magic-star {
|
|
display: inline-block;
|
|
transform: scale(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
@keyframes sparkle {
|
|
100% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.h1:hover .magic-star {
|
|
animation: sparkle 0.5s forwards;
|
|
}
|
|
|
|
/* Стили для основного контента и боковой панели категорий */
|
|
.main-content {
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.categories-sidebar {
|
|
width: 75%; /* Уменьшаем ширину боковой панели */
|
|
padding: 20px;
|
|
background: rgba(0, 0, 0, 0.07); /* Полупрозрачный фон для панели */
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.product-list {
|
|
flex-grow: 1;
|
|
max-width: 80%; /* Увеличиваем максимальную ширину списка продуктов для баланса */
|
|
}
|
|
|
|
.btn-group .btn {
|
|
margin-bottom: 10px; /* Отступ между кнопками */
|
|
border: none;
|
|
background: linear-gradient(145deg, #37d7ff, #53fae1); /* Градиент для кнопок */
|
|
color: white;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.btn-group .btn:hover {
|
|
transform: scale(1.05); /* Небольшое увеличение при наведении */
|
|
background: linear-gradient(145deg, #00a490, #30ffe8);
|
|
}
|
|
|
|
.btn-group .active {
|
|
font-weight: bold;
|
|
background: #d7c900; /* Выделение активной категории */
|
|
color: black;
|
|
}
|