@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/styles/theme/identity/titles-and-buttons.css

@@ -0,0 +1,120 @@
+/* Identity layer, part 2: titles and buttons. */
+
+/* titles: sans, weight 500, not muted */
+h1 em,
+h2 em {
+  font-style: normal;
+  color: inherit;
+}
+.header {
+  align-items: center;
+  margin-bottom: 20px;
+}
+.header h1 {
+  font-size: 24px;
+}
+.video-title h1 {
+  font: 500 24px / 30px var(--sans);
+}
+.result-top h2,
+.drawer h2,
+.compare > header h2 {
+  font-family: var(--sans);
+  font-weight: 500;
+}
+.result-top h2 {
+  font-size: 20px;
+  line-height: 28px;
+}
+.vr-title {
+  font: 550 16px / 24px var(--sans);
+  letter-spacing: 0;
+}
+.intro {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--text-2);
+}
+.category-header h2 {
+  font: 500 20px / 28px var(--sans);
+  letter-spacing: 0;
+}
+.cal-nav .cal-title {
+  font: 500 20px / 28px var(--sans);
+}
+.settings-group-name,
+.sound-side h4,
+.sound-library h4 {
+  font: 500 12px / 16px var(--sans);
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-2);
+}
+.settings-group a {
+  height: 32px;
+  padding: 0 8px;
+  border-radius: var(--el-radius-nav);
+}
+.settings-group a.active {
+  background: var(--el-nav-active-bg);
+  color: var(--el-nav-active-text);
+  box-shadow: none;
+}
+
+/* buttons: 42 px (38 small; 44 large, "Criar vídeo"), radius 10, weight 500, icon on the left; primary black, secondary with a 10 % outline */
+.button,
+.drawer-button,
+.compare-button,
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 16px;
+  border-radius: var(--el-radius-nav);
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--text);
+  font: 500 14px / 20px var(--sans);
+  white-space: nowrap;
+}
+.button:not(:disabled):hover,
+.drawer-button:hover,
+.compare-button:hover,
+.close:hover {
+  background: var(--el-muted);
+  border-color: var(--border-strong);
+}
+.button.primary,
+.button.approve {
+  background: var(--action);
+  border-color: transparent;
+  color: var(--action-text);
+}
+.button.primary:not(:disabled):hover,
+.button.approve:not(:disabled):hover {
+  background: var(--action-hover);
+  border-color: transparent;
+  filter: none;
+}
+.button.small {
+  min-height: 38px;
+  padding: 0 14px;
+  gap: 6px;
+  border-radius: var(--el-radius-lg);
+  font-size: 13px;
+}
+.button:disabled {
+  opacity: 0.4;
+}
+.drawer-button,
+.compare-button {
+  min-height: 38px;
+  border-radius: var(--el-radius-nav);
+  font-size: 13px;
+}
+.mini-button {
+  border-radius: var(--el-radius-lg);
+  border-color: var(--border-strong);
+}

package/studio/web/styles/theme/no-borders/blocks.css

