Fixing gtk4 issues from gtk3 copy

This commit is contained in:
Eudaimon 2022-05-23 13:27:46 +02:00
parent 3a7251ca92
commit 7b6af86a7d
4 changed files with 166 additions and 157 deletions

29
TODO.md
View File

@ -1,9 +1,7 @@
# 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
@ -16,38 +14,29 @@ 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)
- ~~Clicking on something ("active") makes it look like something selected (or, if it is a background, a bit darker)~~
- Menus
- Color buttons
- popovers?
- 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.
- ~~fix undershoots! use Skewaita's~~
## 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

View File

@ -429,6 +429,9 @@ widget.view, widget.view:disabled {
color: @theme_text_color;
}
widget.view:disabled {
color: @insensitive_fg_color;
}
/* Exceptional views */
calendar.view,
iconview.view, iconview,

View File

@ -78,6 +78,50 @@
@define-color content_view_bg @less_dark_color;
/**********************
* 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; }
/*******
* OSD *
*******/
@ -159,11 +203,10 @@
background-clip: padding-box;
-GtkTextView-error-underline-color: @error_color;
/* -GtkTextView-error-underline-color: @error_color;
-GtkScrolledWindow-scrollbar-spacing: 0;
/* Webkit and Firefox have problem with steppers
and also with a negative margin for the slider */
-GtkScrollbar-has-backward-stepper: true;
-GtkScrollbar-has-forward-stepper: true;
@ -176,11 +219,10 @@
-WnckTasklist-fade-overlay-rect: 0;
/* this makes emacs behave weirdly */
/*border-radius: 1px;*/
-GtkWindow-resize-grip-width: 10;
-GtkWindow-resize-grip-height: 10;
-GtkWindow-resize-grip-height: 10;*/
outline-color: @focus_border;
outline-style: dashed;
@ -257,9 +299,9 @@ iconview :selected:focus {
-gtk-icon-shadow: none;
}
*:active {
/* *:active {
background-color: shade(@theme_bg_color, 0.915);
}
}*/
.background {
border-style: none;
@ -366,11 +408,8 @@ row {
box-shadow: inset 0 0 0 1px @green;
}
.view:selected,
.view:active,
.view :selected,
.view :active,
/*.view :active,*/
iconview:selected,
.view text:selected,
iconview text:selected,
@ -429,6 +468,10 @@ widget.view, widget.view:disabled {
color: @theme_text_color;
}
widget.view:disabled {
color: @insensitive_fg_color;
}
/* Exceptional views */
calendar.view,
iconview.view, iconview,
@ -1036,7 +1079,7 @@ notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow
* GtkTreeView *
***************/
treeview {
-GtkTreeView-vertical-separator: 0;
/*-GtkTreeView-vertical-separator: 0;*/
}
treeview.view,
@ -1320,8 +1363,8 @@ combobox :hover {
combobox .separator {
/* always disable separators */
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
/*-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;*/
}
/* compensation for combo shadow */
@ -1447,7 +1490,7 @@ button:disabled {
alpha(@button_gradient_color_a, 0.5),
alpha(@button_gradient_color_b, 0.5));
color: @insensitive_fg_color;
-gtk-icon-effect: dim;
-gtk-icon-filter: opacity(0.5);
}
button:active:disabled,
@ -1888,7 +1931,7 @@ menubar {
padding: 0px;
color: @theme_text_color;
-GtkWidget-window-dragging: true;
/*-GtkWidget-window-dragging: true;*/
/*-GtkMenuBar-internal-padding: 0;*/
}
@ -1938,7 +1981,7 @@ menubar > menuitem *:hover {
}
menu *:disabled {
-gtk-icon-effect:dim;
-gtk-icon-filter: opacity(0.5);
}
@ -2067,7 +2110,7 @@ toolbar {
@button_gradient_color_a,
@button_gradient_color_b);
-GtkWidget-window-dragging: true;
/*-GtkWidget-window-dragging: true;*/
/*-GtkToolbar-button-relief: normal;*/
}
@ -2398,7 +2441,7 @@ GtkOverlay.osd {
@osd_toolbar_bg_c);
background-color: transparent;
-GtkToolbar-button-relief: normal;
/*-GtkToolbar-button-relief: normal;*/
}
.osd.toolbar .button,
@ -2861,8 +2904,8 @@ expander arrow:checked {
background-color: transparent;
}
.expander column:sorted:selected,
.expander column:sorted:selected:hover {
.expander column:selected,
.expander column:selected:hover {
background-image: none;
background-color: transparent;
}
@ -2889,7 +2932,7 @@ expander arrow:checked {
}
GdMainIconView.content-view {
-GdMainIconView-icon-size: 40;
/*-GdMainIconView-icon-size: 40;*/
}
iconview.content-view.check {
@ -3102,7 +3145,9 @@ revealer > box {
**************************/
.window-frame,
decoration {
/*decoration*/
window.csd
{
border-radius: 0px;
border-width: 0px;
/* h, v, blur, spread, color */
@ -3114,7 +3159,9 @@ decoration {
}
.window-frame.solid-csd,
.solid-csd decoration {
/*.solid-csd decoration */
window.csd.solid-csd
{
/* resize cursor area */
margin: 0;
padding: 4px;
@ -3159,9 +3206,12 @@ decoration {
.window-frame.csd.tooltip,
.window-frame.csd.message-dialog,
.csd.popup decoration,
/*.csd.popup decoration,
tooltip.csd decoration,
messagedialog.csd decoration
messagedialog.csd decoration*/
window.csd.popup,
window.csd.dialog.message,
window.csd.tooltip
{
border-radius: 0;
box-shadow: 0 1px 4px 0 alpha(black, 0.7);
@ -3274,16 +3324,13 @@ popover.background radiobutton arrow.right {
/* displays at end of mouse scrolling */
overshoot.top {
background-image: -gtk-gradient(radial,
center top, 0,
center top, 0.5,
to(@overshoot_bg_color),
to(alpha(@overshoot_bg_color, 0))),
-gtk-gradient(radial,
center top, 0,
center top, 0.6,
from(rgba(73, 87, 56, 0.17)),
to(rgba(73, 87, 56, 0)));
background-image: radial-gradient(farthest-side at top,
@overshoot_bg_color,
alpha(@overshoot_bg_color, 0)),
radial-gradient(farthest-side at top,
alpha(@overshoot_bg_color, 0.17),
alpha(@overshoot_bg_color, 0));
background-size: 100% 20%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
@ -3292,43 +3339,25 @@ overshoot.top {
box-shadow: none;
}
/*
overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))),
-gtk-gradient(radial, center top, 0, center top, 0.6, from(alpha(@overshoot_backdrop_bg_color, 0.07)), to(alpha(@overshoot_backdrop_bg_color, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none;
}
*/
overshoot.top:backdrop {
background-image: -gtk-gradient(radial,
center top, 0,
center top, 0.5,
to(@overshoot_backdrop_bg_color),
to(rgba(137, 145, 131, 0)));
background-size: 100% 20%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border-style: none;
box-shadow: none;
background-image: radial-gradient(farthest-side at top,
@overshoot_backdrop_bg_color,
alpha(@overshoot_backdrop_bg_color, 0)),
radial-gradient(farthest-side at top,
alpha(@overshoot_backdrop_bg_color, 0.17),
alpha(@overshoot_backdrop_bg_color, 0));
}
overshoot.bottom {
background-image: -gtk-gradient(radial,
center bottom, 0,
center bottom, 0.5,
to(@overshoot_bg_color),
to(rgba(158, 179, 137, 0))),
-gtk-gradient(radial,
center bottom, 0,
center bottom, 0.6,
from(rgba(73, 87, 56, 0.17)),
to(rgba(73, 87, 56, 0)));
background-image: radial-gradient(farthest-side at bottom,
@overshoot_bg_color,
alpha(@overshoot_bg_color, 0)),
radial-gradient(farthest-side at bottom,
alpha(@overshoot_bg_color, 0.17),
alpha(@overshoot_bg_color, 0));
background-size: 100% 20%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
@ -3338,30 +3367,23 @@ overshoot.bottom {
}
overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial,
center bottom, 0,
center bottom, 0.5,
to(@overshoot_backdrop_bg_color),
to(rgba(137, 145, 131, 0)));
background-size: 100% 20%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border-style: none;
box-shadow: none;
background-image: radial-gradient(farthest-side at bottom,
@overshoot_backdrop_bg_color,
alpha(@overshoot_backdrop_bg_color, 0)),
radial-gradient(farthest-side at bottom,
alpha(@overshoot_backdrop_bg_color, 0.17),
alpha(@overshoot_backdrop_bg_color, 0));
}
overshoot.left {
background-image: -gtk-gradient(radial,
left center, 0,
left center, 0.5,
to(@overshoot_bg_color),
to(rgba(158, 179, 137, 0))),
-gtk-gradient(radial,
left center, 0,
left center, 0.6,
from(rgba(73, 87, 56, 0.07)),
to(rgba(73, 87, 56, 0)));
background-image: radial-gradient(farthest-side at left,
@overshoot_bg_color,
alpha(@overshoot_bg_color, 0)),
radial-gradient(farthest-side at left,
alpha(@overshoot_bg_color, 0.17),
alpha(@overshoot_bg_color, 0));
background-size: 20% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
@ -3371,30 +3393,23 @@ overshoot.left {
}
overshoot.left:backdrop {
background-image: -gtk-gradient(radial,
left center, 0,
left center, 0.5,
to(@overshoot_backdrop_bg_color),
to(rgba(137, 145, 131, 0)));
background-size: 20% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border-style: none;
box-shadow: none;
background-image: radial-gradient(farthest-side at left,
@overshoot_backdrop_bg_color,
alpha(@overshoot_backdrop_bg_color, 0)),
radial-gradient(farthest-side at left,
alpha(@overshoot_backdrop_bg_color, 0.17),
alpha(@overshoot_backdrop_bg_color, 0));
}
overshoot.right {
background-image: -gtk-gradient(radial,
right center, 0,
right center, 0.5,
to(@overshoot_bg_color),
to(rgba(158, 179, 137, 0))),
-gtk-gradient(radial,
right center, 0,
right center, 0.6,
from(rgba(73, 87, 56, 0.07)),
to(rgba(73, 87, 56, 0)));
background-image: radial-gradient(farthest-side at right,
@overshoot_bg_color,
alpha(@overshoot_bg_color, 0)),
radial-gradient(farthest-side at right,
alpha(@overshoot_bg_color, 0.17),
alpha(@overshoot_bg_color, 0));
background-size: 20% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
@ -3404,20 +3419,16 @@ overshoot.right {
}
overshoot.right:backdrop {
background-image: -gtk-gradient(radial,
right center, 0,
right center, 0.5,
to(@overshoot_backdrop_bg_color),
to(rgba(137, 145, 131, 0)));
background-size: 20% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border-style: none;
box-shadow: none;
background-image: radial-gradient(farthest-side at right,
@overshoot_backdrop_bg_color,
alpha(@overshoot_backdrop_bg_color, 0)),
radial-gradient(farthest-side at right,
alpha(@overshoot_backdrop_bg_color, 0.17),
alpha(@overshoot_backdrop_bg_color, 0));
}
/*old ones, not working in gtk4
undershoot.top {
background-color: transparent;
background-image: linear-gradient(to bottom,
@ -3464,7 +3475,17 @@ undershoot.right {
background-repeat: repeat-y;
background-origin: content-box;
background-position: right center;
}
}*/
undershoot { background-repeat: no-repeat; background-clip: border-box; }
undershoot.top { background-image: linear-gradient(to bottom, alpha(black,0.5), alpha(black,0.2), alpha(black,0)); background-size: 100% 1em; background-position: top; }
undershoot.bottom { background-image: linear-gradient(to top, alpha(black,0.5), alpha(black,0.2), alpha(black,0)); background-size: 100% 1em; background-position: bottom; }
undershoot.left { background-image: linear-gradient(to right, alpha(black,0.5), alpha(black,0.2), alpha(black,0)); background-size: 1em 100%; background-position: left; }
undershoot.right { background-image: linear-gradient(to left, alpha(black,0.5), alpha(black,0.2), alpha(black,0)); background-size: 1em 100%; background-position: right; }
#XfceNotifyWindow {
@ -3657,13 +3678,13 @@ check row:selected:focus:disabled.button.flat {
-gtk-icon-source: url("assets/checkbox-unchecked-insensitive-dark.svg");
}
check:active,
/*check:active,
check row:selected:active,
check row:selected:focus:active,
check:active.button.flat,
check row:selected:active.button.flat,
check row:selected:focus:active.button.flat,
check row:selected:focus:active.button.flat,*/
check:checked,
check:checked:hover,
@ -3676,13 +3697,13 @@ check row:selected:focus:checked.button.flat {
-gtk-icon-source: url("assets/checkbox-checked-dark.svg");
}
check:active:disabled,
/*check:active:disabled,
check row:selected:active:disabled,
check row:selected:focus: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:active:disabled.button.flat,*/
check:checked:disabled,
check row:selected:checked:disabled,
@ -3734,13 +3755,13 @@ radio row:selected:focus:disabled {
-gtk-icon-source: url("assets/radio-unselected-insensitive-dark.svg");
}
radio:active,
/*radio:active,
radio row:selected:active,
radio row:selected:focus:active,
radio:active.button.flat,
radio row:selected:active.button.flat,
radio row:selected:focus:active.button.flat,
radio row:selected:focus:active.button.flat,*/
radio:checked,
radio:checked:hover,
@ -3752,13 +3773,13 @@ radio row:selected:focus:checked.button.flat {
-gtk-icon-source: url("assets/radio-selected-dark.svg");
}
radio:active:disabled,
/*radio:active:disabled,
radio row:selected:active:disabled,
radio row:selected:focus: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:active:disabled.button.flat,*/
radio:checked:disabled,
radio row:selected:checked:disabled,

View File

@ -1,4 +0,0 @@
[Settings]
gtk-color-scheme = "base_color:#404040\nbg_color:#404040\ntooltip_bg_color:#000000\nselected_bg_color:#141414\ntext_color:#ffffff\nfg_color:#ffffff;\ntooltip_fg_color:#eeeeee\nselected_fg_color:#3399FF"
gtk-auto-mnemonics = 1
gtk-visible-focus = automatic