markupr 2.1.8

package/src/renderer/styles/app-shell.css

@@ -0,0 +1,662 @@
+:root {
+  --ff-shell-bg:
+    radial-gradient(circle at 10% -18%, rgba(10, 132, 255, 0.16), transparent 46%),
+    radial-gradient(circle at 90% -16%, rgba(94, 106, 240, 0.12), transparent 44%),
+    linear-gradient(180deg, #090c14 0%, #0c1018 60%, #0b0f16 100%);
+  --ff-surface: rgba(22, 28, 39, 0.82);
+  --ff-surface-strong: rgba(26, 33, 45, 0.9);
+  --ff-border: rgba(150, 162, 183, 0.22);
+  --ff-border-strong: rgba(167, 178, 198, 0.34);
+  --ff-text-primary: #eef3ff;
+  --ff-text-secondary: #c6d0e3;
+  --ff-text-muted: #8f9db5;
+  --ff-live: #ff3b30;
+  --ff-live-soft: rgba(255, 59, 48, 0.24);
+  --ff-accent: #0a84ff;
+  --ff-accent-soft: rgba(10, 132, 255, 0.22);
+  --ff-success: #34c759;
+  --ff-error: #ff3b30;
+}
+
+.ff-shell {
+  width: 100%;
+  min-height: 100%;
+  padding: 12px;
+  background: var(--ff-shell-bg);
+  color: var(--ff-text-primary);
+  font-family: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+    Arial, sans-serif;
+}
+
+.ff-shell--hud {
+  padding: 0;
+  background: transparent;
+}
+
+.ff-shell__card {
+  border: 1px solid var(--ff-border);
+  border-radius: 18px;
+  background: linear-gradient(180deg, var(--ff-surface-strong) 0%, var(--ff-surface) 100%);
+  box-shadow:
+    0 12px 32px rgba(3, 6, 12, 0.5),
+    inset 0 1px 0 rgba(217, 224, 236, 0.11);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: calc(100vh - 24px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  animation: ffShellIn 180ms ease-out;
+}
+
+.ff-shell__card--hud {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+  gap: 0;
+  overflow: visible;
+  max-height: none;
+  animation: none;
+}
+
+.ff-shell__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.ff-shell__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ff-text-muted);
+  font-weight: 600;
+}
+
+.ff-shell__title {
+  margin-top: 2px;
+  font-size: 24px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--ff-text-primary);
+}
+
+.ff-shell__quiet-btn {
+  font-size: 12px;
+  color: var(--ff-text-secondary);
+  background: rgba(138, 149, 171, 0.14);
+  border: 1px solid rgba(138, 149, 171, 0.26);
+  border-radius: 999px;
+  padding: 7px 11px;
+  min-height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+
+.ff-shell__quiet-btn:hover {
+  background: rgba(138, 149, 171, 0.24);
+  border-color: rgba(164, 176, 199, 0.45);
+  color: var(--ff-text-primary);
+}
+
+.ff-shell__subtitle {
+  color: var(--ff-text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.ff-shell__controls {
+  display: grid;
+  gap: 8px;
+}
+
+.ff-shell__primary-btn,
+.ff-shell__secondary-btn {
+  width: 100%;
+  min-height: 42px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  padding: 11px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  transition: transform 120ms ease, opacity 120ms ease, border-color 140ms ease, background 140ms ease;
+}
+
+.ff-shell__primary-btn {
+  color: #ffffff;
+  background: linear-gradient(180deg, #0a84ff 0%, #0077ed 100%);
+  box-shadow: 0 6px 14px rgba(10, 132, 255, 0.26);
+}
+
+.ff-shell__primary-btn.is-live {
+  background: linear-gradient(180deg, #ff453a 0%, #d92f25 100%);
+  box-shadow: 0 6px 14px rgba(255, 69, 58, 0.25);
+}
+
+.ff-shell__primary-btn:hover:not(:disabled) {
+  filter: brightness(1.03);
+}
+
+.ff-shell__secondary-btn {
+  color: var(--ff-text-secondary);
+  background: rgba(124, 137, 160, 0.12);
+  border-color: rgba(124, 137, 160, 0.24);
+}
+
+.ff-shell__secondary-btn:hover:not(:disabled) {
+  background: rgba(124, 137, 160, 0.22);
+  border-color: rgba(124, 137, 160, 0.38);
+  color: var(--ff-text-primary);
+}
+
+.ff-shell__primary-btn:disabled,
+.ff-shell__secondary-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.ff-shell__primary-btn:not(:disabled):active,
+.ff-shell__secondary-btn:not(:disabled):active {
+  transform: translateY(1px);
+}
+
+.ff-shell__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ff-shell__meta span {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(131, 144, 168, 0.26);
+  background: rgba(131, 144, 168, 0.12);
+  border-radius: 999px;
+  padding: 5px 10px;
+  font-size: 11px;
+  color: var(--ff-text-secondary);
+}
+
+.ff-shell__meta span.is-ready {
+  border-color: rgba(52, 199, 89, 0.42);
+  background: rgba(52, 199, 89, 0.14);
+  color: #7de0a0;
+}
+
+.ff-shell__meta span.is-optional {
+  border-color: rgba(255, 159, 10, 0.35);
+  background: rgba(255, 159, 10, 0.14);
+  color: #f2bd66;
+}
+
+.ff-shell__meta-pill {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(131, 144, 168, 0.25);
+  background: rgba(131, 144, 168, 0.12);
+  border-radius: 999px;
+  padding: 5px 10px;
+  font-size: 11px;
+  color: var(--ff-text-secondary);
+}
+
+.ff-shell__byok-cta {
+  border-radius: 12px;
+  padding: 12px;
+  border: 1px solid rgba(255, 159, 10, 0.35);
+  background: rgba(255, 159, 10, 0.1);
+  display: grid;
+  gap: 6px;
+}
+
+.ff-shell__byok-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #f2bd66;
+}
+
+.ff-shell__byok-detail {
+  font-size: 12px;
+  color: #ddb46f;
+}
+
+.ff-shell__byok-btn {
+  justify-self: start;
+  min-height: 30px;
+  border-radius: 9px;
+  border: 1px solid rgba(255, 159, 10, 0.44);
+  background: rgba(255, 159, 10, 0.16);
+  color: #ffe0ad;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 10px;
+}
+
+.ff-shell__transcript {
+  border-radius: 12px;
+  padding: 11px;
+  border: 1px solid rgba(10, 132, 255, 0.28);
+  background: rgba(10, 132, 255, 0.08);
+}
+
+.ff-shell__transcript-label {
+  font-size: 11px;
+  color: var(--ff-text-muted);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ff-shell__transcript p {
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.ff-shell__transcript-scroll {
+  max-height: 190px;
+  overflow-y: auto;
+  display: grid;
+  gap: 7px;
+  padding-right: 4px;
+}
+
+.ff-shell__transcript-line {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--ff-text-primary);
+}
+
+.ff-shell__transcript-interim {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--ff-text-secondary);
+  font-style: italic;
+  opacity: 0.92;
+}
+
+.ff-shell__transcript-placeholder {
+  font-size: 12px;
+  color: var(--ff-text-muted);
+}
+
+.ff-shell__report {
+  border-radius: 14px;
+  border: 1px solid rgba(70, 160, 255, 0.34);
+  background: rgba(70, 160, 255, 0.1);
+  padding: 12px;
+  display: grid;
+  gap: 8px;
+}
+
+.ff-shell__report-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #98c2ff;
+}
+
+.ff-shell__path {
+  font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Mono', monospace;
+  font-size: 11px;
+  color: var(--ff-text-primary);
+  overflow-wrap: anywhere;
+  background: rgba(11, 15, 24, 0.72);
+  border: 1px solid rgba(130, 142, 165, 0.28);
+  border-radius: 9px;
+  padding: 9px;
+}
+
+.ff-shell__report-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+.ff-shell__report-actions button {
+  flex: 1 1 140px;
+  min-height: 34px;
+  border-radius: 10px;
+  border: 1px solid rgba(130, 142, 165, 0.28);
+  background: rgba(25, 31, 42, 0.84);
+  color: var(--ff-text-secondary);
+  font-size: 12px;
+  padding: 8px 10px;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+
+.ff-shell__report-actions button:hover {
+  background: rgba(34, 41, 54, 0.95);
+  border-color: rgba(153, 166, 189, 0.42);
+  color: var(--ff-text-primary);
+}
+
+.ff-shell__error {
+  border-radius: 12px;
+  border: 1px solid rgba(255, 59, 48, 0.35);
+  background: rgba(255, 59, 48, 0.14);
+  color: #ff9a92;
+  padding: 10px 11px;
+  font-size: 12px;
+}
+
+.ff-shell__recent {
+  border: 1px solid rgba(130, 142, 165, 0.24);
+  border-radius: 14px;
+  background: rgba(19, 25, 35, 0.78);
+  padding: 11px;
+  display: grid;
+  gap: 10px;
+}
+
+.ff-shell__recent-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ff-shell__recent-header h2 {
+  font-size: 13px;
+  letter-spacing: 0.01em;
+}
+
+.ff-shell__recent-header button {
+  color: var(--ff-text-secondary);
+  font-size: 11px;
+  border-radius: 8px;
+  border: 1px solid rgba(131, 144, 168, 0.28);
+  padding: 6px 8px;
+  background: rgba(131, 144, 168, 0.12);
+}
+
+.ff-shell__recent-list {
+  display: grid;
+  gap: 8px;
+}
+
+.ff-shell__recent-item {
+  border: 1px solid rgba(131, 144, 168, 0.22);
+  background: rgba(14, 20, 30, 0.72);
+  border-radius: 10px;
+  padding: 9px;
+  display: grid;
+  gap: 8px;
+}
+
+.ff-shell__recent-open {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--ff-text-primary);
+}
+
+.ff-shell__recent-open span:last-child {
+  color: var(--ff-text-muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.ff-shell__recent-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  font-size: 11px;
+  color: var(--ff-text-secondary);
+}
+
+.ff-shell__recent-meta button {
+  margin-left: auto;
+  min-height: 28px;
+  color: var(--ff-text-secondary);
+  border: 1px solid rgba(131, 144, 168, 0.28);
+  background: rgba(131, 144, 168, 0.12);
+  border-radius: 8px;
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.ff-shell__empty {
+  font-size: 12px;
+  color: var(--ff-text-muted);
+}
+
+.ff-shell__footer {
+  display: grid;
+  gap: 5px;
+}
+
+.ff-shell__footer p {
+  font-size: 11px;
+  color: var(--ff-text-muted);
+}
+
+.ff-shell__donate {
+  margin-top: 4px;
+  align-self: flex-start;
+}
+
+.ff-shell--recording .ff-shell__card {
+  border-color: rgba(255, 59, 48, 0.35);
+}
+
+.ff-shell--recording .ff-shell__title::after {
+  content: '';
+  display: inline-flex;
+  margin-left: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--ff-live);
+  box-shadow: 0 0 0 6px var(--ff-live-soft);
+  animation: ffLivePulse 1.6s ease-in-out infinite;
+}
+
+.ff-shell--complete .ff-shell__card {
+  border-color: rgba(52, 199, 89, 0.42);
+}
+
+.ff-shell--error .ff-shell__card {
+  border-color: rgba(255, 59, 48, 0.38);
+}
+
+@keyframes ffLivePulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--ff-live-soft);
+    opacity: 1;
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
+    opacity: 0.68;
+  }
+}
+
+@keyframes ffShellIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ffSpinnerSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ff-shell--processing .ff-shell__card::before {
+  content: '';
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin: 8px auto;
+  border: 2.5px solid rgba(123, 138, 166, 0.3);
+  border-top-color: var(--ff-accent);
+  border-radius: 50%;
+  animation: ffSpinnerSpin 0.85s linear infinite;
+}
+
+/* Post-processing progress indicator */
+.ff-shell__processing {
+  border-radius: 12px;
+  padding: 14px;
+  border: 1px solid rgba(10, 132, 255, 0.32);
+  background: rgba(10, 132, 255, 0.1);
+  display: grid;
+  gap: 10px;
+}
+
+.ff-shell__processing-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ff-text-primary);
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.ff-shell__processing-dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 28px;
+  font-family: 'SF Mono', 'Menlo', monospace;
+  letter-spacing: 0.08em;
+  color: rgba(219, 234, 255, 0.9);
+  opacity: 0.92;
+}
+
+.ff-shell__processing-bar-track {
+  height: 7px;
+  border-radius: 3px;
+  background: rgba(10, 132, 255, 0.18);
+  overflow: hidden;
+}
+
+.ff-shell__processing-bar-fill {
+  position: relative;
+  height: 100%;
+  border-radius: 3px;
+  background: linear-gradient(90deg, #0a84ff 0%, #4ab0ff 100%);
+  transition: width 860ms cubic-bezier(0.19, 0.91, 0.21, 1);
+  min-width: 0;
+}
+
+.ff-shell__processing-bar-fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    100deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.26) 45%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: translateX(-140%);
+  animation: ffProcessSweep 1.5s linear infinite;
+}
+
+.ff-shell__processing-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ff-shell__processing-percent {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ff-accent);
+  font-variant-numeric: tabular-nums;
+  min-width: 36px;
+}
+
+.ff-shell__processing-step {
+  font-size: 12px;
+  color: var(--ff-text-secondary);
+  text-align: right;
+  flex: 1;
+}
+
+.ff-shell__error-guidance {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--ff-text-muted);
+  line-height: 1.45;
+}
+
+.ff-shell__error-retry {
+  margin-top: 10px;
+  padding: 8px 13px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ff9a92;
+  background: rgba(255, 59, 48, 0.1);
+  border: 1px solid rgba(255, 59, 48, 0.3);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 140ms ease, border-color 140ms ease;
+}
+
+.ff-shell__error-retry:hover {
+  background: rgba(255, 59, 48, 0.17);
+  border-color: rgba(255, 59, 48, 0.4);
+}
+
+@keyframes ffProcessSweep {
+  to {
+    transform: translateX(140%);
+  }
+}
+
+:focus-visible {
+  outline: 2px solid var(--ff-accent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 520px) {
+  .ff-shell {
+    padding: 10px;
+  }
+
+  .ff-shell__card {
+    padding: 14px;
+    max-height: calc(100vh - 20px);
+  }
+
+  .ff-shell__header {
+    gap: 8px;
+  }
+
+  .ff-shell__title {
+    font-size: 22px;
+  }
+
+  .ff-shell__report-actions button {
+    flex-basis: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}