/*! Livepickle.vn — News List UI (Green • White • Yellow • Gray) Scope-safe: styles apply only inside `.news-list` OR `.min-content.news` Usage: 1) Link this CSS in : 2) (Tùy chọn) thêm class="news-list" vào container bọc vòng lặp. Nếu không thêm, selector `.min-content.news .list-match` vẫn áp dụng. */ :root{ --green: #16a34a; /* brand */ --green-600: #16a34a; --green-700: #15803d; --green-50: #dcfce7; --yellow: #f59e0b; --yellow-50: #fef3c7; --text: #0f172a; --muted: #475569; --border: #e5e7eb; --paper: #ffffff; } /* ===================== Grid Layout ===================== */ /* Preferred new hook (add class .news-list to your container) */ .news-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-block: 16px 28px; } /* Backwards-compat with existing structure in your file */ .min-content.news .list-match{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-block: 16px 28px; } /* ===================== Card ===================== */ /* Make ANY direct child behave as a card */ .news-list > *, .min-content.news .list-match > *{ background: var(--paper); color: var(--text); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; min-width: 0; box-shadow: 0 6px 18px rgba(2,6,23,.06); transform: translateY(0); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; width: auto !important; /* override legacy fixed widths (e.g., .col-4) */ } .news-list > a, .min-content.news .list-match > a{ display:block; color:inherit; text-decoration:none; } .news-list > *:hover, .min-content.news .list-match > *:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(2,6,23,.12); border-color: color-mix(in srgb, var(--green-600) 40%, var(--border)); } /* Thumbnail keeps your inline background, just set a safe ratio */ .news-list .thumb, .min-content.news .thumb{ aspect-ratio: 16 / 9; background-color: #f1f5f9; border-bottom: 1px solid var(--border); } /* Subtle thumb glow on hover */ .news-list > *:hover .thumb, .min-content.news .list-match > *:hover .thumb{ filter: brightness(1.03) contrast(1.03); } /* ===================== Text ===================== */ .news-list .name-news, .min-content.news .name-news{ margin: 10px 14px 6px; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .news-list a:hover .name-news, .min-content.news a:hover .name-news{ color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; text-decoration:none; } .news-list .desc-news, .min-content.news .desc-news{ margin: 0 14px 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } /* Optional badge styles if you show category/tag somewhere */ .news-list .badge, .news-list .category, .news-list .cate, .min-content.news .badge, .min-content.news .category, .min-content.news .cate{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border:1px solid var(--border); border-radius: 999px; font-size:.78rem; font-weight:700; color: var(--green-700); background: var(--green-50); } /* ===================== Buttons (Optional) ===================== */ .news-list .btn, .min-content.news .btn{ --bg:#ffffff; --fg:var(--text); --bd:var(--border); display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--bd); background: var(--bg); color: var(--fg); font-weight:800; letter-spacing:.1px; box-shadow: 0 4px 12px rgba(2,6,23,.06); position:relative; overflow:hidden; transform: translateY(0); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; cursor: pointer; text-decoration: none; user-select: none; } .news-list .btn:hover, .min-content.news .btn:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.12); } .news-list .btn:active, .min-content.news .btn:active{ transform: translateY(0); } /* Color variants */ .news-list .btn--green, .min-content.news .btn--green{ --bg: linear-gradient(180deg, #22c55e, #16a34a); --fg:#ffffff; --bd:#16a34a; } .news-list .btn--yellow, .min-content.news .btn--yellow{ --bg: linear-gradient(180deg, #fde047, #f59e0b); --fg:#0f172a; --bd:#f59e0b; } .news-list .btn--gray, .min-content.news .btn--gray{ --bg: #f8fafc; --fg:#0f172a; --bd:#e5e7eb; } .news-list .btn--outline, .min-content.news .btn--outline{ --bg: transparent; --fg: var(--green-700); --bd: color-mix(in srgb, var(--green-600) 40%, var(--border)); } .news-list .btn .dot, .min-content.news .btn .dot{ width:10px; height:10px; border-radius:999px; background: currentColor; opacity:.9; } /* Shine sweep on hover (pure CSS) */ .news-list .btn::before, .min-content.news .btn::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(120deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.0) 70%); transform: translateX(-120%); transition: transform .6s ease; } .news-list .btn:hover::before, .min-content.news .btn:hover::before{ transform: translateX(120%); } /* Tag chips */ .news-list .chip, .min-content.news .chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius: 999px; border:1px solid var(--border); background:#fff; color:var(--muted); font-weight:700; font-size:.85rem; } .news-list .chip--green, .min-content.news .chip--green{ color:var(--green-700); background: var(--green-50); border-color: color-mix(in srgb, var(--green-600) 30%, var(--border)); } .news-list .chip--yellow, .min-content.news .chip--yellow{ color:#92400e; background: var(--yellow-50); border-color: color-mix(in srgb, var(--yellow) 30%, var(--border)); } .news-list .chip .dot, .min-content.news .chip .dot{ width:8px; height:8px; border-radius:999px; background: currentColor; opacity:.85; } /* ===================== Pagination ===================== */ .news-list .pagination, .news-list .pager, .news-list .page-numbers, .min-content.news .pagination, .min-content.news .pager, .min-content.news .page-numbers{ display:flex; gap:8px; justify-content:center; margin: 8px 0 24px; } .news-list .pagination a, .news-list .pager a, .news-list .page-numbers a, .news-list .pagination span, .news-list .pager span, .news-list .page-numbers span, .min-content.news .pagination a, .min-content.news .pager a, .min-content.news .page-numbers a, .min-content.news .pagination span, .min-content.news .pager span, .min-content.news .page-numbers span{ padding:.55rem .85rem; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--text); background:#fff; font-weight:800; box-shadow:0 4px 12px rgba(2,6,23,.06); } .news-list .pagination a:hover, .news-list .pager a:hover, .news-list .page-numbers a:hover, .min-content.news .pagination a:hover, .min-content.news .pager a:hover, .min-content.news .page-numbers a:hover{ border-color: color-mix(in srgb, var(--green-600) 40%, var(--border)); } .news-list .pagination .active, .news-list .page-numbers .current, .min-content.news .pagination .active, .min-content.news .page-numbers .current{ background: linear-gradient(180deg, #22c55e, #16a34a) !important; color:#fff !important; border-color:#16a34a !important; } /* ===================== Toolbar (optional) ===================== */ .news-list .ui-toolbar, .min-content.news .ui-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin: 8px 0 12px; } .news-list .ui-toolbar .spacer, .min-content.news .ui-toolbar .spacer{ flex:1; } /* ===================== Dark mode support ===================== */ @media (prefers-color-scheme: dark){ .news-list > *, .min-content.news .list-match > *{ box-shadow: 0 10px 26px rgba(0,0,0,.35); } .news-list .pagination a, .news-list .pager a, .news-list .page-numbers a, .news-list .pagination span, .news-list .pager span, .news-list .page-numbers span, .min-content.news .pagination a, .min-content.news .pager a, .min-content.news .page-numbers a, .min-content.news .pagination span, .min-content.news .pager span, .min-content.news .page-numbers span{ background: #11151a; color: #e6edf3; } }