|
Метки: очистка ручная отмена |
| Строка 1: |
Строка 1: |
| /* ==================== Сетка карточек ==================== */
| |
| .recipes-grid {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: var(--card-gap);
| |
| margin: 8px 0;
| |
| justify-content: flex-start;
| |
| padding-left: var(--content-left);
| |
| padding-right: var(--content-right);
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
|
| .recipe-card {
| |
| background: #1a1a1a;
| |
| border: 1px solid #444;
| |
| border-radius: 8px;
| |
| padding: 8px 10px;
| |
| flex: 1 1 calc((100% - 3 * var(--card-gap)) / 4);
| |
| min-width: 220px;
| |
| max-width: 1fr;
| |
| box-sizing: border-box;
| |
| color: #ddd;
| |
| font-size: 13px;
| |
| line-height: 1.3em;
| |
| box-shadow: 0 0 6px rgba(0,0,0,0.5);
| |
| }
| |
|
| |
| .recipe-card:hover {
| |
| border-color: #7CFC00;
| |
| box-shadow: 0 0 10px rgba(124,252,0,0.6);
| |
| }
| |
|
| |
| .element-title {
| |
| display: block;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| color: #7CFC00;
| |
| font-size: 14px;
| |
| margin-bottom: 6px;
| |
| }
| |
|
| |
| .element-description {
| |
| font-size: 12px;
| |
| color: #bbb;
| |
| text-align: center;
| |
| margin-bottom: 6px;
| |
| font-style: italic;
| |
| }
| |
|
| |
| .recipe-line b {
| |
| display: block;
| |
| margin-bottom: 4px;
| |
| color: #ffcc00;
| |
| }
| |
|
| |
| .recipe-line {
| |
| display: flex;
| |
| flex-wrap: wrap; /* разрешаем перенос внутри карточки, чтобы рецепт не вылезал */
| |
| gap: 4px;
| |
| margin-bottom: 6px;
| |
| word-break: break-word; /* длинные слова будут переноситься */
| |
| }
| |
|
| |
| /* ==================== Ингредиенты ==================== */
| |
| .ingredient {
| |
| background: #333;
| |
| color: #ffcc00;
| |
| border-radius: 4px;
| |
| padding: 2px 5px;
| |
| font-weight: bold;
| |
| display: inline-block;
| |
| flex-shrink: 0; /* не уменьшаем сильно */
| |
| }
| |
|
| |
| .ingredient.product {
| |
| background: #7CFC00;
| |
| color: #222;
| |
| }
| |
|
| |
| .arrow {
| |
| font-weight: bold;
| |
| color: #ccc;
| |
| flex-shrink: 0;
| |
| }
| |
|
| |
| /* ==================== Мобильная версия ==================== */
| |
| @media (max-width: 600px) {
| |
| .recipe-card {
| |
| flex: 1 1 100%;
| |
| min-width: 0;
| |
| }
| |
| }
| |
|
| |
| /* ==================== Широкие экраны ≥1120px ==================== */
| |
| @media screen and (min-width: 1120px) {
| |
| .recipe-card {
| |
| flex: 1 1 calc((100% - 3 * var(--card-gap)) / 4); /* 4 карточки в ряд */
| |
| }
| |
| }
| |
