@gjsify/adwaita-web 0.54.0 → 0.56.0

package/scss/_expander.scss

@@ -0,0 +1,113 @@
+// _expander.scss — <gtk-expander>: the disclosure title, its arrow, and the row beneath.
+//
+// libadwaita's `_expanders.scss` is TWO selectors — the `expander` node and
+// `expander-widget` — and the element has to keep them apart, because they are different
+// nodes: `expander` is the ARROW and `expander-widget` is the widget. So the arrow is the
+// `.adw-expander-arrow` box and the widget is the tag.
+//
+// THE ARROW is upstream's whole rule, with `-gtk-icon-source` as a mask swap:
+//
+//   min-width/min-height 16px   `.adw-icon`'s own size, so this repeats it only to say the
+//                              node has no intrinsic size of its own;
+//   pan-end-symbolic           the closed glyph;
+//   pan-end-symbolic-rtl       `:dir(rtl)`, as upstream's second `-gtk-icon-source`;
+//   pan-down-symbolic           `:checked`, which this stylesheet spells `.checked` — and
+//                              `gtk_expander_set_expanded` sets the pseudoclass on the
+//                              arrow, not on the widget (gtkexpander.c:897-900);
+//   disabled                   `Opacity(var(--disabled-opacity))`.
+//
+// The `:disabled` line has nothing to bite on here, because a custom element is never
+// `:disabled` — the widget is a plain GtkWidget with no insensitive state of its own, and
+// upstream's rule exists for the `expander` node when a `Gtk.TreeView` row disables it.
+// It is written against `[disabled]` so an author who puts the attribute there gets
+// upstream's dimming rather than nothing.
+//
+// THE TITLE is `expander-widget > box > title` (`_expanders.scss:13-28`): a 6px radius, the
+// focus ring, and the arrow at 70% until the title is hovered or pressed. The box between
+// them is `.adw-expander-box`, so the selector chain is the node tree rather than a
+// coincidence.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_expanders.scss
+// Reference: refs/libadwaita/src/stylesheet/_drawing.scss (the focus-ring mixin: a 2px
+//   outline at offset -2px, which is what `outline` below spells out)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-expander {
+  display: block;
+
+  > .adw-expander-box {
+    display: flex;
+    flex-direction: column;
+  }
+
+  > .adw-expander-box > .adw-expander-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    min-height: 30px;
+    padding: var(--spacing-xs) var(--spacing-m);
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--button-bg-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    // `focus-ring ("> box > title")` with its default `$width: 2px` and `$offset: -$width`.
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -2px;
+    }
+
+    .adw-expander-arrow {
+      opacity: 0.7;
+    }
+
+    &:hover .adw-expander-arrow,
+    &:active .adw-expander-arrow {
+      opacity: 1;
+    }
+  }
+
+  > .adw-expander-box > .adw-expander-content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+}
+
+.adw-expander-arrow {
+  min-width: 16px;
+  min-height: 16px;
+  flex-shrink: 0;
+  // `expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic') }`. The element sets
+  // `icon-name="pan-end"`, so the `.checked` and `:dir(rtl)` rules below are the two
+  // `-gtk-icon-source` overrides — same three glyphs, same two conditions.
+  mask-image: var(--icon-pan-end);
+  -webkit-mask-image: var(--icon-pan-end);
+
+  &[disabled] {
+    opacity: var(--disabled-opacity);
+  }
+
+  // `&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic') }`
+  &.checked {
+    mask-image: var(--icon-pan-down);
+    -webkit-mask-image: var(--icon-pan-down);
+  }
+}
+
+:dir(rtl) .adw-expander-arrow:not(.checked) {
+  // `&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl') }` — upstream
+  // states the RTL glyph on its own line, BEFORE the `:checked` one, so `:checked` wins for
+  // an RTL expander that is open. The `:not(.checked)` keeps that order without relying on
+  // it.
+  mask-image: var(--icon-pan-end-rtl);
+  -webkit-mask-image: var(--icon-pan-end-rtl);
+}

