loadtoagent 1.1.0 → 1.3.1

package/renderer/styles-quality.css

@@ -0,0 +1,312 @@
+/* Quality pass 101–200: command navigation, persistent filters, and stateful controls. */
+/* Quality pass 201–300: control telemetry, resilient focus, and small-screen safeguards. */
+
+body.dialog-open {
+  overflow: hidden;
+}
+
+body.quality-keyboard-mode :focus-visible {
+  outline: 3px solid #77e2c2;
+  outline-offset: 3px;
+}
+
+[data-quality-control] {
+  touch-action: manipulation;
+}
+
+[data-quality-pressed="true"] {
+  transform: translateY(1px);
+  filter: brightness(.96);
+}
+
+[data-quality-disabled="true"] {
+  cursor: not-allowed;
+}
+
+[data-quality-touch-target="padded"] {
+  position: relative;
+}
+
+[data-quality-touch-target="padded"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  outline: 6px solid transparent;
+}
+
+[data-quality-density="compact"] .session-grid,
+[data-quality-density="compact"] .terminal-layout {
+  gap: 10px;
+}
+
+[data-quality-motion="reduced"] *,
+[data-quality-motion="reduced"] *::before,
+[data-quality-motion="reduced"] *::after {
+  scroll-behavior: auto !important;
+  transition-duration: .01ms !important;
+  animation-duration: .01ms !important;
+  animation-iteration-count: 1 !important;
+}
+
+[data-quality-viewport="mobile"] .quality-modal {
+  border-radius: 14px 14px 0 0;
+}
+
+.top-icon-action {
+  width: 44px;
+  height: 44px;
+  flex: 0 0 44px;
+  border: 1px solid #2a3544;
+  border-radius: 12px;
+  background: #101722;
+  color: #91a1b5;
+  cursor: pointer;
+}
+
+.top-icon-action:hover,
+.top-icon-action:focus-visible {
+  border-color: #4b6b78;
+  color: #d7e6ee;
+  background: #16212d;
+}
+
+.quality-dialog {
+  z-index: 45;
+}
+
+.quality-modal {
+  width: min(620px, 94vw);
+  max-height: min(760px, 90vh);
+  overflow: auto;
+  padding: 20px;
+  border: 1px solid #314151;
+  border-radius: 18px;
+  background: linear-gradient(160deg, #131c28, #0b1018 72%);
+  box-shadow: 0 32px 110px rgba(0, 0, 0, .58);
+}
+
+.quality-modal-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
+  margin-bottom: 16px;
+}
+
+.quality-modal-head p {
+  margin: 0 0 4px;
+  color: #5de0b5;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+.quality-modal-head h2 {
+  margin: 0;
+  color: #eef5f8;
+  font-size: 20px;
+}
+
+.quality-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 14px;
+  border: 1px solid #34505d;
+  border-radius: 13px;
+  background: #080e15;
+  color: #5de0b5;
+}
+
+.quality-search:focus-within {
+  border-color: #66dcb7;
+  box-shadow: 0 0 0 3px rgba(93, 224, 181, .1);
+}
+
+.quality-search input {
+  width: 100%;
+  height: 50px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #e2edf1;
+  font-size: 14px;
+}
+
+.quality-command-list {
+  display: grid;
+  gap: 5px;
+  margin-top: 12px;
+}
+
+.quality-command-list button {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 48px;
+  padding: 7px 12px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  background: transparent;
+  color: #bdc8d2;
+  text-align: left;
+  cursor: pointer;
+}
+
+.quality-command-list button > span {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  background: #172331;
+  color: #76dfbf;
+}
+
+.quality-command-list button small {
+  color: #647386;
+}
+
+.quality-command-list button i {
+  opacity: 0;
+  color: #92e7cc;
+}
+
+.quality-command-list button.active,
+.quality-command-list button:hover {
+  border-color: #31594e;
+  background: #14231f;
+  color: #eff8f5;
+}
+
+.quality-command-list button.active i {
+  opacity: 1;
+}
+
+.quality-dialog-status {
+  min-height: 18px;
+  margin: 10px 3px 0;
+  color: #748497;
+  font-size: 10px;
+}
+
+.shortcut-help-list {
+  display: grid;
+  gap: 7px;
+  margin: 0;
+}
+
+.shortcut-help-list > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  min-height: 49px;
+  padding: 8px 12px;
+  border: 1px solid #253241;
+  border-radius: 10px;
+  background: #0c131c;
+}
+
+.shortcut-help-list dt {
+  display: flex;
+  gap: 5px;
+}
+
+.shortcut-help-list dd {
+  margin: 0;
+  color: #9caabb;
+  font-size: 11px;
+}
+
+.session-result-summary {
+  min-height: 22px;
+  margin: 8px 2px 0;
+  color: #708094;
+  font-size: 10px;
+}
+
+.empty-state .ghost-button {
+  margin-bottom: 9px;
+}
+
+.drawer-meta .meta-copy {
+  font: inherit;
+  cursor: pointer;
+}
+
+.drawer-meta .meta-copy:hover,
+.drawer-meta .meta-copy:focus-visible {
+  border-color: #3e6d61;
+  background: #13251f;
+  color: #c5f4e4;
+}
+
+.drawer-meta .meta-copy > span {
+  color: #72d8b8;
+}
+
+.clipboard-fallback {
+  position: fixed;
+  left: -10000px;
+  top: -10000px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.terminal-command-composer {
+  grid-template-columns: minmax(0, 1fr) auto auto;
+}
+
+.terminal-command-form .terminal-command-clear {
+  width: 38px;
+  min-width: 38px;
+  padding: 0;
+  justify-content: center;
+  border-color: #394755;
+  background: #111923;
+  color: #8292a4;
+}
+
+.terminal-command-count.warning {
+  color: #f4b862;
+  font-weight: 800;
+}
+
+@media (max-width: 760px) {
+  .top-icon-action {
+    width: 42px;
+    height: 42px;
+    flex-basis: 42px;
+  }
+
+  .quality-modal {
+    width: 100%;
+    max-height: 92vh;
+    padding: 16px;
+  }
+
+  .quality-command-list button {
+    grid-template-columns: 34px minmax(0, 1fr) auto;
+  }
+
+  .quality-command-list button small {
+    display: none;
+  }
+
+  .terminal-command-composer {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .terminal-command-form .terminal-command-clear {
+    grid-row: 1;
+    grid-column: 2;
+  }
+
+  .terminal-command-form button[type="submit"] {
+    grid-column: 1 / -1;
+  }
+}