|
|
| Строка 1: |
Строка 1: |
| .chem-grid { | | .chem-cards-container { |
| display: grid; | | display: flex; |
| grid-template-columns: repeat(4, 1fr); | | flex-wrap: wrap; |
| gap: 12px; | | gap: 12px; |
| align-items: start; | | justify-content: flex-start; |
| margin: 8px 0;
| |
| }
| |
| | |
| @media (max-width: 1200px) {
| |
| .chem-grid { grid-template-columns: repeat(3, 1fr); }
| |
| }
| |
| @media (max-width: 900px) {
| |
| .chem-grid { grid-template-columns: repeat(2, 1fr); }
| |
| }
| |
| @media (max-width: 520px) {
| |
| .chem-grid { grid-template-columns: 1fr; }
| |
| } | | } |
|
| |
|
| .chem-card { | | .chem-card { |
| --card-bg: #0f1113; /* по умолчанию фон карточки (тёмный) */ | | flex: 1 1 calc(25% - 12px); |
| --card-accent: #2a9d8f; /* акцент/градиент (можно задавать) */
| | background-color: var(--card-bg, #111); |
| --card-border: #203030; /* цвет рамки по умолчанию */
| | border: 2px solid var(--card-border, #555); |
| --section-bg: rgba(255,255,255,0.02); | | border-radius: 8px; |
| color: #e6eef1;
| | padding: 8px; |
| background: linear-gradient(90deg, var(--card-bg) 0%, rgba(255,255,255,0.02) 100%);
| | color: #eee; |
| border: 1px solid var(--card-border); | | box-sizing: border-box; |
| border-radius: 10px; | | min-width: 180px; |
| padding: 10px; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.5); | |
| display: flex; | |
| flex-direction: column;
| |
| min-height: 120px; | |
| transition: transform .08s ease, box-shadow .08s ease;
| |
| } | | } |
|
| |
|
| .chem-card:hover { | | .chem-card h3 { |
| transform: translateY(-4px); | | margin: 0 0 4px 0; |
| box-shadow: 0 8px 20px rgba(0,0,0,0.65); | | color: var(--card-accent, #8cf); |
| | font-size: 16px; |
| } | | } |
|
| |
|
| .chem-header { | | .chem-card .chem-recipe { |
| display: flex;
| | margin-top: 6px; |
| justify-content: space-between;
| |
| align-items: center;
| |
| gap: 8px;
| |
| margin-bottom: 8px;
| |
| }
| |
| .chem-header h3 { | |
| margin: 0; | |
| font-size: 1.05rem;
| |
| line-height: 1;
| |
| }
| |
| .chem-header .formula {
| |
| opacity: 0.9;
| |
| font-size: 0.95rem;
| |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02));
| |
| padding: 4px 8px;
| |
| border-radius: 6px;
| |
| border: 1px solid rgba(255,255,255,0.03);
| |
| } | | } |
|
| |
|
| .chem-section { | | .chem-card .recipe-item { |
| margin: 6px 0; | | margin-left: 4px; |
| padding: 6px;
| | font-size: 14px; |
| background: var(--section-bg);
| |
| border-radius: 6px;
| |
| font-size: 0.95rem; | |
| } | | } |
|
| |
| .chem-recipe {
| |
| display: flex;
| |
| gap: 8px;
| |
| flex-wrap: wrap;
| |
| align-items: flex-start;
| |
| }
| |
| .chem-recipe .recipe-group {
| |
| flex: 1 1 48%;
| |
| min-width: 160px;
| |
| background: rgba(0,0,0,0.12);
| |
| padding: 6px;
| |
| border-radius: 6px;
| |
| border: 1px solid rgba(255,255,255,0.03);
| |
| }
| |
| .chem-recipe .recipe-group b { display:block; margin-bottom:6px; }
| |
| .chem-recipe .recipe-item {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| gap: 8px;
| |
| padding: 3px 0;
| |
| font-size: 0.9rem;
| |
| }
| |
| .chem-recipe .recipe-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
| |
| .chem-recipe .recipe-item .qty { opacity: 0.85; }
| |
|
| |
| .chem-effects { margin: 0; padding-left: 18px; }
| |
| .chem-effects li { margin: 4px 0; font-size: 0.92rem; }
| |
|
| |
| .chem-desc { font-size: 0.9rem; opacity: 0.95; }
| |
.chem-cards-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-start;
}
.chem-card {
flex: 1 1 calc(25% - 12px);
background-color: var(--card-bg, #111);
border: 2px solid var(--card-border, #555);
border-radius: 8px;
padding: 8px;
color: #eee;
box-sizing: border-box;
min-width: 180px;
}
.chem-card h3 {
margin: 0 0 4px 0;
color: var(--card-accent, #8cf);
font-size: 16px;
}
.chem-card .chem-recipe {
margin-top: 6px;
}
.chem-card .recipe-item {
margin-left: 4px;
font-size: 14px;
}
