Almost done, but not yet!

This commit is contained in:
eudaimon 2022-05-26 15:18:53 +02:00
parent e9846088dd
commit 07eb10dbc6
4 changed files with 185 additions and 166 deletions

21
TODO.md
View File

@ -9,27 +9,30 @@
# GTK4 support (in progress)
================================
To fix:
To fix (already fixed with strikethrough):
- calendar buttons
- Color buttons
- popovers?
- Window control buttons: as in gtk3
- ~~Make switches the right size~~
- Improve rows
- ~~Improve rows. Selected row: children don't have get selected background (+ borders...), only color (for gtk3 too).~~
- ~~Separators do not appear~~
- ~~Clicking on something ("active") makes it look like something selected (or, if it is a background, a bit darker)~~
- ~~Menus (popover.menu, menubar > item in GT4)~~
- Color buttons
- popovers?
- ~~treeview tree~~
- calendar buttons
- horizontal spinbuttons very small
- ~~horizontal spinbuttons very small and different paddings when hovering~~
- ~~toolbar not looking like a toolbar (from toolbar to .toolbar)~~
- entry progress not appearing
- entry being active makes it look like selected
- entry:hover (or something:hover) removes text shadow on entries.
- ~~entry progress not appearing~~
- ~~entry being active makes it look like selected~~
- ~~entry:hover (or something:hover) removes text shadow on entries.~~
- ~~fix undershoots! use Skewaita's~~
## Don't use -gtk-icon-theme in your CSS
GTK 4 always uses the current icon theme, with no way to change this.

View File

