nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Files.css

@@ -0,0 +1,410 @@
+/*
+ * An owner's pictures and documents (OwnerFiles.tsx, PictureInput.tsx): a picture of any size and shape, the picture
+ * input's preview and buttons, the gallery's two panes and the document list. Nothing moves under the pointer: a hovered
+ * picture gets a ring, never a new size, so a table's rows and the gallery's grid stay where they are.
+ */
+@layer nexus.components {
+  /* A picture: its height from --nx-picture-h, its width from the shape (--nx-picture-ratio, width / height). */
+  .nx-picture {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    height: var(--nx-picture-h, 28px);
+    aspect-ratio: var(--nx-picture-ratio, 1);
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 7%, var(--nx-surface));
+    color: var(--nx-text-subtle);
+    font: inherit;
+    vertical-align: middle;
+  }
+
+  .nx-picture img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nx-picture--empty .nx-icon {
+    width: min(50%, 2rem);
+    height: auto;
+  }
+
+  .nx-picture--round {
+    border-radius: 50%;
+  }
+
+  /* No picture, a name: its initials, on the name's avatar tone (Nexus.Avatar.css), in the text colour. */
+  .nx-picture--initials {
+    color: var(--nx-text);
+    font-size: max(8px, calc(var(--nx-picture-h, 28px) * 0.4));
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  /* Not read yet: the tint alone, so a row with a picture never flashes the no-picture icon first. */
+  .nx-picture--loading .nx-icon {
+    visibility: hidden;
+  }
+
+  button.nx-picture {
+    cursor: pointer;
+  }
+
+  button.nx-picture:hover {
+    box-shadow: 0 0 0 1px var(--nx-border-strong);
+  }
+
+  :is(button.nx-picture, .nx-files__name):focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /* The picture input: the preview beside its buttons, which wrap under it when the form is narrow. */
+  .nx-picture-input {
+    min-width: 0;
+  }
+
+  .nx-picture-input__body {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-3) var(--nx-space-4);
+    margin-top: var(--nx-space-1);
+  }
+
+  .nx-picture-input__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+  }
+
+  /* The gallery and the document list. */
+  .nx-files {
+    display: grid;
+    gap: var(--nx-space-4);
+    min-width: 0;
+  }
+
+  .nx-files__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nx-space-2) var(--nx-space-3);
+  }
+
+  .nx-files__note {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-files__note--error {
+    color: var(--nx-danger-text);
+  }
+
+  .nx-files__empty {
+    display: grid;
+    place-items: center;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-8) var(--nx-space-4);
+    border-radius: var(--nx-radius-lg);
+    background: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  .nx-files__empty > .nx-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .nx-files__empty p {
+    margin: 0;
+  }
+
+  .nx-files__grid,
+  .nx-files__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /*
+   * Pictures in two panes (the 2026-06-20 gallery): the main picture large with its buttons and the count, a hairline,
+   * then the grid. The gallery is the size container: under 560px of its own width the main picture sits small beside
+   * its buttons, over the grid. In its window (a flush popup's body) it has a height of its own, so the grid scrolls and
+   * nothing else does; in a page or a tab it is as tall as its pictures.
+   */
+  .nx-files--panes {
+    container-type: inline-size;
+    width: 100%;
+  }
+
+  .nx-files__frame {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .nx-files__side {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-4);
+    box-sizing: content-box;
+    width: 15rem;
+    min-height: 0;
+    padding-inline-end: var(--nx-space-5);
+    border-inline-end: 1px solid var(--nx-border);
+  }
+
+  /* The main picture: about 15rem on its long side, a rounded square for every shape (only an avatar is round). */
+  .nx-files__cover {
+    --nx-picture-h: calc(15rem / max(1, var(--nx-picture-ratio, 1)));
+
+    align-self: center;
+    border-radius: var(--nx-radius-lg);
+  }
+
+  .nx-files__cover.nx-picture--empty .nx-icon {
+    width: 3rem;
+  }
+
+  .nx-files__about {
+    display: grid;
+    align-content: start;
+    gap: var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-files__side-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-files__side-actions > .nx-btn {
+    flex: 1 1 0;
+  }
+
+  .nx-files__pane {
+    min-width: 0;
+    min-height: 0;
+    padding-inline-start: var(--nx-space-5);
+  }
+
+  /*
+   * The window: edge to edge, the panes padded inside, a height of its own (the whole window once it fills it). What is
+   * not the panes there - the list that could not be read, with Try again - has the window's own padding.
+   */
+  .nx-popup--flush .nx-popup__body > .nx-files:not(.nx-files--panes) {
+    padding: var(--nx-space-5);
+  }
+
+  @media (max-width: 600px) {
+    .nx-popup--flush .nx-popup__body > .nx-files:not(.nx-files--panes) {
+      padding: var(--nx-space-4);
+    }
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes {
+    height: min(36rem, calc(100dvh - 10rem));
+  }
+
+  .nx-popup:is(.nx-popup--full, .nx-popup--maximized) .nx-popup__body > .nx-files--panes {
+    height: 100%;
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__frame {
+    height: 100%;
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes :is(.nx-files__side, .nx-files__pane) {
+    padding: var(--nx-space-5);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* At least two pictures a row; about 11rem each where there is room. */
+  .nx-files__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(11rem, calc(50% - var(--nx-space-3) / 2)), 1fr));
+    gap: var(--nx-space-3);
+  }
+
+  .nx-files__tile {
+    position: relative;
+    min-width: 0;
+  }
+
+  /* A picture in the grid: a rounded square (or the page's shape), the picture covering it. */
+  .nx-files__thumb,
+  .nx-table__bone.nx-files__bone {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: var(--nx-picture-ratio, 1);
+    overflow: hidden;
+    border-radius: var(--nx-radius-lg);
+    background: color-mix(in oklab, var(--nx-text) 7%, var(--nx-surface));
+  }
+
+  .nx-files__thumb img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nx-files__tile:hover .nx-files__thumb {
+    box-shadow: 0 0 0 1px var(--nx-border-strong);
+  }
+
+  /* The main picture: a ring in the accent, and the Main tag in its corner. */
+  .nx-files__tile[data-primary] .nx-files__thumb {
+    box-shadow: 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-files__mark {
+    position: absolute;
+    top: var(--nx-space-2);
+    left: var(--nx-space-2);
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  /*
+   * The picture's buttons, inside it and centred, on a popover's panel. Shown on hover and on a keyboard's focus in the
+   * picture; where a finger may press (a touch screen, a laptop's too) always, so no button waits behind a hover.
+   * Hidden, they stay in the Tab order and to a screen reader, but take no press: a tap meant for the picture never
+   * runs Make main or Edit unseen.
+   */
+  .nx-files__tools {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2px;
+    width: fit-content;
+    max-width: calc(100% - var(--nx-space-2));
+    height: fit-content;
+    margin: auto;
+    padding: 3px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    box-shadow: var(--nx-shadow);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--nx-duration) ease-out;
+  }
+
+  .nx-files__tile:is(:hover, :has(:focus-visible)) .nx-files__tools {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (hover: none), (any-hover: none), (any-pointer: coarse) {
+    .nx-files__tools {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  @container (max-width: 559.98px) {
+    .nx-files__frame {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .nx-files__side {
+      flex-direction: row;
+      align-items: flex-start;
+      flex-shrink: 0;
+      gap: var(--nx-space-3);
+      box-sizing: border-box;
+      width: auto;
+      padding: 0 0 var(--nx-space-4);
+      border-inline-end: 0;
+      border-bottom: 1px solid var(--nx-border);
+    }
+
+    .nx-files__cover {
+      --nx-picture-h: calc(7rem / max(1, var(--nx-picture-ratio, 1)));
+
+      align-self: flex-start;
+    }
+
+    .nx-files__cover.nx-picture--empty .nx-icon {
+      width: 2rem;
+    }
+
+    .nx-files__about {
+      flex: 1 1 0;
+    }
+
+    .nx-files__pane {
+      flex: 1 1 auto;
+      padding: var(--nx-space-4) 0 0;
+    }
+
+    .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__side {
+      flex-shrink: 0;
+      padding: var(--nx-space-4);
+      overflow: visible;
+    }
+
+    .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__pane {
+      padding: var(--nx-space-4);
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-files__tools {
+    transition: none;
+  }
+
+  /* The document list: a row per file, its buttons at the end. */
+  .nx-files__actions {
+    display: inline-flex;
+    gap: 2px;
+  }
+
+  .nx-files__row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-2) 0;
+  }
+
+  .nx-files__row + .nx-files__row {
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-files__row-text {
+    display: grid;
+    min-width: 0;
+  }
+
+  .nx-files__name {
+    overflow: hidden;
+    border-radius: var(--nx-radius-sm);
+    color: var(--nx-text);
+    font-weight: 500;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-files__name:hover {
+    text-decoration: underline;
+  }
+}