gristlabs_grist-core/app/client/components/DetailView.css

.detail_menu_bottom {
  border-top: 1px solid lightgrey;
}

/* applies to the record detail container */
.record-layout-editor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  background: var(--grist-theme-page-panels-main-panel-bg, white);
  z-index: 1;
  margin-top: -6px;
}

.layout_box_maximized .record-layout-editor {
  padding-left: 16px;
  padding-right: 16px;
}

.g_record_detail_inner > .layout_root {
  height: auto;
}

/* applies to all record details */
.g_record_detail_el {
  position: relative;
  margin: 0.5rem;
  padding: .5rem;
}

.g_record_detail_label {
  min-height: 1rem;
  color: #666;
  font-size: 1rem;
  font-weight: bold;
}

.g_record_detail_value {
  position: relative;
  min-height: 16px;
  white-space: pre;
  word-wrap: break-word;
  color: var(--grist-theme-cell-fg, black);
}

.g_record_detail_value.record-add {
  background-color: var(--grist-theme-table-add-new-bg, #f6f6ff);
}

.g_record_detail_value.scissors {
  outline: 2px dashed var(--grist-theme-cursor, var(--grist-color-cursor));
}

.g_record_detail_value.draft {
  padding-right: 18px;
}

.detail_row_num {
  font-size: var(--grist-x-small-font-size);
  font-weight: normal;
  color: var(--grist-theme-text-light, var(--grist-color-slate));
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.detail_row_num .menu_toggle  {
  margin-left: 0.5rem;
}

.detail_row_num:hover .menu_toggle,
.detail_row_num .menu_toggle.weasel-popup-open {
  color: var(--color-link-default);
}

/* hide menu on layout editor */
.detailview_layout_editor .menu_toggle {
  visibility: hidden !important;
}

.detail_row_num::before {
  content: "ROW ";
  margin-right: 2px;
}

.detail-left.disabled, .detail-right.disabled, .detail-add-btn.disabled {
  cursor: default !important;
}

.detail-add-grp {
  margin-left: 0.5rem;
}

/*** card view (multiple records) ***/

.detailview_scroll_pane {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;

  /* allow 3px to the left to be visible, for highlighting active record */
  padding-left: 3px;
  margin-left: -3px;
}

@media not print {
  .detailview_record_detail.active {
    /* highlight active record in Card List by overlaying the active-section highlight */
    margin-left: -3px;
    border-left: 3px solid var(--grist-color-light-green);
  }
}

/*** single record ***/
.detailview_single {
  overflow: auto;
}

.grist-single-record__menu {
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  margin-top: -4px;
  text-transform: uppercase;
}

.grist-single-record__menu__count {
  white-space: nowrap;
  text-align: right;
  padding-right: 1rem;
}

.detailview_record_single > .detail_row_num {
  display: none;
}

/*** detailed record "themes" ***/

/*** label-under theme ***/
/* TODO Deprecated. Probably best to keep styles for the sake of older docs that might specify
 * this theme, but in practice it's unlikely any docs use it.
 */
.detail_theme_field_under {
  display: flex;
  display: -webkit-flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
}

.detail_theme_field_under > .g_record_detail_label {
  border-top: 1px solid #333;
}

.detail_theme_record_under {
  border-top: 1px solid #ccc;
  padding: 0 1rem 1rem 0;
  border-left: 2px solid white;
}

.detail_theme_record_under:first-child {
  border-top: none;
}

/*** compact theme ***/
.detail_theme_record_compact {
  /* 12px is enough margin on the right to include most of the floating scrollbar on MacOS */
  padding: 4px 16px 0px 16px;
  background-color: var(--grist-theme-card-compact-widget-bg, var(--grist-color-medium-grey));
}

.detail_theme_record_compact.detailview_record_single {
  padding: 8px;
}

.detail_theme_record_compact > .detail_row_num {
  padding: 0px;
}

.detail_theme_record_compact > .g_record_detail_inner {
  background-color: var(--grist-theme-card-compact-record-bg, white);
  position: relative;
}

.detail_theme_record_compact > .g_record_detail_inner > .layout_root {
  border: 1px solid var(--grist-theme-card-compact-border, var(--grist-color-dark-grey));
  border-right: none;
  border-bottom: none;
}

.detail_theme_record_compact.detailview_record_single > .g_record_detail_inner {
  height: 100%;
}

.detail_theme_record_compact.detailview_record_single > .g_record_detail_inner > .layout_root {
  height: 100%;
}

.detail_theme_field_compact {
  border-top: none;
  border-left: none;
  border-right: 1px solid var(--grist-theme-card-compact-border, var(--grist-color-dark-grey));
  border-bottom: 1px solid var(--grist-theme-card-compact-border, var(--grist-color-dark-grey));
  padding: 1px 1px 1px 5px;
  margin: 0;
  line-height: 1.2;
}

.detail_theme_field_compact > .g_record_detail_label {
  font-weight: normal;
  font-size: var(--grist-small-font-size);
  color: var(--grist-theme-card-compact-label, var(--grist-color-slate));
  min-height: 0px;

  white-space: nowrap;
  overflow: hidden;
  margin-left: 3px;     /* to align with the .field_clip content */
  margin-right: -1px;   /* allow labels to overflow into the padding */
}

.detail_theme_record_compact .menu_toggle {
  transform: translateY(-1px);
}

/*** form theme ***/

.detail_theme_field_form {
  padding: 1px 1px 1px 5px;
}

.detail_theme_field_form>.g_record_detail_label {
  font-size: var(--grist-small-font-size);
  color: var(--grist-theme-card-form-label, var(--grist-color-slate));
  font-weight: bold;
  min-height: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: -8px;
}

.detail_theme_field_form .info_toggle_icon {
  width: 13px;
  height: 13px;
}

/* TODO want to style better the values themselves (e.g. more padding, rounded corners, move label
 * inside value box for compact view for better cursor looks, etc), but first the cell editor
 * needs to learn to match the value box's style. Right now, the cell editor style is hard-coded.
 */
.detail_theme_field_form > .g_record_detail_value {
  border: 1px solid var(--grist-theme-card-form-border, lightgrey);
}

.detail_theme_record_form {
  padding: 0px 12px 0px 8px;
}

.detail_theme_record_form.detailview_record_single {
  padding-top: 8px;
}

.detail_theme_record_form.detailview_record_detail {
  border-bottom: 1px solid var(--grist-theme-card-list-form-border, var(--grist-color-dark-grey));
  padding-bottom: 12px;
}

/*** blocks theme ***/

.detail_theme_record_blocks {
  padding: 0px 12px 0px 8px;
}

.detail_theme_record_blocks > .detail_row_num {
  padding-bottom: 0px;
}

.detail_theme_record_blocks.detailview_record_single {
  padding: 8px;
}

.detail_theme_record_blocks.detailview_record_detail {
  border-bottom: 1px solid var(--grist-theme-card-list-blocks-border, var(--grist-color-dark-grey));
  padding-bottom: 8px;
}

.detail_theme_field_blocks {
  padding: 6px;
  margin: 8px;
  background-color: var(--grist-theme-card-blocks-bg, var(--grist-color-medium-grey));
  border-radius: 2px;
}

.detail_theme_field_blocks > .g_record_detail_label {
  font-size: var(--grist-small-font-size);
  color: var(--grist-theme-card-blocks-label, var(--grist-color-slate));
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 3px;     /* to align with the .field_clip content */
  margin-right: -6px;   /* allow labels to overflow into the padding */
  margin-bottom: 4px;
}

@media print {
  .detail_theme_record_compact {
    background-color: var(--grist-color-medium-grey) !important;
  }
  .detail_theme_record_compact > .g_record_detail_inner {
    background-color: white !important;
  }
  .detail_theme_field_blocks {
    background-color: var(--grist-color-medium-grey) !important;
  }
}