E17gtk-revolved/TODO.md

# To do:

- "*:drop(active)" done, needs checking.

- Check that LibreOffice Calc's fix does not introduce any regressions somewhere else, because it required modifieng the .view selector, which is very general.

- Create new previews



# GTK4 support (in progress)
================================

To fix:

- Make switches the right size
- Improve rows
- Separators do not appear
- Clicking on something ("active") makes it look like something selected (or, if it is a background, a bit darker)
- Menus
- Color buttons
- popovers?


## Don't use -gtk-gradient in your CSS

GTK now supports standard CSS syntax for both linear and radial gradients, just use those.

## Don't use -gtk-icon-effect in your CSS

GTK now supports a more versatile -gtk-icon-filter instead.

Replace
Old 	Replacement
-gtk-icon-effect: dim 	-gtk-icon-filter: opacity(0.5)
-gtk-icon-effect: highlight 	-gtk-icon-filter: brightness(1.2)

## Don't use -gtk-icon-theme in your CSS

GTK 4 always uses the current icon theme, with no way to change this.

## Don't use -gtk-outline-...-radius in your CSS

These non-standard properties have been removed from GTK CSS. Just use regular border radius.

## no gtk-gradient

Use linear-gradient or radial-gradient.
Beware: background-position does not fully comply with CSS3 specs 
(for example: `background-position: top 1em right 1em;` is not valid)

## Window decorations

from decoration to windows.csd:
* window.csd
* window.csd:backdrop
* window.csd.popup
* window.csd.dialog.message
* window.csd.solid-csd

* .maximized decoration to window.maximized, etc ()

```css

window.maximized,
window.fullscreen,
window.tiled, window.tiled-top,
window.tiled-left,
window.tiled-right,
window.tiled-bottom {
  border-radius: 0;
}

```

Need to find titlebar colors, titlebar buttons, scrollbars, spinbuttons, statusbar, calendar (buttons, selected etc), attention-needed, some borders in notebooks
Maybe rows for page 2



```css
/**********************
 * General Typography *
 **********************/
.large-title {
  font-weight: 300;
  font-size: 24pt; }

.title-1 {
  font-weight: 800;
  font-size: 20pt; }

.title-2 {
  font-weight: 800;
  font-size: 15pt; }

.title-3 {
  font-weight: 700;
  font-size: 15pt; }

.title-4 {
  font-weight: 700;
  font-size: 13pt; }

.heading {
  font-weight: 700;
  font-size: 11pt; }

.body {
  font-weight: 400;
  font-size: 11pt; }

.caption-heading {
  font-weight: 700;
  font-size: 9pt; }

.caption {
  font-weight: 400;
  font-size: 9pt; }

```