package/scss/_expander_row.scss

@@ -32,12 +32,45 @@ adw-expander-row {
     }
   }
 
+  // Title/subtitle WRAP BY DEFAULT, matching libadwaita's GtkLabel wrap=true,
+  // lines=0 — stated HERE, at this row's own specificity, because `_row.scss` carries
+  // a `white-space: nowrap` default for `.adw-row-subtitle` and an inherited one reaches
+  // the title. A rule that only turns `white-space` on inside the clamp selector cannot
+  // make a row wrap by DEFAULT: the clamp is the minority state.
   .adw-row-title {
     font-size: var(--font-size-base);
     color: var(--card-fg-color);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  .adw-row-subtitle {
+    font-size: var(--font-size-small);
+    opacity: var(--dim-opacity);
+    color: var(--card-fg-color);
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  // Clamped state — JS toggles `.adw-row-clamp` on the TEXT COLUMN, the same node and
+  // the same class `_action_row.scss` keys off; reading it off the header instead never
+  // matched anything.
+  .adw-row-text.adw-row-clamp {
+    .adw-row-title,
+    .adw-row-subtitle {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: var(--adw-row-ellipsize-overflow, ellipsis);
+    }
+
+    .adw-row-title {
+      -webkit-line-clamp: var(--adw-row-title-lines, 1);
+    }
+
+    .adw-row-subtitle {
+      -webkit-line-clamp: var(--adw-row-subtitle-lines, 1);
+    }
   }
 
   // The text column takes the free space so prefix/suffix widgets, the enable

package/scss/_fixed.scss

@@ -0,0 +1,29 @@
+// _fixed.scss — <gtk-fixed>: children at pixel positions, and a box around all of them.
+//
+// `gtk_fixed_init` sets `GTK_OVERFLOW_HIDDEN` (gtkfixed.c:189-195), so the fixed clips a
+// child that reaches past its own bounds — and the element sizes those bounds from the
+// union of the children (`gtk_fixed_layout_measure`, gtkfixedlayout.c:224-300), which is
+// what makes `overflow: hidden` a clipping rule rather than a layout one.
+//
+// The children are out of flow, which is what a position means: `position: absolute` against
+// the fixed's own padding box, which `gtk_fixed_layout_allocate` does by handing each child
+// its measured size at (x, y). `left` / `top` DEFAULT TO ZERO and not to CSS's `auto`
+// because `gtk_fixed_buildable_add_child` puts an unpositioned child at 0, 0
+// (gtkfixed.c:171-177), and `auto` would resolve it to its STATIC position instead.
+//
+// Reference: refs/gtk/gtk/gtkfixed.c:171-177, :189-195
+// Reference: refs/gtk/gtk/gtkfixedlayout.c:224-300
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-fixed {
+  display: block;
+  position: relative;
+  overflow: hidden;
+
+  > * {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}

package/scss/_flow_box.scss

@@ -0,0 +1,94 @@
+// _flow_box.scss — <gtk-flow-box> and its cells, the elements GTK names `flowbox` and
+// `flowboxchild`.
+//
+// Upstream writes `flowbox > flowboxchild, gridview > child` as ONE rule (_views.scss:52-91):
+// the same 3px padding, the same `$button_radius` corner, the same focus ring and the same four
+// state colours — and `<gtk-grid-view>` already wears the grid half in `_grid_view.scss`, which
+// `@include`s `adw-list-selectable` from `_list_view.scss` for exactly that reason. The cell
+// here therefore includes the same mixin rather than restating four colours, because a drifted
+// copy is four wrong ones and the hover-over-selected pair is the pair nobody checks by eye.
+//
+// `flex-flow: row wrap` IS the allocation. GTK hands each child a slot on a running line in
+// the given orientation and starts a new one when the next would not fit
+// (gtkflowbox.c:1640-1900), and a wrapping flex line with a per-child size share is that rule
+// expressed in the browser's own layout language: `max-width: 100% / max-children-per-line`
+// caps how many can share a line, and `min-width: 100% / min-children-per-line` is
+// `min-children-per-line`, whose own documented job is that "a reasonably small height will be
+// requested for the overall minimum width of the box" (gtkflowbox.c:3747-3755).
+//
+// `homogeneous` is `flex: 1 1 0` — GTK's "all children should be allocated the same size"
+// (:3736-3739), which in a wrapping line is exactly equal growth from a zero basis.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_views.scss:1-16 (.view), :52-91
+//   (flowbox > flowboxchild), :88-91 (flowbox, gridview disabled)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@use 'list_view';
+
+gtk-flow-box {
+  display: block;
+  box-sizing: border-box;
+  color: var(--view-fg-color);
+  background-color: var(--view-bg-color);
+
+  // The line container. `--adw-flow-box-*` are written by `gtk-flow-box.ts` from the
+  // properties, so the stylesheet stays declarative and a `homogeneous` write is one class.
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--adw-flow-box-row-spacing, 0px) var(--adw-flow-box-column-spacing, 0px);
+
+  &.vertical {
+    flex-flow: column wrap;
+  }
+
+  &.view:disabled {
+    color: var(--view-fg-color);
+  }
+}
+
+gtk-flow-box-child {
+  @include list_view.adw-list-selectable;
+
+  display: block;
+  box-sizing: border-box;
+  // `flowbox > flowboxchild { padding: 3px; border-radius: $button_radius }`
+  // (_views.scss:52-56).
+  padding: 3px;
+  border-radius: var(--button-radius);
+  // The line share. A browser lays the children out, so this is where GTK's
+  // `min`/`max-children-per-line` and `homogeneous` are honoured — and the share has to
+  // LEAVE ROOM FOR THE SPACING. `100% / N` alone does not: N children then need N shares
+  // PLUS the (N-1) gaps between them, so the row overflows by the gaps and the browser
+  // breaks it one child early. Measured on the gallery's flow box — `min-children-per-line`
+  // 2, `max` 4, a 6px spacing in a 320px box — the share came out at 50% (160px), two
+  // children plus one gap came to 326px, and the box showed ONE child per line where
+  // libadwaita packs four. The share is therefore (100% - (N-1) × spacing) / N.
+  max-width: calc(
+    (100% - (var(--adw-flow-box-max-children-per-line, 7) - 1) *
+      var(--adw-flow-box-column-spacing, 0px)) / var(--adw-flow-box-max-children-per-line, 7)
+  );
+  min-width: calc(
+    (100% - (var(--adw-flow-box-min-children-per-line, 1) - 1) *
+      var(--adw-flow-box-column-spacing, 0px)) / var(--adw-flow-box-min-children-per-line, 1)
+  );
+  cursor: pointer;
+}
+
+gtk-flow-box.vertical > gtk-flow-box-child {
+  // The same arithmetic down the other axis, against the ROW spacing.
+  max-height: calc(
+    (100% - (var(--adw-flow-box-max-children-per-line, 7) - 1) *
+      var(--adw-flow-box-row-spacing, 0px)) / var(--adw-flow-box-max-children-per-line, 7)
+  );
+  max-width: none;
+  min-height: calc(
+    (100% - (var(--adw-flow-box-min-children-per-line, 1) - 1) *
+      var(--adw-flow-box-row-spacing, 0px)) / var(--adw-flow-box-min-children-per-line, 1)
+  );
+  min-width: 0;
+}
+
+gtk-flow-box.homogeneous > gtk-flow-box-child {
+  flex: 1 1 0;
+}

package/scss/_font_button.scss

@@ -0,0 +1,63 @@
+// _font_button.scss — `<gtk-font-dialog-button>`: the `button.font` node and the two
+// labels it holds.
+//
+// libadwaita has no rule for it either: `_linked.scss:7` is the only place upstream names
+// `fontbutton`, and it is there because the node is a button that participates in a linked
+// group. So this partial is the node's layout and nothing else — and the node's layout IS
+// the C's, which builds a horizontal box of the family label (hexpand, so it takes the
+// room) and the size box, the latter a vertical separator followed by the size label
+// (gtkfontdialogbutton.c:121-140).
+//
+// The element hides the size box itself when the level is below FONT, because
+// `update_font_info` ends with `gtk_widget_set_visible (self->font_size_box, self->level >=
+// GTK_FONT_LEVEL_FONT)` (:685) — a family chooser shows one word where a font chooser shows
+// two, and the separator with it.
+//
+// Reference: refs/gtk/gtk/gtkfontdialogbutton.c:52-60 (the node), :118-152 (init, the box,
+//   the labels), :649-687 (update_font_info, and the size box's visibility)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_linked.scss:7 (`fontbutton > button`)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web — the labels are `<span>`s inside an
+//   ordinary `<button>`, and `use-font` sets their inline `font` (apply_use_font).
+
+gtk-font-dialog-button {
+  display: inline-flex;
+  position: relative;
+}
+
+.font-button-label {
+  flex: 1;
+  text-align: start;
+}
+
+// The size box: a separator and the size, in a row of their own — which is why the element
+// wraps them in a span rather than appending both to the button.
+.font-button-size {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: 6px;
+  color: color-mix(in srgb, currentColor var(--dim-opacity), transparent);
+}
+
+.font-button-size-label {
+  min-width: 2ch;
+  font-variant-numeric: tabular-nums;
+}
+
+// The chooser: one row of families. A popover rather than a `<select>` on the button
+// itself, because `gtk_font_dialog_button_new()` is given a dialog and shows nothing until
+// it is pressed.
+.font-button-popover {
+  .font-button-chooser {
+    min-width: 180px;
+    max-width: 320px;
+    padding: 4px;
+    border: none;
+    border-radius: 6px;
+    background-color: var(--popover-bg-color);
+    color: var(--popover-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+  }
+}

package/scss/_frame.scss

@@ -0,0 +1,41 @@
+// _frame.scss — <gtk-frame>: the 1px border, and the label that sits inside its top edge.
+//
+// libadwaita writes this rule TWICE, once for the widget node and once for the style
+// class (`widgets/_misc.scss:4-7`); the widget half is here and the class half stays in
+// `_style_classes.scss`, where every other `.frame` consumer already is. The label's
+// `margin: 4px` (`_misc.scss:12-14`) is the inset it gets inside the border, keyed on the
+// class the element puts on whatever stands in for GtkFrame's label widget — the internal
+// `<gtk-label>` `label` builds, or an author's `label-widget`.
+//
+// The BOX is GtkFrame's, not libadwaita's: the label widget takes the top line and the
+// child the rest (`gtk_frame_real_compute_child_allocation`, gtkframe.c:554-580), so the
+// host is a flex column whose children grow into whatever the pinned label leaves.
+// `overflow: hidden` is `GTK_OVERFLOW_HIDDEN` (gtkframe.c:246) — the GIR doc calls the
+// clipping out as the way to round a child's corners, at the price of its shadows.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss:4-15
+// Reference: refs/gtk/gtk/gtkframe.c:246, :519-580
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-frame {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--border-color);
+  border-radius: var(--card-radius);
+  overflow: hidden;
+
+  // GTK sizes the label widget itself and never grows it, so it is pinned at its own size
+  // (`flex: none`) and its `align-self` is the element's, written from `label-xalign`.
+  > .adw-frame-label {
+    flex: none;
+    margin: 4px;
+  }
+
+  // Everything else is the child, and it takes the height the label leaves.
+  > * {
+    flex: 1 1 auto;
+  }
+}

package/scss/_grid.scss

@@ -0,0 +1,19 @@
+// _grid.scss — <gtk-grid>: a table of cells, sized by what is in them.
+//
+// libadwaita styles the `grid` node nowhere — the grid has no node of its own beyond what
+// GtkGridLayout builds — so this partial is `display: grid` and the one default worth
+// stating: a child written without a position is attached along the columns, which is
+// `grid-auto-flow: row` (`gtk_grid_buildable_add_child`, gtkgrid.c:493-507).
+//
+// Everything else is per-instance and inline, because a selector cannot key on a number:
+// the two spacings, the two `homogeneous` flags and the orientation all go on the element
+// as `row-gap` / `column-gap` / `grid-auto-rows` / `grid-auto-columns` / `grid-auto-flow`.
+//
+// Reference: refs/gtk/gtk/gtkgrid.c:493-507
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-grid {
+  display: grid;
+  grid-auto-flow: row;
+}

package/scss/_grid_view.scss

@@ -0,0 +1,46 @@
+// _grid_view.scss — <gtk-grid-view>: the same selectable items as a list view, reflowed
+// into equal columns.
+//
+// Upstream writes `flowbox > flowboxchild, gridview > child` as ONE rule — the same
+// padding, the same `$button_radius` corner and the same four state colours a list row
+// has — so this partial includes `adw-list-selectable` from `_list_view.scss` and adds
+// only the two things a grid has: the track container and the cell floor the column
+// count is computed against.
+//
+// THE `min-width` IS LOAD-BEARING, not cosmetic. `gtk-grid-view.ts` reads it as the item
+// size for `gridViewColumns` — GTK's `GTK_SCROLL_MINIMUM` branch — because the rendered
+// width is `1fr`, i.e. the answer the count already produced. An author who wants wider
+// cells sets `min-width` on `.adw-grid-view-child` and the count follows.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_views.scss:52-91 (gridview > child)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@use 'list_view';
+
+gtk-grid-view {
+  display: block;
+  box-sizing: border-box;
+  color: var(--view-fg-color);
+  background-color: var(--view-bg-color);
+
+  .adw-list-view-rows {
+    position: relative;
+    display: grid;
+    // Replaced per measurement by `_applyColumns`; one column is what a view with
+    // nothing to measure shows.
+    grid-template-columns: repeat(1, 1fr);
+    gap: 6px;
+  }
+
+  .adw-grid-view-child {
+    @include list_view.adw-list-selectable;
+
+    // `gridview > child { padding: 3px; border-radius: $button_radius }`.
+    padding: 3px;
+    border-radius: var(--button-radius);
+    box-sizing: border-box;
+    min-width: 120px;
+    text-align: center;
+  }
+}

package/scss/_gtk_about_dialog.scss

@@ -0,0 +1,186 @@
+// _gtk_about_dialog.scss — <gtk-about-dialog> styling: the GTK about window's own
+// layout, which is NOT libadwaita's `<adw-about-dialog>` (a navigation view of
+// preference rows) but a bold name over a 128px logo and a four-page stack, with a
+// stack switcher where the headerbar's title widget goes.
+//
+// The DIALOG itself (scrim, sheet, header, close button) is not restated here: it is
+// `<adw-dialog>`'s chrome, which this element inherits, so the rules below only cover
+// the parts `gtkaboutdialog.ui` declares and nothing styles upstream either.
+//
+// Reference: refs/gtk/gtk/ui/gtkaboutdialog.ui (the tree: 12px inner spacing, 5px
+//   outer margins, 8px page spacing, the 400x100 stack, the framed scrolled pages)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss:46-56
+//   (`window.aboutdialog:not(.ssd-frame)`: a FLAT titlebar, and `image.large-icons`
+//   at 128px — which is `icon-size: 2`, GTK's DIALOG size)
+// Reference: refs/gtk/gtk/gtkaboutdialog.c:1066-1082 (the bold name label, the
+//   centre justification, the version label's own markup)
+// Copyright (c) 2008-2024 Red Hat, Inc. / The GTK authors. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-about-dialog {
+  // The `.ui` spacing, verbatim: the outer box is 5px all round with 2px between the
+  // two children (the head), and the head is 5px all round with 12px between the logo,
+  // the name and the stack.
+  .adw-gtk-about-dialog-box {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 5px;
+    min-width: 320px;
+    min-height: 220px;
+  }
+
+  .adw-gtk-about-dialog-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 5px;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  // `image.large-icons` → 128px. The slot exists so the logo can be absent entirely
+  // without the name moving up a line: `GtkImage` is a template child and is always
+  // there in GTK, so the space above the name is always reserved.
+  .adw-gtk-about-dialog-logo-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 128px;
+  }
+
+  .adw-gtk-about-dialog-logo {
+    width: 128px;
+    height: 128px;
+    // `icon-dropshadow` on the `.ui`'s logo image.
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 6, 0.25));
+  }
+
+  // `<span weight="bold">` from `update_name_version`, centred like every label in the
+  // box (`justify: 2`).
+  .adw-gtk-about-dialog-name {
+    font-weight: bold;
+    font-size: 1.1em;
+    text-align: center;
+    user-select: text;
+  }
+
+  // `GtkStack` with `width-request: 400`, `height-request: 100`, and the crossfade
+  // transition (16) at 600ms.
+  .adw-gtk-about-dialog-stack {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: 300px;
+    min-height: 100px;
+    flex: 1 1 auto;
+  }
+
+  .adw-gtk-about-dialog-page {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1 1 auto;
+    justify-content: center;
+    text-align: center;
+    padding: 6px 12px;
+    // The crossfade between pages: 600ms is the `.ui`'s `transition-duration`.
+    animation: adw-gtk-about-dialog-page-in 600ms ease;
+  }
+
+  .adw-gtk-about-dialog-version,
+  .adw-gtk-about-dialog-comments,
+  .adw-gtk-about-dialog-copyright {
+    // `wrap: 1` with `max-width-chars: 60` on the comments and copyright labels.
+    max-width: 60ch;
+    margin: 0 auto;
+  }
+
+  .adw-gtk-about-dialog-website,
+  .adw-gtk-about-dialog-license,
+  .adw-gtk-about-dialog-license-link {
+    max-width: 60ch;
+    margin: 0 auto;
+  }
+
+  // `GtkStackSwitcher` in the titlebar: a row of flat buttons, the visible page's
+  // checked. No title text beside them, because the `.ui` declares none.
+  .adw-gtk-about-dialog-switcher {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .adw-gtk-about-dialog-switcher-item {
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-weight: 500;
+    color: var(--window-fg-color);
+    background-color: transparent;
+    border: none;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:checked,
+    &.checked {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  // The three framed pages: a scrolled window with `has-frame` around a `.view`
+  // viewport, and the credits grid inside it.
+  .adw-gtk-about-dialog-scrolled {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    border: 1px solid var(--border-color);
+    border-radius: 9px;
+    background-color: var(--view-bg-color);
+  }
+
+  .adw-gtk-about-dialog-text {
+    margin: 5px;
+    // `GTK_WRAP_NONE` unless `wrap-license` asked for `GTK_WRAP_WORD`.
+    white-space: pre;
+    font-size: 0.9em;
+  }
+
+  .adw-gtk-about-dialog-text-view.wrap .adw-gtk-about-dialog-text {
+    white-space: pre-wrap;
+  }
+
+  // `add_credits_section`: a two-column grid, headings right-aligned in column 0 and
+  // people left-aligned in column 1, with 2px between rows and 8px between columns.
+  .adw-gtk-about-dialog-credits-grid {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 2px 8px;
+    padding: 5px;
+    align-items: center;
+  }
+
+  .adw-gtk-about-dialog-credits-heading {
+    text-align: right;
+    font-size: 0.9em;
+    font-weight: 500;
+  }
+
+  .adw-gtk-about-dialog-credits-person {
+    text-align: left;
+    font-size: 0.9em;
+    user-select: text;
+  }
+}
+
+@keyframes adw-gtk-about-dialog-page-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}