AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

adwaita: Solve junction problem without border image

Browse Source 
This genius piece of CSS colors only the top left (or top right in RTL)
pixel of the scrollbar junction.
Doing it this way is better because we don't have to upload a cairo node
every frame.
This commit is contained in:
Timm Bäder 2019-12-22 11:40:30 +01:00
parent 1e55e01692
commit 982d73df0b
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
gtk/theme/Adwaita/_common.scss
View File

@ -3760,17 +3760,30 @@ scrolledwindow {
junction { // the small square between two scrollbars
border-color: transparent;
// the border image is used to add the missing dot between the borders, details, details, details...
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
background-color: $scrollbar_bg_color;
// Only color the top-left (or top right in RTL) pixel, to visually connect
// the borders of the two scrollbars.
&:dir(rtl) { border-image-slice: 0 1 0 0; }
background: $borders_color,
linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px);
&:dir(rtl) {
background: $borders_color,
linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
}
&:backdrop {
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
background-color: $backdrop_scrollbar_bg_color;
transition: $backdrop_transition;
background: $backdrop_borders_color,
linear-gradient(to bottom, transparent 1px, $backdrop_scrollbar_bg_color 1px),
linear-gradient(to right, transparent 1px, $backdrop_scrollbar_bg_color 1px);
&:dir(rtl) {
background: $backdrop_borders_color,
linear-gradient(to bottom, transparent 1px, $backdrop_scrollbar_bg_color 1px),
linear-gradient(to left, transparent 1px, $backdrop_scrollbar_bg_color 1px);
}
}
}
}