@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/styles/theme/identity/details.css

@@ -0,0 +1,204 @@
+/* Identity layer, part 4: choices, icons, native controls, voice paths, provider logos, back links. */
+
+/* choices */
+.reference-choice.chosen,
+.voice-profile.chosen {
+  border-color: var(--action);
+  box-shadow: 0 0 0 1px var(--action);
+}
+.choice-mark {
+  background: var(--action);
+  color: var(--action-text);
+}
+.choice-mark svg,
+.choice-play svg {
+  width: 14px;
+  height: 14px;
+}
+.videos-page {
+  grid-template-columns: minmax(0, 1fr) 360px;
+}
+@media (max-width: 1180px) {
+  .videos-page {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Phosphor icons in text: line-sized, aligned */
+.ic {
+  display: inline-block;
+  width: 1.15em;
+  height: 1.15em;
+  flex: none;
+  vertical-align: -0.2em;
+}
+.icon svg {
+  width: 14px;
+  height: 14px;
+  vertical-align: -2px;
+}
+
+/* group labels and native controls */
+.models-table tr.group td {
+  font: 500 12px / 16px var(--sans);
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-2);
+}
+.sub-controls,
+.usage-notices h3 {
+  letter-spacing: 0;
+  text-transform: none;
+  font: 500 12px / 16px var(--sans);
+  color: var(--text-2);
+}
+input[type="radio"],
+input[type="checkbox"],
+progress {
+  accent-color: var(--action);
+}
+
+/* Add voice: the two ways to start, like ElevenLabs' Voice Creation screen */
+.voice-paths {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.provider-option.path {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  padding: 14px;
+  text-align: left;
+  border-radius: var(--radius);
+}
+.provider-option.path > svg {
+  width: 24px;
+  height: 24px;
+  flex: none;
+  margin-top: 1px;
+}
+.provider-option.path > span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.provider-option.path b {
+  font: 500 14px / 20px var(--sans);
+}
+.provider-option.path small {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-2);
+}
+.back-path {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* the script only turns sharp with the language chosen and the microphone allowed */
+.clone-script {
+  transition: filter 0.25s;
+}
+.clone-script.blurred {
+  filter: blur(7px);
+  user-select: none;
+  pointer-events: none;
+}
+
+/* the microphone picker takes the first row of the bar */
+.clone-bar {
+  flex-wrap: wrap;
+}
+.clone-device {
+  flex: 1 1 100%;
+}
+
+/* each voice provider's logo */
+.provider-logo {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  border-radius: var(--el-radius-lg);
+  background: var(--surface-3);
+  color: var(--text);
+  line-height: 1;
+}
+.provider-logo svg {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+.provider-option-top {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.provider-header .provider-logo {
+  margin-right: -2px;
+}
+.carousel-providers .provider-logo {
+  display: inline-grid;
+  vertical-align: middle;
+  margin-right: 5px;
+  border-radius: 5px;
+}
+.with-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.provider-name small {
+  max-width: 100%;
+}
+
+/* the marks are real files: without the old background square */
+img.provider-logo {
+  display: inline-block;
+  flex: none;
+  background: none;
+  border-radius: 22%;
+  object-fit: contain;
+  vertical-align: middle;
+}
+.carousel-providers img.provider-logo {
+  margin-right: 5px;
+  border-radius: 4px;
+}
+
+/* arrows and "+" that were text are now icons: centered */
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+/* the back-to-top link is an outlined button */
+a.back {
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  font-weight: 600;
+}
+a.back:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.carousel-arrow,
+.mini-button,
+.avatar-more {
+  display: inline-grid;
+  place-items: center;
+}
+.carousel-arrow {
+  line-height: 1;
+}
+a.subtle .ic,
+a.link .ic {
+  margin-left: 2px;
+}

package/studio/web/styles/theme/identity/shell.css

@@ -0,0 +1,249 @@
+/* Identity layer (ElevenLabs), part 1: main, menu, brand, collapsible menu. */
+
+/* --- OmniVideo identity (ElevenLabs) -------------------------------------------------
+   Last on purpose: adjusts the pieces above to the ElevenLabs design without
+   rewriting each one. Measures taken from the app: menu item 32 px, radius 10,
+   14/20 weight 500; button 36 px; chip and field 40 px, radius 12; border 7.5 % black;
+   black #0f0f10 as action; no shadow. */
+
+/* the content takes the full width next to the menu, below the top bar */
+main {
+  width: 100%;
+  max-width: none;
+  min-height: calc(var(--content-height) - var(--top-offset));
+  padding: 24px 32px 64px;
+}
+@media (max-width: 640px) {
+  main {
+    padding: 16px 16px 48px;
+  }
+}
+main.with-sidebar {
+  padding: 0;
+}
+.rail {
+  margin: 0 -32px;
+  padding: 4px 32px;
+}
+
+/* menu: 255 px, sidebar background, 32 px items */
+.menu {
+  width: var(--menu-width);
+  gap: 12px;
+  padding: 12px;
+  background: var(--el-sidebar-bg);
+  border-right: 1px solid var(--border);
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px;
+  font: 600 17px / 24px var(--sans);
+  letter-spacing: -0.02em;
+  text-transform: none;
+  color: var(--text);
+  margin-bottom: 16px;
+} /* keeps the logo away from "Vídeo novo": 32 px with the menu gap */
+/* the brand (BrandLogo.tsx): the icon is the blurred ring, no background (black in the light theme, white
+   in the dark); "Omni" in the app font. The image has a transparent margin, hence the short gap */
+.brand-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.brand-logo picture {
+  display: contents;
+}
+.brand-icon {
+  width: 30px;
+  height: 30px;
+  flex: none;
+  transition: opacity 0.18s ease;
+}
+.brand .brand-omni {
+  font: 700 22px / 1 var(--sans);
+  letter-spacing: -0.03em;
+  color: var(--text);
+}
+.menu nav {
+  gap: 6px;
+}
+.menu nav a {
+  height: 32px;
+  padding: 0 8px;
+  gap: 8px;
+  border-radius: var(--el-radius-nav);
+  font: 500 15px / 20px var(--sans);
+  color: var(--text-2);
+}
+.menu nav a svg {
+  width: 20px;
+  height: 20px;
+}
+.menu nav a:hover {
+  background: var(--el-muted);
+  color: var(--text);
+}
+.menu nav a.active {
+  background: var(--el-nav-active-bg);
+  color: var(--el-nav-active-text);
+}
+/* the "Criar vídeo" + inside the Videos row */
+.menu .menu-item-with-action {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.menu .menu-item-with-action > a {
+  padding-right: 36px;
+}
+.menu .menu-action {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px 0 6px;
+  font: 500 12px / 1 var(--sans);
+  border: 0;
+  border-radius: var(--el-radius-nav);
+  background: transparent;
+  color: var(--text-2);
+  cursor: pointer;
+}
+.menu .menu-action svg {
+  width: 12px;
+  height: 12px;
+}
+.menu .menu-action:hover,
+.menu .menu-action:focus-visible {
+  background: var(--surface-2);
+  color: var(--text);
+}
+@media (max-width: 900px) {
+  .menu {
+    width: auto;
+  }
+  .brand {
+    margin-bottom: 0;
+  }
+}
+
+/* collapsible menu (Sidebar.tsx): the button next to the brand; collapsed, only the icon strip remains
+   (the name shows in the title), and the space goes to the content */
+.app {
+  transition: grid-template-columns 0.18s ease;
+}
+.menu-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+.menu-top .brand {
+  margin-bottom: 0;
+  min-width: 0;
+}
+.menu-collapse {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--el-radius-nav);
+  background: transparent;
+  color: var(--text-3);
+  cursor: pointer;
+}
+.menu-collapse svg {
+  width: 20px;
+  height: 20px;
+}
+.menu-collapse:hover,
+.menu-collapse:focus-visible {
+  background: var(--el-muted);
+  color: var(--text);
+}
+@media (min-width: 901px) {
+  .app.menu-collapsed {
+    --menu-width: 64px;
+  }
+  .menu-collapsed .menu {
+    padding-left: 8px;
+    padding-right: 8px;
+    overflow-x: hidden;
+  }
+  .menu-collapsed .menu-top {
+    position: relative;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
+  }
+  /* collapsed, the expand button sits over the brand and appears (with a fade) when the pointer is on it */
+  .menu-collapsed .menu-collapse {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 32px;
+    height: 32px;
+    margin: -16px 0 0 -16px;
+    opacity: 0;
+    transition:
+      opacity 0.18s ease,
+      background 0.12s ease,
+      color 0.12s ease;
+  }
+  .menu-collapsed .menu-top:hover .menu-collapse,
+  .menu-collapsed .menu-collapse:focus-visible {
+    opacity: 1;
+  }
+  .menu-collapsed .menu-top:hover .brand-icon,
+  .menu-collapsed .menu-top:has(.menu-collapse:focus-visible) .brand-icon {
+    opacity: 0;
+  }
+  .menu-collapsed .brand {
+    padding: 0;
+  }
+  .menu-collapsed .brand-omni,
+  .menu-collapsed .menu-label,
+  .menu-collapsed .menu-action {
+    display: none;
+  }
+  .menu-collapsed .menu-group-name {
+    height: 1px;
+    padding: 0;
+    margin: 4px 10px 6px;
+    overflow: hidden;
+    color: transparent;
+    background: var(--border);
+  }
+  .menu-collapsed .menu nav a {
+    justify-content: center;
+    padding: 0;
+    position: relative;
+  }
+  .menu-collapsed .menu .menu-item-with-action > a {
+    padding-right: 0;
+  }
+  .menu-collapsed .menu-footer .tab-count {
+    position: absolute;
+    top: -2px;
+    right: 2px;
+    margin: 0;
+  }
+}
+@media (max-width: 900px) {
+  .menu-collapse {
+    display: none;
+  }
+}
+.signal {
+  border-radius: var(--el-radius-md);
+}

package/studio/web/styles/theme/identity/surfaces.css

@@ -0,0 +1,183 @@
+/* Identity layer, part 3: surfaces, fields, tabs, tables, stepper. */
+
+/* surfaces: block with a thin line, no shadow; the filled one is muted */
+.panel,
+.result,
+.process,
+.claude,
+.form,
+.video-row,
+.reference-card {
+  border-radius: var(--radius);
+  border-color: var(--border);
+}
+.process-status,
+.claude-line,
+.narration-line,
+.scene-row,
+.scene-card,
+.wait-list li,
+.version,
+.reference-choice,
+.voice-profile {
+  background: var(--surface-2);
+}
+.badge {
+  padding: 1px 8px;
+  border-radius: var(--el-radius-md);
+  font: 500 12px / 16px var(--sans);
+  background: var(--surface-2);
+  color: var(--text-2);
+}
+.badge.ok {
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+.badge.warning {
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+.badge.error {
+  background: var(--error-bg);
+  color: var(--error);
+}
+.badge.running {
+  background: var(--running-bg);
+  color: var(--running);
+}
+code,
+.log,
+.command,
+.code,
+.mono {
+  font-family: var(--mono);
+}
+.log {
+  background: var(--log-bg);
+}
+
+/* fields: 36 px (40 in search), radius 12, focus with black outline */
+textarea,
+input,
+select {
+  border-color: var(--border-strong);
+  background: var(--bg);
+  border-radius: var(--el-radius-control);
+  font-family: var(--sans);
+}
+input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
+select {
+  min-height: 36px;
+}
+textarea:focus,
+input:focus,
+select:focus {
+  outline: 0;
+  border-color: var(--text);
+  box-shadow: 0 0 0 1px var(--text);
+}
+::placeholder {
+  color: var(--text-3);
+}
+.field > span {
+  font: 500 13px / 20px var(--sans);
+  color: var(--text);
+}
+.field small,
+.setting-label small {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+/* tabs and segmented: the list in muted, the active tab in accent (like shadcn Tabs) */
+.tabs button,
+.segmented button {
+  border: 1px solid transparent;
+  border-radius: var(--el-radius-nav);
+  font: 500 14px / 20px var(--sans);
+  color: var(--text-2);
+}
+.tabs button {
+  padding: 4px 10px;
+}
+.tabs button:hover,
+.segmented button:not(:disabled):hover {
+  color: var(--text);
+}
+.tabs button.active,
+.segmented button.active {
+  background: var(--el-accent);
+  border-color: transparent;
+  color: var(--text);
+  box-shadow: none;
+}
+.tabs {
+  background: var(--el-muted);
+}
+.segmented {
+  border: 0;
+  background: var(--el-muted);
+  padding: 3px;
+  gap: 2px;
+  border-radius: calc(var(--el-radius-nav) + 3px);
+}
+.segmented button {
+  padding: 4px 10px;
+}
+.segmented button svg {
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
+.segmented.small button svg {
+  width: 14px;
+  height: 14px;
+}
+.segmented.small button {
+  padding: 2px 8px;
+  font-size: 13px;
+}
+.tab-count {
+  border-radius: var(--el-radius-md);
+  background: var(--surface-2);
+  font-size: 12px;
+}
+.segmented button.active .tab-count {
+  background: var(--surface-2);
+}
+
+/* tables: 12/16 header in secondary, 36 px rows */
+.table {
+  font-size: 14px;
+}
+.table th {
+  font: 400 12px / 16px var(--sans);
+  color: var(--text-2);
+}
+.table td,
+.table th {
+  border-bottom-color: var(--border);
+}
+
+/* stepper: done in green, the mark with the page background */
+.step.done .step-mark {
+  color: var(--action-text);
+}
+.step-mark {
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.step.chosen .step-mark {
+  transform: scale(1.2);
+  box-shadow:
+    0 0 0 2px var(--bg),
+    0 0 0 4px var(--action);
+}
+.step.user .step-mark {
+  color: #fff;
+}
+.step-mark svg {
+  width: 14px;
+  height: 14px;
+}