Skip to content

Commit

Permalink
Improvements: GTK3&4 - rounded borders (it's better but not perfect)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekomer
thekomer committed Feb 10, 2022
1 parent d82b0a0 commit 6684073
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 49 deletions.
20 changes: 13 additions & 7 deletions gtk-3.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2480,7 +2480,7 @@ headerbar {
min-height: 34px;
background: #06070c;
color: #BFC3CD;
border-radius: 10px; }
border-radius: 12px; }
.titlebar:backdrop,
headerbar:backdrop {
border-color: rgba(59, 62, 71, 0.145);
Expand Down Expand Up @@ -2790,10 +2790,10 @@ headerbar separator {
window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar,
window:not(.tiled):not(.maximized) headerbar:first-child:backdrop,
window:not(.tiled):not(.maximized) headerbar:first-child {
border-top-left-radius: 10px; }
border-top-left-radius: 12px; }

window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child {
border-top-right-radius: 10px; }
border-top-right-radius: 12px; }

window {
border-top-left-radius: 8px;
Expand All @@ -2811,7 +2811,9 @@ window.csd > .titlebar:not(headerbar) {
background: #06070c; }

.titlebar {
border-radius: 10px 10px 0 0; }
border-radius: 12px 12px 0 0;
box-shadow: none;
margin-top: 1px; }

/**************
* GtkInfoBar *
Expand Down Expand Up @@ -4777,10 +4779,14 @@ treeview.view header button, treeview.view header button:hover, treeview.view he
* Windows *
* * * * * */
window.background {
border-radius: 0 0 8px 8px; }
border-radius: 0 0 10px 10px; }

headerbar.titlebar {
border-radius: 10px 10px 0 0; }
border-radius: 12px 12px 0 0;
box-shadow: none;
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }

/**********************
* Window Decorations *
Expand All @@ -4790,7 +4796,7 @@ decoration {
box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
margin: 10px;
border: 2px solid #512508;
background: transparent; }
background: #512508; }
decoration:backdrop {
box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
transition: 200ms ease-out;
Expand Down
20 changes: 13 additions & 7 deletions gtk-3.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2480,7 +2480,7 @@ headerbar {
min-height: 34px;
background: #06070c;
color: #BFC3CD;
border-radius: 10px; }
border-radius: 12px; }
.titlebar:backdrop,
headerbar:backdrop {
border-color: rgba(59, 62, 71, 0.145);
Expand Down Expand Up @@ -2790,10 +2790,10 @@ headerbar separator {
window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar,
window:not(.tiled):not(.maximized) headerbar:first-child:backdrop,
window:not(.tiled):not(.maximized) headerbar:first-child {
border-top-left-radius: 10px; }
border-top-left-radius: 12px; }

window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child {
border-top-right-radius: 10px; }
border-top-right-radius: 12px; }

window {
border-top-left-radius: 8px;
Expand All @@ -2811,7 +2811,9 @@ window.csd > .titlebar:not(headerbar) {
background: #06070c; }

.titlebar {
border-radius: 10px 10px 0 0; }
border-radius: 12px 12px 0 0;
box-shadow: none;
margin-top: 1px; }

/**************
* GtkInfoBar *
Expand Down Expand Up @@ -4777,10 +4779,14 @@ treeview.view header button, treeview.view header button:hover, treeview.view he
* Windows *
* * * * * */
window.background {
border-radius: 0 0 8px 8px; }
border-radius: 0 0 10px 10px; }

headerbar.titlebar {
border-radius: 10px 10px 0 0; }
border-radius: 12px 12px 0 0;
box-shadow: none;
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }

