Salesforce Experience Cloud - Record List Component Accelerator

sfdc-dxp-recordListPanelOverride.css

/* ========= Frank's Front-End Fun Fridays =============
/* =============== Sept 18, 2020 Edition ================
/*
    This snippet of CSS can be added to a Salesforce Experience theme to 
    override and restyle a record list component. Keep in mind that this CSS may not work
    indefinitely if specific class names in the core product are changed in the future.
    
    Be sure to use the out-of-the-box config tools that make Experience Cloud so great whenever you can! 
    Big thanks to Addison Faul for partnering with me on this one.
    
    If you have any feature requests or ideas to make this better, hit me up
    at [email protected]!
    
    Cheers!
*/


/* Container */
.siteforceContentArea .ui-widget .forceCommunitySection .cb-section_column .forceCommunityRecordListStandard {
    background-color: #999;
    border: 1px solid #AAA;
    border-radius: 8px;
    padding: 20px;
    margin: 10px;
}

/* Title */
.forceCommunityRecordListStandard > .listTitle {
    text-transform: none !important;
    color: #fff;
}

/* Bottom View All Link */
.forceCommunityRecordListStandard > .viewAllLink > a {
    color: #fff !important;
}


/* Table Background */
.forceBaseListView .listViewContent {
    background-color: rgb(255,255,255,0.2) !important;
    border-radius: 8px;
    padding: 10px;
}

/* Row Backgrounds */
.forceBaseListView thead, .forceBaseListView thead th, .forceBaseListView tbody td, .forceBaseListView tbody th {
    border-bottom: 0px !important;
    background-color: rgb(255,255,255,0.4) !important;
    padding: 10px;
}