@@ -0,0 +1,208 @@
+/* No-borders layer, part 1: blocks, alpha stacking, hover, states, choice rings, color strips. */
+
+/* --- no borders -------------------------------------------------------------------------
+   Last, like the identity above: no piece has an outline. What was page background
+   (or surface) with a border becomes --muted, black 4.3 % alpha; being alpha,
+   muted inside muted darkens one step by itself (button in card, card in panel).
+   A state that was a border color becomes a tinted background; a choice becomes a ring (box-shadow).
+   Kept: focus and choice rings, the state and role color strips, the grid lines
+   of the timelines and the schedule, the spinner, the drag guides and the secondary button,
+   which is outlined. Floating pieces
+   (modal, drawer, popover) lose the border and keep background and shadow. */
+
+/* blocks: no border, on the background (--block-bg) over the content, which is muted */
+.video-row,
+.panel,
+.result,
+.process,
+.claude,
+.form,
+.reference-card,
+.texts,
+.sound-scroll,
+.sound-panel,
+.sound-library,
+.platform-card,
+.provider-card,
+.cal-day-scroll,
+.clone-bar,
+.clone-samples li,
+.clone-frame,
+.vr-plat,
+.signal,
+.log,
+.markdown pre,
+.compared-text,
+.takes li,
+.claude-option,
+.position-list,
+.matrix,
+.scene-card,
+.video-card,
+.scene-row,
+.image,
+.version,
+.reference-choice,
+.voice-profile,
+.provider,
+.approval-top,
+.swap-reference-top,
+.caption-canvas,
+.sound-wave,
+.provider-option,
+.sound-no-selection,
+.markdown blockquote {
+  border: 0;
+  background: var(--block-bg);
+}
+.markdown blockquote {
+  border-radius: var(--radius-sm);
+  padding: 8px 14px;
+}
+.video-row.archived {
+  background: var(--block-bg);
+}
+.reference-choice.more,
+.voice-profile.more {
+  background: var(--block-bg);
+}
+.signal.live {
+  background: none;
+}
+.vr-plat.draft {
+  background: none;
+}
+.avatar-more.large,
+.thumbnail-img,
+.version-thumb,
+.publish-cover img,
+.avatar-group .provider-logo,
+.sample-color i,
+.sound-line.unset {
+  border: 0;
+}
+.sound-line.unset {
+  background: var(--block-bg);
+}
+
+/* what was already solid muted and now lives inside a muted block: alpha, to stack */
+code,
+.markdown th,
+.badge,
+.tab-count,
+.segmented button.active .tab-count,
+.process-status,
+.claude-line,
+.narration-line,
+.wait-list li,
+.schedule-list li,
+.tl-lane,
+.sound-scene,
+.vr-cover span,
+.reference-card-cover,
+.frames img {
+  background: var(--muted);
+}
+.markdown td {
+  border: 0;
+}
+.markdown th {
+  border: 0;
+}
+.markdown tr:nth-child(even) td {
+  background: var(--muted);
+}
+
+/* hover: one step up, in place of the border that darkened */
+a.signal:hover,
+.image:hover,
+.reference-choice:hover,
+.voice-profile:hover,
+a.vr-plat:hover,
+.platform-card:hover:not(.blocked),
+.provider-option:hover,
+.provider.open,
+.panel-toggle:hover,
+.position-list li:hover,
+.settings-group a:hover {
+  background: var(--muted-hover);
+}
+.position-list li {
+  border: 0;
+}
+.position-list li.checked {
+  background: var(--muted-hover);
+}
+
+/* states: what was border color becomes a tinted background */
+.video-row.needs-attention,
+.claude.stopped,
+.approve-scene.change_requested {
+  background: var(--warning-bg);
+}
+.video-row.active,
+.claude.running {
+  background: var(--running-bg);
+}
+.claude.error,
+.claude.interrupted {
+  background: var(--error-bg);
+}
+.approve-scene.approved,
+.takes li.in-use {
+  background: var(--ok-bg);
+}
+.approval-notice,
+.task.running {
+  border: 0;
+}
+.voices-notice {
+  border: 0;
+  background: var(--warning-bg);
+}
+
+/* choice: 2 px ring instead of border + 1 px ring */
+.reference-choice.chosen,
+.voice-profile.chosen {
+  box-shadow: 0 0 0 2px var(--action);
+}
+.platform-card.checked {
+  box-shadow: inset 0 0 0 2px var(--action);
+}
+.provider-card.checked {
+  box-shadow: 0 0 0 2px var(--text);
+}
+.claude-option.chosen {
+  background: var(--muted-hover);
+  box-shadow: 0 0 0 2px var(--action);
+}
+
+/* color strips: only the side that tells the state or the role */
+.scheduled-post {
+  border: 0;
+  background: rgb(52 211 153 / 0.3);
+}
+.scheduled-post.failed,
+.scheduled-post.missed {
+  background: var(--warning-bg);
+}
+.cal-card {
+  border: 0;
+  border-left: 3px solid var(--running);
+  background: var(--block-bg);
+}
+.cal-card:hover {
+  background: var(--muted-hover);
+}
+.cal-event {
+  border: 0;
+  border-left: 3px solid var(--running);
+}
+.sound-item {
+  border: 0;
+  border-top: 3px solid var(--role-color);
+  background: var(--block-bg);
+}
+.sound-item:hover {
+  background: var(--muted-hover);
+}

package/studio/web/styles/theme/no-borders/controls.css

