Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* Стили для иконок химии */
.chem-icon {
width: 18px;
height: 18px;
margin-right: 8px;
filter: invert(0.85) brightness(0.9) sepia(0.2) hue-rotate(160deg);
vertical-align: middle;
transition: filter 0.2s ease;
}
/* Метка результата */
.recipe-card::after {
content: attr(data-output);
position: absolute;
top: 12px;
right: 12px;
background: rgba(79, 195, 247, 0.15);
color: #4fc3f7;
padding: 4px 10px;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
backdrop-filter: blur(2px);
border: 1px solid rgba(79, 195, 247, 0.3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
z-index: 2;
}
/* Адаптация для мобильных */
@media (max-width: 480px) {
.chem-icon {
width: 16px;
height: 16px;
}
.recipe-card::after {
font-size: 11px;
padding: 3px 8px;
top: 8px;
right: 8px;
}
}