contacts-pane/dist/styles/webidControl.css

Contacts Pane: Contacts manager for Address Book, Groups, and Individuals.

/* ── Named pane (rendered sub-pane) ──────────────────────────── */
.contactPane .namedPane {
  border: var(--border-width-sm) solid var(--color-text-muted);
  border-radius: var(--border-radius-base);
}

/* ── Persona row ─────────────────────────────────────────────── */

.contactPane .personaRow {
  padding: var(--spacing-xs);
}

.contactPane .personaRow--webid,
.contactPane .personaRow--webid td,
.contactPane .personaRow--webid button,
.contactPane .personaRow--webid button:hover,
.contactPane .personaRow--webid .hoverControl:has(> img:first-child),
.contactPane .personaRow--webid .hoverControl:has(> img:first-child):hover,
.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child),
.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child):hover {
  background-color: var(--color-info-bg) !important;
}

/* ── Full-width elements ─────────────────────────────────────── */

.contactPane .fullWidth {
  width: 100%;
}

/* ── Open/close profile button ───────────────────────────────── */

.contactPane .personaOpenButton {
  float: right;
  background-color: transparent;
  border: none;
}

/* hoverControl layout overrides are now enforced in contactsRDFFormsEnforced.css */

/* ── Delete confirmation popup in webidControl ───────────────── */

/* Remove intermediate positioned ancestor so popup anchors to .hoverControl */
.contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {
  position: static !important;
}

/* Position the popup absolutely so it never participates in the flex row */
.contactPane .webidControl div[style*="position: relative"] > div[style*="display: grid"] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  display: grid !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: var(--spacing-btn) !important;
  min-width: 12em !important;
  background: var(--color-background) !important;
  border: var(--border-width-sm) solid var(--color-primary) !important;
  border-radius: var(--border-radius-base) !important;
  box-shadow: var(--box-shadow-popup) !important;
  grid-template-columns: auto auto !important;
  gap: var(--spacing-xxs) !important;
}

/* ── Section heading ─────────────────────────────────────────── */

.contactPane .contactPanedHeading {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-primary);
  margin: var(--spacing-sm) 0;
}

/* ── Prompt text ─────────────────────────────────────────────── */

.contactPane .webidPrompt {
  padding: var(--spacing-sm);
  border: none;
  font-size: var(--font-size-base);
  white-space: pre-wrap;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane,
.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) table td div.contactPane.namedPane {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: nested-profile-pane;
  margin-top: var(--spacing-sm);
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile-grid,
.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane #main-content.profile-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main,
.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section,
.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main {
  padding: var(--spacing-sm) !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="false"] .profileSectionCollapsible__content {
  display: none !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: auto !important;
  min-width: auto !important;
  padding: var(--spacing-xxs) !important;
  border: none !important;
  background: none !important;
  color: var(--color-text) !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="true"] .profileSectionCollapsible__chevron {
  transform: rotate(180deg);
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editLabel {
  display: none !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editIcon {
  display: inline !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: var(--min-touch-target) !important;
  min-height: var(--min-touch-target) !important;
  line-height: 0 !important;
}

.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialIcon {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1000px) {
  .contactPane .webidControl,
  .contactPane .webidControl table,
  .contactPane .webidControl tbody,
  .contactPane .webidControl tr,
  .contactPane .webidControl td {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .contactPane .webidControl table {
    table-layout: fixed;
  }

  .contactPane .webidControl .personaRow--webid td {
    vertical-align: top;
  }

  .contactPane .webidControl .contactPane,
  .contactPane .webidControl .contactPane .addressBook-grid,
  .contactPane .webidControl .contactPane .detailSection,
  .contactPane .webidControl .contactPane .detailsSectionContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .contactPane .webidControl .contactPane .addressBook-grid {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .contactPane .webidControl .contactPane .detailSection,
  .contactPane .webidControl .contactPane .addressBookSection {
    flex: none !important;
  }

  .contactPane .webidControl .contactPane .detailsSectionContent,
  .contactPane .webidControl .contactPane .detailsSectionContent--wide {
    padding: var(--spacing-sm) !important;
    overflow-y: visible !important;
  }

}

@container nested-profile-pane (max-width: 900px) {
  .contactPane .webidControl .profile-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
  }

  .contactPane .webidControl .profile-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .contactPane .webidControl .profile__main,
  .contactPane .webidControl .profile__sidebar,
  .contactPane .webidControl .profile__section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}

/* ── Visibility / display helpers ────────────────────────────── */

.contactPane .collapsed {
  visibility: collapse;
}