/* ============================================================ LIT BILLBOOK — shared "table → cards" list style ------------------------------------------------------------ Turns an existing DataTable (table#datatables) into the same card grid used by the Sales / Employees / Product lists, WITHOUT touching any page's data or DataTable logic. Usage on a list page: 1. 2. 3. wrap the table container in class="lg-cards" (or let list-cards.js add it via data-listcards="1" on the table) list-cards.js copies each caption onto its cells as data-label, which this stylesheet renders as the row label. ============================================================ */ .lg-cards .dataTables_wrapper{ overflow: visible; } /* the table itself becomes a plain grid container */ .lg-cards table#datatables, .lg-cards table.lgcard-table{ display: block; width: 100% !important; border: 0 !important; background: transparent !important; border-collapse: separate; } .lg-cards table#datatables thead, .lg-cards table.lgcard-table thead{ display: none; } .lg-cards table#datatables tbody, .lg-cards table.lgcard-table tbody{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: stretch; } /* ---- the card (one per row) ---- */ .lg-cards table#datatables tbody > tr, .lg-cards table.lgcard-table tbody > tr{ display: flex; flex-direction: column; background: #fff; border: 1px solid #e6ecf5; border-radius: 14px; padding: 14px 16px 12px 18px; box-shadow: 0 3px 14px rgba(23,40,64,.07); position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .lg-cards table#datatables tbody > tr:hover, .lg-cards table.lgcard-table tbody > tr:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16,185,129,.15); border-color: #cdd9ec; } /* left accent bar */ .lg-cards table#datatables tbody > tr:before, .lg-cards table.lgcard-table tbody > tr:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg,#10b981,#22d3ee); border-radius: 14px 0 0 14px; } /* DataTables striping must not fight the card background */ .lg-cards table#datatables tbody > tr.odd, .lg-cards table#datatables tbody > tr.even, .lg-cards table#datatables tbody > tr:nth-child(odd), .lg-cards table#datatables tbody > tr:nth-child(even){ background: #fff; } /* ---- each cell becomes a label / value line ---- */ .lg-cards table#datatables tbody > tr > td, .lg-cards table.lgcard-table tbody > tr > td{ display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto !important; border: 0 !important; border-bottom: 1px solid #f2f5f9 !important; padding: 6px 0 !important; font-size: 13px; color: #334155; text-align: right; white-space: normal; vertical-align: middle; } .lg-cards table#datatables tbody > tr > td:last-child, .lg-cards table.lgcard-table tbody > tr > td:last-child{ border-bottom: 0 !important; } .lg-cards table#datatables tbody > tr > td:before, .lg-cards table.lgcard-table tbody > tr > td:before{ content: attr(data-label); flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; text-align: left; white-space: nowrap; } /* cells whose label is empty shouldn't reserve label space */ .lg-cards table#datatables tbody > tr > td[data-label=""]:before{ content: none; } /* ---- first cell = card title ---- */ .lg-cards table#datatables tbody > tr > td.lgcard-title, .lg-cards table.lgcard-table tbody > tr > td.lgcard-title{ display: block; text-align: left; font-size: 15px; font-weight: 800; color: #1e2a3a; line-height: 1.25; padding: 0 0 9px 0 !important; border-bottom: 1px solid #eef1f6 !important; margin-bottom: 4px; } .lg-cards table#datatables tbody > tr > td.lgcard-title:before{ content: none; } /* ---- leading serial number = small chip in the card corner ---- */ .lg-cards table#datatables tbody > tr > td.lgcard-sno, .lg-cards table.lgcard-table tbody > tr > td.lgcard-sno{ position: absolute; top: 12px; right: 12px; display: inline-block; width: auto; padding: 1px 8px !important; border: 0 !important; border-radius: 20px; background: #f1f5f9; color: #64748b; font-size: 10.5px; font-weight: 800; line-height: 18px; } .lg-cards table#datatables tbody > tr > td.lgcard-sno:before{ content: none; } /* keep the title clear of the chip */ .lg-cards table#datatables tbody > tr > td.lgcard-title{ padding-right: 44px !important; } /* ---- last cell = action footer ---- */ .lg-cards table#datatables tbody > tr > td.lgcard-actions, .lg-cards table.lgcard-table tbody > tr > td.lgcard-actions{ display: flex; justify-content: flex-start; /* icons run left -> right */ align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 11px !important; border-top: 1px solid #eef1f6 !important; border-bottom: 0 !important; } /* ---- flatten gear / 3-dot dropdowns into a straight row of icons ---- Many list pages wrap their actions in a Bootstrap dropdown:
Inside a card we drop the toggle and lay the menu items out inline, icon-only. The label text is hidden with font-size:0 (the icon keeps its own size); the original data-original-title tooltip still names each action on hover. */ .lg-cards td.lgcard-actions .btn-group{ position: static; display: contents; } .lg-cards td.lgcard-actions .dropdown-toggle, .lg-cards td.lgcard-actions .btn-group > .btn.dropdown-toggle{ display: none !important; } .lg-cards td.lgcard-actions .dropdown-menu{ display: flex !important; position: static !important; float: none !important; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; min-width: 0; width: auto; list-style: none; opacity: 1; visibility: visible; transform: none; } .lg-cards td.lgcard-actions .dropdown-menu > li{ display: inline-flex; float: none; } .lg-cards td.lgcard-actions .dropdown-menu > li > a{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0 !important; border-radius: 8px; background: #f4f7fb; border: 1px solid #e0e7f1; font-size: 0; /* hides the menu label, keeps the icon */ line-height: 1; transition: all .12s ease; } .lg-cards td.lgcard-actions .dropdown-menu > li > a:hover{ background: #e7eef8; } .lg-cards td.lgcard-actions .dropdown-menu > li > a i{ font-size: 15px; margin: 0; } .lg-cards td.lgcard-actions .dropdown-menu > li.divider{ display: none; } .lg-cards table#datatables tbody > tr > td.lgcard-actions:before{ content: none; } .lg-cards table#datatables tbody > tr > td.lgcard-actions a, .lg-cards table#datatables tbody > tr > td.lgcard-actions button{ display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px; background: #f4f7fb; border: 1px solid #e0e7f1; color: #41506a; text-decoration: none; transition: all .12s ease; } .lg-cards table#datatables tbody > tr > td.lgcard-actions a:hover{ background: #e7eef8; } .lg-cards table#datatables tbody > tr > td.lgcard-actions i{ font-size: 15px; line-height: 1; } /* ---- "no records" row must span the whole grid ---- */ .lg-cards table#datatables tbody > tr.lgcard-empty, .lg-cards table#datatables tbody > tr > td.dataTables_empty{ } .lg-cards table#datatables tbody > tr.lgcard-empty{ grid-column: 1 / -1; text-align: center; color: #94a3b8; font-weight: 600; padding: 34px 12px; box-shadow: none; border-style: dashed; } .lg-cards table#datatables tbody > tr.lgcard-empty:before{ display: none; } .lg-cards table#datatables tbody > tr.lgcard-empty > td{ display: block; text-align: center; border: 0 !important; padding: 0 !important; } .lg-cards table#datatables tbody > tr.lgcard-empty > td:before{ content: none; } /* DataTables chrome tidy-up */ .lg-cards .dataTables_filter input{ border-radius: 20px; } .lg-cards .dataTables_paginate{ padding-top: 12px; } @media (max-width: 600px){ .lg-cards table#datatables tbody{ grid-template-columns: 1fr; } }