/**********************
* Window Decorations *
Expand All @@ -4790,7 +4796,7 @@ decoration {
box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
margin: 10px;
border: 2px solid #512508;
background: transparent; }
background: #512508; }
decoration:backdrop {
box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
transition: 200ms ease-out;
Expand Down
10 changes: 6 additions & 4 deletions gtk-3.0/widgets/_header-bars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ headerbar {
min-height: 34px;
background: $headerbar_color;
color: $headerbar_fg_color;
border-radius: 8px + 2px;
border-radius: 10px + 2px;
&:backdrop {
border-color: $backdrop_borders_color;
// background-image: none;
Expand Down Expand Up @@ -256,9 +256,9 @@ headerbar {

headerbar {
window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 8px + 2px; }}
window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 10px + 2px; }}

window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 8px + 2px; }}
window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 10px + 2px; }}
}

window {
Expand Down Expand Up @@ -288,5 +288,7 @@ window {

.titlebar{
@extend %titlebar;
border-radius: 8px + 2px 8px + 2px 0 0;
border-radius: 10px + 2px 10px + 2px 0 0;
box-shadow: none;
margin-top: 1px;
}
16 changes: 8 additions & 8 deletions gtk-3.0/widgets/_windows.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@
// this is added for rounded borders. I still don't know what I'm doing :P

window.background {
border-radius: 0 0 8px 8px;
border-radius: 0 0 10px 10px;
}

//decoration {
//border-radius: 0.5em 0.5em 0.5em 0.5em;
//}

headerbar.titlebar {
border-radius: 8px + 2px 8px + 2px 0 0;
border-radius: 10px + 2px 10px + 2px 0 0;
box-shadow: none;
margin-top: 1px;
margin-left: 1px;
margin-right: 1px;
}

/**********************
* Window Decorations *
*********************/
decoration {
border-radius: 8px + 2px;
border-radius: 10px;

// lamefun trick to get rounded borders regardless of CSD use
// border-width: 0px;
Expand All @@ -38,7 +38,7 @@ decoration {

// added for accessibility (window borders)
border: 2px solid $window_border_color;
background: transparent; //$window_border_color;
background: $window_border_color;

&:backdrop {
// the transparent shadow here is to enforce that the shadow extents don't
Expand Down
21 changes: 13 additions & 8 deletions gtk-4.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2417,7 +2417,7 @@ headerbar {
min-height: 34px;
background: #06070c;
color: #BFC3CD;
border-radius: 0; }
border-radius: 12px; }
.titlebar:backdrop,
headerbar:backdrop {
border-color: rgba(59, 62, 71, 0.145);
Expand Down Expand Up @@ -2728,14 +2728,14 @@ headerbar separator {
window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar,
window:not(.tiled):not(.maximized) headerbar:first-child:backdrop,
window:not(.tiled):not(.maximized) headerbar:first-child {
border-top-left-radius: 4px; }
border-top-left-radius: 12px; }

window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child {
border-top-right-radius: 4px; }
border-top-right-radius: 12px; }

window {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
border-top-left-radius: 8px;
border-top-right-radius: 8px; }

window.csd > .titlebar:not(headerbar) {
padding: 0;
Expand All @@ -2748,6 +2748,11 @@ window.csd > .titlebar:not(headerbar) {
.titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop {
background: #06070c; }

.titlebar {
border-radius: 12px 12px 0 0;
box-shadow: none;
margin-top: 1px; }

/**************
* GtkInfoBar *
**************/
Expand Down Expand Up @@ -4713,16 +4718,16 @@ window {
window.csd {
box-shadow: 0 4px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0);
margin: 0px;
border-radius: 0.5em 0.5em 0 0; }
border-radius: 10px 10px 0 0; }
window.csd:backdrop {
box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0);
transition: 200ms ease-out;
border: 2px solid #15161b; }
window.csd.popup {
border-radius: 0.5em;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
window.csd.dialog.message {
border-radius: 0.5em;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
window.solid-csd {
margin: 0;
Expand Down
21 changes: 13 additions & 8 deletions gtk-4.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2417,7 +2417,7 @@ headerbar {
min-height: 34px;
background: #06070c;
color: #BFC3CD;
border-radius: 0; }
border-radius: 12px; }
.titlebar:backdrop,
headerbar:backdrop {
border-color: rgba(59, 62, 71, 0.145);
Expand Down Expand Up @@ -2728,14 +2728,14 @@ headerbar separator {
window:not(.tiled):not(.maximized) separator:first-child + headerbar:backdrop, window:not(.tiled):not(.maximized) separator:first-child + headerbar,
window:not(.tiled):not(.maximized) headerbar:first-child:backdrop,
window:not(.tiled):not(.maximized) headerbar:first-child {
border-top-left-radius: 4px; }
border-top-left-radius: 12px; }

window:not(.tiled):not(.maximized) headerbar:last-child:backdrop, window:not(.tiled):not(.maximized) headerbar:last-child {
border-top-right-radius: 4px; }
border-top-right-radius: 12px; }

window {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
border-top-left-radius: 8px;
border-top-right-radius: 8px; }

window.csd > .titlebar:not(headerbar) {
padding: 0;
Expand All @@ -2748,6 +2748,11 @@ window.csd > .titlebar:not(headerbar) {
.titlebar:not(headerbar) > separator, .titlebar:not(headerbar) > separator:backdrop {
background: #06070c; }

.titlebar {
border-radius: 12px 12px 0 0;
box-shadow: none;
margin-top: 1px; }

/**************
* GtkInfoBar *
**************/
Expand Down Expand Up @@ -4713,16 +4718,16 @@ window {
window.csd {
box-shadow: 0 4px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0);
margin: 0px;
border-radius: 0.5em 0.5em 0 0; }
border-radius: 10px 10px 0 0; }
window.csd:backdrop {
box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0);
transition: 200ms ease-out;
border: 2px solid #15161b; }
window.csd.popup {
border-radius: 0.5em;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
window.csd.dialog.message {
border-radius: 0.5em;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
window.solid-csd {
margin: 0;
Expand Down
13 changes: 8 additions & 5 deletions gtk-4.0/widgets/_header-bars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ headerbar {
min-height: 34px;
background: $headerbar_color;
color: $headerbar_fg_color;
border-radius: 0;
border-radius: 10px + 2px;
&:backdrop {
border-color: $backdrop_borders_color;
// background-image: none;
Expand Down Expand Up @@ -255,14 +255,14 @@ headerbar {

headerbar {
window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 4px; }}
window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 10px + 2px; }}

window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }}
window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 10px + 2px; }}
}

window {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.titlebar:not(headerbar) {
Expand All @@ -287,4 +287,7 @@ window {

.titlebar{
@extend %titlebar;
border-radius: 10px + 2px 10px + 2px 0 0;
box-shadow: none;
margin-top: 1px;
}
4 changes: 2 additions & 2 deletions gtk-4.0/widgets/_windows.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ window {
// see bug #722563
$_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
$_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
$_window_radius: 0.5em;
$_menu_radius: 0.5em;
$_window_radius: 10px;
$_menu_radius: 10px;

// added for accessibility (window borders)
border: 2px solid $window_border_color;
Expand Down

0 comments on commit 6684073

Please sign in to comment.