Mediawiki:common.css

Вернуться

Строка 75: Строка 75:
}
}


.chem-recipe-steps {
.chem-recipe-block { text-align: center; }
     display: flex;
 
     flex-direction: column;
.chem-recipe-steps {  
     gap: 20px;
     display: flex;  
     flex-direction: column;  
     gap: 24px;  
}
}


.chem-recipe, .chem-effects {  
.recipe-variant-header {  
     padding: 0 16px 16px;  
    font-size: 15px;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
     padding: 8px 0;
    border-bottom: 1px dashed rgba(255,215,0,0.3);
    margin-bottom: 12px;  
}
}


.chem-recipe {  
.chem-recipe {  
    max-width: 640px;          /* ← центрирование всего блока */
    margin: 0 auto;
     display: grid;  
     display: grid;  
     grid-template-columns: 1fr auto 1fr;  
     grid-template-columns: 1fr auto 1fr;  
Строка 106: Строка 116:
     padding: 6px 10px;  
     padding: 6px 10px;  
     border-left: 4px solid var(--card-accent, #8cf);  
     border-left: 4px solid var(--card-accent, #8cf);  
    white-space: nowrap;          /* ← числа всегда рядом с названием */
}
}


Строка 115: Строка 126:


.recipe-action {  
.recipe-action {  
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}
.recipe-action-content {
     display: flex;  
     display: flex;  
     flex-direction: column;  
     flex-direction: column;  
     align-items: center;  
     align-items: center;  
     justify-content: center;  
     gap: 6px;
}
 
.action-sprite .chem-beaker {
    width: 42px;
    height: 42px;  
}
 
.action-text {
     font-weight: 700;  
     font-weight: 700;  
     color: #ffd700;  
     color: #ffd700;  
     font-style: italic;  
     font-style: italic;  
     font-size: 15px;  
     font-size: 15px;  
     min-width: 80px;  
     text-align: center;
    line-height: 1.2;  
}
}


Строка 149: Строка 176:
@media (max-width: 768px) {  
@media (max-width: 768px) {  
     .chem-cards-container { grid-template-columns: 1fr; }  
     .chem-cards-container { grid-template-columns: 1fr; }  
     .chem-recipe { grid-template-columns: 1fr; gap: 12px; }  
     .chem-recipe {  
        grid-template-columns: 1fr;  
        gap: 12px;  
        max-width: 100%;
    }  
}
}