feat: rework widget settings modal

2026-08-23 01:19:08 +02:00
1 parent 1b843817a4
commit 5188ed89d6
@@ -0,0 +1,160 @@
+.workspace {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--mantine-spacing-lg);
+  align-items: start;
+}
+
+.workspace[data-with-preview] {
+  grid-template-columns: minmax(0, 0.95fr) minmax(24rem, 1.05fr);
+}
+
+.previewPanel {
+  position: sticky;
+  top: 0;
+  min-width: 0;
+  padding: var(--mantine-spacing-md);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+}
+
+.previewDimensions {
+  position: absolute;
+  z-index: 2;
+  top: calc(var(--mantine-spacing-md) + var(--mantine-spacing-xs));
+  right: calc(var(--mantine-spacing-md) + var(--mantine-spacing-xs));
+  pointer-events: none;
+}
+
+.previewCanvas {
+  min-height: 23rem;
+  padding: var(--mantine-spacing-lg);
+  overflow: hidden;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
+  background-image:
+    linear-gradient(to right, color-mix(in srgb, var(--mantine-color-dimmed) 14%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--mantine-color-dimmed) 14%, transparent) 1px, transparent 1px);
+  background-size: 2rem 2rem;
+}
+
+.previewWidget {
+  position: relative;
+  flex: 0 0 auto;
+  overflow: hidden;
+  box-shadow: var(--mantine-shadow-lg);
+  animation: dock-widget 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.previewTitle {
+  position: absolute;
+  z-index: 2;
+  top: var(--mantine-spacing-xs);
+  left: var(--mantine-spacing-xs);
+  max-width: calc(100% - var(--mantine-spacing-md));
+}
+
+.previewContent {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  user-select: none;
+}
+
+.settingsPanel {
+  min-width: 0;
+  max-height: calc(100dvh - 13rem);
+  padding-right: 0.25rem;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.fullWidthField {
+  grid-column: 1 / -1;
+}
+
+.switchOption {
+  display: flex;
+  height: 4.5rem;
+  align-items: center;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-sm);
+  background: var(--mantine-color-body);
+}
+
+.switchOption > *,
+.switchOption :global(.mantine-Switch-root),
+.switchOption :global(.mantine-Switch-body) {
+  width: 100%;
+}
+
+.switchOption :global(.mantine-Switch-body) {
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-md);
+}
+
+.switchOption :global(.mantine-Switch-labelWrapper) {
+  min-width: 0;
+  flex: 1;
+}
+
+.switchOption :global(.mantine-Switch-description) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.footer {
+  position: sticky;
+  z-index: 3;
+  bottom: calc(var(--mantine-spacing-md) * -1);
+  margin-inline: calc(var(--mantine-spacing-md) * -1);
+  margin-bottom: calc(var(--mantine-spacing-md) * -1);
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  border-top: 1px solid var(--mantine-color-default-border);
+  background: color-mix(in srgb, var(--mantine-color-body) 94%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+@keyframes dock-widget {
+  from {
+    opacity: 0;
+    transform: translate(-1.25rem, 1rem) scale(0.92);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (max-width: 62em) {
+  .workspace[data-with-preview] {
+    grid-template-columns: 1fr;
+  }
+
+  .previewPanel {
+    position: static;
+  }
+
+  .previewCanvas {
+    min-height: 18rem;
+  }
+
+  .settingsPanel {
+    max-height: none;
+    overflow: visible;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .previewWidget {
+    animation: none;
+  }
+}