Adwaita: simplify buttons drawing function

This commit is contained in:
Lapo Calamandrei 2014-07-10 11:55:51 +02:00
parent 5f549fa7cb
commit 17b679c866
3 changed files with 53 additions and 71 deletions

View File

@ -151,10 +151,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
@else { border-color: $borders_color; }
@include _button_text_shadow($tc,$c);
@if $noedge { box-shadow: inset 0 1px $_top_hilight; }
@else {
@include _shadows(inset 0 1px $_top_hilight, $widget_edge);
}
$_outsets: if($noedge, none, $widget_edge);
@include _shadows(inset 0 1px $_top_hilight, $_outsets);
}
@else if $t==hover {
@ -170,10 +168,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
$c);
@include _button_text_shadow($tc,lighten($c,4%));
@if $noedge { box-shadow: inset 0 1px $_top_hilight; }
@else {
@include _shadows(inset 0 1px $_top_hilight, $widget_edge);
}
$_outsets: if($noedge, none, $widget_edge);
@include _shadows(inset 0 1px $_top_hilight, $_outsets);
}
@else if $t==active {
@ -195,13 +191,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
darken($c,5%) 3%);
}
@include _button_text_shadow($tc,darken($c,10%));
@if $noedge {
box-shadow: inset 0 2px 3px -1px transparentize(black,0.7);
}
@else {
@include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),
$widget_edge);
}
$_outsets: if($noedge, none, $widget_edge);
@include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),$_outsets);
}
@else if $t==insensitive {
//
@ -212,15 +203,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
background-image: linear-gradient(to bottom, $insensitive_bg_color);
text-shadow: none;
icon-shadow: none;
@if $noedge {
// white with 0 alpha to avoid an ugly transition, since no color means
// black with 0 alpha
box-shadow: inset 0 1px transparentize(white,1);
}
@else {
@include _shadows(inset 0 1px transparentize(white,1),
$widget_edge);
}
$_outsets: if($noedge, none, $widget_edge);
// white with 0 alpha to avoid an ugly transition, since no color means
// black with 0 alpha
@include _shadows(inset 0 1px transparentize(white,1), $_outsets);
}
@else if $t==insensitive-active {
//
@ -231,15 +217,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
background-image: linear-gradient(to bottom,
mix($insensitive_borders_color,
$insensitive_bg_color, 10%));
@if $noedge {
// white with 0 alpha to avoid an ugly transition, since no color means
// black with 0 alpha
box-shadow: inset 0 1px transparentize(white,1);
}
@else {
@include _shadows(inset 0 1px transparentize(white,1),
$widget_edge);
}
$_outsets: if($noedge, none, $widget_edge);
// white with 0 alpha to avoid an ugly transition, since no color means
// black with 0 alpha
@include _shadows(inset 0 1px transparentize(white,1), $_outsets);
}
@else if $t==backdrop {
@ -253,7 +234,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
text-shadow: none;
icon-shadow: none;
@include _shadows(inset 0 1px transparentize(white,1),
0 1px transparentize(white,1));
0 1px transparentize(white,1));
}
@else if $t==backdrop-active {
@ -264,8 +245,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom,
mix($backdrop_borders_color,$backdrop_bg_color, 35%));
@include _shadows(inset 0 1px transparentize(white,1),
0 1px transparentize(white,1));
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize(white,1);
}
@else if $t==backdrop-insensitive {
@ -275,7 +256,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
color: $backdrop_insensitive_color;
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $backdrop_bg_color);
box-shadow: inset 0 1px transparentize(white,1);
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize(white,1);
}
@else if $t==backdrop-insensitive-active {
@ -286,8 +268,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom,
mix($backdrop_borders_color,$backdrop_bg_color, 8%));
@include _shadows(inset 0 1px transparentize(white,1),
0 1px transparentize(white,1));
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize(white,1);
}
@else if $t==osd {

View File

@ -108,14 +108,14 @@
border: 1px solid #215d9c;
background-color: rgba(33, 93, 156, 0.2); }
.overshoot {
background-color: rgba(33, 93, 156, 0.2); }
.dim-label, .titlebar .subtitle,
.header-bar .subtitle {
opacity: 0.55;
text-shadow: none; }
.overshoot {
background-color: rgba(33, 93, 156, 0.2); }
/*********************
* Spinner Animation *
*********************/
@ -299,7 +299,7 @@
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
border-style: solid;
color: #454c4c;
@ -411,7 +411,7 @@
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.button.suggested-action:insensitive {
border-style: solid;
color: #939695;
@ -458,7 +458,7 @@
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.button.destructive-action:insensitive {
border-style: solid;
color: #939695;
@ -535,7 +535,7 @@
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
border-style: solid;
color: #454c4c;
@ -750,7 +750,7 @@ GtkColorButton.button {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical.entry {
border-radius: 0; }
.spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
@ -932,7 +932,7 @@ GtkComboBox {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.titlebar.selection-mode .button.suggested-action,
.header-bar.selection-mode .button.suggested-action {
border-style: solid;
@ -990,7 +990,7 @@ GtkComboBox {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0);
border-color: #0f2b48; }
.titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop,
.header-bar.selection-mode .selection-menu,
@ -1548,7 +1548,7 @@ GtkSwitch {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0);
border-color: #454c4c; }
/*************************
@ -1937,7 +1937,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0);
border-color: #454c4c; }
.scale.slider:active,
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
@ -2505,7 +2505,7 @@ GtkCalendar {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.message-dialog.csd .dialog-action-area .button.suggested-action {
border-style: solid;
border-width: 1px;
@ -2544,7 +2544,7 @@ GtkCalendar {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
border-style: solid;
color: #939695;
@ -2591,7 +2591,7 @@ GtkCalendar {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
.message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
border-style: solid;
color: #939695;
@ -2733,7 +2733,7 @@ GtkInfoBar {
color: #454c4c;
border-color: #1e2222;
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), 0 1px rgba(255, 255, 255, 0); }
/************
* Tooltips *

View File

@ -108,14 +108,14 @@
border: 1px solid #4a90d9;
background-color: rgba(74, 144, 217, 0.2); }
.overshoot {
background-color: rgba(74, 144, 217, 0.2); }
.dim-label, .titlebar .subtitle,
.header-bar .subtitle {
opacity: 0.55;
text-shadow: none; }
.overshoot {
background-color: rgba(74, 144, 217, 0.2); }
/*********************
* Spinner Animation *
*********************/
@ -291,7 +291,7 @@
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
border-style: solid;
color: #c7c7c7;
@ -403,7 +403,7 @@
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.button.suggested-action:insensitive {
border-style: solid;
color: #8d9091;
@ -450,7 +450,7 @@
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.button.destructive-action:insensitive {
border-style: solid;
color: #8d9091;
@ -527,7 +527,7 @@
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
border-style: solid;
color: #c7c7c7;
@ -742,7 +742,7 @@ GtkColorButton.button {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical.entry {
border-radius: 0; }
.spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
@ -924,7 +924,7 @@ GtkComboBox {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.titlebar.selection-mode .button.suggested-action,
.header-bar.selection-mode .button.suggested-action {
border-style: solid;
@ -982,7 +982,7 @@ GtkComboBox {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0);
border-color: #184472; }
.titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop,
.header-bar.selection-mode .selection-menu,
@ -1541,7 +1541,7 @@ GtkSwitch {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
/*************************
* Check and Radio items *
@ -1929,7 +1929,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.scale.slider:active,
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
@ -2497,7 +2497,7 @@ GtkCalendar {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.message-dialog.csd .dialog-action-area .button.suggested-action {
border-style: solid;
border-width: 1px;
@ -2536,7 +2536,7 @@ GtkCalendar {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
border-style: solid;
color: #8d9091;
@ -2583,7 +2583,7 @@ GtkCalendar {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
.message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
border-style: solid;
color: #8d9091;
@ -2725,7 +2725,7 @@ GtkInfoBar {
color: #c7c7c7;
border-color: #a8a8a8;
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), 0 1px rgba(255, 255, 255, 0); }
/************
* Tooltips *