Skip to content

WebUI: Material 3 Expressive design - #4

Open
ifoknr wants to merge 6 commits into
next-iconfrom
m3-expressive
Open

ifoknr wants to merge 6 commits into
next-iconfrom
m3-expressive

Conversation

@ifoknr

@ifoknr ifoknr commented Oct 28, 2026 •

Copy link
Copy Markdown
Owner

The WebUI in the Material 3 Expressive look, the same as Fastboot Studio for Windows (v2.9) and Mobile. Built on #2 (new icon and name lettering). Held for the next release, like #2.

  • Muted dark surfaces and tonal containers with the light periwinkle primary; rounded 26 px cards without borders, pill buttons, a pill indicator in the bottom bar. A light scheme in the same tones.
  • Battery and storage are slim strips with a thin meter; their text shrinks or wraps instead of being cut.
  • Small tables: 25 px rows, 3 px apart.
  • Option cards with a filled radio for the backup sets and the theme; a 44 × 26 switch; the Kernel/Apps and language switches are one pill track.
  • About: a matte grey icon on a scalloped cookie, the Companion name in Prixma, and IFOKNR in the violet lettering of the brand.
  • The header uses the matte grey icon; the favicon keeps the teal one.
  • Edge to edge in the root manager: the page asks for the manager's insets (/internal/insets.css, KernelSU and WebUI X), so the header runs under the status bar and the tab bar under the navigation bar.
  • The battery temperature reads right in Arabic (was "°C33.4").

The smoke test passes; CI builds the module zip.

Muted dark surfaces and tonal containers with the light periwinkle primary, as in Fastboot
Studio for Windows and Mobile. Rounded 26 px cards without borders, pill buttons and a pill
indicator in the bottom bar. Battery and storage are slim strips with a thin meter, whose text
shrinks or wraps instead of being cut. Small tables (25 px rows, 3 px apart), option cards with
a filled radio for the backup sets and the theme, and a 44 x 26 switch. About is a hero card with
the icon on a scalloped cookie. The header uses a muted grey version of the icon; the favicon
keeps the teal one. A light scheme in the same tones.
The page asks for the manager's insets (/internal/insets.css, KernelSU and WebUI X) and turns
on edge to edge, so the header runs under the status bar and the tab bar under the navigation
bar, padded by the insets. Elsewhere env(safe-area-inset-*) stands in.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant