markupr 2.1.8 → 2.5.0

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

@@ -1,662 +0,0 @@
-: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;
-  }
-}