fix(quick-pane): polish spotlight lifecycle

2026-08-25 21:53:00 +02:00
parent bab754714e
commit a204eea7da
5 changed files with 213 additions and 47 deletions
@@ -1,20 +1,110 @@
-:root { color-scheme: dark; }
-body { margin: 0; background: transparent; }
+:root {
+  color-scheme: dark;
+}
+
+body {
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  background: transparent;
+}
+
 .quick-pane {
  box-sizing: border-box;
  min-height: 100vh;
-  padding: 18px;
-  color: #f4f2ee;
-  font: 14px/1.4 system-ui, sans-serif;
-  background: radial-gradient(circle at top, #46494f, #23252a 62%);
-  border: 1px solid rgba(255,255,255,.16);
-  border-radius: 14px;
-  box-shadow: 0 22px 70px rgba(0,0,0,.55);
+  overflow-y: auto;
+  padding: 12px;
+  color: #e6e3df;
+  font: 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
+  background: rgba(34, 34, 34, 0.98);
+  border: 1px solid #4b4b4b;
+  border-radius: 8px;
+  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
+}
+
+.quick-pane header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  color: #f0a347;
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.quick-pane button,
+.quick-pane select {
+  border: 0;
+  border-radius: 5px;
+  padding: 6px 9px;
+  font: inherit;
+}
+
+.quick-pane button {
+  margin-right: 6px;
+  background: #f0a347;
+  color: #25180b;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.quick-pane button:hover {
+  background: #ffc170;
+}
+
+.quick-pane button:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+.quick-pane select {
+  color: #e6e3df;
+  background: #353535;
+}
+
+.quick-pane textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 92px;
+  padding: 12px;
+  border: 1px solid #484848;
+  border-radius: 6px;
+  color: #e6e3df;
+  background: #292929;
+  font: inherit;
+  font-size: 16px;
+  resize: vertical;
+}
+
+.quick-pane textarea:focus,
+.quick-pane button:focus-visible,
+.quick-pane select:focus-visible {
+  outline: 3px solid #f0a347;
+  outline-offset: 2px;
+}
+
+.quick-pane > label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin: 10px 8px 10px 0;
+  color: #bbb7b0;
+}
+
+.quick-pane > pre,
+.quick-pane > p {
+  margin: 10px 0 0;
+  padding: 10px 12px;
+  border: 1px solid #484848;
+  border-radius: 6px;
+  white-space: pre-wrap;
+  background: #292929;
+}
+
+.quick-pane [role="alert"] {
+  border-color: #a65b67;
+  color: #ffd7db;
+  background: #3d252b;
 }
-.quick-pane header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:#c9c7c2; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
-.quick-pane button, .quick-pane select { border:0; border-radius:7px; padding:7px 10px; color:inherit; background:#45484e; }
-.quick-pane textarea { box-sizing:border-box; width:100%; min-height:92px; padding:14px; border:0; border-radius:10px; outline:1px solid rgba(255,255,255,.14); color:#fff; background:rgba(0,0,0,.24); font:inherit; font-size:16px; resize:none; }
-.quick-pane textarea:focus { outline:2px solid #8aa9d6; background:rgba(0,0,0,.38); }
-.quick-pane > label { display:inline-flex; align-items:center; gap:7px; margin:10px 8px 10px 0; color:#c9c7c2; }
-.quick-pane > pre, .quick-pane > p { margin:10px 0 0; padding:10px 12px; border-radius:9px; white-space:pre-wrap; background:rgba(0,0,0,.22); }
-.quick-pane [role="alert"] { color:#ffb8bd; background:rgba(119,42,52,.42); }