|
|
| Строка 1: |
Строка 1: |
| .alchemy-grid {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: flex-start;
| |
| gap: 1em;
| |
| overflow-x: auto;
| |
| padding-bottom: 1em;
| |
| }
| |
|
| |
|
| .alchemy-card {
| |
| border-style: solid;
| |
| border-width: 2px;
| |
| border-radius: 8px;
| |
| box-sizing: border-box;
| |
| padding: 0.5em 1em;
| |
| min-width: 250px;
| |
| flex: 1 1 22%; /* минимум 22% ширины, адаптивно */
| |
| color: #ccffcc;
| |
| background-clip: padding-box;
| |
| }
| |
|
| |
| .alchemy-title {
| |
| margin-top: 0;
| |
| text-align: center;
| |
| font-size: 1.1em;
| |
| color: #ccffcc;
| |
| }
| |
|
| |
| .alchemy-main-row {
| |
| display: flex;
| |
| align-items: stretch;
| |
| font-size: 0.9em;
| |
| text-align: center;
| |
| }
| |
|
| |
| .alchemy-ingredients,
| |
| .alchemy-result {
| |
| flex: 1;
| |
| display: flex;
| |
| flex-direction: column;
| |
| justify-content: center;
| |
| padding: 0 0.5em;
| |
| border-top: none;
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .alchemy-ingredients {
| |
| border-right: 1px solid #555;
| |
| }
| |
|
| |
| .alchemy-result {
| |
| border-left: 1px solid #555;
| |
| }
| |
|
| |
| .alchemy-label {
| |
| font-weight: bold;
| |
| margin-bottom: 0.3em;
| |
| color: #ccffcc;
| |
| }
| |
|
| |
| .alchemy-plus {
| |
| flex: 0 0 80px;
| |
| font-weight: bold;
| |
| font-size: 0.95em;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| user-select: none;
| |
| }
| |
|
| |
| .alchemy-effects {
| |
| margin: 0.3em 0 0.5em 1.2em;
| |
| padding: 0;
| |
| color: #ccffcc;
| |
| list-style: disc inside;
| |
| }
| |
|
| |
| .alchemy-effects-desc {
| |
| margin-top: 0.3em;
| |
| font-style: italic;
| |
| color: #88cc88;
| |
| font-size: 0.85em;
| |
| }
| |
|
| |
| /* Адаптив для мобильных: 1-2 карточки в ряд */
| |
| @media (max-width: 900px) {
| |
| .alchemy-card {
| |
| flex: 1 1 45%;
| |
| }
| |
| }
| |
| @media (max-width: 500px) {
| |
| .alchemy-card {
| |
| flex: 1 1 100%;
| |
| }
| |
| }
| |
