@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/styles/pages/getting-started.css

@@ -0,0 +1,166 @@
+/* GettingStartedPage (.onboarding). */
+
+/* --- getting started (/getting-started): the guide in steps, with the machine check ------------ */
+.onboarding {
+  max-width: 920px;
+}
+.onboarding .markdown {
+  padding: 0;
+}
+.onboarding .markdown img {
+  display: block;
+  max-width: 100%;
+  margin: 12px 0;
+  border-radius: var(--radius);
+  box-shadow: 0 6px 24px rgb(0 0 0 / 0.12);
+}
+.onboarding .markdown pre {
+  margin: 10px 0;
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  background: var(--muted);
+  overflow-x: auto;
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.onboarding .markdown code {
+  font-family: var(--mono);
+  font-size: 0.92em;
+}
+.onboarding .markdown :not(pre) > code {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--muted);
+}
+.onboarding .markdown ul,
+.onboarding .markdown ol {
+  padding-left: 20px;
+}
+.onboarding .markdown li {
+  margin: 3px 0;
+}
+.onboarding-progress {
+  height: 6px;
+  margin: 2px 0 16px;
+  border-radius: 999px;
+  background: var(--muted);
+  overflow: hidden;
+}
+.onboarding-progress i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--ok);
+  transition: width 0.3s;
+}
+.onboarding-ready {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 14px 0;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  background: var(--ok-bg);
+  font-size: 14px;
+}
+.onboarding-ready > .ic {
+  color: var(--ok);
+  font-size: 18px;
+}
+.onboarding-ready > span {
+  flex: 1 1 auto;
+}
+.onboarding-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+.onboarding-step {
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+.onboarding-step .ui-accordion-trigger {
+  flex: 1 1 auto;
+  gap: 12px;
+  padding: 14px 16px;
+  font-size: 15px;
+  color: var(--text);
+}
+.onboarding-step .ui-accordion-content > div {
+  padding: 0 16px 16px 56px;
+}
+.onboarding-mark {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--muted);
+  color: var(--text-2);
+  font: 600 13px / 1 var(--sans);
+}
+.onboarding-mark.ok {
+  background: var(--ok);
+  color: #fff;
+}
+.onboarding-mark.missing {
+  background: var(--text);
+  color: var(--bg);
+}
+.onboarding-title {
+  flex: 1 1 auto;
+  text-align: left;
+  font-weight: 600;
+}
+.onboarding-items {
+  list-style: none;
+  margin: 0 0 12px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+}
+.onboarding-items li {
+  display: grid;
+  grid-template-columns: 20px auto 1fr;
+  align-items: baseline;
+  gap: 8px;
+}
+.onboarding-items li .subtle {
+  overflow-wrap: anywhere;
+}
+.onboarding-item-mark {
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  font: 700 11px / 1 var(--sans);
+  background: var(--muted);
+  color: var(--text-2);
+  align-self: center;
+}
+.onboarding-items li.ok .onboarding-item-mark {
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+.onboarding-items li.missing .onboarding-item-mark {
+  background: var(--error);
+  color: #fff;
+}
+.onboarding-items li.warning .onboarding-item-mark {
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+.onboarding-actions {
+  margin: 0 0 8px;
+  flex-wrap: wrap;
+}
+@media (max-width: 760px) {
+  .onboarding-step .ui-accordion-content > div {
+    padding-left: 16px;
+  }
+}

package/studio/web/styles/pages/new-video/form.css

@@ -0,0 +1,32 @@
+/* New video form (.new .form, floating bar) and the page .intro; also .queue-page. */
+
+.queue-page {
+  max-width: none;
+}
+.new .form {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  gap: 20px;
+}
+/* create and cancel stay visible at the window footer while the form scrolls */
+.floating-bar {
+  position: sticky;
+  bottom: 16px;
+  z-index: 40;
+  align-self: flex-end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
+}
+.intro {
+  color: var(--text-2);
+  margin: -4px 0 20px;
+  max-width: 75ch;
+}

package/studio/web/styles/pages/not-found.css

@@ -0,0 +1,59 @@
+/* NotFound.tsx and NotFoundPage. */
+
+/* --- 404: centered 706 px column, number at weight 300 like the landing H1, 40 px buttons -- */
+.not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: calc(var(--content-height) - var(--top-offset) - 88px);
+  max-width: var(--el-column);
+  margin: 0 auto;
+  text-align: center;
+}
+.not-found-code {
+  font: 300 96px / 1 var(--sans);
+  letter-spacing: -0.04em;
+  color: var(--text-3);
+  font-variant-numeric: tabular-nums;
+}
+.not-found h1 {
+  font: 400 var(--el-text-hero) / 36px var(--sans);
+  letter-spacing: -0.21px;
+  color: var(--text);
+}
+.not-found-text {
+  margin: 0;
+  max-width: 46ch;
+  font-size: var(--el-text-ui);
+  line-height: 20px;
+  color: var(--text-2);
+}
+.not-found-path {
+  max-width: 100%;
+  padding: 6px 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--el-radius-control);
+  background: var(--muted);
+  font: 400 var(--el-text-small) / 20px var(--mono);
+  color: var(--text-2);
+  overflow-wrap: anywhere;
+}
+.not-found-actions {
+  justify-content: center;
+  margin-top: 12px;
+}
+.not-found-actions .button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: var(--el-radius-control);
+  font: 500 var(--el-text-ui) / 20px var(--sans);
+}
+.not-found-actions .button .ic {
+  width: 16px;
+  height: 16px;
+}

