nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Dashboard.css

@@ -0,0 +1,763 @@
+@layer nexus.components {
+  /*
+   * DashboardBoard: a bar, then a 12-column grid whose rows are a fixed height (three controls tall, so density moves
+   * it), each widget spanning its size's columns and rows, the grid filling every gap. The board is a size container:
+   * under 48rem of its own width a small widget takes half and a medium or large one the whole; under 30rem (a phone)
+   * every widget takes the whole width, in the layout's order.
+   */
+  .nx-dash {
+    --nx-dash-row: calc(var(--nx-control-md) * 3);
+    --nx-dash-gap: var(--nx-space-4);
+
+    container: nx-dash / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-dash__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-height: var(--nx-control-md);
+  }
+
+  .nx-dash__title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: 600;
+  }
+
+  .nx-dash__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-1);
+    margin-inline-start: auto;
+  }
+
+  /* What a save answered: a tint of its tone with an edge, the words in the text colour. */
+  .nx-dash__notice {
+    --nx-dash-tone: var(--nx-info);
+
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    margin: 0;
+    padding: 2px 2px 2px var(--nx-space-3);
+    border-inline-start: 3px solid var(--nx-dash-tone);
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-dash-tone) 12%, var(--nx-surface));
+    color: var(--nx-text);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-dash__notice[data-tone="danger"] {
+    --nx-dash-tone: var(--nx-danger);
+  }
+
+  .nx-dash__notice[data-tone="success"] {
+    --nx-dash-tone: var(--nx-success);
+  }
+
+  .nx-dash__grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    grid-auto-rows: var(--nx-dash-row);
+    grid-auto-flow: row dense;
+    gap: var(--nx-dash-gap);
+  }
+
+  .nx-dash__grid[data-dragging] {
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  .nx-dash__empty {
+    display: grid;
+    justify-items: center;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-8) var(--nx-space-4);
+    border: 1px dashed var(--nx-border-strong);
+    border-radius: var(--nx-radius-lg);
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  .nx-dash__empty p {
+    margin: 0;
+  }
+
+  .nx-dash__empty .nx-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  @container nx-dash (max-width: 48rem) {
+    .nx-widget[data-size="S"] {
+      grid-column: span 6;
+    }
+
+    .nx-widget:is([data-size="M"], [data-size="L"]) {
+      grid-column: span 12;
+    }
+  }
+
+  @container nx-dash (max-width: 30rem) {
+    .nx-dash__grid {
+      --nx-dash-gap: var(--nx-space-3);
+    }
+
+    .nx-widget[data-size] {
+      grid-column: span 12;
+    }
+  }
+
+  /*
+   * WidgetFrame: one panel - a low heading (title, link, refresh or the edit tools) over a body that scrolls inside the
+   * frame. Its size is the grid's, never its content's, so the bones, the data and a failure are all the same box.
+   */
+  .nx-widget {
+    display: flex;
+    flex-direction: column;
+    grid-column: span var(--nx-widget-columns, 6);
+    grid-row: span var(--nx-widget-rows, 2);
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-surface);
+  }
+
+  .nx-widget__head {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nx-space-1);
+    min-height: calc(var(--nx-control-sm) + 8px);
+    padding: 4px 4px 0 var(--nx-space-3);
+  }
+
+  .nx-widget__title {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-btn.nx-widget__refresh {
+    flex-shrink: 0;
+    color: var(--nx-text-muted);
+  }
+
+  /* A link in a widget: the heading's View all, a list's more, Read more, What's new. */
+  .nx-widget__link,
+  .nx-wlist__more,
+  .nx-wnews__more,
+  .nx-wversion__link {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+    padding: 2px 6px;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-primary);
+    font: inherit;
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  :is(.nx-widget__link, .nx-wlist__more, .nx-wnews__more, .nx-wversion__link):hover {
+    text-decoration: underline;
+  }
+
+  :is(.nx-widget__link, .nx-wlist__more, .nx-wnews__more, .nx-wversion__link, .nx-wstat__figure--link, .nx-wlist__item--link):focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-widget__body {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-3);
+  }
+
+  /* A small widget is one line of heading over one figure: its body keeps the room. */
+  .nx-widget[data-size="S"] .nx-widget__body {
+    padding-block: 0 var(--nx-space-2);
+  }
+
+  .nx-widget__bones {
+    display: grid;
+    gap: 10px;
+    padding-top: 4px;
+  }
+
+  .nx-table__bone.nx-widget__bone {
+    height: 0.9em;
+  }
+
+  .nx-widget__bone:nth-child(3n + 2) {
+    width: 82%;
+  }
+
+  .nx-widget__bone:nth-child(3n) {
+    width: 64%;
+  }
+
+  .nx-widget[data-size="S"] .nx-widget__bone {
+    width: 45%;
+    height: 1.6em;
+  }
+
+  .nx-widget__empty,
+  .nx-widget__failure {
+    display: grid;
+    place-content: center;
+    min-height: 100%;
+    margin: 0;
+  }
+
+  .nx-widget__empty {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    text-align: center;
+  }
+
+  /* Edit mode: a dashed edge says the board is being arranged; the heading is the handle. */
+  .nx-dash[data-editing] .nx-widget {
+    border-style: dashed;
+    border-color: var(--nx-border-strong);
+  }
+
+  .nx-dash[data-editing] .nx-widget__head {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .nx-widget:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-dash .nx-widget[data-dragging] {
+    position: relative;
+    z-index: 2;
+    border-style: solid;
+    border-color: var(--nx-primary);
+    box-shadow: var(--nx-shadow);
+    cursor: grabbing;
+  }
+
+  .nx-widget__tools {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-widget__grip {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 20px;
+    height: var(--nx-control-sm);
+    margin-inline-start: -8px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: inherit;
+  }
+
+  .nx-btn.nx-widget__size {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* The Add drawer: by module, each widget its shape, its words, and Add. */
+  .nx-dash-add__group + .nx-dash-add__group {
+    margin-top: var(--nx-space-4);
+  }
+
+  .nx-dash-add__module {
+    margin: 0 0 var(--nx-space-1);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .nx-dash-add__list {
+    display: grid;
+    gap: var(--nx-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-dash-add__item {
+    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-dash-add__preview {
+    display: grid;
+    grid-template-columns: repeat(12, 4px);
+    grid-auto-rows: 8px;
+    gap: 1px;
+    align-content: start;
+    width: 63px;
+    height: 39px;
+    padding: 2px;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 7%, transparent);
+  }
+
+  .nx-dash-add__shape {
+    border-radius: 2px;
+    background: color-mix(in oklab, var(--nx-primary) 55%, var(--nx-surface));
+  }
+
+  .nx-dash-add__text {
+    display: grid;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .nx-dash-add__title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 500;
+  }
+
+  .nx-dash-add__title .nx-icon {
+    flex-shrink: 0;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dash-add__description,
+  .nx-dash-add__sizes,
+  .nx-dash-add__on {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-dash-add__on {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+  }
+
+  .nx-dash-add__all {
+    margin: 0 0 var(--nx-space-3);
+    color: var(--nx-text-muted);
+  }
+
+  /* A dot of a tone: a figure's, a calendar mark's. */
+  .nx-wstat__dot,
+  .nx-wcal__dot {
+    --nx-dot-tone: var(--nx-text-muted);
+
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--nx-dot-tone);
+  }
+
+  :is(.nx-wstat__dot, .nx-wcal__dot)[data-tone="primary"] {
+    --nx-dot-tone: var(--nx-primary);
+  }
+
+  :is(.nx-wstat__dot, .nx-wcal__dot)[data-tone="success"] {
+    --nx-dot-tone: var(--nx-success);
+  }
+
+  :is(.nx-wstat__dot, .nx-wcal__dot)[data-tone="warning"] {
+    --nx-dot-tone: var(--nx-warning);
+  }
+
+  :is(.nx-wstat__dot, .nx-wcal__dot)[data-tone="danger"] {
+    --nx-dot-tone: var(--nx-danger);
+  }
+
+  :is(.nx-wstat__dot, .nx-wcal__dot)[data-tone="info"] {
+    --nx-dot-tone: var(--nx-info);
+  }
+
+  /* StatWidget: figures side by side as they fit, plain on the panel; a linked one tints under the pointer. */
+  .nx-wstat {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
+    gap: var(--nx-space-1) var(--nx-space-2);
+    align-content: start;
+    margin: 0 calc(var(--nx-space-2) * -1);
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-wstat__item {
+    min-width: 0;
+  }
+
+  .nx-wstat__figure {
+    display: grid;
+    gap: 2px;
+    padding: var(--nx-space-1) var(--nx-space-2);
+    border-radius: var(--nx-radius);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .nx-widget[data-size="S"] .nx-wstat__figure {
+    padding-block: 0;
+  }
+
+  .nx-wstat__figure--link:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-wstat__label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-wstat__value {
+    font-size: 1.5rem;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+  }
+
+  .nx-wstat__note {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+  }
+
+  /* Muted words on a hover tint move toward the text colour, so they still read at 4.5:1. */
+  .nx-wstat__figure--link:hover :is(.nx-wstat__label, .nx-wstat__note),
+  .nx-wlist__item--link:hover :is(.nx-wlist__secondary, .nx-wlist__time) {
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+  }
+
+  /* ListWidget: rows of one height, a picture or icon, the words, a time and a tag at the end. */
+  .nx-wlist {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    margin: 0 calc(var(--nx-space-2) * -1);
+  }
+
+  .nx-wlist__rows {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-wlist__item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-height: calc(var(--nx-row) + 12px);
+    padding: 3px var(--nx-space-2);
+    border-radius: var(--nx-radius);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .nx-wlist__row:not([data-lead]) .nx-wlist__item {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .nx-wlist__item--link:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-wlist__icon {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-text) 7%, transparent);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-wlist__text,
+  .nx-wlist__end {
+    display: grid;
+    gap: 1px;
+    min-width: 0;
+    line-height: 1.35;
+  }
+
+  .nx-wlist__end {
+    justify-items: end;
+  }
+
+  .nx-wlist__title,
+  .nx-wlist__secondary {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-wlist__title {
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-wlist__title[data-unread] {
+    font-weight: 600;
+  }
+
+  .nx-wlist__secondary,
+  .nx-wlist__time {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-wlist__time {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-table__tag.nx-wlist__chip {
+    max-width: 8rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-wlist__more {
+    align-self: flex-start;
+    margin: auto var(--nx-space-1) 0;
+  }
+
+  /* CalendarWidget: the month beside the legend and the picked day's marks, under them when narrow. */
+  .nx-wcal {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--nx-space-3) var(--nx-space-5);
+  }
+
+  .nx-cal.nx-wcal__month {
+    flex: none;
+    margin-inline-start: calc(var(--nx-space-2) * -1);
+    padding-block: 0;
+  }
+
+  .nx-wcal__day {
+    display: grid;
+    justify-items: center;
+    gap: 2px;
+    line-height: 1;
+  }
+
+  .nx-cal__day:not([aria-selected="true"]) .nx-wcal__day[data-holiday] .nx-cal__num {
+    color: var(--nx-danger);
+  }
+
+  .nx-wcal__dots {
+    display: flex;
+    gap: 2px;
+    height: 5px;
+  }
+
+  .nx-wcal__dots .nx-wcal__dot {
+    width: 5px;
+    height: 5px;
+  }
+
+  /* On the picked day's solid fill, a dot takes the fill's label colour. */
+  .nx-cal__day[aria-selected="true"] .nx-wcal__dot {
+    background: currentColor;
+  }
+
+  .nx-wcal__side {
+    display: grid;
+    flex: 1 1 12rem;
+    align-content: start;
+    gap: var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-wcal__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px var(--nx-space-3);
+    margin: 0;
+    padding: 0;
+    font-size: var(--nx-text-xs);
+    list-style: none;
+  }
+
+  .nx-wcal__key {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .nx-wcal__count {
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-wcal__date {
+    margin: 0;
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+  }
+
+  .nx-wcal__marks {
+    display: grid;
+    gap: 6px;
+    margin: 6px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-wcal__mark {
+    display: flex;
+    align-items: baseline;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-wcal__label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-wcal__none {
+    margin: 6px 0 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  /* NewsWidget: notes one under another, a hairline between, the notes cut at their lines with Read more. */
+  .nx-wnews {
+    display: grid;
+    gap: var(--nx-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-wnews__item {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .nx-wnews__item + .nx-wnews__item {
+    padding-top: var(--nx-space-3);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-wnews__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .nx-wnews__title {
+    margin-inline-end: 2px;
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+  }
+
+  .nx-wnews__meta {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-markdown.nx-wnews__notes {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: var(--nx-text-sm);
+    -webkit-box-orient: vertical;
+  }
+
+  .nx-wnews__notes > * {
+    margin-block: 0;
+  }
+
+  .nx-wnews__more {
+    justify-self: start;
+    margin-inline-start: -6px;
+  }
+
+  /* VersionWidget: the version large, the application and build day under it. */
+  .nx-wversion {
+    display: grid;
+    align-content: start;
+    gap: 2px;
+  }
+
+  .nx-wversion__line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-wversion__version {
+    font-size: 1.5rem;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.01em;
+    line-height: 1.15;
+  }
+
+  .nx-wversion__meta {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-wversion__link {
+    justify-self: start;
+    margin: 4px 0 0 -6px;
+  }
+
+  .nx-widget[data-size="S"] .nx-wversion__link {
+    display: none;
+  }
+}