382 lines
6.7 KiB
CSS
382 lines
6.7 KiB
CSS
@import "tailwindcss";
|
||
|
||
@theme {
|
||
--font-onest: "Onest", sans-serif;
|
||
|
||
--color-red-600: #EC1C24;
|
||
--color-red-700: #DC1C24;
|
||
|
||
--color-gray-50: #F9FAFB;
|
||
--color-gray-100: #F3F4F6;
|
||
--color-gray-200: #E5E7EB;
|
||
--color-gray-300: #D1D5DB;
|
||
--color-gray-400: #9CA3AF;
|
||
--color-gray-500: #6B7280;
|
||
--color-gray-600: #4B5563;
|
||
--color-gray-700: #374151;
|
||
--color-gray-800: #1F2937;
|
||
--color-gray-900: #111827;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Стили для корзины */
|
||
.div-block-7.active {
|
||
background-color: #007bff;
|
||
border-color: #007bff;
|
||
}
|
||
|
||
.div-block-7 {
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid #ccc;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.tag-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6px 12px;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
background-color: #f8f9fa;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tag-button:hover {
|
||
background-color: #e9ecef;
|
||
}
|
||
|
||
.tag-button.active {
|
||
background-color: #007bff;
|
||
color: white;
|
||
border-color: #007bff;
|
||
}
|
||
|
||
.radio-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
[data-hide-scrollbar]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
[data-hide-scrollbar] {
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
/* Убрать стрелочки у input[type=number] во всех браузерах */
|
||
input[type=number]::-webkit-inner-spin-button,
|
||
input[type=number]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
input[type=number] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
/* Анимация для cookie consent */
|
||
@keyframes slideInFromBottom {
|
||
from {
|
||
transform: translateY(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.cookie-consent-enter {
|
||
animation: slideInFromBottom 0.3s ease-out;
|
||
}
|
||
|
||
/* Анимации для тултипов */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes zoomIn {
|
||
from {
|
||
transform: scale(0.95);
|
||
}
|
||
to {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.animate-in {
|
||
animation-fill-mode: both;
|
||
}
|
||
|
||
.fade-in-0 {
|
||
animation-name: fadeIn;
|
||
}
|
||
|
||
.zoom-in-95 {
|
||
animation-name: zoomIn;
|
||
}
|
||
|
||
.duration-200 {
|
||
animation-duration: 200ms;
|
||
}
|
||
|
||
/* Стили для кнопок с курсором pointer */
|
||
button,
|
||
.cursor-pointer,
|
||
[role="button"] {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ===== СОВРЕМЕННЫЕ СТИЛИ ДЛЯ КРАСИВОГО ТУЛТИПА ===== */
|
||
|
||
.tooltip-detail-modern {
|
||
animation: tooltip-modern-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||
filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
|
||
}
|
||
|
||
.tooltip-content-modern {
|
||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
max-width: 420px;
|
||
min-width: 280px;
|
||
box-shadow:
|
||
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
position: relative;
|
||
}
|
||
|
||
.tooltip-arrow {
|
||
position: absolute;
|
||
top: -6px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 12px;
|
||
height: 12px;
|
||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||
border: 1px solid #e2e8f0;
|
||
border-bottom: none;
|
||
border-right: none;
|
||
transform: translateX(-50%) rotate(45deg);
|
||
z-index: 1;
|
||
}
|
||
|
||
.tooltip-header-modern {
|
||
background: linear-gradient(135deg, #EC1C24 0%, #DC1C24 100%);
|
||
padding: 16px 20px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
position: relative;
|
||
}
|
||
|
||
.tooltip-header-modern::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tooltip-icon {
|
||
color: white;
|
||
opacity: 0.9;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.tooltip-title-section {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.tooltip-title {
|
||
margin: 0 0 8px 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: white;
|
||
line-height: 1.3;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.tooltip-oem-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.tooltip-oem-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.tooltip-oem-value {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: white;
|
||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||
}
|
||
|
||
.tooltip-body-modern {
|
||
padding: 20px;
|
||
}
|
||
|
||
.tooltip-section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #f1f5f9;
|
||
}
|
||
|
||
.tooltip-section-title svg {
|
||
color: #EC1C24;
|
||
}
|
||
|
||
.tooltip-attributes-grid {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tooltip-attribute-item {
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.tooltip-attribute-item:hover {
|
||
background: #f1f5f9;
|
||
border-color: #cbd5e1;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.tooltip-attribute-key {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #64748b;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.tooltip-attribute-value {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1e293b;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.tooltip-note-modern {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.tooltip-note-text {
|
||
background: #fef3c7;
|
||
border: 1px solid #fbbf24;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
font-size: 13px;
|
||
color: #92400e;
|
||
line-height: 1.5;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.tooltip-no-data {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 24px 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.tooltip-no-data-icon {
|
||
color: #94a3b8;
|
||
margin-bottom: 12px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.tooltip-no-data-text {
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.tooltip-no-data-text div:first-child {
|
||
font-weight: 500;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.tooltip-no-data-text div:last-child {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
@keyframes tooltip-modern-fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.95) translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Адаптивность для мобильных устройств */
|
||
@media (max-width: 480px) {
|
||
.tooltip-content-modern {
|
||
max-width: 320px;
|
||
min-width: 260px;
|
||
}
|
||
|
||
.tooltip-header-modern {
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.tooltip-body-modern {
|
||
padding: 16px;
|
||
}
|
||
|
||
.tooltip-title {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|