@k2b/cloud 0.6.0-rc.0

package/src/styles/utilities-layout.css

@@ -0,0 +1,603 @@
+/* Layout, containers, and prose styles — flat, solid surfaces */
+@utility section {
+  @apply py-5;
+}
+
+@utility article {
+  @apply mx-auto max-w-[65ch] px-2 py-4 pb-10 transition-[max-width] duration-500 ease-in-out md:px-4 lg:max-w-[80ch] [&_img]:mx-auto [&_img]:max-h-[50vh] [&_img]:w-auto;
+
+  & img {
+    @apply rounded-lg;
+  }
+}
+
+@utility container {
+  @apply mx-auto max-w-480 px-4;
+}
+
+@utility paper {
+  @apply transition-colors duration-150;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface);
+  /* Shared surface depth stays consistent with the Layout header. */
+  box-shadow: var(--ui-shadow-surface);
+}
+
+@utility dialog-panel {
+  @apply fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+  @apply p-4 overflow-x-hidden overflow-y-auto;
+  @apply backdrop:bg-black/40;
+  width: min(28rem, var(--ui-dialog-available-width));
+  max-height: var(--ui-dialog-available-height);
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface);
+  /* Floating dialog (portaled) — outer shadow is fine here. */
+  box-shadow: var(--ui-shadow-float);
+}
+
+@utility dialog-fixed-frame {
+  height: min(86vh, var(--ui-dialog-available-height));
+  max-height: var(--ui-dialog-available-height);
+}
+
+@utility dialog-viewport-content {
+  max-width: var(--ui-dialog-available-width);
+  max-height: var(--ui-dialog-available-height);
+
+  & > :first-child {
+    max-height: var(--ui-dialog-available-height);
+  }
+}
+
+@utility panel-dialog-shell {
+  border: 1px solid var(--ui-dialog-border);
+  border-radius: var(--ui-dialog-radius);
+  background: var(--ui-dialog-surface);
+}
+
+@utility panel-dialog-section {
+  border-color: var(--ui-dialog-section-border);
+  background: var(--ui-dialog-section);
+}
+
+@utility panel-dialog-section-icon {
+  background: var(--ui-dialog-section-icon);
+}
+
+@utility paper-highlighted {
+  @apply paper;
+  background: var(--ui-paper-highlighted);
+}
+
+.dark .paper-highlighted,
+.dark .hover\:paper-highlighted:hover {
+  background: var(--ui-paper-highlighted);
+  box-shadow: var(--ui-shadow-surface);
+}
+
+@utility no-scrollbar {
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.panes-tab-strip {
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border-radius: var(--ui-radius-control);
+  background: var(--ui-surface-muted);
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.panes-tab-strip::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.panes-tab-strip:hover,
+.panes-tab-strip:focus-within {
+  scrollbar-color: rgb(161 161 170 / 0.45) transparent;
+}
+
+.panes-tab-strip:hover::-webkit-scrollbar-thumb,
+.panes-tab-strip:focus-within::-webkit-scrollbar-thumb {
+  background: rgb(161 161 170 / 0.45);
+}
+
+.dark .panes-tab-strip:hover,
+.dark .panes-tab-strip:focus-within {
+  scrollbar-color: rgb(82 82 91 / 0.6) transparent;
+}
+
+.dark .panes-tab-strip:hover::-webkit-scrollbar-thumb,
+.dark .panes-tab-strip:focus-within::-webkit-scrollbar-thumb {
+  background: rgb(82 82 91 / 0.6);
+}
+
+@utility ellipsis {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+@utility app-cols {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-shell);
+  @apply lg:flex-row lg:items-stretch;
+}
+
+/* Structured workspaces keep the sidebar full-height while a bottom drawer
+   spans the main and any contextual detail panels. The empty sidebar track
+   collapses naturally for workspaces without navigation. */
+.app-workspace:has(> .workspace-content) {
+  display: grid;
+  grid-template-areas:
+    "mobile"
+    "content"
+    "drawer";
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0;
+}
+
+.app-workspace:has(> .workspace-content) > .workspace-sidebar-mobile {
+  grid-area: mobile;
+}
+
+.app-workspace:has(> .workspace-content) > .workspace-content {
+  grid-area: content;
+}
+
+.app-workspace:has(> .workspace-content) > .workspace-bottom-drawer {
+  grid-area: drawer;
+}
+
+@media (min-width: 1024px) {
+  .app-workspace:has(> .workspace-content) {
+    grid-template-areas:
+      "sidebar content"
+      "sidebar drawer";
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
+  .app-workspace:has(> .workspace-content) > .workspace-sidebar {
+    grid-area: sidebar;
+  }
+}
+
+@utility app-rows {
+  @apply flex flex-col gap-3;
+}
+
+.prose {
+  @apply text-zinc-900 dark:text-zinc-100;
+
+  h1 {
+    @apply text-3xl font-bold mb-4 mt-8 first:mt-0 text-zinc-900 dark:text-zinc-100;
+  }
+
+  h2 {
+    @apply text-2xl font-bold mb-3 mt-6 text-zinc-900 dark:text-zinc-100;
+  }
+
+  h3 {
+    @apply text-xl font-semibold mb-2 mt-4 text-zinc-900 dark:text-zinc-100;
+  }
+
+  p {
+    @apply mb-4 leading-7;
+  }
+
+  ul,
+  ol {
+    @apply mb-4 ml-6 space-y-2;
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  li {
+    @apply leading-7;
+  }
+
+  a {
+    @apply text-blue-600 hover:text-blue-700 underline dark:text-blue-400 dark:hover:text-blue-300;
+  }
+
+  strong {
+    @apply font-semibold text-zinc-900 dark:text-zinc-100;
+  }
+
+  hr {
+    @apply my-8 border-zinc-200 dark:border-zinc-800;
+  }
+}
+
+.ai-message-list-container {
+  container: ai-message-list / inline-size;
+}
+
+.ai-turn-navigator-shell {
+  display: none;
+}
+
+@container ai-message-list (min-width: 68rem) {
+  .ai-turn-navigator-shell {
+    display: block;
+  }
+}
+
+/* Shared shell frame and overview composition. */
+@media (min-width: 768px) {
+  .cloud-app-canvas .layout-header {
+    padding: 0.375rem 0.75rem 0.375rem 1.125rem;
+    border-color: transparent;
+    border-radius: var(--ui-radius-surface);
+    box-shadow: var(--ui-shadow-frame) !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .workspace-detail {
+    flex: none;
+  }
+}
+
+.app-workspace {
+  gap: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--ui-radius-frame);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-shadow-frame);
+}
+
+.app-workspace > .workspace-sidebar {
+  overflow: hidden;
+  background: var(--ui-surface-subtle);
+}
+
+.app-workspace > .workspace-sidebar[data-workspace-resizable="true"] {
+  width: var(--workspace-sidebar-width, 13rem);
+}
+
+.workspace-sidebar-surface {
+  gap: var(--ui-space-section);
+  padding: 0.625rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.app-workspace > .workspace-main,
+.app-workspace > :is(solid-island, solid-client) > .workspace-main,
+.app-workspace > .workspace-content > .workspace-main,
+.app-workspace > .workspace-content > :is(solid-island, solid-client) > .workspace-main {
+  position: relative;
+  z-index: 1;
+  border: 0;
+  border-radius: 0;
+  background: var(--ui-surface);
+  box-shadow: var(--ui-shadow-workspace-edge);
+  transition: box-shadow 150ms ease-out;
+}
+
+.app-workspace > .workspace-detail,
+.app-workspace > :is(solid-island, solid-client) > .workspace-detail,
+.app-workspace > .workspace-content > .workspace-detail,
+.app-workspace > .workspace-content > :is(solid-island, solid-client) > .workspace-detail,
+.app-workspace > .workspace-bottom-drawer {
+  gap: var(--ui-space-section);
+  padding: var(--ui-space-section);
+  border: 0;
+  border-radius: 0;
+  background: var(--ui-surface-subtle);
+  box-shadow: none;
+}
+
+.app-overview {
+  padding: var(--ui-space-section);
+}
+
+.app-overview-header {
+  margin-bottom: 1rem;
+}
+
+.app-overview-identity {
+  gap: 0.625rem;
+}
+
+.app-overview-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ui-radius-control);
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 9%, var(--ui-surface)) !important;
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 80%, black) !important;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 16%, transparent);
+}
+
+.app-overview-icon > i {
+  color: inherit !important;
+}
+
+.dark .app-overview-icon {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white) !important;
+}
+
+.app-overview-title {
+  font-size: 1.125rem;
+  letter-spacing: -0.015em;
+}
+
+.app-overview-subtitle {
+  font-size: 0.8125rem;
+}
+
+.app-overview-columns {
+  gap: var(--ui-space-section);
+}
+
+.app-overview-panel-header {
+  gap: var(--ui-space-section);
+  margin-bottom: var(--ui-space-section);
+}
+
+.app-overview-toolbar {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Settings, panes, and widgets are composed surfaces, not nested papers. */
+.settings-modal {
+  background: var(--ui-surface);
+  box-shadow: var(--ui-shadow-float);
+}
+
+.settings-modal-rail {
+  background: var(--ui-surface-subtle);
+}
+
+.settings-modal-main {
+  background: var(--ui-surface);
+}
+
+.stat-grid {
+  box-shadow: none;
+}
+
+.stat-grid-header {
+  border-color: var(--ui-divider);
+  background: var(--ui-surface-subtle);
+}
+
+.stat-grid-body {
+  background: var(--ui-divider);
+}
+
+.stat-cell {
+  background: var(--ui-surface);
+}
+
+.panes-tab {
+  border-color: transparent !important;
+  border-radius: calc(var(--ui-radius-control) - 0.125rem);
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.panes-tab:hover {
+  color: var(--color-zinc-900);
+  background: var(--ui-hover) !important;
+}
+
+.dark .panes-tab:hover {
+  color: var(--color-zinc-100);
+}
+
+.panes-tab-active {
+  color: var(--color-zinc-950) !important;
+  background: var(--ui-surface-raised) !important;
+  box-shadow: inset 0 0 0 1px var(--ui-border) !important;
+}
+
+.dark .panes-tab-active {
+  color: var(--color-zinc-50) !important;
+}
+
+.panes-tab [data-panes-drag-handle]:hover {
+  color: var(--color-zinc-600);
+}
+
+.calendar-surface {
+  box-shadow: none;
+}
+
+.calendar-navigation-progress {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 3px;
+  overflow: hidden;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--color-blue-500) 16%, transparent);
+}
+
+.calendar-navigation-progress::after {
+  display: block;
+  width: 36%;
+  height: 100%;
+  content: "";
+  border-radius: 999px;
+  background: var(--color-blue-500);
+  animation: calendar-navigation-progress 700ms ease-in-out infinite;
+}
+
+@keyframes calendar-navigation-progress {
+  from {
+    transform: translateX(-110%);
+  }
+
+  to {
+    transform: translateX(310%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .calendar-navigation-progress::after {
+    width: 100%;
+    animation: none;
+  }
+}
+
+.link-card,
+.widget-surface {
+  border-color: var(--ui-border);
+  background: var(--ui-surface);
+  box-shadow: none;
+}
+
+.link-card:hover {
+  background: var(--ui-hover);
+}
+
+.link-card-icon {
+  background: var(--ui-surface-muted) !important;
+}
+
+.widget-card {
+  border-color: var(--ui-border);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface);
+  box-shadow: none;
+}
+
+.widget-icon {
+  background: var(--ui-surface-muted) !important;
+  color: var(--color-zinc-600) !important;
+}
+
+.dark .widget-icon {
+  color: var(--color-zinc-300) !important;
+}
+
+/* Panel-dialog owns all floating dialog geometry. */
+:is(.popup, .dialog-panel) {
+  border-color: var(--ui-border-strong) !important;
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface-raised);
+  box-shadow: var(--ui-shadow-float);
+}
+
+.panel-dialog-shell {
+  box-shadow: var(--ui-shadow-float);
+}
+
+.floating-window {
+  border: 1px solid color-mix(in srgb, var(--app-accent, var(--ui-border-strong)) 28%, var(--ui-border-strong));
+  border-radius: var(--ui-dialog-radius);
+  box-shadow: var(--ui-shadow-float);
+}
+
+.dark .floating-window {
+  border-color: color-mix(in srgb, var(--app-accent, var(--ui-border-strong)) 34%, var(--ui-border-strong));
+}
+
+.panel-dialog-layout[data-surface="floating"] {
+  gap: 0;
+  border: 1px solid var(--ui-dialog-border);
+  border-radius: var(--ui-dialog-radius);
+  background: var(--ui-dialog-surface);
+}
+
+.panel-dialog-layout[data-surface="floating"] > .panel-dialog-header {
+  border: 0;
+  border-radius: 0;
+  background: var(--ui-surface-subtle);
+  box-shadow: none;
+}
+
+.panel-dialog-layout[data-surface="floating"] > .panel-dialog-footer {
+  border: 0;
+  border-radius: 0;
+  background: var(--ui-surface-subtle);
+  box-shadow: none;
+}
+
+.panel-dialog-shell > .panel-dialog-header {
+  min-height: 3.25rem;
+  padding-inline: 1rem;
+  background: var(--ui-surface-subtle);
+}
+
+.panel-dialog-shell > .panel-dialog-footer {
+  padding: 0.75rem 1rem;
+  background: var(--ui-surface-subtle);
+}
+
+.panel-dialog-body {
+  gap: var(--ui-space-shell);
+  padding: 0.75rem 1rem;
+}
+
+.panel-dialog-section {
+  padding: 0.75rem;
+  border-color: transparent;
+  background: var(--ui-dialog-section);
+  box-shadow: none;
+}
+
+.settings-save-bar {
+  background: var(--ui-surface-raised);
+  box-shadow: 0 -10px 20px -18px rgb(24 24 27 / 0.28);
+}
+
+.dark .settings-save-bar {
+  box-shadow: 0 -10px 20px -18px rgb(0 0 0 / 0.58);
+}
+
+.panel-dialog-tabs {
+  gap: 0.125rem;
+  background: transparent;
+}
+
+.panel-dialog-tabs > button {
+  color: var(--color-zinc-600);
+  background: transparent;
+}
+
+.dark .panel-dialog-tabs > button {
+  color: var(--color-zinc-400);
+}
+
+.panel-dialog-tabs > button:not([aria-pressed="true"]):hover {
+  color: var(--color-zinc-900);
+  background: var(--ui-hover);
+}
+
+.dark .panel-dialog-tabs > button:not([aria-pressed="true"]):hover {
+  color: var(--color-zinc-100);
+}
+
+.panel-dialog-tabs > button[aria-pressed="true"] {
+  color: var(--color-zinc-950);
+  background: transparent;
+  font-weight: 600;
+}
+
+.dark .panel-dialog-tabs > button[aria-pressed="true"] {
+  color: var(--color-zinc-50);
+}