@solidxai/core-ui 0.1.18 → 0.1.19-beta.1

package/dist/resources/solid-custom.css

@@ -334,7 +334,9 @@ textarea {
   inset: 0 auto 0 0;
   top: 0;
   height: 100vh;
+  height: 100dvh;
   width: var(--sidebar-width);
+  box-sizing: border-box;
   background: var(--sidebar-background);
   color: var(--sidebar-foreground);
   border-right: 1px solid var(--sidebar-border);
@@ -531,6 +533,7 @@ textarea {
   left: 0;
   width: 14px;
   height: 100vh;
+  height: 100dvh;
   border: 0;
   background: transparent;
   z-index: 61;
@@ -1398,6 +1401,271 @@ textarea {
   box-shadow: 0 18px 48px rgba(2, 6, 23, 0.35);
 }
 
+.solid-popup-dialog.solid-delete-model-dialog.solid-radix-dialog-content {
+  display: flex;
+  flex-direction: column;
+  width: min(960px, calc(100vw - 32px));
+  height: min(760px, calc(100vh - 32px));
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+  padding: 0;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__head,
+.solid-delete-model-dialog .solid-delete-model-popup__footer {
+  flex: 0 0 auto;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__head {
+  padding: 20px 24px 16px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px 24px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__summary {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 12px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__summary > div {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  padding: 9px 12px;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--accent) 22%, var(--card));
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__summary strong {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__summary span {
+  color: var(--muted-foreground);
+  font-size: 11px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__inventory {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 10px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__change + .solid-delete-model-popup__change {
+  border-top: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__change summary {
+  display: grid;
+  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 2fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 14px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__change summary::-webkit-details-marker {
+  display: none;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__change summary::before {
+  content: "+";
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: end;
+  color: var(--muted-foreground);
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__change[open] summary::before {
+  content: "−";
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__change-name {
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__change-description {
+  color: var(--muted-foreground);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__count {
+  grid-column: 3;
+  grid-row: 1;
+  z-index: 1;
+  justify-self: start;
+  margin-right: 20px;
+  min-width: 23px;
+  padding: 3px 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 48%, var(--card));
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__items {
+  display: grid;
+  gap: 5px;
+  margin: 0;
+  padding: 0 42px 12px;
+  list-style: disc;
+  color: color-mix(in srgb, var(--foreground) 82%, transparent);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__empty {
+  margin: 0;
+  padding: 16px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__manual {
+  display: grid;
+  flex: 0 0 auto;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, #f59e0b 34%, var(--border));
+  border-radius: 10px;
+  background: color-mix(in srgb, #f59e0b 9%, var(--card));
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__manual > strong {
+  color: color-mix(in srgb, #92400e 92%, var(--foreground));
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__manual code {
+  overflow-wrap: anywhere;
+  color: var(--muted-foreground);
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__ddl {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding: 4px 5px 4px 8px;
+  border: 1px solid color-mix(in srgb, #b45309 20%, var(--border));
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--card) 82%, #f59e0b 5%);
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__ddl code {
+  overflow-wrap: anywhere;
+  color: color-mix(in srgb, var(--foreground) 90%, transparent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__copy-ddl {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
+  border-radius: 5px;
+  background: var(--card);
+  color: var(--foreground);
+  cursor: pointer;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__copy-ddl:hover {
+  background: color-mix(in srgb, var(--accent) 45%, var(--card));
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__copy-ddl:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 24px 18px;
+  background: var(--card);
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__confirm {
+  flex: 1;
+  padding: 0;
+  background: transparent;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__confirm .solid-checkbox-label {
+  font-size: 11px;
+}
+
+.solid-delete-model-dialog .solid-delete-model-popup__actions {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+}
+
+@media (max-width: 700px) {
+  .solid-popup-dialog.solid-delete-model-dialog.solid-radix-dialog-content {
+    width: calc(100vw - 20px);
+    height: calc(100vh - 20px);
+    max-height: calc(100vh - 20px);
+  }
+
+  .solid-delete-model-dialog .solid-delete-model-popup__head,
+  .solid-delete-model-dialog .solid-delete-model-popup__body,
+  .solid-delete-model-dialog .solid-delete-model-popup__footer {
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+
+  .solid-delete-model-dialog .solid-delete-model-popup__change summary {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 5px 10px;
+  }
+
+  .solid-delete-model-dialog .solid-delete-model-popup__change-description {
+    grid-column: 1 / -1;
+  }
+
+  .solid-delete-model-dialog .solid-delete-model-popup__change summary::before,
+  .solid-delete-model-dialog .solid-delete-model-popup__count {
+    grid-column: 2;
+  }
+
+  .solid-delete-model-dialog .solid-delete-model-popup__footer {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+
 @media (max-width: 1199px) {
   .solid-main {
     margin-left: 0;
@@ -1414,6 +1682,11 @@ textarea {
 
   .solid-sidebar {
     width: min(88vw, 320px);
+    width: min(88svw, 320px);
+    width: min(88dvw, 320px);
+    max-width: calc(100vw - 48px);
+    max-width: calc(100svw - 48px);
+    max-width: calc(100dvw - 48px);
     transform: translateX(-104%);
   }
 
@@ -1423,6 +1696,11 @@ textarea {
 
   .solid-sidebar.is-collapsed {
     width: min(88vw, 320px);
+    width: min(88svw, 320px);
+    width: min(88dvw, 320px);
+    max-width: calc(100vw - 48px);
+    max-width: calc(100svw - 48px);
+    max-width: calc(100dvw - 48px);
   }
 
   .solid-sidebar-hotspot {
@@ -4098,6 +4376,36 @@ html.dark .solid-header-cog-trigger:hover,
   align-items: center;
 }
 
+.solid-paginator-left {
+  display: inline-flex;
+  align-items: center;
+  margin-right: auto;
+}
+
+.solid-list-selection-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  color: var(--muted-foreground);
+  font-size: 0.78rem;
+  white-space: nowrap;
+}
+
+.solid-list-selection-clear {
+  border: 0;
+  padding: 2px 5px;
+  background: transparent;
+  color: var(--muted-foreground);
+  font: inherit;
+  cursor: pointer;
+}
+
+.solid-list-selection-clear:hover {
+  color: var(--foreground);
+  text-decoration: underline;
+}
+
 .solid-paginator-label,
 .solid-paginator-report {
   font-size: 0.7rem;
@@ -4493,6 +4801,15 @@ html.dark .solid-paginator-btn:hover:not(:disabled),
   box-shadow: -8px 0 12px -12px rgba(15, 23, 42, 0.18);
 }
 
+.solid-data-table-td.solid-tree-actions-cell {
+  vertical-align: middle;
+}
+
+.solid-data-table-td.solid-tree-actions-cell > div {
+  align-items: center;
+  min-height: 100%;
+}
+
 .solid-data-table-head .solid-tree-group-header-cell {
   min-height: 42px;
   z-index: 10 !important;
@@ -4684,25 +5001,27 @@ html.dark .solid-paginator-btn:hover:not(:disabled),
 }
 
 .solid-tree-row-menu-trigger {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+  background: var(--background);
+  color: color-mix(in srgb, var(--foreground) 78%, transparent);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 9px;
-  border: 1px solid transparent;
-  background: transparent;
-  color: color-mix(in srgb, var(--foreground) 76%, transparent);
+  cursor: pointer;
   transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
+    background 120ms ease,
     color 120ms ease;
 }
 
-.solid-tree-row-menu-trigger:hover {
-  background: color-mix(in srgb, var(--accent) 92%, transparent);
-  border-color: color-mix(in srgb, var(--border) 74%, transparent);
-  color: var(--foreground);
+.solid-tree-row-menu-trigger:hover,
+.solid-tree-row-menu-trigger[data-state="open"] {
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .solid-tree-row-menu .solid-dropdown-menu-item {