package/studio/web/styles/pages/references.css

@@ -0,0 +1,204 @@
+/* ReferencesPage and ReferencePage: new reference, essence, Palette.tsx, ranges, code. */
+
+/* --- references -------------------------------------------------------------------------- */
+.references {
+  display: flex;
+  flex-direction: column;
+}
+.references .header {
+  align-items: center;
+}
+.new-reference {
+  margin-bottom: 20px;
+}
+.new-reference.dragging {
+  outline: 2px dashed var(--text-3);
+  outline-offset: 4px;
+}
+/* the photos of a new visual style: thumbnails with their upload progress, and the add tile */
+.style-photos {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 8px;
+}
+.style-photos li {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  background: var(--muted);
+}
+.style-photos li.failed {
+  border-color: var(--error);
+  opacity: 0.6;
+}
+.style-photos img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.style-photos progress {
+  position: absolute;
+  inset: auto 6px 6px;
+  width: calc(100% - 12px);
+  height: 4px;
+}
+.style-photo-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.6);
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+}
+.style-photo-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-2);
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.style-photo-add:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.refs-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
+  gap: 12px;
+}
+.reference-card {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 14px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.reference-card-cover {
+  display: grid;
+  place-items: center;
+  height: 160px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: var(--surface-2);
+  color: var(--text-3);
+  font-size: 11px;
+}
+.reference-card-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.reference-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.essence {
+  margin: 0;
+  color: var(--text-2);
+  font-size: 13px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.essence.large {
+  font-size: 15px;
+  color: var(--text);
+  max-width: 80ch;
+  display: block;
+}
+
+.palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.sample-color i {
+  display: block;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  border: 1px solid var(--border-strong);
+}
+.palette.large {
+  gap: 10px;
+  margin-top: 8px;
+}
+.palette.large .sample-color {
+  display: grid;
+  grid-template-columns: 40px auto;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  align-items: center;
+  min-width: 170px;
+}
+.palette.large .sample-color i {
+  width: 40px;
+  height: 40px;
+  grid-row: 1 / 3;
+}
+.palette.large b {
+  font: 600 12px var(--mono);
+}
+.palette.large small {
+  font-size: 11.5px;
+  color: var(--text-3);
+}
+
+.reference {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.reference .panel h3:first-child {
+  margin-top: 0;
+}
+.range {
+  margin: 6px 0 0;
+  font: 14px / 1 var(--mono);
+  color: var(--running);
+  white-space: pre-wrap;
+  word-break: break-all;
+  letter-spacing: 1px;
+}
+.code {
+  margin: 0;
+  padding: 12px 16px;
+  font: 11.5px / 1.5 var(--mono);
+  color: var(--text-2);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 640px;
+  overflow: auto;
+}