v3.23.3: the low-counter notice polish

The two buttons under a cntr_low verdict shared the red warning style, and
the notice only ever rendered in the RAM pill: an SCP80 send wrote it into
the hidden RAM container, so the plain-send view showed the verdict text
but offered no way to act on it.

- The counter probe button is amber and the preset jump green (the warning
  text stays red).
- The probe renders the inline throbber the RAM operations use
  (animate-spin, no modal) while it runs; its result replaces it in the
  same box.
- Each pill carries its own notice box (#ram-cntr-low / #sp-cntr-low):
  ramShowCntrLow/ramSyncCounter target the originating view's box and
  clear the other, the SCP80 send passes 'sp' explicitly (it used to rely
  on the keyset-view heuristic), and a new send attempt clears the stale
  verdict (ramClearResults clears both boxes).
- The prebuilt Tailwind output was regenerated (npm run build):
  border-amber-300/-700 and border-emerald-300/-700 were absent from
  style.css (the stale-style trap).

Tests: the button classes, the spinner and the box targeting pinned in
ram.test.js.  846 frontend + 830 Python; sw cache simple-v416.
This commit is contained in:
2026-10-07 10:28:42 +03:00
parent 9ad22f2e26
commit 17863001f3
7 changed files with 97 additions and 24 deletions
+35 -2
View File
@@ -1307,6 +1307,11 @@ video {
border-top-width: 1px;
}
.border-amber-300 {
--tw-border-opacity: 1;
border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
--tw-border-opacity: 1;
border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
@@ -1327,6 +1332,11 @@ video {
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
--tw-border-opacity: 1;
border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
@@ -1887,6 +1897,11 @@ video {
color: #f1f5f9;
}
.hover\:bg-amber-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
@@ -1897,6 +1912,11 @@ video {
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
@@ -2017,14 +2037,19 @@ video {
border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-700:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-red-700:is(.dark *) {
.dark\:border-emerald-700:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is(.dark *) {
@@ -2225,6 +2250,14 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.dark\:hover\:bg-amber-900\/40:hover:is(.dark *) {
background-color: rgb(120 53 15 / 0.4);
}
.dark\:hover\:bg-emerald-900\/40:hover:is(.dark *) {
background-color: rgb(6 78 59 / 0.4);
}
.dark\:hover\:bg-red-900\/40:hover:is(.dark *) {
background-color: rgb(127 29 29 / 0.4);
}