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

Adwaita: make circular button border looking nice

Browse Source 
the darker bottom border used on buttons looks bad on circular ones
so now a gradient clipped on the border-box and a transparent
border is used in that partcular case.
See https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details.
This commit is contained in:
Lapo Calamandrei 2016-10-19 15:56:41 +02:00
parent 1f8b146410
commit 24cb9d4ba6
3 changed files with 72 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -770,6 +770,28 @@ button {
-gtk-outline-radius: 9999px;
label { padding: 0; }
// the followind code is needed since we use a darker bottom border on buttons, which looks pretty
// bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details),
// so on relevant states we an additional background-image with a gradient clipped on the border-box,
// so setting a transparent border would reveal it.
// FIXME: take care of colored circular button.
$_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);
&:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
@include button(normal);
background-image: $button_fill, $_border_bg;
border-color: transparent;
}
&:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
@include button(hover);
background-image: $button_fill, $_border_bg;
border-color: transparent;
}
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
}
}

26
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -1155,9 +1155,33 @@ button {
-gtk-icon-shadow: none; }
button.circular {
border-radius: 9999px;
-gtk-outline-radius: 9999px; }
-gtk-outline-radius: 9999px;
background-origin: padding-box, border-box;
background-clip: padding-box, border-box; }
button.circular label {
padding: 0; }
button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #1b1f20;
border-bottom-color: #0b0c0c;
background-image: linear-gradient(to bottom, #2e3436, #2a2e30 60%, #25292b);
text-shadow: 0 -1px rgba(0, 0, 0, 0.82745);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.82745);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
background-image: linear-gradient(to bottom, #2e3436, #2a2e30 60%, #25292b), linear-gradient(to top, #0b0c0c 25%, #1b1f20 50%);
border-color: transparent; }
button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #1b1f20;
border-bottom-color: #0b0c0c;
text-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30), linear-gradient(to top, #0b0c0c 25%, #1b1f20 50%);
border-color: transparent; }
.stack-switcher >
button.needs-attention > label,

26
gtk/theme/Adwaita/gtk-contained.css
View File

@ -1158,9 +1158,33 @@ button {
-gtk-icon-shadow: none; }
button.circular {
border-radius: 9999px;
-gtk-outline-radius: 9999px; }
-gtk-outline-radius: 9999px;
background-origin: padding-box, border-box;
background-clip: padding-box, border-box; }
button.circular label {
padding: 0; }
button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd), linear-gradient(to top, #91918c 25%, #b6b6b3 50%);
border-color: transparent; }
button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white;
background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd), linear-gradient(to top, #91918c 25%, #b6b6b3 50%);
border-color: transparent; }
.stack-switcher >
button.needs-attention > label,