tabledrag.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Table drag styling for off-canvas dialog.
 *
 * @see tabledrag.js
 *
 * @internal
 */

/* The draggable  element. */

#drupal-off-canvas-wrapper .draggable:hover,
#drupal-off-canvas-wrapper .draggable:focus-within {
  background-color: var(--off-canvas-background-color-light);
}

/* Appears when the row is being dragged. */

#drupal-off-canvas-wrapper .draggable.drag {
  cursor: move;
  background-color: var(--off-canvas-background-color-dark);
}

#drupal-off-canvas-wrapper td {
  transition: background-color 0.3s ease;

  /* We have to horizontally align all descendent nodes including text nodes
     * that do not have wrapper elements. Since we use flex to do this, we need
     * try to keep it vertically centered, so we have to give it a minimum height
     * to match the rest of the table cells. */
}

#drupal-off-canvas-wrapper td:first-child {
  display: flex;
  align-items: center;
  min-height: 3.125rem;
  gap: var(--off-canvas-table-cell-padding);
}

#drupal-off-canvas-wrapper td abbr {
  margin-inline: 0 0.3125rem;
  -webkit-text-decoration: none;
  text-decoration: none;
}

#drupal-off-canvas-wrapper .tabledrag-handle {
  flex-shrink: 0;
}

#drupal-off-canvas-wrapper .tabledrag-handle::after {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  content: "";
  cursor: move;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

@media (forced-colors: active) {
  #drupal-off-canvas-wrapper .tabledrag-handle::after {
    background: linktext;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}

/* Make the "row weight"  as small as possible. */

#drupal-off-canvas-wrapper .tabledrag-hide select {
  all: revert;
}

#drupal-off-canvas-wrapper .tabledrag-changed-warning {
  margin-bottom: var(--off-canvas-vertical-spacing-unit);
  font-size: 0.875rem;
}

#drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
  padding-top: 0.625rem;
  text-align: end;
}

#drupal-off-canvas-wrapper .indentation {
  width: 0.3125rem;
}

.touchevents #drupal-off-canvas-wrapper .draggable td {
  padding: 0 0.625rem;
}

.touchevents #drupal-off-canvas-wrapper .draggable .menu-item__link {
  display: inline-block;
  padding: 0.625rem 0;
}

.touchevents #drupal-off-canvas-wrapper a.tabledrag-handle {
  width: 2.5rem;
  height: 2.75rem;
}