/** * legacy 9.0 article list/card contract. * Source baseline: css/main.css (SHA-256 recorded in tests/visual). */ .posts-row { margin-right: -8px; margin-bottom: 15px; margin-left: -8px; } .posts-row > *:not(.post_ajax_loader) { margin-right: 8px !important; margin-left: 8px !important; } .posts-item { margin: 15px 0; padding: 20px; overflow: hidden; background: var(--main-bg-color, #fff); border-radius: var(--main-radius, 8px); box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); transition: 0.2s; } .posts-item.flex, .posts-item .flex, .posts-mini .flex { display: flex; } .posts-item .flex.xx, .posts-mini .flex.xx { flex-direction: column; } .posts-item .flex.ac, .posts-mini .flex.ac { align-items: center; } .posts-item .flex.jsb, .posts-mini .flex.jsb { justify-content: space-between; } .posts-item .flex1, .posts-mini .flex1 { flex: 1; overflow: hidden; } .posts-item .post-graphic:not(.order1) { margin-right: 20px; } .posts-item .order1.post-graphic { margin-right: 0; margin-left: 20px; } .posts-item .item-thumbnail { position: relative; display: block; width: 190px; height: 0; padding-bottom: var(--posts-list-scale, 70%); overflow: hidden; border-radius: var(--main-radius, 8px); } .item-thumbnail.contain img { object-fit: contain; } .swiper-slide.gradient-bg .dplayer-poster img, .swiper-slide.gradient-bg > * > img { object-fit: contain !important; border-radius: 0 !important; } .item-thumbnail .swiper-wrapper { height: 100% !important; } .list .item-thumbnail .aksrt-slider, .list .item-thumbnail.new-swiper { position: absolute; width: 100%; height: 100%; margin: 0 !important; } .item-thumbnail .dplayer.dplayer-thumb { position: absolute; inset: 0; z-index: 1; padding-bottom: var(--posts-list-scale, 70%); background: #000; opacity: 0; transition: opacity 0.3s; } .card .item-thumbnail .dplayer.dplayer-thumb { padding-bottom: var(--posts-card-scale, 70%); } .item-thumbnail .dplayer-thumb video, .item-thumbnail .swiper-wrapper, .item-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .item-thumbnail .swiper-pagination { right: 0 !important; bottom: 0 !important; left: 0 !important; padding: 0 2px !important; text-align: center !important; } .posts-item.thumb-dplayer-playing .dplayer-thumb { opacity: 1; } .posts-item.thumb-dplayer-playing .abs-center { opacity: 0; } .posts-item .item-heading { display: -webkit-box; max-height: 2.8em; margin-top: 0; margin-bottom: 5px; overflow: hidden; font-size: 18px; line-height: 1.4em; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .font-bold { font-weight: 700; } .list.style2 .item-thumbnail { width: 130px; } .list.style2 .item-heading { display: unset; max-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .posts-item .item-heading > a { color: var(--key-color, #333); } .posts-item .item-heading > a:hover { color: var(--focus-color, #f04494); } .posts-item .item-excerpt { margin: 0 0 6px; overflow: hidden; color: var(--muted-color, #777); text-overflow: ellipsis; white-space: nowrap; } .posts-item .item-meta item { margin-right: 8px; font-size: 13px; } .posts-item .item-meta svg.icon, .posts-mini .item-meta svg.icon { display: inline-block; width: 1em; height: 1em; margin-right: 2px; fill: currentColor; overflow: hidden; vertical-align: -0.15em; } .posts-item .meta-right item:last-child { margin-right: 0; } .item-meta .avatar-mini { width: 20px; height: 20px; border-radius: 50%; transform: translateY(-1px); } .item-meta .meta-pay { padding: 0 4px; } .item-meta .meta-pay img { width: 1em; height: 1em; object-fit: contain; vertical-align: -0.15em; } .posts-item .item-meta a, .posts-mini .item-meta a { color: inherit; } .posts-item .item-tags a { margin-right: 5px; padding: 2px 5px; font-size: 11px; } .posts-item .item-tags a .fa { font-size: 1em; } .posts-item.card { display: inline-block; width: calc(33.333% - 16px); margin: 8px; padding: 10px; vertical-align: top; transition: 0.3s; } .posts-item.card:last-child { margin-bottom: 20px; } .posts-item.card .item-body { width: 100%; margin: 10px 0 0; padding: 0; } .posts-item.card .item-meta item { font-size: 12px; } .posts-mini-con .item-heading, .posts-item.card .item-heading { font-size: 14px; } .posts-item.card .item-heading { min-height: 2.8em; } .posts-item.card .item-tags { min-height: 23px; } .posts-item.card .item-thumbnail { width: 100%; padding-bottom: var(--posts-card-scale, 70%); } .posts-item.card.style2 { background: transparent; box-shadow: none; } .posts-item.card.style2:hover { background: var(--main-bg-color, #fff); box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); } .posts-item.card.style3 { padding: 0; } .posts-item.card.style3 .item-thumbnail, .posts-item.card.style3 .item-thumbnail img { border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0; } .posts-item.card.style3 .item-body { margin: 0; padding: 10px; } .posts-item.mult-thumb .thumb-items { margin: 0 -3px 6px; } .posts-item.mult-thumb .thumb-items > span { position: relative; display: inline-block; width: calc(25% - 6px); height: 0; margin: 0 3px; padding-bottom: calc(var(--posts-list-scale, 70%) / 4); } .posts-item.mult-thumb .thumb-items > span > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .posts-item.mult-thumb .thumb-items.contain > span { overflow: hidden; background: var(--main-border-color, rgba(50, 50, 50, 0.06)); border-radius: var(--main-radius, 8px); } .posts-item.mult-thumb .thumb-items.contain > span > img { object-fit: contain; border-radius: 0; } .posts-item.no_margin { margin: 0; border-radius: 0; box-shadow: none; } .posts-item.no-thumb .item-excerpt { height: auto; } .posts-item.no-thumb .item-body { width: 100%; } .posts-item + .pagenav { margin-top: -15px; } .posts-item.card + .pagenav { margin-top: -10px; } .no_margin:first-of-type { margin-top: 10px; border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0; } .no_margin:last-of-type { margin-bottom: 15px; border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px); } .posts-mini { padding: 10px; display: inline-flex; width: 50%; vertical-align: top; } .posts-mini-con { flex: auto; overflow: hidden; } .posts-mini .item-thumbnail { width: 96px; height: 0; padding-bottom: var(--posts-list-scale, 70%); position: relative; overflow: hidden; border-radius: var(--main-radius, 8px); } .posts-mini .item-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .posts-mini .item-heading { margin: 0; } .posts-mini .item-heading.icon-circle { margin-left: -5px; } .posts-mini .item-meta { font-size: 12px; } .posts-mini-con .badg { min-width: 18px; } .sidebar .posts-mini, .mobile-nav-widget .posts-mini { width: 100% !important; } .mobile-nav-widget .posts-mini { padding-right: 0; padding-left: 0; } .posts-mini:last-of-type { margin-bottom: 0; } .posts-mini-lists { padding: 5px; } .posts-mini-lists .tab-nav-theme { padding: 0 5px 2px; } .mobile-nav-widget .posts-mini-lists .tab-nav-theme { margin: 0 -5px; padding: 0; } .widget-main-post.style-list .widget-ajaxpager, .widget-main-post.style-card .widget-ajaxpager, .widget-tab-post.index-tab .tab-content > .tab-pane { margin: -8px -8px 15px; } .widget-tab-post.style-list .tab-content > .tab-pane { margin-bottom: 25px; } .widget-main-post.style-list .posts-item, .widget-tab-post.style-list .posts-item { margin-right: 8px; margin-left: 8px; } .posts-mini:hover img, .posts-item:hover .item-thumbnail img, .posts-item.mult-thumb .thumb-items > span > img:hover { transform: scale(1.02); } .swiper-scroll .posts-item { flex-shrink: 0; margin: 0 16px 0 0 !important; } .swiper-scroll .posts-item.list { width: calc(50% - 8px) !important; min-width: 520px !important; } .swiper-scroll .posts-item.posts-mini { width: 360px !important; } .swiper-scroll .posts-item.card { width: calc(33.333% - 11px) !important; } .img-badge { position: absolute; top: 8px; z-index: 2; } .img-badge.left { left: 8px; } @media (min-width: 992px) { .fluid-widget-wrap .posts-item.card, .site-layout-1 .posts-item.card { width: calc(25% - 16px); } .fluid-widget-wrap .posts-item:not(.card), .site-layout-1 .posts-item:not(.card) { display: inline-flex; width: calc(50% - 16px); margin: 8px; } .fluid-widget-wrap .posts-item.no_margin, .site-layout-1 .posts-item.no_margin { border-radius: var(--main-radius, 8px); } .fluid-widget-wrap .posts-mini, .site-layout-1 .posts-mini { width: 33.333%; } .sidebar .posts-item.card, .sidebar .posts-item.list { width: 100% !important; min-width: 0 !important; margin: 0; } } @media (max-width: 767px) { .posts-row { margin-right: -5px; margin-left: -5px; } .posts-row > *:not(.post_ajax_loader) { margin-right: 5px !important; margin-left: 5px !important; } .posts-item .item-thumbnail { width: 138px; } .posts-mini .item-thumbnail, .list.style2 .item-thumbnail { width: 90px; } .posts-item .post-graphic:not(.order1) { margin-right: 15px; } .posts-item .order1.post-graphic { margin-left: 15px; } .posts-item .item-heading { font-size: 15px; } .posts-item:not(.no-thumb) .item-excerpt { display: none; } .posts-item.card { width: calc(50% - 10px); margin: 5px; } .widget-main-post.style-list .widget-ajaxpager, .widget-main-post.style-card .widget-ajaxpager, .widget-tab-post.index-tab .tab-content > .tab-pane { margin: -5px -5px 20px; } .widget-tab-post.style-list .tab-content > .tab-pane, .widget-main-post.style-list .widget-ajaxpager { margin-top: -15px; } .widget-tab-post.style-list .posts-item { margin-right: 5px; margin-left: 5px; } .swiper-scroll .posts-item { margin-right: 10px !important; } .posts-item.card:nth-child(odd) { margin-right: 5px; } .posts-item.card:nth-child(even) { margin-left: 5px; } .posts-item.mult-thumb .thumb-items > span { width: calc(33.333% - 6px); padding-bottom: calc(var(--posts-list-scale, 70%) / 3); } .posts-item.mult-thumb .thumb-items > span:nth-child(4) { display: none; } .swiper-scroll .posts-item.card { width: calc(50% - 5px) !important; } .swiper-scroll .posts-item.list { width: 100% !important; min-width: auto !important; } } @media (max-width: 640px) { .posts-item:not(.no-thumb) .meta-right item { display: none; } .posts-mini { width: 100%; } .posts-item { margin: 10px 0; padding: 10px; } .aksrt-panel .posts-item.no_margin { padding: 10px 0; } } @media (prefers-reduced-motion: reduce) { .posts-item, .posts-item img { transition: none; } }