callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adwaita: .flat button styling

Browse Source
This commit is contained in:
Lapo Calamandrei 2014-06-27 13:15:54 +02:00
parent ec7200797e
commit 6e7e1ebf46
3 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
gtk/resources/theme/Adwaita/_common.scss
View File

@ -200,14 +200,14 @@
transition: all 200ms ease-out; transition: all 200ms ease-out;
padding: 4px 6px; padding: 4px 6px;
@include button(normal); @include button(normal);
&:hover { &:hover, &.flat:hover {
@include button(hover); @include button(hover);
-gtk-image-effect: highlight; -gtk-image-effect: highlight;
} }
&:active { &:active, &.flat:active {
@include button(active); @include button(active);
} }
&:backdrop { &:backdrop, &.flat:backdrop {
@include button(backdrop); @include button(backdrop);
&:active { &:active {
@include button(backdrop-active); @include button(backdrop-active);
@ -219,16 +219,19 @@
@include button(backdrop-insensitive-active); @include button(backdrop-insensitive-active);
} }
} }
&:selected, &:selected, &.flat:selected,
&:selected:focus { &:selected:focus, &.flat:focus {
@extend %selected_items; @extend %selected_items;
} }
&:insensitive { &:insensitive {
@include button(insensitive); @include button(insensitive);
&:active { &:active, &.flat:active {
@include button(insensitive-active); @include button(insensitive-active);
} }
} }
&.flat, &.flat:backdrop {
@extend %undecorated_button;
}
//overlay / OSD style //overlay / OSD style
.osd & { .osd & {
padding: 6px; padding: 6px;
@ -321,7 +324,7 @@
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
box-shadow: none; box-shadow: inset 0 1px transparentize(white,1);
} }
/* menu buttons */ /* menu buttons */

22
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -212,7 +212,7 @@
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); } box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
.button:hover { .button:hover, .button.flat:hover {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #eeeeec; color: #eeeeec;
@ -222,7 +222,7 @@
icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
-gtk-image-effect: highlight; } -gtk-image-effect: highlight; }
.button:active { .button:active, .button.flat:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #eeeeec; color: #eeeeec;
@ -231,7 +231,7 @@
text-shadow: 0 -1px rgba(0, 0, 0, 0.89176); text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176); icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); } box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
.button:backdrop { .button:backdrop, .button.flat:backdrop {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #c9cbc9; color: #c9cbc9;
@ -240,21 +240,21 @@
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:active { .button:backdrop:active, .button.flat:backdrop:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #c9cbc9; color: #c9cbc9;
border-color: #1e2222; border-color: #1e2222;
background-image: linear-gradient(to bottom, #2f3434); background-image: linear-gradient(to bottom, #2f3434);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive { .button:backdrop:insensitive, .button.flat:backdrop:insensitive {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #454c4c; color: #454c4c;
border-color: #1e2222; border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f); background-image: linear-gradient(to bottom, #393f3f);
box-shadow: inset 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive:active { .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #454c4c; color: #454c4c;
@ -270,7 +270,7 @@
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
.button:insensitive:active { .button:insensitive:active, .button:insensitive.flat:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #939695; color: #939695;
@ -437,11 +437,11 @@
border-radius: 3px; border-radius: 3px;
border-style: solid; } border-style: solid; }
.button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover { .button.flat, .button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
box-shadow: none; } box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
/* menu buttons */ /* menu buttons */
.menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive { .menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
@ -2147,11 +2147,11 @@ GtkLevelBar.vertical {
.level-bar.fill-block.empty-fill-block:backdrop { .level-bar.fill-block.empty-fill-block:backdrop {
border-color: rgba(201, 203, 201, 0.15); } border-color: rgba(201, 203, 201, 0.15); }
.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button:selected:focus { .view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
background-color: #215d9c; background-color: #215d9c;
color: white; color: white;
outline-color: rgba(255, 255, 255, 0.3); } outline-color: rgba(255, 255, 255, 0.3); }
.view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected { .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
color: #2c2c2c; } color: #2c2c2c; }
/********** /**********

22
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -212,7 +212,7 @@
text-shadow: 0 1px rgba(255, 255, 255, 0.76923); text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white, 0 1px white; } box-shadow: inset 0 1px white, 0 1px white; }
.button:hover { .button:hover, .button.flat:hover {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #2e3436; color: #2e3436;
@ -222,7 +222,7 @@
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white, 0 1px white; box-shadow: inset 0 1px white, 0 1px white;
-gtk-image-effect: highlight; } -gtk-image-effect: highlight; }
.button:active { .button:active, .button.flat:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #2e3436; color: #2e3436;
@ -231,7 +231,7 @@
text-shadow: 0 1px rgba(255, 255, 255, 0.76923); text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; } box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
.button:backdrop { .button:backdrop, .button.flat:backdrop {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #54595a; color: #54595a;
@ -240,21 +240,21 @@
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:active { .button:backdrop:active, .button.flat:backdrop:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #54595a; color: #54595a;
border-color: #a8a8a8; border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #d4d4d4); background-image: linear-gradient(to bottom, #d4d4d4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive { .button:backdrop:insensitive, .button.flat:backdrop:insensitive {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #c7c7c7; color: #c7c7c7;
border-color: #a8a8a8; border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed); background-image: linear-gradient(to bottom, #ededed);
box-shadow: inset 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive:active { .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #c7c7c7; color: #c7c7c7;
@ -270,7 +270,7 @@
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
.button:insensitive:active { .button:insensitive:active, .button:insensitive.flat:active {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
color: #8d9091; color: #8d9091;
@ -437,11 +437,11 @@
border-radius: 3px; border-radius: 3px;
border-style: solid; } border-style: solid; }
.button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover { .button.flat, .button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
box-shadow: none; } box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
/* menu buttons */ /* menu buttons */
.menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive { .menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
@ -2145,11 +2145,11 @@ GtkLevelBar.vertical {
.level-bar.fill-block.empty-fill-block:backdrop { .level-bar.fill-block.empty-fill-block:backdrop {
border-color: rgba(84, 89, 90, 0.15); } border-color: rgba(84, 89, 90, 0.15); }
.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button:selected:focus { .view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
background-color: #4a90d9; background-color: #4a90d9;
color: white; color: white;
outline-color: rgba(255, 255, 255, 0.3); } outline-color: rgba(255, 255, 255, 0.3); }
.view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected { .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
color: #fcfcfc; } color: #fcfcfc; }
/********** /**********