Hide buttons and panels that were marked hidden
A guest opening an entry the owner had logged still saw Delete and Save on it.
The read-only branch had been setting .hidden on both since guest links landed;
the attribute was there, and the buttons rendered anyway.
The user agent hides [hidden] elements with display: none, but that is a UA
rule and loses to any author rule setting a display — and `button` here sets
display: inline-flex, so no button the app hides has ever actually gone away.
The stylesheet already knew this in eight places: .auth-screen[hidden],
.snackbar[hidden], dialog label[hidden] and five more, each added when someone
noticed that particular element misbehaving. What that pattern cannot do is fix
the cases nobody has hit yet, and there were five sitting there: the 🌳 pedigree
button showed before a pedigree ID was set, the reminder rule rows showed while
unsubscribed, "send a test notification" showed when push was unavailable, the
pedigree disambiguation list stayed up after being dismissed, and the exercise
dialog offered Delete while adding a new exercise rather than editing one.
So this states it once, globally, and drops all ten per-selector rules. It
needs !important: the offenders are not all the same weight, and
`#reminders-rules { display: flex }` is an id selector that outranks any
attribute selector available. That is the right trade here — nothing should
ever want an element painted after being marked hidden, so there is no case the
blunt version gets wrong.
Only the two dialog buttons are new breakage; the other five predate the recent
work and are the reason this is a global fix rather than a sixth patch.
This commit is contained in:
+16
-13
@@ -69,6 +69,22 @@
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* The user agent's [hidden] { display: none } loses to any author rule that
|
||||
sets a display, so every element given one here went on rendering while
|
||||
hidden. This had been patched one selector at a time as each case was
|
||||
noticed — .auth-screen[hidden], .snackbar[hidden], dialog label[hidden] and
|
||||
seven more — which left the ones nobody had hit yet still broken: the 🌳
|
||||
pedigree button, the reminder rule rows, "send a test notification", the
|
||||
pedigree disambiguation list, and Delete in both the exercise and event
|
||||
dialogs. Stating it once replaces all ten of those rules and stops the next
|
||||
hidden element joining the list.
|
||||
|
||||
!important, because the offenders aren't all the same weight:
|
||||
`#reminders-rules { display: flex }` is an id selector and outranks any
|
||||
attribute selector we could write. Nothing should ever want a hidden element
|
||||
painted, so the blunt instrument is the right one here. */
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -232,7 +248,6 @@ body::before {
|
||||
font-variant-numeric: tabular-nums;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bar-clock[hidden] { display: none; }
|
||||
/* Big timer still on screen: keep the pill's slot but show nothing. */
|
||||
.bar-clock.standby { visibility: hidden; }
|
||||
.bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep-ink); }
|
||||
@@ -619,9 +634,6 @@ dialog::backdrop { background: rgba(0,0,0,0.4); }
|
||||
dialog h3 { margin: 0 0 12px; }
|
||||
|
||||
dialog label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
|
||||
/* The display rule above beats the UA [hidden] rule, so hide explicitly —
|
||||
otherwise the weight/grams fields show on event types that don't use them. */
|
||||
dialog label[hidden] { display: none; }
|
||||
dialog label input, dialog label textarea { margin-top: 4px; }
|
||||
|
||||
dialog menu {
|
||||
@@ -647,7 +659,6 @@ dialog menu {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.photo-preview[hidden] { display: none; }
|
||||
.photo-thumb { position: relative; }
|
||||
.photo-thumb img {
|
||||
display: block;
|
||||
@@ -863,8 +874,6 @@ dialog menu {
|
||||
background: var(--bg);
|
||||
z-index: 50;
|
||||
}
|
||||
/* The display rule above beats the UA [hidden] rule, so hide explicitly. */
|
||||
.auth-screen[hidden] { display: none; }
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
@@ -952,7 +961,6 @@ button.linklike:hover { text-decoration: underline; filter: none; }
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.exclude-btn[hidden] { display: none; }
|
||||
|
||||
.excluded-note { margin: 8px 0 0; }
|
||||
|
||||
@@ -1032,7 +1040,6 @@ button.guest-revoke { color: var(--danger); flex: none; }
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.guest-banner[hidden] { display: none; }
|
||||
|
||||
/* Who logged an event, when it came in on a guest link. Small caps so it reads
|
||||
as a margin note against the event label rather than competing with it.
|
||||
@@ -1100,7 +1107,6 @@ input.switch:checked::after { transform: translateX(18px); }
|
||||
color: #fff;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.update-banner[hidden] { display: none; }
|
||||
.update-banner-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1116,7 +1122,6 @@ input.switch:checked::after { transform: translateX(18px); }
|
||||
line-height: 1.45;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.update-changelog[hidden] { display: none; }
|
||||
|
||||
.app-footer {
|
||||
text-align: center;
|
||||
@@ -1187,7 +1192,6 @@ input.switch:checked::after { transform: translateX(18px); }
|
||||
pointer-events: none;
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
.snackbar[hidden] { display: none; }
|
||||
.snackbar.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
@@ -1303,7 +1307,6 @@ input.switch:checked::after { transform: translateX(18px); }
|
||||
.lg.wtrend-today .sw { background: var(--walk); }
|
||||
.lg.wtrend-yesterday .sw { background: var(--eat); }
|
||||
.lg.wtrend-avg .sw { background: var(--weight); }
|
||||
.lg[hidden] { display: none; }
|
||||
|
||||
.chart-svg .hm-cell { stroke: none; }
|
||||
/* Focused block: an accent ring, drawn at full opacity so it stays visible on
|
||||
|
||||
Reference in New Issue
Block a user