@ -9,27 +9,28 @@
# GTK4 support (in progress)
================================
To fix:
To fix (already fixed with strikethrough):
- ~~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
- calendar buttons
- Color buttons
- popovers?
- ~~Make switches the right size~~
- ~~Improve rows. Selected row: children don't have get selected background (+ borders...), only color (for gtk3 too).~~
- ~~Separators do not appear~~
- ~~Clicking on something ("active") makes it look like something selected (or, if it is a background, a bit darker)~~
- ~~Menus (popover.menu, menubar > item in GT4)~~
- ~~treeview tree~~
- calendar buttons
- horizontal spinbuttons very small
- toolbar not looking like a toolbar
- entry progress not appearing
- entry being active makes it look like selected
- entry:hover (or something:hover) removes text shadow on entries.
- ~~horizontal spinbuttons very small and different paddings when hovering~~
- ~~toolbar not looking like a toolbar (from toolbar to .toolbar)~~
- ~~entry progress not appearing~~
- ~~entry being active makes it look like selected~~
- ~~entry:hover (or something:hover) removes text shadow on entries.~~
- ~~fix undershoots! use Skewaita's~~
## Don't use -gtk-icon-theme in your CSS
GTK 4 always uses the current icon theme, with no way to change this.
@ -40,12 +41,6 @@ GTK 4 always uses the current icon theme, with no way to change this.
## 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 ()
@ -67,46 +62,4 @@ 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; }
```

View File

@ -309,9 +309,9 @@ rubberband {
row {
border-width: 1px;
border-style: solid;
border-color: shade(@view_color, 1.4) shade(@view_color, 0.6) shade(@view_color, 0.6) shade(@view_color, 1.2);
background-color: @view_color;
color: @theme_text_color;
border-color: shade(@theme_bg_color, 1.4) shade(@theme_bg_color, 0.6) shade(@theme_bg_color, 0.6) shade(@theme_bg_color, 1.2);
/*background-color: @view_color;*/
color: @theme_fg_color;
}
row.activatable:hover {
@ -321,6 +321,21 @@ row.activatable:hover {
row:disabled, row:disabled label {
color: @insensitive_fg_color;
}
/*
* this is to prevent autohidable scrollbars to appear on top of content that might need to be displayed or clicked.
* I wish they could be forced to stay always visible, but I haven't found how.
* However, it looks ugly if no scrollbar is present, so I'm not really sure what to do about it...
*/
scrolledwindow > viewport, scrolledwindow > .view {
padding-right: 20px;
}
scrolledwindow:dir(rtl) > viewport, scrolledwindow:dir(rtl) > .view {
padding-left: 20px;
}
/****************
* Floating Bar *
****************/
@ -1329,9 +1344,9 @@ combobox {
text-shadow: 0 -1px black;
}
combobox :hover {
/*combobox :hover {
text-shadow: none;
}
}*/
combobox .separator {
/* always disable separators */

View File

@ -256,7 +256,7 @@
color: @theme_selected_fg_color;
}
*:selected:focus {
*:selected:focus-within {
border-style: solid;
border-width: 1px;
border-radius: 0px;
@ -283,7 +283,7 @@ iconview :selected {
}
iconview :selected:focus {
iconview :selected:focus-within {
border: none;
background-color: @theme_selected_bg_color;
color: @theme_selected_fg_color;
@ -351,9 +351,10 @@ rubberband {
row {
border-width: 1px;
border-style: solid;
border-color: shade(@view_color, 1.4) shade(@view_color, 0.6) shade(@view_color, 0.6) shade(@view_color, 1.2);
background-color: @view_color;
color: @theme_text_color;
border-color: shade(@theme_bg_color, 1.4) shade(@theme_bg_color, 0.6) shade(@theme_bg_color, 0.6) shade(@theme_bg_color, 1.2);
/*background-color: @view_color;*/
color: @theme_fg_color;
padding: 2px 5px;
}
row.activatable:hover {
@ -364,6 +365,21 @@ row:disabled, row:disabled label {
color: @insensitive_fg_color;
}
/*
* this is to prevent autohidable scrollbars to appear on top of content that might need to be displayed or clicked.
* I wish they could be forced to stay always visible, but I haven't found how.
* However, it looks ugly if no scrollbar is present, so I'm not really sure what to do about it...
*/
scrolledwindow > viewport, scrolledwindow > .view {
padding-right: 13px;
}
scrolledwindow:dir(rtl) > viewport, scrolledwindow:dir(rtl) > .view {
padding-left: 13px;
}
/****************
* Floating Bar *
@ -440,18 +456,18 @@ entry selection {
color: @theme_selected_fg_color;
}
/*.view:selected:focus,
iconview:selected:focus,*/
.view :selected:focus,
iconview :selected:focus,
.view text:selected:focus,
iconview text:selected:focus,
textview text:selected:focus,
.view text selection:focus,
iconview text selection:focus,
textview text selection:focus,
spinbutton selection:focus,
entry selection:focus {
/*.view:selected:focus-within,
iconview:selected:focus-within,*/
.view :selected:focus-within,
iconview :selected:focus-within,
.view text:selected:focus-within,
iconview text:selected:focus-within,
textview text:selected:focus-within,
.view text selection:focus-within,
iconview text selection:focus-within,
textview text selection:focus-within,
spinbutton selection:focus-within,
entry selection:focus-within {
background-color: @theme_selected_bg_color; /* used by Firefox for the border!! */
color: @theme_selected_fg_color;
}
@ -609,12 +625,12 @@ entry:selected {
background-color: @theme_selected_fg_color;
}
entry:selected:focus {
entry:selected:focus-within {
background-color: @theme_selected_bg_color;
}
spinbutton:focus,
entry:focus {
spinbutton:focus-within,
entry:focus-within {
border-image: none;
border-style: solid;
border-color: @theme_selected_fg_color;
@ -629,10 +645,10 @@ entry:disabled {
text-shadow: none;
}
spinbutton:not(.vertical) progress,
spinbutton:not(.vertical) progress:focus,
entry progress,
entry progress:focus {
spinbutton:not(.vertical) text progress > trough > progress,
spinbutton:not(.vertical):focus-within text progress > trough > progress,
entry progress > trough > progress,
entry:focus-within progress > trough > progress {
margin-left: 2px;
margin-right: 2px;
border-image: none;
@ -653,10 +669,13 @@ entry progress:focus {
shade(@progressbar_background_a, 0.91));
background-size: auto;
box-shadow: none;
min-height: 6px;
}
text > placeholder { color: alpha(currentColor,0.5); }
/*entry progress.pulse,
entry progress.pulse:focus {
entry progress.pulse:focus-within {
background-image: linear-gradient(to top,
transparent 2px,
white 2px,
@ -666,9 +685,9 @@ entry progress.pulse:focus {
transparent 5px);
}*/
entry:active {
/*entry:active {
background-color: shade(@theme_selected_bg_color, 1.23);
}
}*/
/* Correction for Yelp and Evolution */
textview.entry,
@ -724,7 +743,7 @@ progressbar row,
progressbar row.view,
progressbar row:hover,
progressbar row:selected,
progressbar row:selected:focus {
progressbar row:selected:focus-within {
border-image: none;
border-radius: 0px;
background-image: linear-gradient(-45deg,
@ -745,7 +764,7 @@ progressbar row:selected:focus {
}
progressbar row:selected,
progressbar row:selected:focus {
progressbar row:selected:focus-within {
color: @theme_fg_color;
}
@ -753,7 +772,7 @@ progressbar.vertical row,
progressbar.vertical row.view,
progressbar.vertical row:hover,
progressbar.vertical row:selected,
progressbar.vertical row:selected:focus {
progressbar.vertical row:selected:focus-within {
background-image: linear-gradient(-135deg,
alpha(@progressbar_pattern, 0.09),
alpha(@progressbar_pattern, 0.09) 25%,
@ -802,7 +821,7 @@ trough row {
}
.trough row:selected,
.trough row:selected:focus {
.trough row:selected:focus-within {
border-image: none;
}
@ -1386,9 +1405,9 @@ combobox {
text-shadow: 0 -1px black;
}
combobox :hover {
/*combobox :hover {
text-shadow: none;
}
}*/
combobox .separator {
/* always disable separators */
@ -1438,6 +1457,7 @@ button {
button.image-button,
.primary-toolbar.toolbar button.image-button {
padding: 3px 4px 4px 4px;
@ -1574,7 +1594,7 @@ button.color colorswatch:only-child:backdrop {
box-shadow: none;
}*/
button:focus, switch:focus, scale:focus
button:focus-within, switch:focus-within, scale:focus-within
{
outline-width: 1px;
/*box-shadow: 0 0 0 -1 cyan;*/
@ -1661,13 +1681,24 @@ button.link label{
/*****************
* GtkSpinButton *
*****************/
spinbutton button,
spinbutton button:disabled,
spinbutton button:hover,
spinbutton button:active,
spinbutton button:focus,
spinbutton button:focus-within,
spinbutton button:checked
spinbutton>button.image-button,
spinbutton>button.image-button.up,
spinbutton>button.image-button.down,
spinbutton>button.image-button:disabled,
spinbutton>button.image-button:hover,
spinbutton>button.image-button:active,
spinbutton>button.image-button:focus-within,
spinbutton>button.image-button:checked
spinbutton button:checked {
{
background-image: none;
background-color: transparent;
/*border-width: 1px;*/
@ -1680,15 +1711,21 @@ spinbutton.vertical button,
spinbutton.vertical button:disabled,
spinbutton.vertical button:hover,
spinbutton.vertical button:active,
spinbutton.vertical button:focus,
spinbutton.vertical button:checked {
spinbutton.vertical button:focus-within,
spinbutton.vertical button:checked
spinbutton.vertical button.image-button,
spinbutton.vertical button.image-button:disabled,
spinbutton.vertical button.image-button:hover,
spinbutton.vertical button.image-button:active,
spinbutton.vertical button.image-button:focus-within,
spinbutton.vertical button.image-button:checked
{
/* top right bottom left */
padding: 4px 0px 4px 0px;
}
spinbutton button,
spinbutton button:focus {
spinbutton button:focus-within {
color: shade(@theme_text_color, 0.75);
}
@ -1708,7 +1745,7 @@ spinbutton:not(.vertical) button {
min-height: 16px;
}
spinbutton:not(.vertical) entry {
spinbutton:not(.vertical) text {
margin: 0px;
min-width: 28px;
background: none;
@ -1724,7 +1761,7 @@ spinbutton.vertical button {
min-width: 16px;
}
spinbutton.vertical entry {
spinbutton.vertical text {
margin: 0px;
min-height: 26px;
background: none;
@ -2719,7 +2756,7 @@ iconview {
}
iconview.view.cell:selected,
iconview.view.cell:selected:focus {
iconview.view.cell:selected:focus-within {
background-color: transparent;
border-style: solid;
border-width: 3px;
@ -2840,14 +2877,18 @@ radio,
check,
radio:selected,
check:selected,
radio:selected:focus,
check:selected:focus,
radio:active,
check:active,
radio:active:focus-within,
check:active:focus-within,
radio:selected:focus-within,
check:selected:focus-within,
cell.radio,
cell.check,
cell.radio:selected,
cell.check:selected,
cell.radio:selected:focus,
cell.check:selected:focus {
cell.radio:selected:focus-within,
cell.check:selected:focus-within {
background-color: transparent;
border-width: 0px;
border-style: none;
@ -2857,11 +2898,18 @@ check:hover,
check:selected:hover,
radio:hover,
radio:selected:hover,
treeview.view check:selected:focus,
treeview.view check:selected:focus-within,
treeview.view check:selected,
treeview.view radio:selected:focus,
treeview.view radio:selected {
treeview.view radio:selected:focus-within,
treeview.view radio:selected,
treeview.view check:active:focus-within,
treeview.view check:active,
treeview.view radio:active:focus-within,
treeview.view radio:active
{
background-color: transparent;
border-width: 0px;
border-style: none;
}
/*****************
@ -2931,7 +2979,7 @@ expander arrow:checked {
}
.expander row:selected,
.expander row:selected:focus {
.expander row:selected:focus-within {
border-image: none;
border-color: shade(@internal_element_prelight, 1.3);
color: shade(@internal_element_prelight, 1.3);
@ -3113,14 +3161,14 @@ label.keycap {
**************/
.dim-label,
.dim-label:hover,
.dim-label:focus,
.dim-label:focus-within,
.view.dim-label {
color: mix(@theme_fg_color, @theme_bg_color, 0.50);
text-shadow: none;
}
.dim-label:selected,
.dim-label:selected:focus {
.dim-label:selected:focus-within {
color: mix(@theme_selected_fg_color, @theme_base_color, 0.50);
text-shadow: none;
}
@ -3676,166 +3724,166 @@ menuitem check:indeterminate:disabled {
check:indeterminate,
check:indeterminate:hover,
check row:selected:indeterminate,
check row:selected:focus:indeterminate,
check row:selected:focus-within:indeterminate,
check:indeterminate.button.flat,
check:indeterminate:hover.button.flat,
check row:selected:indeterminate.button.flat,
check row:selected:focus:indeterminate.button.flat {
check row:selected:focus-within:indeterminate.button.flat {
-gtk-icon-source: url("assets/checkbox-mixed-dark.svg");
}
check:indeterminate:disabled,
check row:selected:indeterminate:disabled,
check row:selected:focus:indeterminate:disabled,
check row:selected:focus-within:indeterminate:disabled,
check:indeterminate:disabled.button.flat,
check row:selected:indeterminate:disabled.button.flat,
check row:selected:focus:indeterminate:disabled.button.flat {
check row:selected:focus-within:indeterminate:disabled.button.flat {
-gtk-icon-source: url("assets/checkbox-mixed-insensitive-dark.svg");
}
check,
check:hover,
check row:selected,
check row:selected:focus,
check row:selected:focus-within,
check.button.flat,
check:hover.button.flat,
check row:selected.button.flat,
check row:selected:focus.button.flat {
check row:selected:focus-within.button.flat {
-gtk-icon-source: url("assets/checkbox-unchecked-dark.svg");
}
check:disabled,
check row:selected:disabled,
check row:selected:focus:disabled,
check row:selected:focus-within:disabled,
check:disabled.button.flat,
check row:selected:disabled.button.flat,
check row:selected:focus:disabled.button.flat {
check row:selected:focus-within:disabled.button.flat {
-gtk-icon-source: url("assets/checkbox-unchecked-insensitive-dark.svg");
}
/*check:active,
check row:selected:active,
check row:selected:focus:active,
check row:selected:focus-within:active,
check:active.button.flat,
check row:selected:active.button.flat,
check row:selected:focus:active.button.flat,*/
check row:selected:focus-within:active.button.flat,*/
check:checked,
check:checked:hover,
check row:selected:checked,
check row:selected:focus:checked,
check row:selected:focus-within:checked,
check:checked.button.flat,
check:checked:hover.button.flat,
check row:selected:focus:checked.button.flat {
check row:selected:focus-within:checked.button.flat {
-gtk-icon-source: url("assets/checkbox-checked-dark.svg");
}
/*check:active:disabled,
check row:selected:active:disabled,
check row:selected:focus:active:disabled,
check row:selected:focus-within:active:disabled,
check:active:disabled.button.flat,
check row:selected:active:disabled.button.flat,
check row:selected:focus:active:disabled.button.flat,*/
check row:selected:focus-within:active:disabled.button.flat,*/
check:checked:disabled,
check row:selected:checked:disabled,
check row:selected:focus:checked:disabled,
check row:selected:focus-within:checked:disabled,
check:checked:disabled.button.flat,
check row:selected:checked:disabled.button.flat,
check row:selected:focus:checked:disabled.button.flat {
check row:selected:focus-within:checked:disabled.button.flat {
-gtk-icon-source: url("assets/checkbox-checked-insensitive-dark.svg");
}
radio:indeterminate,
radio:indeterminate:hover,
radio row:selected:indeterminate,
radio row:selected:focus:indeterminate,
radio row:selected:focus-within:indeterminate,
radio:indeterminate.button.flat,
radio:indeterminate:hover.button.flat,
radio row:selected:indeterminate.button.flat,
radio row:selected:focus:indeterminate.button.flat {
radio row:selected:focus-within:indeterminate.button.flat {
-gtk-icon-source: url("assets/radio-mixed-dark.svg");
}
radio:indeterminate:disabled,
radio row:selected:indeterminate:disabled,
radio row:selected:focus:indeterminate:disabled,
radio row:selected:focus-within:indeterminate:disabled,
radio:indeterminate:disabled.button.flat,
radio row:selected:indeterminate:disabled.button.flat,
radio row:selected:focus:indeterminate:disabled.button.flat {
radio row:selected:focus-within:indeterminate:disabled.button.flat {
-gtk-icon-source: url("assets/radio-mixed-insensitive-dark.svg");
}
radio,
radio:hover,
radio row:selected,
radio row:selected:focus,
radio row:selected:focus-within,
radio.button.flat,
radio:hover.button.flat,
radio row:selected.button.flat,
radio row:selected:focus.button.flat {
radio row:selected:focus-within.button.flat {
-gtk-icon-source: url("assets/radio-unselected-dark.svg");
}
radio:disabled,
radio row:selected:disabled,
radio row:selected:focus:disabled {
radio row:selected:focus-within:disabled {
-gtk-icon-source: url("assets/radio-unselected-insensitive-dark.svg");
}
/*radio:active,
radio row:selected:active,
radio row:selected:focus:active,
radio row:selected:focus-within:active,
radio:active.button.flat,
radio row:selected:active.button.flat,
radio row:selected:focus:active.button.flat,*/
radio row:selected:focus-within:active.button.flat,*/
radio:checked,
radio:checked:hover,
radio row:selected:focus:checked,
radio row:selected:focus-within:checked,
radio:checked.button.flat,
radio:checked:hover.button.flat,
radio row:selected:focus:checked.button.flat {
radio row:selected:focus-within:checked.button.flat {
-gtk-icon-source: url("assets/radio-selected-dark.svg");
}
/*radio:active:disabled,
radio row:selected:active:disabled,
radio row:selected:focus:active:disabled,
radio row:selected:focus-within:active:disabled,
radio:active:disabled.button.flat,
radio row:selected:active:disabled.button.flat,
radio row:selected:focus:active:disabled.button.flat,*/
radio row:selected:focus-within:active:disabled.button.flat,*/
radio:checked:disabled,
radio row:selected:checked:disabled,
radio row:selected:focus:checked:disabled,
radio row:selected:focus-within:checked:disabled,
radio:checked:disabled.button.flat,
radio row:selected:checked:disabled.button.flat,
radio row:selected:focus:checked:disabled.button.flat {
radio row:selected:focus-within:checked:disabled.button.flat {
-gtk-icon-source: url("assets/radio-selected-insensitive-dark.svg");
}
.sidebar .radio:active,
.sidebar .radio:active:focus,
.sidebar .radio:active:focus-within,
.sidebar .radio:active:hover,
.sidebar .radio:checked,
.sidebar .radio:checked:focus,
.sidebar .radio:checked:focus-within,
.sidebar .radio:checked:hover {
-gtk-icon-source: url("assets/sidebar-radio-checked-dark.svg");
}
@ -3845,15 +3893,15 @@ radio row:selected:focus:checked:disabled.button.flat {
}
.sidebar .radio:active:selected,
.sidebar .radio:active:selected:focus,
.sidebar .radio:active:selected:focus-within,
.sidebar .radio:checked:selected,
.sidebar .radio:checked:selected:focus {
.sidebar .radio:checked:selected:focus-within {
-gtk-icon-source: url("assets/sidebar-radio-selected-dark.svg");
}
.sidebar .radio:selected:hover,
.sidebar .radio:selected:focus {
.sidebar .radio:selected:focus-within {
-gtk-icon-source: url("assets/sidebar-radio-selected-prelight.svg");
}
@ -4112,7 +4160,7 @@ notebook > header tab.bottom:checked {
border-image: url("assets/tab-active-border-bottom.svg") 2 / 2px stretch;
}
notebook:focus {
notebook:focus-within {
background-color: shade(@theme_bg_color, 1.1);
}
@ -4121,12 +4169,12 @@ notebook:focus {
**************/
treeview.view:selected,
treeview.view:selected:focus {
treeview.view:selected:focus-within {
border-image: url("assets/row-selected-dark.svg") 1 0 0 0 / 1px 0px 0px 0px stretch;
}
treeview.view.trough:selected,
treeview.view.trough:selected:focus {
treeview.view.trough:selected:focus-within {
border-image: none;
}