repoimage 0.2.0

package/client/src/index.css

@@ -0,0 +1,797 @@
+/* ===== Reset & base ===== */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --clr-bg: #0e1117;
+  --clr-surface: #161b22;
+  --clr-surface-raised: #1c2129;
+  --clr-border: #30363d;
+  --clr-text: #e6edf3;
+  --clr-text-muted: #8b949e;
+  --clr-accent: #58a6ff;
+  --clr-accent-hover: #79b8ff;
+  --clr-danger: #f85149;
+  --clr-warning: #d29922;
+  --clr-success: #3fb950;
+  --clr-score-bad: #f85149;
+  --clr-score-mid: #d29922;
+  --clr-score-good: #3fb950;
+  --radius: 6px;
+  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+html {
+  font-size: 14px;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--clr-bg);
+  color: var(--clr-text);
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-protocol-banner {
+  margin: 0;
+  padding: 0.75rem 2rem;
+  background: rgba(210, 153, 34, 0.12);
+  border-bottom: 1px solid var(--clr-warning);
+  color: var(--clr-text);
+  font-size: 0.95rem;
+}
+
+/* ===== Top bar ===== */
+.top-bar {
+  background: var(--clr-surface);
+  border-bottom: 1px solid var(--clr-border);
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.top-bar__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--clr-accent);
+}
+
+.top-bar__subtitle {
+  font-size: 0.85rem;
+  color: var(--clr-text-muted);
+}
+
+/* ===== Main ===== */
+.main {
+  flex: 1;
+  padding: 1.5rem 2rem;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* ===== Controls ===== */
+.controls {
+  background: var(--clr-surface);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--radius);
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.controls__group--row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-end;
+}
+
+.controls__label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--clr-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.35rem;
+}
+
+.controls__input-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.controls__input-row--wrap {
+  flex-wrap: wrap;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.controls__text-input {
+  flex: 1;
+  background: var(--clr-bg);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.75rem;
+  color: var(--clr-text);
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+}
+
+.controls__text-input::placeholder {
+  color: var(--clr-text-muted);
+  opacity: 0.38;
+}
+
+.controls__text-input:focus::placeholder {
+  opacity: 0.22;
+}
+
+.controls__text-input:focus,
+.controls__select:focus {
+  outline: none;
+  border-color: var(--clr-accent);
+  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
+}
+
+.controls__text-input--short {
+  max-width: 200px;
+}
+
+.controls__text-input--tiny {
+  max-width: 90px;
+  flex: none;
+}
+
+.controls__select {
+  background: var(--clr-bg);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.75rem;
+  color: var(--clr-text);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+/* ===== Buttons ===== */
+.btn {
+  border: none;
+  border-radius: var(--radius);
+  padding: 0.5rem 1.25rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+  white-space: nowrap;
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+
+.btn--primary {
+  background: var(--clr-accent);
+  color: #000;
+}
+
+.btn--primary:hover {
+  background: var(--clr-accent-hover);
+}
+
+.btn--secondary {
+  background: var(--clr-surface-raised);
+  color: var(--clr-text);
+  border: 1px solid var(--clr-border);
+}
+
+.btn--secondary:hover {
+  background: var(--clr-border);
+}
+
+.scan-progress {
+  margin-top: 0.65rem;
+  height: 3px;
+  background: var(--clr-border);
+  border-radius: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.scan-progress__bar {
+  height: 100%;
+  width: 35%;
+  border-radius: 2px;
+  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-hover));
+  opacity: 0;
+}
+
+.scan-progress--active .scan-progress__bar {
+  opacity: 1;
+  will-change: transform, opacity;
+  animation: scan-progress-slide 1s ease-in-out infinite;
+}
+
+.scan-progress--active {
+  background: var(--clr-surface-raised);
+}
+
+@keyframes scan-progress-slide {
+  0% {
+    transform: translateX(-120%);
+  }
+  100% {
+    transform: translateX(420%);
+  }
+}
+
+.btn--working {
+  opacity: 0.85;
+  pointer-events: none;
+}
+
+/* ===== Server folder browser (modal) ===== */
+.fs-browser {
+  position: fixed;
+  inset: 0;
+  z-index: 11000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.fs-browser.hidden {
+  display: none;
+}
+
+.fs-browser__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.fs-browser__panel {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: min(36rem, 96vw);
+  max-height: min(28rem, 88vh);
+  display: flex;
+  flex-direction: column;
+  background: var(--clr-surface);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--radius);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+}
+
+.fs-browser__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.65rem 1rem;
+  border-bottom: 1px solid var(--clr-border);
+}
+
+.fs-browser__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--clr-text);
+}
+
+.fs-browser__close {
+  border: none;
+  background: transparent;
+  color: var(--clr-text-muted);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.15rem 0.45rem;
+  border-radius: var(--radius);
+}
+
+.fs-browser__close:hover {
+  color: var(--clr-text);
+  background: var(--clr-surface-raised);
+}
+
+.fs-browser__path-row {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.65rem 1rem;
+  align-items: center;
+}
+
+.fs-browser__path-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.fs-browser__opts {
+  padding: 0 1rem 0.5rem;
+  user-select: none;
+}
+
+.fs-browser__hidden-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--clr-text-muted);
+}
+
+.fs-browser__hidden-label:hover {
+  color: var(--clr-text);
+}
+
+.fs-browser__error {
+  padding: 0 1rem 0.35rem;
+  color: var(--clr-danger);
+  font-size: 0.85rem;
+}
+
+.fs-browser__error.hidden {
+  display: none;
+}
+
+.fs-browser__list {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 7rem;
+  max-height: 14rem;
+  border-top: 1px solid var(--clr-border);
+  border-bottom: 1px solid var(--clr-border);
+}
+
+.fs-browser__list li {
+  padding: 0.35rem 1rem;
+  cursor: default;
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  color: var(--clr-text-muted);
+}
+
+.fs-browser__list li[data-type="directory"] {
+  cursor: pointer;
+  color: var(--clr-accent);
+}
+
+.fs-browser__list li[data-type="directory"]:hover {
+  background: var(--clr-surface-raised);
+}
+
+.fs-browser__list .fs-browser__loading,
+.fs-browser__list .fs-browser__empty {
+  color: var(--clr-text-muted);
+  font-style: italic;
+  cursor: default;
+}
+
+.fs-browser__actions {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.65rem 1rem;
+  flex-wrap: wrap;
+}
+
+.fs-browser__alt {
+  padding: 0 1rem 0.85rem;
+  font-size: 0.8rem;
+  color: var(--clr-text-muted);
+}
+
+.fs-browser__linkbtn {
+  border: none;
+  background: none;
+  color: var(--clr-accent);
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+  font: inherit;
+}
+
+.fs-browser__linkbtn:hover {
+  color: var(--clr-accent-hover);
+}
+
+/* ===== Folder flow popup (non-blocking; sits under OS file dialog) ===== */
+.folder-flow-pop {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  pointer-events: none;
+}
+
+.folder-flow-pop.hidden {
+  display: none;
+}
+
+.folder-flow-pop__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+.folder-flow-pop__panel {
+  position: relative;
+  width: 100%;
+  max-width: 22rem;
+  padding: 1.25rem 1.35rem;
+  background: var(--clr-surface);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--radius);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+}
+
+.folder-flow-pop__title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--clr-text-muted);
+  margin-bottom: 0.45rem;
+}
+
+.folder-flow-pop__msg {
+  font-size: 0.95rem;
+  color: var(--clr-text);
+  line-height: 1.45;
+  min-height: 2.8em;
+}
+
+.folder-flow-pop__track {
+  margin-top: 1rem;
+  height: 3px;
+  background: var(--clr-border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.folder-flow-pop__bar {
+  height: 100%;
+  width: 35%;
+  border-radius: 2px;
+  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-hover));
+  animation: scan-progress-slide 1s ease-in-out infinite;
+}
+
+/* ===== Summary ===== */
+.summary {
+  display: flex;
+  gap: 2rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--clr-surface);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+}
+
+.summary__stat {
+  font-size: 0.9rem;
+  color: var(--clr-text-muted);
+}
+
+.summary__stat strong {
+  color: var(--clr-text);
+}
+
+/* ===== Status ===== */
+.status {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: var(--clr-text-muted);
+}
+
+.status__message {
+  font-size: 1rem;
+}
+
+/* ===== Results table ===== */
+.results-container {
+  overflow-x: auto;
+}
+
+.results-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.results-table__th {
+  text-align: left;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--clr-text-muted);
+  border-bottom: 2px solid var(--clr-border);
+  position: sticky;
+  top: 0;
+  background: var(--clr-bg);
+  white-space: nowrap;
+}
+
+.results-table__th--num {
+  width: 3rem;
+  text-align: right;
+}
+
+.results-table__th--size,
+.results-table__th--dims,
+.results-table__th--uncomp,
+.results-table__th--score {
+  text-align: right;
+  width: 8rem;
+}
+
+.results-table__th--bar {
+  width: 10rem;
+}
+
+.results-table td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--clr-border);
+  vertical-align: middle;
+}
+
+.results-table tbody tr:hover {
+  background: var(--clr-surface-raised);
+}
+
+.cell--num {
+  text-align: right;
+  color: var(--clr-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.cell--path {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  word-break: break-all;
+  max-width: 400px;
+}
+
+.cell--path__dir {
+  color: var(--clr-text-muted);
+}
+
+.cell--path__file {
+  color: var(--clr-text);
+  font-weight: 600;
+}
+
+.cell--path__link {
+  text-decoration: none;
+}
+
+.cell--path__link:hover {
+  text-decoration: underline;
+  color: var(--clr-accent);
+}
+
+.cell--size,
+.cell--dims,
+.cell--uncomp {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.cell--score {
+  text-align: right;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.cell--bar {
+  padding-right: 1rem;
+}
+
+/* Score colour classes */
+.score--good {
+  color: var(--clr-score-good);
+}
+
+.score--mid {
+  color: var(--clr-score-mid);
+}
+
+.score--bad {
+  color: var(--clr-score-bad);
+}
+
+.score--na {
+  color: var(--clr-text-muted);
+  font-weight: 400;
+}
+
+/* Compression bar */
+.bar {
+  height: 8px;
+  border-radius: 4px;
+  background: var(--clr-border);
+  overflow: hidden;
+  position: relative;
+}
+
+.bar__fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.bar__fill--good {
+  background: var(--clr-score-good);
+}
+
+.bar__fill--mid {
+  background: var(--clr-score-mid);
+}
+
+.bar__fill--bad {
+  background: var(--clr-score-bad);
+}
+
+/* ===== Footer ===== */
+.footer {
+  text-align: center;
+  padding: 1rem 2rem;
+  font-size: 0.75rem;
+  color: var(--clr-text-muted);
+  border-top: 1px solid var(--clr-border);
+}
+
+/* ===== Utility ===== */
+.hidden {
+  display: none !important;
+}
+
+/* ===== Settings dropdown ===== */
+.top-bar {
+  justify-content: space-between;
+}
+
+.top-bar__left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.settings-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.settings-button {
+  background: none;
+  border: none;
+  color: var(--clr-text-muted);
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  transition: all 0.2s ease;
+}
+
+.settings-button:hover {
+  color: var(--clr-accent);
+  background: rgba(88, 166, 255, 0.1);
+}
+
+.settings-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  background: var(--clr-surface-raised);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  min-width: 200px;
+  z-index: 1000;
+}
+
+.settings-item {
+  padding: 0.75rem 1rem;
+}
+
+.settings-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.95rem;
+  user-select: none;
+}
+
+.settings-checkbox {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--clr-accent);
+}
+
+.settings-hint {
+  font-size: 0.8rem;
+  color: var(--clr-text-muted);
+  margin: 0.5rem 0 0 1.5rem;
+  margin-top: 0.35rem;
+}
+
+.settings-divider {
+  border: none;
+  border-top: 1px solid var(--clr-border);
+  margin: 0;
+}
+
+.settings-action {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: none;
+  border: none;
+  color: var(--clr-danger);
+  cursor: pointer;
+  text-align: left;
+  font-size: 0.95rem;
+  transition: background 0.2s ease;
+}
+
+.settings-action:hover {
+  background: rgba(248, 81, 73, 0.1);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+  .main {
+    padding: 1rem;
+  }
+
+  .controls__group--row {
+    flex-direction: column;
+  }
+
+  .controls__text-input--short {
+    max-width: none;
+  }
+
+  .summary {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}