@@ -0,0 +1,256 @@
+/* No-borders layer, part 2: separators, floating pieces, controls, buttons, fields, stepper, timeline, schedule, selects. */
+
+/* separators between sections: the line goes, the space stays */
+.menu,
+.settings-sidebar,
+.rail,
+.process-panel,
+.drawer > header,
+.tabs,
+.facts,
+.verdict,
+.publish,
+.voice-picker,
+.setting,
+.setting-bar,
+.usage-choices,
+.position-section,
+.thumbnail,
+.thumbnail-manual,
+.provider-detail,
+.provider-advanced,
+.voice-editor-footer,
+.done-list > li + li,
+.table th,
+.table td {
+  border: 0;
+}
+.menu {
+  background: var(--bg);
+}
+.settings-sidebar {
+  background: none;
+}
+
+/* floating pieces: no border, with the usual background and shadow */
+.drawer,
+.compare,
+.modal,
+.cal-modal,
+.cal-pop,
+.floating-bar,
+.panel-tab {
+  border: 0;
+}
+
+/* controls: muted, hover one step up */
+.close,
+.mini-button,
+a.back,
+.matrix button,
+.carousel-arrow,
+.sound-listen,
+.sound-float-button,
+.sound-float-info,
+.voice-profile-listen {
+  border: 0;
+  background: var(--muted);
+}
+.close:hover,
+a.back:hover,
+.carousel-arrow:not(:disabled):hover,
+.sound-listen:hover,
+.voice-profile-listen:not(:disabled):hover {
+  background: var(--muted-hover);
+}
+/* secondary button: outline, no background (the "Configurar" of Voice providers); primary, approve
+   and danger change the background in their own, more specific rules */
+.button,
+.drawer-button,
+.compare-button {
+  border: 1px solid var(--border-strong);
+  background: transparent;
+}
+.button:not(:disabled):hover,
+.drawer-button:hover,
+.compare-button:hover {
+  border-color: var(--text-3);
+  background: transparent;
+}
+.matrix button.active {
+  background: var(--text);
+}
+.matrix button.active.inherited {
+  background: var(--surface-3);
+}
+.voice-profile-listen.active:not(:disabled) {
+  background: var(--text);
+}
+.lightbox figcaption button {
+  border: 0;
+  background: rgb(255 255 255 / 0.12);
+}
+.tabs button,
+.segmented button {
+  border: 0;
+}
+.tabs button.active,
+.segmented button.active {
+  background: var(--muted);
+}
+.provider-card-mark,
+.platform-card-check {
+  border: 0;
+  background: var(--muted-hover);
+}
+.provider-card.checked .provider-card-mark {
+  background: var(--text);
+}
+.platform-card.checked .platform-card-check {
+  background: var(--action);
+}
+.platform-card.checked:hover:not(.blocked) {
+  background: var(--muted);
+}
+/* already published: locked, very light emerald background and the check in emerald */
+.platform-card.published {
+  background: color-mix(in srgb, var(--emerald) 9%, var(--surface));
+  border-color: color-mix(in srgb, var(--emerald) 35%, transparent);
+  box-shadow: none;
+}
+.platform-card.published .platform-card-choice {
+  cursor: default;
+}
+.platform-card.published .platform-card-check {
+  background: color-mix(in srgb, var(--emerald) 18%, transparent);
+  border: 1px solid var(--emerald);
+  color: var(--emerald);
+}
+
+/* fields */
+textarea,
+input,
+select,
+.sound-field input[type="number"],
+.sound-field select,
+.sound-library input[type="search"],
+.thumbnail-manual textarea,
+.thumbnail-change textarea,
+.axis input[type="color"] {
+  border: 0;
+  background: var(--muted);
+}
+
+/* stepper: the mark is a filled disc; the state paints the disc instead of the outline */
+.stepper .step .step-mark {
+  border: 0;
+}
+.step-mark {
+  background: var(--surface-3);
+}
+.step.na .step-mark {
+  background: var(--surface-2);
+}
+.step.running .step-mark,
+.step.redoing .step-mark,
+.step.scheduled .step-mark {
+  background: color-mix(in srgb, var(--running) 18%, var(--bg));
+}
+.step.queued .step-mark {
+  background: color-mix(in srgb, var(--running) 10%, var(--bg));
+}
+.step.rejected .step-mark,
+.step.warning .step-mark,
+.step.next .step-mark {
+  background: color-mix(in srgb, var(--warning) 18%, var(--bg));
+}
+.process-status.queued .process-mark {
+  border: 0;
+  background: color-mix(in srgb, var(--running) 35%, transparent);
+}
+.process-status.next .process-mark {
+  border: 0;
+  background: color-mix(in srgb, var(--warning) 35%, transparent);
+}
+
+/* sound timeline: the clip is the role color, no outline; the empty marker is a dimmed diamond */
+.sound-effect {
+  border: 0;
+  background: color-mix(in srgb, var(--role-color) 30%, var(--surface));
+}
+.sound-marker {
+  border: 0;
+  background: color-mix(in srgb, var(--text-3) 40%, transparent);
+}
+.sound-marker.has-sound {
+  background: var(--text-2);
+}
+.sound-marker:hover {
+  background: var(--action);
+}
+
+/* schedule: the grid stops being lines and becomes muted cells separated by space */
+.cal-month,
+.cal-week {
+  border: 0;
+  background: none;
+  gap: 4px;
+}
+.cal-day-header {
+  background: none;
+}
+.cal-column {
+  background: var(--muted);
+  border-radius: var(--radius-sm);
+}
+/* month: the month's day is the app background; an outside day (neighbor month) is the accent */
+.cal-day {
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+}
+.cal-day.outside {
+  background: var(--el-accent);
+}
+.cal-day:not(.outside):not(.target):hover {
+  background: var(--muted-hover);
+}
+.cal-column-header {
+  border: 0;
+  background: none;
+}
+.cal-day.target,
+.cal-column.target {
+  background: var(--ok-bg);
+}
+
+/* the select of the voice pills (language and microphone): rounded trigger */
+.ui-select-trigger.clone-language {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 12px;
+  border-radius: 9999px;
+  font: 500 14px / 20px var(--sans);
+}
+.ui-select-trigger.clone-device {
+  flex: 1 1 100%;
+}
+.check-toggle > .ui-checkbox {
+  margin-top: 1px;
+}
+.toggle-switch .ui-switch {
+  margin: 0;
+}
+/* borderless fields, like the inputs ("fields" rule above) */
+.ui-select-trigger {
+  border-color: transparent;
+  background: var(--muted);
+}
+.ui-select-trigger:hover:not(:disabled) {
+  border-color: transparent;
+  background: var(--el-muted, var(--muted));
+}
+.ui-select-trigger:focus-visible,
+.ui-select-trigger[data-state="open"] {
+  border-color: var(--text);
+}