custom-css.css

/**
 * See https://github.com/redhataccess/sf-experience-cloud-theming
 * @note Scoping page content styles in [role="main"] and main so they don't style nav/footer
 * @note The [class] selector is to increase specificity when selector is appropriate
 * @note The :not(#foo) selector adds specificity of an id without needing an ID in the DOM, to avoid !important
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--lwc-fontFamilyHeader);
}

[role="main"] h1:not(#foo),
[role="main"] h2:not(#foo),
[role="main"] h3:not(#foo),
[role="main"] h4:not(#foo),
[role="main"] h5:not(#foo),
[role="main"] h6:not(#foo),
main h1:not(#foo),
main h2:not(#foo),
main h3:not(#foo),
main h4:not(#foo),
main h5:not(#foo),
main h6:not(#foo) {
  /* Avoid uppercase transformations, which are bad for dislexia and other a11y reasons */
  text-transform: none;
}

[role="main"]:not(#foo),
main:not(#foo) {
  /* Ensure base font size is accessible (default was too small) */
  font-size: 1rem;
}

/**
 * Table styling
 * @note Styling thead is a very risky, sortable tables have a lot of JS and weird styles on the head
 */
[role="main"] tbody tr:nth-child(2n + 1),
main tbody tr:nth-child(2n + 1) {
  /* Zebra striping on rows */
  background: rgb(250, 250, 250);
}

@media (min-width: 1000px) {
  /* Add more white space to table cells */
  [role="main"] tbody th:not(#foo),
  [role="main"] tbody td:not(#foo),
  main tbody th:not(#foo),
  main tbody td:not(#foo) {
    padding: 1.25em 1.5em;
  }

  [role="main"] thead .toggle,
  main thead .toggle {
    height: auto;
    padding-bottom: 0.5em;
  }

  /* For cells that have a checkbox, giving them padding breaks JS layout math from SF */
  [role="main"] td.slds-cell-edit:not(#foo),
  main td.slds-cell-edit:not(#foo),
  /* Select all cell in header shouldn't have padding */
  [role="main"] thead .selectionColumnHeader:not(#foo),
  main thead .selectionColumnHeader:not(#foo),
  /* Cells with buttons in theme shouldn't get padding, the padding should be on the button */
  main thead th.sortable:not(#foo),
  [role="main"] thead th.sortable:not(#foo) {
    padding: 0;
  }

  /* Set table heading border colors, which are intended to be resize handles */
  .slds-resizable__divider[class]:before {
    background-color: #fafafa;
  }

  /* Remove top border from tables */
  .slds-table_header-fixed_container[class]:before,
  .slds-table--header-fixed_container[class]:before {
    content: none;
  }
}

/**
 * Nav styles
 */
@media only screen and (min-width: 48em) {
  .forceCommunityThemeNav.navMenuType-expanded[class] .mainNavItem .linkBtn.comm-navigation__top-level-item-link--active {
    /* Set active nav indicator to be red */
    border-bottom-color: #e00;
  }
}

/**
 * Tabs styling
 */
@media (min-width: 1000px) {
  /* @todo Is this necessary? How often does text go directly into a tab pane? */
  /* Make sure text directly inside of tabs has white space from the edge*/
  [role="main"] .uiTab.active,
  main .uiTab.active {
    padding: 1.25em 0;
  }
}

[role="main"] .tabs__item[class],
main .tabs__item[class] {
  /* Increase font size for readability and hit area */
  font-size: 1rem;
}

[role="main"] .uiTabBar .uiTabItem .tabHeader[class][class],
main .uiTabBar .uiTabItem .tabHeader[class][class] {
  /* Enforce RH tab button spacing */
  padding: 0.5em 1em;
}

[role="main"] .tabs__item[class][class][class],
main .tabs__item[class][class][class] {
  /* With added padding, don't add margin between tabs */
  margin: 0;
}

[role="main"] .tabs__item.active[class][class] > a,
main .tabs__item.active[class][class] > a {
  /* Force normal weight font in tabs */
  font-weight: 400;
}

[role="main"] .tabs__item.active[class][class] > a,
main .tabs__item.active[class][class] > a {
  /* Set active tab text color to primary text color */
  color: #151515;
  /* Set tab active color to red */
  border-color: #e00;
}

[role="main"] .tabs__item[class][class] > a:focus,
main .tabs__item[class][class] > a:focus {
  box-shadow: 0 0 3px 1px #0066cc55;
}


/**
 * RH Button styles
 */
/* @note slds-button has broad usage, there doesn't seem to be a reliable button class */
[role="main"] button.slds-button,
main button.slds-button {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  appearance: none;
}

/* Primary/Loud button style */
[role="main"] .slds-button--brand[class][class][class],
main .slds-button--brand[class][class][class],
/* @note found an example of the class with an _ instead of -- on /bpp/s/deal-registration */
[role="main"] .slds-button_brand[class][class][class],
main .slds-button_brand[class][class][class],
/* @note Fix for Simple Deal Registration uses the neutral slds class and the brand uiButton class */
[role="main"] .slds-button.uiButton--brand[class][class][class],
main .slds-button.uiButton--brand[class][class][class] {
  margin-inline-end: 1em;
  margin-block-end: 1em;
  padding: 0.375em 1em;
  border: 0;
  border-radius: 3px;
  color: #fff;
  background: #06c;
  box-shadow: none;
}
[role="main"] .slds-button--brand[class][class]:hover,
[role="main"] .slds-button--brand[class][class]:focus,
main .slds-button--brand[class][class]:hover,
main .slds-button--brand[class][class]:focus,
[role="main"] .slds-button_brand[class][class]:hover,
[role="main"] .slds-button_brand[class][class]:focus,
main .slds-button_brand[class][class]:hover,
main .slds-button_brand[class][class]:focus {
  background: #004080;
  box-shadow: none;
}

/* Styles for buttons that shouldn't look like buttons, e.g. "Share an update..." */
[role="main"] .dummyButtonCallToAction[class][class][class],
main .dummyButtonCallToAction[class][class][class] {
  padding: 0.375em 1em;
  border-radius: 0;
  /* Bottom should be darker gray and the other 3 sides lighter */
  /* Using box-shaodw for the border to avoid layout issues */
  box-shadow:
    inset 0 -1px 0 0 #8a8d90,
    inset 0 0 0 1px #f0f0f0;
  background: #fff;
  color: #151515;
}

/**
 * Home page
 */
.forceCommunityFeedPublisher .dummyControlsContainer {
  align-items: start;
}

/**
 * Listing table pages
 */
.forceListViewManager .slds-page-header records-highlights-icon {
  /* Remove dated looking icon */
  display: none;
}

.forceListViewManager .slds-page-header .slds-breadcrumb span {
  /* Make the page subject (Object name) look like an h1 */
  display: inline-block;
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 1rem;
}

/**
 * Object page
 * e.g. page that displays a single account, contact, or other objects
 */
.slds-page-header_record-home .slds-media {
  /* Hide dated looking icon */
  display: none;
}

.slds-page-header_record-home .slds-page-header__title {
  /* Make the page's subject appear large, like an h1 */
  font-size: 32px;
  line-height: 1.4;
}

.slds-page-header_record-home .forceActionsContainer .slds-button {
  /* Follow button has different height than other buttons, unsure why */
  min-height: 2em;
}

.slds-page-header_record-home .actionsContainer[class][class] lightning-icon {
  /* Fix the alignment of the arrow in the actions list in the top right corner */
  /* Arrow appears when not all actions can fit on screen */
  line-height: 0;
}

.forceCommunitySection .forcePageBlockSection {
  margin: 0 0 2em;
}