b16cfa85e9
This commit replaces a few of the screenshot UI CSS expressions with named variables. The shot-cast margin is not defined, but rather set to the value it ends up equal to, given the panel padding and the capture button's sizes + position, which would be a bit awkward to compute here. It ends up slightly larger than the general panel padding due to the capture button being larger than other elements, and due to having to center-align the shot-cast container to the capture button. The shot-cast container border radius is defined as 12px, then the panel border radius is computed from the shot-cast border radius + margin, then the type button border radius is computed from panel border radius - padding. Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2103> |
||
|---|---|---|
| .. | ||
| gnome-shell-sass | ||
| calendar-today-light.svg | ||
| calendar-today.svg | ||
| carousel-arrow-back-24-symbolic.svg | ||
| carousel-arrow-next-24-symbolic.svg | ||
| checkbox-focused.svg | ||
| checkbox-off-focused-light.svg | ||
| checkbox-off-focused.svg | ||
| checkbox-off-light.svg | ||
| checkbox-off.svg | ||
| checkbox.svg | ||
| color-pick.svg | ||
| dash-placeholder.svg | ||
| eye-not-looking-symbolic.svg | ||
| eye-open-negative-filled-symbolic.svg | ||
| gnome-shell-high-contrast.scss | ||
| gnome-shell-start.svg | ||
| gnome-shell.scss | ||
| keyboard-caps-lock-filled-symbolic.svg | ||
| keyboard-enter-symbolic.svg | ||
| keyboard-hide-symbolic.svg | ||
| keyboard-layout-filled-symbolic.svg | ||
| keyboard-shift-filled-symbolic.svg | ||
| meson.build | ||
| message-indicator-symbolic.svg | ||
| no-events.svg | ||
| no-notifications.svg | ||
| pad-osd.css | ||
| pointer-double-click-symbolic.svg | ||
| pointer-drag-symbolic.svg | ||
| pointer-primary-click-symbolic.svg | ||
| pointer-secondary-click-symbolic.svg | ||
| process-working.svg | ||
| README.md | ||
| running-indicator.svg | ||
| screen-privacy-disabled-symbolic.svg | ||
| screen-privacy-symbolic.svg | ||
| screenshot-ui-area-symbolic.svg | ||
| screenshot-ui-display-symbolic.svg | ||
| screenshot-ui-window-symbolic.svg | ||
| select-mode-symbolic.svg | ||
| toggle-off-hc.svg | ||
| toggle-off-light.svg | ||
| toggle-off.svg | ||
| toggle-on-hc.svg | ||
| toggle-on-light.svg | ||
| toggle-on.svg | ||
| window-close-24-symbolic.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.