nexus-shared 2.0.0 → 3.1.0

package/src/Styles/Nexus.Markdown.css

@@ -1,265 +1,237 @@
-@layer nexus.components {
-  /*
-   * Markdown editor: the text and its preview inside the editor frame (Nexus.Editor.css), which brings the bar, the
-   * height handle, and full screen.
-   */
-  .nx-md .nx-editor__body[data-mode="split"] {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }
-
-  .nx-md .nx-editor__body[data-mode="preview"] .nx-md__input {
-    display: none;
-  }
-
-  .nx-md .nx-md__input {
-    height: 100%;
-    min-height: 0;
-    padding: 10px var(--nx-space-3);
-    border-radius: 0;
-    line-height: 1.6;
-    resize: none;
-  }
-
-  .nx-md--mono .nx-md__input {
-    font-family: var(--nx-font-mono);
-    font-size: calc(var(--nx-field-font) - 0.5px);
-  }
-
-  .nx-md__preview {
-    min-width: 0;
-    min-height: 0;
-    padding: 10px var(--nx-space-4);
-    overflow: auto;
-    overscroll-behavior: contain;
-  }
-
-  .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
-    border-left: 1px solid var(--nx-border);
-  }
-
-  .nx-md__preview:focus-visible {
-    outline: 2px solid var(--nx-primary);
-    outline-offset: -2px;
-  }
-
-  @container nx-editor (width < 560px) {
-    .nx-md .nx-editor__body[data-mode="split"] {
-      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
-      border-top: 1px solid var(--nx-border);
-      border-left: 0;
-    }
-  }
-
-  /* The preview's thin scrollbar, as the text area's (Nexus.Input.css). */
-  .nx-md__preview::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .nx-md__preview::-webkit-scrollbar-track,
-  .nx-md__preview::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  .nx-md__preview::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-field-scrollbar) padding-box;
-  }
-
-  .nx-md__preview::-webkit-scrollbar-thumb:hover {
-    background-color: var(--nx-field-scrollbar-hover);
-  }
-
-  @supports not selector(::-webkit-scrollbar) {
-    .nx-md__preview {
-      scrollbar-width: thin;
-      scrollbar-color: var(--nx-field-scrollbar) transparent;
-    }
-  }
-
-  /*
-   * Markdown content (MarkdownView), in the editor's preview and anywhere else. Sizes are in em, so the text follows
-   * the size of the element it sits in.
-   */
-  .nx-markdown {
-    color: var(--nx-text);
-    font-size: var(--nx-text-md);
-    line-height: 1.65;
-    overflow-wrap: break-word;
-  }
-
-  .nx-markdown > :first-child {
-    margin-top: 0;
-  }
-
-  .nx-markdown > :last-child {
-    margin-bottom: 0;
-  }
-
-  .nx-markdown :is(p, ul, ol, blockquote, pre, hr, .nx-markdown__table) {
-    margin: 0 0 0.9em;
-  }
-
-  .nx-markdown :is(h1, h2, h3, h4, h5, h6) {
-    margin: 1.4em 0 0.55em;
-    font-weight: 650;
-    line-height: 1.3;
-    letter-spacing: -0.01em;
-  }
-
-  .nx-markdown :is(h1, h2) {
-    padding-bottom: 0.3em;
-    border-bottom: 1px solid var(--nx-border);
-  }
-
-  .nx-markdown h1 {
-    font-size: 1.6em;
-  }
-
-  .nx-markdown h2 {
-    font-size: 1.3em;
-  }
-
-  .nx-markdown h3 {
-    font-size: 1.12em;
-  }
-
-  .nx-markdown h4 {
-    font-size: 1em;
-  }
-
-  .nx-markdown h5 {
-    font-size: 0.9em;
-  }
-
-  .nx-markdown h6 {
-    color: var(--nx-text-muted);
-    font-size: 0.85em;
-  }
-
-  .nx-markdown a {
-    color: var(--nx-primary);
-    text-decoration: underline;
-    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
-    text-underline-offset: 0.18em;
-  }
-
-  .nx-markdown a:hover {
-    text-decoration-color: currentColor;
-  }
-
-  .nx-markdown :is(ul, ol) {
-    padding-left: 1.6em;
-  }
-
-  .nx-markdown li + li {
-    margin-top: 0.25em;
-  }
-
-  .nx-markdown li > :is(ul, ol) {
-    margin: 0.25em 0 0;
-  }
-
-  .nx-markdown li > p {
-    margin-bottom: 0.5em;
-  }
-
-  /* Tasks: the box sits where the bullet would. */
-  .nx-markdown__task {
-    position: relative;
-    list-style: none;
-  }
-
-  .nx-markdown__task > input {
-    position: absolute;
-    top: 0.32em;
-    left: -1.45em;
-    width: 1em;
-    height: 1em;
-    margin: 0;
-    accent-color: var(--nx-primary-solid);
-  }
-
-  .nx-markdown__task > input:enabled {
-    cursor: pointer;
-  }
-
-  .nx-markdown blockquote {
-    padding: 0 0 0 1em;
-    border-left: 3px solid var(--nx-border-strong);
-    color: var(--nx-text-muted);
-  }
-
-  .nx-markdown code {
-    padding: 0.12em 0.38em;
-    border-radius: var(--nx-radius-sm);
-    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
-    font-family: var(--nx-font-mono);
-    font-size: 0.875em;
-  }
-
-  .nx-markdown pre {
-    overflow: auto;
-    padding: 0.8em 1em;
-    border-radius: var(--nx-radius);
-    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
-    line-height: 1.5;
-  }
-
-  .nx-markdown pre code {
-    padding: 0;
-    background: none;
-    font-size: 0.86em;
-    white-space: pre;
-  }
-
-  .nx-markdown hr {
-    height: 0;
-    margin-block: 1.4em;
-    border: 0;
-    border-top: 1px solid var(--nx-border-strong);
-  }
-
-  .nx-markdown img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--nx-radius-sm);
-    vertical-align: middle;
-  }
-
-  .nx-markdown del {
-    color: var(--nx-text-muted);
-  }
-
-  .nx-markdown__table {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
-  .nx-markdown table {
-    border-collapse: collapse;
-    font-size: 0.95em;
-  }
-
-  .nx-markdown :is(th, td) {
-    padding: 0.4em 0.8em;
-    border: 1px solid var(--nx-border);
-    text-align: left;
-    vertical-align: top;
-  }
-
-  .nx-markdown th {
-    background: color-mix(in oklab, var(--nx-text) 4%, transparent);
-    font-weight: 600;
-  }
-
-  .nx-markdown__empty {
-    color: var(--nx-text-muted);
-    font-style: italic;
-  }
-}
+@layer nexus.components {
+  /*
+   * Markdown editor: the text and its preview inside the editor frame (Nexus.Editor.css), which brings the bar, the
+   * height handle, and full screen.
+   */
+  .nx-md .nx-editor__body[data-mode="split"] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .nx-md .nx-editor__body[data-mode="preview"] .nx-md__input {
+    display: none;
+  }
+
+  .nx-md .nx-md__input {
+    height: 100%;
+    min-height: 0;
+    padding: 10px var(--nx-space-3);
+    border-radius: 0;
+    line-height: 1.6;
+    resize: none;
+  }
+
+  .nx-md--mono .nx-md__input {
+    font-family: var(--nx-font-mono);
+    font-size: calc(var(--nx-field-font) - 0.5px);
+  }
+
+  .nx-md__preview {
+    min-width: 0;
+    min-height: 0;
+    padding: 10px var(--nx-space-4);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
+    border-left: 1px solid var(--nx-border);
+  }
+
+  .nx-md__preview:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  @container nx-editor (width < 560px) {
+    .nx-md .nx-editor__body[data-mode="split"] {
+      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
+      border-top: 1px solid var(--nx-border);
+      border-left: 0;
+    }
+  }
+
+  /*
+   * Markdown content (MarkdownView), in the editor's preview and anywhere else. Sizes are in em, so the text follows
+   * the size of the element it sits in.
+   */
+  .nx-markdown {
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+    line-height: 1.65;
+    overflow-wrap: break-word;
+  }
+
+  .nx-markdown > :first-child {
+    margin-top: 0;
+  }
+
+  .nx-markdown > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nx-markdown :is(p, ul, ol, blockquote, pre, hr, .nx-markdown__table) {
+    margin: 0 0 0.9em;
+  }
+
+  .nx-markdown :is(h1, h2, h3, h4, h5, h6) {
+    margin: 1.4em 0 0.55em;
+    font-weight: 650;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+  }
+
+  .nx-markdown :is(h1, h2) {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-markdown h1 {
+    font-size: 1.6em;
+  }
+
+  .nx-markdown h2 {
+    font-size: 1.3em;
+  }
+
+  .nx-markdown h3 {
+    font-size: 1.12em;
+  }
+
+  .nx-markdown h4 {
+    font-size: 1em;
+  }
+
+  .nx-markdown h5 {
+    font-size: 0.9em;
+  }
+
+  .nx-markdown h6 {
+    color: var(--nx-text-muted);
+    font-size: 0.85em;
+  }
+
+  .nx-markdown a {
+    color: var(--nx-primary);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
+    text-underline-offset: 0.18em;
+  }
+
+  .nx-markdown a:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .nx-markdown :is(ul, ol) {
+    padding-left: 1.6em;
+  }
+
+  .nx-markdown li + li {
+    margin-top: 0.25em;
+  }
+
+  .nx-markdown li > :is(ul, ol) {
+    margin: 0.25em 0 0;
+  }
+
+  .nx-markdown li > p {
+    margin-bottom: 0.5em;
+  }
+
+  /* Tasks: the box sits where the bullet would. */
+  .nx-markdown__task {
+    position: relative;
+    list-style: none;
+  }
+
+  .nx-markdown__task > input {
+    position: absolute;
+    top: 0.32em;
+    left: -1.45em;
+    width: 1em;
+    height: 1em;
+    margin: 0;
+    accent-color: var(--nx-primary-solid);
+  }
+
+  .nx-markdown__task > input:enabled {
+    cursor: pointer;
+  }
+
+  .nx-markdown blockquote {
+    padding: 0 0 0 1em;
+    border-left: 3px solid var(--nx-border-strong);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-markdown code {
+    padding: 0.12em 0.38em;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
+    font-family: var(--nx-font-mono);
+    font-size: 0.875em;
+  }
+
+  .nx-markdown pre {
+    overflow: auto;
+    padding: 0.8em 1em;
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+    line-height: 1.5;
+  }
+
+  .nx-markdown pre code {
+    padding: 0;
+    background: none;
+    font-size: 0.86em;
+    white-space: pre;
+  }
+
+  .nx-markdown hr {
+    height: 0;
+    margin-block: 1.4em;
+    border: 0;
+    border-top: 1px solid var(--nx-border-strong);
+  }
+
+  .nx-markdown img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--nx-radius-sm);
+    vertical-align: middle;
+  }
+
+  .nx-markdown del {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-markdown__table {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .nx-markdown table {
+    border-collapse: collapse;
+    font-size: 0.95em;
+  }
+
+  .nx-markdown :is(th, td) {
+    padding: 0.4em 0.8em;
+    border: 1px solid var(--nx-border);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .nx-markdown th {
+    background: color-mix(in oklab, var(--nx-text) 4%, transparent);
+    font-weight: 600;
+  }
+
+  .nx-markdown__empty {
+    color: var(--nx-text-muted);
+    font-style: italic;
+  }
+}