react-cheminfo 0.74.0 → 0.76.0

package/styles/chrome.css

@@ -850,9 +850,9 @@ a.source-badge:hover {
   gap: 8px;
 }
 
-/* Two columns, so the three buttons are one size: a row of buttons whose
-   widths are set by the length of their labels reads as three unrelated
-   controls. */
+/* Two columns, so the buttons are one size — the saves over the copies, SVG
+   over SVG: a row of buttons whose widths are set by the length of their
+   labels reads as unrelated controls. */
 .structure-export__actions {
   display: grid;
   margin-top: 2px;
@@ -1760,6 +1760,139 @@ span.taxon-lineage__name {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
+/* ── A formula lookup ────────────────────────────────────────────────────── */
+
+/* Only the panel's own look: where it sits — a column beside a question, a
+   sticky rail, a shadow — is the page's, through the class it passes. */
+.formula-lookup {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.formula-lookup__header {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 700;
+  gap: 0.25rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.formula-lookup__header > .bp6-button {
+  margin-left: auto;
+}
+
+.formula-lookup__body {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  gap: 0.5rem;
+}
+
+.formula-lookup__field {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+  gap: 2px;
+}
+
+.formula-lookup__hint {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+/* Two elements to a line: each box holds two or three digits. */
+.formula-lookup__ranges {
+  display: grid;
+  margin-top: 0.25rem;
+  gap: 0.25rem 0.5rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.formula-lookup__range {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 3px;
+}
+
+.formula-lookup__range .bp6-input-group {
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.formula-lookup__range .bp6-input {
+  padding-right: 4px;
+  padding-left: 4px;
+  text-align: center;
+}
+
+.formula-lookup__element {
+  width: 1.3rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+.formula-lookup__dash {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.formula-lookup__results {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  border-top: 1px solid var(--border);
+  gap: 0.25rem;
+}
+
+/* A search still to come leaves the band empty rather than collapsing it. */
+.formula-lookup__results:empty {
+  min-height: 2.5rem;
+}
+
+.formula-lookup__count {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.formula-lookup__list {
+  display: flex;
+  overflow-y: auto;
+  max-height: 40vh;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* A formula is never split across two lines. */
+.formula-lookup__list li {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 2px 0;
+  font-size: 0.85rem;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+
+.formula-lookup__ppm {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+}
+
 /* ── A list of exercises ─────────────────────────────────────────────────── */
 
 .exercise-list {