ca503774b2
After removing the app name and icon, the next natural step that was requested from the design team is to add workspaces indicators to the top bar, where currently the Activities button is placed. In addition to that, this is desired because there are known issues with using "Activities" as a label for the overview. A more comprehensive rationale for that can be found at [1]. Add an workspaces indicator replacing the Activities label in the activities button. The WorkspaceIndicators class controls how many workspaces dots exists, their expansion, and the width multiplier. The WorkspaceDot class takes the expansion and the multiplier, and applies it internally so that we can get perfectly rounded dots at all times without using CSS hacks. The width multipliers are hardcoded, and defined by the design team. We can revisit them later if necessary. Special care is taken to not let these width multipliers result in fractional widths. When the number of workspaces changes, WorkspaceIndicators adds new dot to the end, and animate them. When removing, scale the dot out, then destroy it. This does not work with workspace grids, but that's not supported by GNOME Shell anyway, so no effort is made to cover this use case. The button continues to have "Activities" as its accessible name, but the label actor is removed. Also adjust the padding of the activities pill, so it better wraps the new indicators. [1] https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/227 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2902> |
||
|---|---|---|
| .. | ||
| gnome-shell-sass | ||
| calendar-today-light.svg | ||
| calendar-today.svg | ||
| checkbox-focused.svg | ||
| checkbox-off-focused-light.svg | ||
| checkbox-off-focused.svg | ||
| checkbox-off-light.svg | ||
| checkbox-off.svg | ||
| checkbox.svg | ||
| dash-placeholder.svg | ||
| gnome-shell-dark.scss | ||
| gnome-shell-high-contrast.scss | ||
| gnome-shell-light.scss | ||
| gnome-shell-start.svg | ||
| meson.build | ||
| pad-osd.css | ||
| process-working.svg | ||
| README.md | ||
| running-indicator.svg | ||
| toggle-off-hc.svg | ||
| toggle-off-light.svg | ||
| toggle-off.svg | ||
| toggle-on-hc.svg | ||
| toggle-on-light.svg | ||
| toggle-on.svg | ||
| workspace-placeholder.svg | ||
Summary
Do not edit the CSS directly, edit the source SCSS files and the CSS files will be generated automatically when building with meson + ninja and left inside the build directory to be incorporated into the gresource XML (you'll need to have sassc installed).
How to tweak the theme
Adwaita is a complex theme, so to keep it maintainable it's written and processed in SASS, the generated CSS is then transformed into a gresource file during gtk build and used at runtime in a non-legible or editable form.
It is very likely your change will happen in the _common.scss file. That's where all the widget selectors are defined. Here's a rundown of the "supporting" stylesheets, that are unlikely to be the right place for a drive by stylesheet fix:
| File | Description |
|---|---|
| _colors.scss | global color definitions. We keep the number of defined colors to a necessary minimum, most colors are derived from a handful of basics. It is an exact copy of the gtk+ counterpart. Light theme is used for the classic theme and dark is for GNOME3 shell default. |
| _drawing.scss | drawing helper mixings/functions to allow easier definition of widget drawing under specific context. This is why Adwaita isn't 15000 LOC. |
| _common.scss | actual definitions of style for each widget. This is where you are likely to add/remove your changes. |
You can read about SASS on its web page. Once you make your changes to the _common.scss file, you can run ninja to generate the final CSS files.