@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/sync.css

@@ -0,0 +1,380 @@
+/* Live sync's status (R5, Paper page 21 "Sync status"): the chip in the top
+ * bar's status badges, its popover, and the quota banner over the work area.
+ * Its own file so the presence work on topbar.css never collides with it. */
+
+.sync-chip {
+  font: inherit;
+  font-size: var(--type-micro);
+  cursor: pointer;
+}
+
+.sync-chip svg {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  display: block;
+}
+
+.sync-chip .sync-chevron {
+  width: 10px;
+  height: 10px;
+}
+
+/* Offline: the one state that speaks up, in warn on a warn wash. */
+.status-chip-offline {
+  gap: var(--space-3);
+  height: 28px;
+  padding: 0 var(--space-5) 0 var(--space-4);
+  border-color: transparent;
+  border-radius: var(--radius-tab);
+  background: color-mix(in srgb, var(--warn) 10%, transparent);
+  color: var(--warn);
+  font-size: var(--type-md);
+  font-weight: 500;
+}
+
+.sync-ring {
+  stroke: var(--line);
+}
+
+.sync-arc {
+  stroke: var(--accent);
+}
+
+.sync-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: 340px;
+  padding: var(--space-3);
+  background: var(--surface-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 32px #00000080;
+}
+
+.sync-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5) var(--space-3);
+}
+
+.sync-title {
+  font-size: var(--type-sm);
+  font-weight: 600;
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.sync-device {
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+.sync-row {
+  display: flex;
+  gap: var(--space-5);
+  padding: var(--space-4) var(--space-5);
+  border: 1px solid transparent;
+  border-radius: var(--radius-tab);
+}
+
+.sync-icon {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+  color: var(--ink-3);
+}
+
+.sync-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.sync-body {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.sync-row-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  font-size: var(--type-lg);
+  font-weight: 500;
+  color: var(--ink-1);
+}
+
+.sync-row-text {
+  font-size: var(--type-md);
+  color: var(--ink-3);
+}
+
+.sync-row.is-current {
+  background: color-mix(in srgb, var(--warn) 8%, transparent);
+  border-color: color-mix(in srgb, var(--warn) 20%, transparent);
+}
+
+.sync-row.is-current .sync-row-text {
+  color: var(--ink-2);
+}
+
+.sync-row.is-current[data-row="offline"] .sync-row-title,
+.sync-row.is-current[data-row="offline"] .sync-icon {
+  color: var(--warn);
+}
+
+/* Saved and Syncing stay grey when current: nothing to act on. */
+.sync-row.is-current[data-row="saved"],
+.sync-row.is-current[data-row="syncing"] {
+  background: color-mix(in srgb, var(--ink-1) 5%, transparent);
+  border-color: transparent;
+}
+
+.sync-row.is-held {
+  background: color-mix(in srgb, var(--danger) 10%, transparent);
+  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
+}
+
+.sync-row.is-held .sync-row-title,
+.sync-row.is-held .sync-icon {
+  color: var(--danger-ink);
+}
+
+.sync-try {
+  flex: none;
+  padding: 0;
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: 500;
+  color: var(--accent);
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.sync-banner {
+  grid-column: rail-r / insp-l;
+  grid-row: stage-t / foot-t;
+  align-self: start;
+  justify-self: center;
+  position: relative;
+  z-index: var(--z-overlay);
+  margin-top: var(--space-6);
+  max-width: min(640px, calc(100% - 32px));
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
+  background: color-mix(in srgb, var(--danger) 12%, var(--surface-raised));
+  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 24px #00000073;
+}
+
+.sync-banner-icon {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--danger-ink);
+}
+
+.sync-banner-icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.sync-banner-body {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.sync-banner-title {
+  font-size: var(--type-lg);
+  font-weight: 600;
+  color: var(--danger-ink);
+}
+
+.sync-banner-text {
+  font-size: var(--type-md);
+  color: var(--ink-2);
+}
+
+.sync-banner button {
+  flex: none;
+  height: 28px;
+  padding-inline: var(--space-6);
+  border-radius: var(--radius-tab);
+  font: inherit;
+  font-size: var(--type-md);
+  cursor: pointer;
+}
+
+.sync-banner-free {
+  font-weight: 500;
+  color: var(--ink-1);
+  background: transparent;
+  border: 1px solid var(--line-strong);
+}
+
+.sync-banner-retry {
+  font-weight: 600;
+  color: var(--surface-raised);
+  background: var(--ink-1);
+  border: 0;
+}
+
+.sync-banner button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+/* A rename or delete under the session (R10, Paper page 21 "Renamed or
+ * deleted"): the header's short note, and the dialog for a delete under
+ * changes that never reached the server. */
+
+.sync-face {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-full);
+  color: #0b0b0b;
+  font-size: var(--type-micro);
+  font-weight: 600;
+  line-height: var(--leading-none);
+}
+
+.sync-face.is-lg {
+  width: 28px;
+  height: 28px;
+  font-size: var(--type-sm);
+}
+
+.sync-renamed {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 24px;
+  padding: 0 var(--space-5) 0 var(--space-1);
+  border: 1px solid #8a6cff4d;
+  border-radius: var(--radius-pill);
+  background: #8a6cff1f;
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+/* With no face the pill is even on both sides. */
+.sync-renamed:not(:has(.sync-face)) {
+  padding-left: var(--space-5);
+}
+
+/* The scrim stops at the 56px top bar, so the renamed title stays in view. */
+.dialog-overlay:has(> .sync-deleted) {
+  top: 56px;
+  background: #00000099;
+}
+
+.dialog.sync-deleted {
+  width: 460px;
+  gap: var(--space-7);
+  padding: calc(var(--space-7) + var(--space-2));
+  border-color: #3d3d3d;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 24px 64px #00000099;
+}
+
+.sync-deleted .dialog-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  font-size: var(--type-xl);
+  line-height: 22px;
+  font-weight: 600;
+}
+
+.sync-deleted-text {
+  margin: 0;
+  font-size: var(--type-lg);
+  line-height: 19px;
+  color: var(--ink-2);
+}
+
+.sync-deleted-pending {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-6);
+  border: 1px solid #2a2a2a;
+  border-radius: var(--radius-md);
+  background: #111111;
+}
+
+.sync-deleted-label {
+  font-size: var(--type-sm);
+  line-height: 14px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.sync-deleted-pending pre {
+  margin: 0;
+  font-family: Consolas, var(--font-mono);
+  font-size: var(--type-sm);
+  line-height: 17px;
+  color: var(--ink-2);
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.dialog.sync-deleted .dialog-actions {
+  gap: var(--space-4);
+}
+
+.sync-deleted-btn {
+  height: 32px;
+  padding: 0 calc(var(--space-6) + var(--space-1));
+  border: 1px solid #3d3d3d;
+  border-radius: var(--radius-tab);
+  background: transparent;
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-lg);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.sync-deleted-btn.is-primary {
+  border-color: #f5f5f5;
+  background: #f5f5f5;
+  color: #0a0a0a;
+  font-weight: 600;
+}
+
+.sync-deleted-btn:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.sync-deleted-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}