/* Власні стилі форуму «мука». Підключено в через налаштування ipseo_ga (поруч з Umami). Після правки — збільшити ?v= у посиланні (scripts/ips/mooka_css_link.php). */ /* ── Список тем картками (плагін tthumb) ────────────────────────────── Плагін розкладає картки через masonry з відсотковою шириною; на телефоні це дає 2 колонки з трьох і порожню смугу праворуч. Замінюємо на сітку: колонки завжди заповнюють ширину, картки в ряду однакової висоти. */ .tthumb_gal_wrap { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; height: auto !important; margin: 8px !important; } .tthumb_gal_wrap .tthumb_gal_item { position: static !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 !important; display: flex; min-width: 0; } .tthumb_gal_wrap .tthumb_gal_border { margin: 0 !important; width: 100%; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; } /* однакова пропорція фото, щоб картки не «пливли» */ .tthumb_gal_wrap .tthumb_gal_item_img img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; } .tthumb_gal_wrap .tthumb_gal_title { flex: 1 1 auto; overflow-wrap: anywhere; } .tthumb_gal_wrap .tthumb_gal_item_line { margin-top: auto; } /* ── Блок інгредієнтів у рецептах (.simplebox, розмічається mooka.js) ─────── */ .ipsType_richText .simplebox.mooka-ing-box, .ipsType_richText .simplebox { background: #fff9ec !important; border: 1px solid #f1e2bd !important; border-left: 5px solid #f2b705 !important; border-radius: 10px !important; padding: 14px 18px 10px !important; margin: 12px 0 18px !important; box-shadow: 0 1px 3px rgba(80, 60, 0, .08); float: none !important; width: auto !important; max-width: 640px !important; box-sizing: border-box; clear: both; } .ipsType_richText .simplebox .simplebox-title { margin: 0 0 8px !important; padding: 0 !important; font-size: 19px !important; font-weight: 600 !important; color: #7a5200 !important; border: 0 !important; background: none !important; } .ipsType_richText .simplebox .simplebox-title::before { content: "🧺 "; } .mooka-ing { list-style: none; margin: 0; padding: 0; } .mooka-ing li { display: flex; align-items: baseline; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(122, 82, 0, .14); line-height: 1.35; } .mooka-ing li:last-child { border-bottom: 0; } .mooka-ing-name { flex: 1 1 auto; min-width: 0; } /* marker sits in its own gutter, so a wrapped long name stays aligned with its first line */ .mooka-ing li:not(.mooka-ing-sub) { position: relative; padding-left: 18px; } .mooka-ing li:not(.mooka-ing-sub)::before { content: ""; position: absolute; left: 3px; top: calc(8px + .55em); width: 6px; height: 6px; border-radius: 50%; background: #f2b705; } .mooka-ing-free { display: block !important; } .mooka-ing-qty { flex: 0 0 auto; max-width: 45%; text-align: right; font-weight: 600; color: #5a3d00; white-space: normal; } .mooka-ing .mooka-ing-sub { display: block; margin-top: 10px; padding: 6px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a06d00; border-bottom: 2px solid #f2b705; } .mooka-ing .mooka-ing-sub:first-child { margin-top: 0; } @media (max-width: 560px) { .ipsType_richText .simplebox { padding: 12px 12px 6px !important; } .mooka-ing li { padding: 9px 0; font-size: 15px; } } @media (max-width: 1000px) { .tthumb_gal_wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .tthumb_gal_wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .tthumb_gal_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px !important; } } @media (max-width: 300px) { .tthumb_gal_wrap { grid-template-columns: 1fr; } } /* ── Мініатюри галереї у стрічці активності та пошуку ───────────────── На телефоні рядок мініатюр виходив за межі картки й розширював усю сторінку. */ .ipsStreamItem, .ipsStreamItem_snippet, .ipsStream_snippetInfo { min-width: 0; max-width: 100%; } .cGalleryAlbums_recent { max-width: 100%; overflow: hidden; } .cGalleryAlbums_recent > ul { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; } .cGalleryAlbums_recent > ul > li { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; aspect-ratio: 1 / 1; background-size: cover; background-position: center; overflow: hidden; border-radius: 4px; } .cGalleryAlbums_recent > ul > li img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; } @media (max-width: 560px) { .cGalleryAlbums_recent > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* IPS lays out the snippet with ipsColumns (display:table) — a table grows to its content and pushed the whole page wider than the phone screen. Plain blocks keep it inside the card. */ .ipsStreamItem_snippet .ipsColumns { display: block !important; width: 100% !important; table-layout: fixed; } .ipsStreamItem_snippet .ipsColumns > .ipsColumn { display: block !important; width: auto !important; max-width: 100%; } /* ── Рядок розділу: остання тема як «превʼю + назва» (шаблон forumRow, mooka_last_topic_card) ── */ .ipsDataItem_lastPoster.mooka-last-wrap { padding-left: 0 !important; } .mooka-last-wrap > li { position: static !important; } .mooka-last { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; } .mooka-last img { flex: 0 0 auto; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; display: block; } .mooka-last-title { min-width: 0; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mooka-last:hover .mooka-last-title { text-decoration: underline; } .mooka-last-wrap > li.ipsType_light { margin-top: 4px; padding-left: 74px; font-size: 12px; } @media (max-width: 560px) { .mooka-last img { width: 72px; height: 54px; } .mooka-last-wrap > li.ipsType_light { padding-left: 82px; } } /* theme hides the first item (the avatar) of this block on phones — our card must stay visible */ .ipsDataItem_lastPoster.mooka-last-wrap > li:first-child { display: block !important; } @media (max-width: 767px) { .cForumRow .ipsDataItem_lastPoster.mooka-last-wrap { width: 100% !important; max-width: 100%; flex: 1 1 100%; margin-top: 8px; } } /* the row's left picture is already the latest topic's preview (tthumb) — show only the title here */ .mooka-last img { display: none !important; } .mooka-last-wrap > li.ipsType_light { padding-left: 0 !important; } .mooka-last-title { font-size: 14px; }