Skip to content

Use native not-*, has-*, nth-last-*, etc instead of arbitrary #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zefir-git merged 1 commit into from
Mar 15, 2026
Merged

Use native not-*, has-*, nth-last-*, etc instead of arbitrary #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/ServiceDayTooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export class ServiceDayTooltip extends Component {

return html`
<div
class="absolute -inset-x-2 top-full z-50 rounded-xl bg-neutral-800 shadow-md ring-1 ring-white/10 ring-inset group-[:not(:hover):not(:focus-visible):not(:has(:focus-visible))]/bar:sr-only"
class="absolute -inset-x-2 top-full z-50 rounded-xl bg-neutral-800 shadow-md ring-1 ring-white/10 ring-inset not-group-hover/bar:not-group-focus-visible/bar:not-group-has-focus-visible/bar:sr-only"
>
<div
class="grid grid-cols-3 items-center border-b border-white/10 px-3 py-2 leading-none"
Expand Down Expand Up @@ -120,7 +120,7 @@ export class ServiceDayTooltip extends Component {
>
</svg>
<span
class="absolute top-full left-0 z-50 mt-1 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-sm leading-normal font-medium text-white shadow-md ring-1 ring-white/10 ring-inset group-[:not(:hover)]/indicator:sr-only lg:-top-1 lg:-left-1 lg:mt-0 lg:-translate-x-full"
class="absolute top-full left-0 z-50 mt-1 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-sm leading-normal font-medium text-white shadow-md ring-1 ring-white/10 ring-inset not-group-hover/indicator:sr-only lg:-top-1 lg:-left-1 lg:mt-0 lg:-translate-x-full"
>${style.label}</span>
</div>
<a
Expand Down
10 changes: 5 additions & 5 deletions src/components/ServiceRow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,11 @@ export class ServiceRow extends Component {
const worst = presentNotices.reduce((w, n) => n.impact > w.impact ? n : w);
return html`
<div
class="group/bar flex outline-offset-2 outline-blue-400 [:has(:focus-visible)]:z-10 [:has(:focus-visible)]:outline-2"
class="group/bar flex outline-offset-2 outline-blue-400 has-focus-visible:z-10 has-focus-visible:outline-2"
>
<div
class="size-full ${ServiceRow.STATUS_STYLES[worst.impact]
.bar} group-first/bar:rounded-l-sm group-nth-61/bar:rounded-l-sm sm:group-nth-61/bar:rounded-l-none sm:group-nth-31/bar:rounded-l-sm md:group-nth-31/bar:rounded-l-none group-last/bar:rounded-r-sm group-hover/bar:brightness-70 group-[:has(:focus-visible)]/bar:brightness-70"
.bar} group-first/bar:rounded-l-sm group-nth-61/bar:rounded-l-sm sm:group-nth-61/bar:rounded-l-none sm:group-nth-31/bar:rounded-l-sm md:group-nth-31/bar:rounded-l-none group-last/bar:rounded-r-sm group-hover/bar:brightness-70 group-has-focus-visible/bar:brightness-70"
>
</div>
${new ServiceDayTooltip(notices, day, started)}
Expand Down Expand Up @@ -194,7 +194,7 @@ export class ServiceRow extends Component {
>
</svg>
<span
class="absolute top-full left-0 z-50 mt-1 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-sm leading-normal font-medium text-white shadow-md ring-1 ring-white/10 ring-inset group-[:not(:hover)]/indicator:sr-only lg:-top-1 lg:-left-1 lg:mt-0 lg:-translate-x-full"
class="absolute top-full left-0 z-50 mt-1 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-sm leading-normal font-medium text-white shadow-md ring-1 ring-white/10 ring-inset not-group-hover/indicator:sr-only lg:-top-1 lg:-left-1 lg:mt-0 lg:-translate-x-full"
>${style.label}</span>
</span>
`;
Expand Down Expand Up @@ -222,7 +222,7 @@ export class ServiceRow extends Component {
</path>
</svg>
<div
class="prose prose-neutral prose-invert prose-sm top-full left-0 absolute z-50 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-white font-medium shadow-md ring-1 ring-white/10 ring-inset group-[:not(:hover)]/description:sr-only lg:-top-2 lg:left-full lg:mt-0 lg:translate-x-1 max-w-sm"
class="prose prose-neutral prose-invert prose-sm top-full left-0 absolute z-50 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-white font-medium shadow-md ring-1 ring-white/10 ring-inset not-group-hover/description:sr-only lg:-top-2 lg:left-full lg:mt-0 lg:translate-x-1 max-w-sm"
>
${unsafeHTML(
ServiceRow.MD.render(this.service.description),
Expand Down Expand Up @@ -266,7 +266,7 @@ export class ServiceRow extends Component {

return html`
<div
class="relative mt-2 grid h-8 grid-cols-30 rounded-sm *:border-r *:border-neutral-900 *:last:border-r-0 sm:grid-cols-60 md:grid-cols-90 [&>:not(:nth-last-child(-n+30))]:max-sm:hidden [&>:not(:nth-last-child(-n+60))]:max-md:hidden"
class="relative mt-2 grid h-8 grid-cols-30 rounded-sm *:border-r *:border-neutral-900 *:last:border-r-0 sm:grid-cols-60 md:grid-cols-90 max-sm:*:not-nth-last-[-n+30]:hidden max-md:*:not-nth-last-[-n+60]:hidden"
>
${bars}
</div>
Expand Down