@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/versions.css

@@ -0,0 +1,262 @@
+/* The Version history panel (VersionHistoryPanel), the right column's
+   occupant while it is open. Paper: "22 · Raylight parity", artboards
+   "5 · Version history" and "6 · Preview and restore". A head at the column
+   head's height, the save field, the scrolling list, and the preview footer
+   pinned under it. */
+.versions-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.versions-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--panel-head-h);
+  padding: 0 var(--space-6);
+  background: var(--surface-sunken);
+  border-bottom: 1px solid var(--line);
+}
+
+.versions-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--type-lg);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+}
+
+.versions-head > .btn {
+  flex: none;
+}
+
+.versions-caps {
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+/* ---- save a named version (Cmd+S lands here) ----------------------------- */
+.versions-save {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-7);
+  border-bottom: 1px solid var(--line);
+}
+
+.versions-save-field {
+  display: flex;
+  gap: var(--space-4);
+}
+
+.versions-save-field > .text-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.versions-save-field > .btn {
+  flex: none;
+}
+
+.versions-hint {
+  margin: 0;
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+/* ---- the list ------------------------------------------------------------ */
+.versions-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-4);
+}
+
+.versions-day {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.versions-day-head {
+  margin: 0;
+  padding: var(--space-6) var(--space-4) var(--space-2);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.versions-note {
+  margin: 0;
+  padding: var(--space-4);
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+/* A row: faces, title over who-and-when, the Named badge. The "…" sits over
+   the trailing lane and shows on hover or focus. */
+.version-item {
+  position: relative;
+}
+
+.version-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  width: 100%;
+  padding: var(--space-4);
+  border: 0;
+  border-radius: var(--radius-tab);
+  background: transparent;
+  color: var(--ink-2);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+.version-row:hover {
+  background: var(--fill-state-soft);
+}
+
+/* The row on the stage: the previewed version, or "Current version" when
+   none is. */
+.version-row[aria-pressed="true"] {
+  background: var(--accent-quiet);
+  box-shadow: inset 0 0 0 1px var(--accent);
+  color: var(--accent-ink);
+}
+
+.version-faces {
+  flex: none;
+  display: flex;
+  width: 36px;
+}
+
+.version-face {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius-full);
+  box-shadow: 0 0 0 2px var(--surface-panel);
+  color: var(--on-accent);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+}
+
+.version-face + .version-face {
+  margin-left: calc(var(--space-4) * -1);
+}
+
+.version-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.version-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+}
+
+.version-row.is-named .version-name,
+.version-row.is-current .version-name {
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+}
+
+.version-row[aria-pressed="true"] .version-name {
+  color: var(--accent-ink);
+}
+
+.version-sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+/* The trailing lane: the badge, and room for the "…" over it. */
+.version-item > .version-row {
+  padding-right: calc(var(--space-8) + var(--space-7));
+}
+
+.version-badge {
+  flex: none;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-xs);
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+}
+
+.version-more {
+  position: absolute;
+  top: 50%;
+  right: var(--space-4);
+  transform: translateY(-50%);
+  opacity: 0;
+}
+
+.version-item:hover > .version-more,
+.version-item:focus-within > .version-more {
+  opacity: 1;
+}
+
+/* The badge gives the lane to the "…" while it shows. */
+.version-item:hover .version-badge,
+.version-item:focus-within .version-badge {
+  visibility: hidden;
+}
+
+/* ---- the preview footer -------------------------------------------------- */
+.versions-preview {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  margin-top: auto;
+  padding: var(--space-6) var(--space-7);
+  border-top: 1px solid var(--line);
+  background: var(--surface-sunken);
+}
+
+.versions-preview-what {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--type-md);
+  color: var(--ink-1);
+}
+
+.versions-preview-verbs {
+  display: flex;
+  gap: var(--space-4);
+}
+
+.versions-preview-verbs > .btn {
+  flex: 1;
+}