Skip to content

Commit

Permalink
Improvement: GTK3&4 - 'paned' border better viswibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekomer
thekomer committed Mar 10, 2022
1 parent d827475 commit bdc3014
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 38 deletions.
16 changes: 10 additions & 6 deletions gtk-3.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3423,21 +3423,25 @@ paned > separator {
min-height: 1px;
-gtk-icon-source: none;
border-style: none;
background-color: transparent;
background-color: inherit;
background-image: image(rgba(255, 255, 255, 0.05));
background-size: 1px 1px; }
paned > separator:hover {
background-image: image(rgba(255, 255, 255, 0.11)); }
paned > separator:selected {
background-image: image(#ff6a00); }
paned > separator:backdrop {
background-image: image(rgba(59, 62, 71, 0.145)); }
paned > separator.wide {
min-width: 5px;
min-height: 5px;
background-color: #0E111D;
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05));
min-width: 8px;
min-height: 8px;
background-color: inherit;
background-image: inherit;
background-size: 1px 1px, 1px 1px; }
paned > separator.wide:hover {
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05)); }
paned > separator.wide:backdrop {
background-color: #0E111D;
background-color: inherit;
background-image: image(rgba(59, 62, 71, 0.145)), image(rgba(59, 62, 71, 0.145)); }

paned.horizontal > separator {
Expand Down
16 changes: 10 additions & 6 deletions gtk-3.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3423,21 +3423,25 @@ paned > separator {
min-height: 1px;
-gtk-icon-source: none;
border-style: none;
background-color: transparent;
background-color: inherit;
background-image: image(rgba(255, 255, 255, 0.05));
background-size: 1px 1px; }
paned > separator:hover {
background-image: image(rgba(255, 255, 255, 0.11)); }
paned > separator:selected {
background-image: image(#ff6a00); }
paned > separator:backdrop {
background-image: image(rgba(59, 62, 71, 0.145)); }
paned > separator.wide {
min-width: 5px;
min-height: 5px;
background-color: #0E111D;
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05));
min-width: 8px;
min-height: 8px;
background-color: inherit;
background-image: inherit;
background-size: 1px 1px, 1px 1px; }
paned > separator.wide:hover {
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05)); }
paned > separator.wide:backdrop {
background-color: #0E111D;
background-color: inherit;
background-image: image(rgba(59, 62, 71, 0.145)), image(rgba(59, 62, 71, 0.145)); }

paned.horizontal > separator {
Expand Down
15 changes: 8 additions & 7 deletions gtk-3.0/widgets/_paned.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,25 @@ paned {
min-height: 1px;
-gtk-icon-source: none; // defeats the ugly default handle decoration
border-style: none; // just to be sure
background-color: transparent;
background-color: inherit; //transparent;
// workaround, using background istead of a border since the border will get rendered twice (?)
background-image: image($borders_color);
background-size: 1px 1px;

&:hover { background-image: image(opacify($borders_color, 0.06)); }
&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?

&:backdrop { background-image: image($backdrop_borders_color); }

&.wide {
min-width: 5px;
min-height: 5px;
background-color: $bg_color;
background-image: image($borders_color), image($borders_color);
min-width: 8px;
min-height: 8px;
background-color: inherit; // $bg_color;
background-image: inherit; //image($borders_color), image($borders_color);
background-size: 1px 1px, 1px 1px;

&:hover { background-image: image($borders_color), image($borders_color); }
&:backdrop {
background-color: $backdrop_bg_color;
background-color: inherit; //$backdrop_bg_color;
background-image: image($backdrop_borders_color),
image($backdrop_borders_color);
}
Expand Down
16 changes: 10 additions & 6 deletions gtk-4.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3396,21 +3396,25 @@ paned > separator {
min-height: 1px;
-gtk-icon-source: none;
border-style: none;
background-color: transparent;
background-color: inherit;
background-image: image(rgba(255, 255, 255, 0.05));
background-size: 1px 1px; }
paned > separator:hover {
background-image: image(rgba(255, 255, 255, 0.11)); }
paned > separator:selected {
background-image: image(#ff6a00); }
paned > separator:backdrop {
background-image: image(rgba(59, 62, 71, 0.145)); }
paned > separator.wide {
min-width: 5px;
min-height: 5px;
background-color: #0E111D;
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05));
min-width: 8px;
min-height: 8px;
background-color: inherit;
background-image: inherit;
background-size: 1px 1px, 1px 1px; }
paned > separator.wide:hover {
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05)); }
paned > separator.wide:backdrop {
background-color: #0E111D;
background-color: inherit;
background-image: image(rgba(59, 62, 71, 0.145)), image(rgba(59, 62, 71, 0.145)); }

paned.horizontal > separator {
Expand Down
16 changes: 10 additions & 6 deletions gtk-4.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3396,21 +3396,25 @@ paned > separator {
min-height: 1px;
-gtk-icon-source: none;
border-style: none;
background-color: transparent;
background-color: inherit;
background-image: image(rgba(255, 255, 255, 0.05));
background-size: 1px 1px; }
paned > separator:hover {
background-image: image(rgba(255, 255, 255, 0.11)); }
paned > separator:selected {
background-image: image(#ff6a00); }
paned > separator:backdrop {
background-image: image(rgba(59, 62, 71, 0.145)); }
paned > separator.wide {
min-width: 5px;
min-height: 5px;
background-color: #0E111D;
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05));
min-width: 8px;
min-height: 8px;
background-color: inherit;
background-image: inherit;
background-size: 1px 1px, 1px 1px; }
paned > separator.wide:hover {
background-image: image(rgba(255, 255, 255, 0.05)), image(rgba(255, 255, 255, 0.05)); }
paned > separator.wide:backdrop {
background-color: #0E111D;
background-color: inherit;
background-image: image(rgba(59, 62, 71, 0.145)), image(rgba(59, 62, 71, 0.145)); }

paned.horizontal > separator {
Expand Down
15 changes: 8 additions & 7 deletions gtk-4.0/widgets/_paned.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,25 @@ paned {
min-height: 1px;
-gtk-icon-source: none; // defeats the ugly default handle decoration
border-style: none; // just to be sure
background-color: transparent;
background-color: inherit; //transparent;
// workaround, using background istead of a border since the border will get rendered twice (?)
background-image: image($borders_color);
background-size: 1px 1px;

&:hover { background-image: image(opacify($borders_color, 0.06)); }
&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?

&:backdrop { background-image: image($backdrop_borders_color); }

&.wide {
min-width: 5px;
min-height: 5px;
background-color: $bg_color;
background-image: image($borders_color), image($borders_color);
min-width: 8px;
min-height: 8px;
background-color: inherit; // $bg_color;
background-image: inherit; //image($borders_color), image($borders_color);
background-size: 1px 1px, 1px 1px;

&:hover { background-image: image($borders_color), image($borders_color); }
&:backdrop {
background-color: $backdrop_bg_color;
background-color: inherit; //$backdrop_bg_color;
background-image: image($backdrop_borders_color),
image($backdrop_borders_color);
}
Expand Down

0 comments on commit bdc3014

Please sign in to comment.