Mediawiki:common.css

Вернуться

Строка 70: Строка 70:
.collapsible {
.collapsible {
     overflow: hidden;
     overflow: hidden;
     transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
     transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     max-height: 0;
     max-height: 0;
}
}
.collapsible.expanded {
.collapsible.expanded {
     max-height: 2000px;
     max-height: 3000px;
    padding: 12px 16px 16px;
}
}
.chem-recipe-block {
.chem-recipe-block {
Строка 81: Строка 80:
}
}
.chem-recipe-steps {
.chem-recipe-steps {
     display: flex;
     padding: 12px 16px 24px;
    flex-direction: column;
}
     gap: 24px;
.chem-effects {
     padding: 12px 16px 24px;
}
}
.recipe-variant-header {
.recipe-variant-header {
Строка 96: Строка 96:
.chem-recipe {
.chem-recipe {
     width: 100%;
     width: 100%;
     max-width: 640px;
     max-width: 720px;
     margin: 0 auto;
     margin: 20px auto;
     display: grid;
     display: flex;
     grid-template-columns: 1fr auto 1fr;
     flex-wrap: wrap;
     gap: 16px;
     justify-content: center;
     align-items: start;
     align-items: flex-start;
    gap: 24px;
    box-sizing: border-box;
}
.recipe-inputs,
.recipe-outputs {
    flex: 1 1 280px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
}
.recipe-inputs, .recipe-outputs {
.recipe-action {
    flex: 0 0 140px;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
    align-items: center;
    justify-content: center;
     gap: 8px;
     gap: 8px;
    padding: 8px 0;
}
.recipe-action-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
}
.recipe-item {
.recipe-item {
Строка 114: Строка 135:
     background: rgba(255,255,255,0.08);
     background: rgba(255,255,255,0.08);
     border-radius: 6px;
     border-radius: 6px;
     padding: 6px 10px;
     padding: 8px 12px;
     border-left: 4px solid var(--card-accent, #8cf);
     border-left: 4px solid var(--card-accent, #8cf);
     white-space: nowrap;
     white-space: normal;
    word-break: break-word;
}
}
.chem-reagent-icon,
.chem-beaker {
.chem-beaker {
     width: 36px;
     width: 36px;
     height: 36px;
     height: 36px;
     flex-shrink: 0;
     flex-shrink: 0;
    object-fit: contain;
}
}
.recipe-action {
.action-sprite .chem-reagent-icon,
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}
.recipe-action-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.action-sprite .chem-beaker {
.action-sprite .chem-beaker {
     width: 42px;
     width: 42px;
Строка 144: Строка 157:
     font-style: italic;
     font-style: italic;
     font-size: 15px;
     font-size: 15px;
    text-align: center;
     line-height: 1.2;
     line-height: 1.2;
}
}
Строка 172: Строка 184:
     }
     }
     .chem-recipe {
     .chem-recipe {
         grid-template-columns: 1fr;
         flex-direction: column;
         gap: 12px;
        align-items: center;
         gap: 16px;
         max-width: 100%;
         max-width: 100%;
        padding: 0 12px;
    }
    .recipe-action {
        flex: 0 0 auto;
        min-width: auto;
     }
     }
}
}