@trimble-oss/moduswebcomponents/collection/components/modus-wc-card/modus-wc-card.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
modus-wc-card .modus-wc-card:not(.modus-wc-card-bordered) {
  background-color: var(--modus-wc-color-base-100);
}
modus-wc-card .modus-wc-card .modus-wc-card-title {
  margin-bottom: 0;
}
modus-wc-card .modus-wc-card.modus-wc-card-bordered {
  background-color: var(--modus-wc-color-base-page);
}
modus-wc-card .modus-wc-card {
  color: var(--modus-wc-color-base-content);
}
modus-wc-card .modus-wc-card figure {
  margin-bottom: unset;
}
modus-wc-card .modus-wc-card .modus-wc-card-body {
  gap: unset;
}
modus-wc-card .modus-wc-card .modus-wc-card-actions {
  margin-bottom: var(--modus-wc-spacing-xs);
}
modus-wc-card .modus-wc-card > modus-wc-collapse .modus-wc-collapse {
  background-color: var(--modus-wc-color-base-page);
}

[data-theme=modus-classic-light] modus-wc-card .modus-wc-card,
[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card {
  --rounded-box: 0.5rem;
  box-shadow: 0 0 2px 0 rgba(54, 53, 69, 0.3);
}
[data-theme=modus-classic-light] modus-wc-card .modus-wc-card:hover,
[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card:hover {
  box-shadow: 0 0 8px 0 rgba(54, 53, 69, 0.3);
}
[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-subtitle,
[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-subtitle {
  font-weight: var(--modus-wc-font-weight-bold);
}

[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-title {
  --fallback-bc: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-subtitle {
  color: var(--modus-wc-color-gray-8);
}

[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-title {
  --fallback-bc: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-subtitle {
  color: var(--modus-wc-color-gray-1);
}

[data-theme=connect-light] modus-wc-card .modus-wc-card,
[data-theme=connect-dark] modus-wc-card .modus-wc-card {
  box-shadow: 0 0 0.25rem var(--modus-wc-color-base-200);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card:hover,
[data-theme=connect-dark] modus-wc-card .modus-wc-card:hover {
  background-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card:focus,
[data-theme=connect-dark] modus-wc-card .modus-wc-card:focus {
  background-color: var(--modus-wc-color-base-200);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card:active,
[data-theme=connect-dark] modus-wc-card .modus-wc-card:active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card-selected,
[data-theme=connect-dark] modus-wc-card .modus-wc-card-selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card-active,
[data-theme=connect-dark] modus-wc-card .modus-wc-card-active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card-open,
[data-theme=connect-dark] modus-wc-card .modus-wc-card-open {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card.selected,
[data-theme=connect-dark] modus-wc-card .modus-wc-card.selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card.active,
[data-theme=connect-dark] modus-wc-card .modus-wc-card.active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card-disabled:hover,
[data-theme=connect-dark] modus-wc-card .modus-wc-card-disabled:hover {
  background-color: inherit;
}
[data-theme=connect-light] modus-wc-card .modus-wc-card--active,
[data-theme=connect-dark] modus-wc-card .modus-wc-card--active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card--selected,
[data-theme=connect-dark] modus-wc-card .modus-wc-card--selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card:checked,
[data-theme=connect-dark] modus-wc-card .modus-wc-card:checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card.checked,
[data-theme=connect-dark] modus-wc-card .modus-wc-card.checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card-checked,
[data-theme=connect-dark] modus-wc-card .modus-wc-card-checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card.pressed,
[data-theme=connect-dark] modus-wc-card .modus-wc-card.pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card-pressed,
[data-theme=connect-dark] modus-wc-card .modus-wc-card-pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card[aria-pressed=true],
[data-theme=connect-dark] modus-wc-card .modus-wc-card[aria-pressed=true] {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-card .modus-wc-card:hover,
[data-theme=connect-dark] modus-wc-card .modus-wc-card:hover {
  box-shadow: 0 0 0.375rem var(--modus-wc-color-base-100);
}