|
|
| Строка 1: |
Строка 1: |
| /* Основной стиль для карточек рецептов */ | | /* Стили для иконок химии */ |
| .recipe-card { | | .chem-icon { |
| width: 100%; | | width: 18px; |
| max-width: 340px; /* Немного увеличил максимальную ширину */
| | height: 18px; |
| box-sizing: border-box;
| |
| padding: 1rem;
| |
| margin: 1em auto;
| |
| background-color: #2a2a2a;
| |
| border: 2px solid;
| |
| border-radius: 8px; /* Увеличил радиус скругления */
| |
| color: #f5f5f5;
| |
| font-size: 15px; /* Увеличил базовый размер шрифта */
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Более выраженная тень */
| |
| transition: transform 0.2s ease; /* Добавил анимацию при наведении */
| |
| }
| |
| | |
| .recipe-card:hover {
| |
| transform: translateY(-2px); /* Эффект поднятия при наведении */
| |
| }
| |
| | |
| /* Анимация для раскрытия контента */
| |
| @keyframes slideDown {
| |
| from { opacity: 0; transform: translateY(-10px); }
| |
| to { opacity: 1; transform: translateY(0); }
| |
| }
| |
| | |
| /* Стиль для блоков с контентом */
| |
| .collapsible-block {
| |
| margin-bottom: 1.2rem;
| |
| position: relative;
| |
| }
| |
| | |
| /* Заголовок карточки */
| |
| .collapsible-header {
| |
| background-color: #37474f; /* Изменил цвет фона */
| |
| border: none;
| |
| font-weight: 600; /* Более умеренное начертание */
| |
| color: #81d4fa;
| |
| text-transform: uppercase;
| |
| cursor: pointer;
| |
| border-radius: 6px;
| |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
| |
| padding: 0.8rem 1.2rem;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px; /* Современный способ отступов между элементами */
| |
| }
| |
| | |
| /* Иконка спрайта */
| |
| .collapsible-header .sprite {
| |
| width: 28px;
| |
| height: 28px; | |
| background-image: url('path_to_beaker_image.png');
| |
| background-size: contain;
| |
| transition: transform 0.2s ease;
| |
| }
| |
| | |
| /* Ховер-эффекты */
| |
| .collapsible-header:hover {
| |
| background-color: #455a64;
| |
| color: #b3e5fc;
| |
| }
| |
| | |
| .collapsible-header:hover .sprite {
| |
| transform: scale(1.1); /* Анимация иконки при наведении */
| |
| }
| |
| | |
| /* Контент карточки */
| |
| .collapsible-content {
| |
| margin-top: 1rem;
| |
| padding-left: 1.8rem;
| |
| border-left: 3px solid; /* Более толстая линия */
| |
| overflow: hidden;
| |
| max-height: 0;
| |
| opacity: 0;
| |
| transition:
| |
| max-height 0.35s ease-out,
| |
| opacity 0.3s ease-out,
| |
| padding 0.3s ease-out;
| |
| }
| |
| | |
| /* Активное состояние */
| |
| .collapsible-content.active {
| |
| max-height: 500px;
| |
| opacity: 1;
| |
| padding: 0.8rem 0 0.8rem 1.8rem;
| |
| animation: slideDown 0.4s ease-out;
| |
| }
| |
| | |
| /* Списки */
| |
| .recipe-list, .collapsible-content ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| display: grid;
| |
| gap: 8px; /* Управление отступами между элементами */
| |
| }
| |
| | |
| .recipe-list li {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| padding: 6px 0;
| |
| border-bottom: 1px solid #37474f; /* Разделители между элементами */
| |
| }
| |
| | |
| /* Элемент инструкции */
| |
| .instruction {
| |
| color: #81d4fa; /* Соответствует основной цветовой схеме */
| |
| font-weight: 600;
| |
| font-size: 15px;
| |
| padding: 8px 12px;
| |
| background: rgba(129, 212, 250, 0.1); /* Подсветка фона */
| |
| border-radius: 4px;
| |
| margin: 12px 0;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| }
| |
| | |
| .instruction::before {
| |
| content: '➤';
| |
| margin-right: 8px; | | margin-right: 8px; |
| color: #4fc3f7; | | filter: invert(0.85) brightness(0.9) sepia(0.2) hue-rotate(160deg); |
| }
| | vertical-align: middle; |
| | | transition: filter 0.2s ease; |
| /* Описание рецепта */
| |
| .recipe-description { | |
| margin-top: 1.2rem;
| |
| padding: 1rem;
| |
| background: rgba(255, 255, 255, 0.05);
| |
| border-radius: 6px;
| |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: #cfd8dc; /* Более светлый цвет текста */
| |
| border-left: 3px solid #4fc3f7; /* Акцентная полоса */
| |
| }
| |
| | |
| /* Эффекты */
| |
| .collapsible-content ul li { | |
| position: relative;
| |
| padding-left: 24px;
| |
| } | | } |
|
| |
|
| .collapsible-content ul li::before { | | /* Метка результата */ |
| content: '•'; | | .recipe-card::after { |
| | content: attr(data-output); |
| position: absolute; | | position: absolute; |
| left: 0; | | top: 12px; |
| | right: 12px; |
| | background: rgba(79, 195, 247, 0.15); |
| color: #4fc3f7; | | color: #4fc3f7; |
| font-size: 1.4em; | | padding: 4px 10px; |
| line-height: 0.8; | | 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) { | | @media (max-width: 480px) { |
| .recipe-card { | | .chem-icon { |
| font-size: 14px; | | width: 16px; |
| padding: 0.8rem;
| | height: 16px; |
| }
| |
|
| |
| .collapsible-header {
| |
| padding: 0.6rem 1rem; | |
| } | | } |
| | | |
| .instruction { | | .recipe-card::after { |
| font-size: 14px; | | font-size: 11px; |
| | padding: 3px 8px; |
| | top: 8px; |
| | right: 8px; |
| } | | } |
| } | | } |
