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

Adwaita: insensitive backdrop state restyle

Browse Source 
Make backdrop insensitive state more similar to the focused
windows one, mostly to make dark variant more usable and
focused -> backdrop transition less distracting.
This commit is contained in:
Lapo Calamandrei 2014-07-19 11:11:44 +02:00
parent f5c2c81645
commit 58777d6084
4 changed files with 65 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1496,8 +1496,8 @@ GtkSwitch {
}
&:insensitive {
color: $backdrop_insensitive_color;
border-color: $backdrop_insensitive_color;
background-color: $backdrop_bg_color;
border-color: $backdrop_borders_color;
background-color: $insensitive_bg_color;
}
}
}
@ -1521,9 +1521,6 @@ GtkSwitch {
&:active{ border-color: $selected_bg_color; }
&:insensitive {
@include button(backdrop-insensitive);
@if $variant=='dark' {
border-color: $backdrop_insensitive_color;
}
}
}
}
@ -1699,10 +1696,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
background-image: linear-gradient(to bottom, $backdrop_bg_color);
box-shadow: none;
}
&:backdrop:insensitive { @include button(backdrop-insensitive);
@if $variant=='dark' {
border-color: $backdrop_insensitive_color;
}
&:backdrop:insensitive {
@include button(backdrop-insensitive);
}
&:active {
border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
@ -1732,7 +1727,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
background-color: $selected_bg_color;
box-shadow: $widget_edge;
&:backdrop {
border-color: $selected_bg_color;
border-color: if($variant=='light', $selected_bg_color,
$selected_borders_color);
background-color: $selected_bg_color;
box-shadow: none;
}
@ -1748,8 +1744,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
box-shadow: none;
}
&:backdrop:insensitive, .hilight:backdrop:insensitive {
border-color: $backdrop_insensitive_color;
background-color: $backdrop_bg_color;
border-color: $backdrop_borders_color;
background-color: $insensitive_bg_color;
}
//OSD troughs
.osd & {
@ -1849,7 +1845,8 @@ GtkProgressBar {
}
// box-shadow: inset 1px 1px transparentize($borders_edge,0.8);
&:backdrop {
border-color: $selected_bg_color;
border-color: if($variant=='light', $selected_bg_color,
$selected_borders_color);
background-color: $selected_bg_color;
box-shadow: none;
}

8
gtk/resources/theme/Adwaita/_drawing.scss
View File

@ -77,12 +77,14 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
}
@if $t==backdrop {
color: $backdrop_fg_color;
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $backdrop_base_color);
@include _shadows($_blank_inner_shadows, $_blank_edge);
}
@if $t==backdrop-insensitive {
color: $backdrop_insensitive_color;
background-image: linear-gradient(to bottom, $backdrop_bg_color);
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $insensitive_bg_color);
@include _shadows($_blank_inner_shadows, $_blank_edge);
}
}
@ -244,7 +246,7 @@ $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);
background-image: linear-gradient(to bottom, $insensitive_bg_color);
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize(white,1);
}
@ -256,7 +258,7 @@ $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,
mix($backdrop_borders_color,$backdrop_bg_color, 8%));
mix($backdrop_borders_color,$insensitive_bg_color, 8%));
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize(white,1);
}

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

@ -183,6 +183,7 @@
border-width: 1px;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #c9cbc9;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); }
.entry:backdrop:insensitive {
@ -191,7 +192,8 @@
border-width: 1px;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #454c4c;
background-image: linear-gradient(to bottom, #393f3f);
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); }
.entry:selected, .entry:backdrop:selected {
background-color: #215d9c;
@ -309,13 +311,13 @@
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive:active {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #363c3c);
background-image: linear-gradient(to bottom, #303434);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:insensitive {
border-style: solid;
@ -421,7 +423,7 @@
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button.suggested-action:insensitive {
border-style: solid;
@ -468,7 +470,7 @@
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button.destructive-action:insensitive {
border-style: solid;
@ -566,13 +568,13 @@
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
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;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #363c3c);
background-image: linear-gradient(to bottom, #303434);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.inline-toolbar.toolbar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton > .button.flat {
@ -786,7 +788,7 @@ GtkColorButton.button {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical.entry {
border-radius: 0; }
@ -968,7 +970,7 @@ GtkComboBox {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
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 {
@ -1026,7 +1028,7 @@ GtkComboBox {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
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,
@ -1587,8 +1589,8 @@ GtkSwitch {
box-shadow: none; }
GtkSwitch.trough:backdrop:insensitive {
color: #454c4c;
border-color: #454c4c;
background-color: #393f3f; }
border-color: #1e2222;
background-color: #323636; }
GtkSwitch.slider {
border-radius: 3px;
border-style: solid;
@ -1633,9 +1635,8 @@ GtkSwitch {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
border-color: #454c4c; }
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
/*************************
* Check and Radio items *
@ -2022,9 +2023,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
border-color: #454c4c; }
background-image: linear-gradient(to bottom, #323636);
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 {
@ -2063,7 +2063,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
.scale.trough.highlight:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop {
border-color: #215d9c;
border-color: #0f2b48;
background-color: #215d9c;
box-shadow: none; }
.scale.trough:insensitive, .scale.trough.hilight:insensitive,
@ -2085,8 +2085,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
.scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive {
border-color: #454c4c;
background-color: #393f3f; }
border-color: #1e2222;
background-color: #323636; }
.osd .scale.trough, .osd
.scale.scale-has-marks-above.scale-has-marks-below.trough, .osd
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
@ -2355,7 +2355,7 @@ GtkProgressBar {
.progressbar.vertical.bottom {
box-shadow: none; }
.progressbar:backdrop {
border-color: #215d9c;
border-color: #0f2b48;
background-color: #215d9c;
box-shadow: none; }
.progressbar.osd {
@ -2407,6 +2407,7 @@ GtkLevelBar.vertical {
border-width: 1px;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #c9cbc9;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); }
.level-bar.fill-block {
@ -2620,7 +2621,7 @@ GtkCalendar {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
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;
@ -2659,7 +2660,7 @@ GtkCalendar {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
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;
@ -2706,7 +2707,7 @@ GtkCalendar {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
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;
@ -2855,7 +2856,7 @@ GtkInfoBar {
border-style: solid;
color: #454c4c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
/************

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

@ -183,6 +183,7 @@
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
color: #54595a;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); }
.entry:backdrop:insensitive {
@ -191,7 +192,8 @@
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
color: #c7c7c7;
background-image: linear-gradient(to bottom, #ededed);
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); }
.entry:selected, .entry:backdrop:selected {
background-color: #4a90d9;
@ -301,13 +303,13 @@
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive:active {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #e7e7e7);
background-image: linear-gradient(to bottom, #ededed);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:insensitive {
border-style: solid;
@ -413,7 +415,7 @@
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button.suggested-action:insensitive {
border-style: solid;
@ -460,7 +462,7 @@
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button.destructive-action:insensitive {
border-style: solid;
@ -558,13 +560,13 @@
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
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;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #e7e7e7);
background-image: linear-gradient(to bottom, #ededed);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.inline-toolbar.toolbar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton > .button.flat {
@ -778,7 +780,7 @@ GtkColorButton.button {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical.entry {
border-radius: 0; }
@ -960,7 +962,7 @@ GtkComboBox {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
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 {
@ -1018,7 +1020,7 @@ GtkComboBox {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
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,
@ -1581,8 +1583,8 @@ GtkSwitch {
box-shadow: none; }
GtkSwitch.trough:backdrop:insensitive {
color: #c7c7c7;
border-color: #c7c7c7;
background-color: #ededed; }
border-color: #a8a8a8;
background-color: #f4f4f4; }
GtkSwitch.slider {
border-radius: 3px;
border-style: solid;
@ -1627,7 +1629,7 @@ GtkSwitch {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
/*************************
@ -2015,7 +2017,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
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,
@ -2077,8 +2079,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
.scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive {
border-color: #c7c7c7;
background-color: #ededed; }
border-color: #a8a8a8;
background-color: #f4f4f4; }
.osd .scale.trough, .osd
.scale.scale-has-marks-above.scale-has-marks-below.trough, .osd
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
@ -2399,6 +2401,7 @@ GtkLevelBar.vertical {
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
color: #54595a;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); }
.level-bar.fill-block {
@ -2613,7 +2616,7 @@ GtkCalendar {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
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;
@ -2652,7 +2655,7 @@ GtkCalendar {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
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;
@ -2699,7 +2702,7 @@ GtkCalendar {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
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;
@ -2848,7 +2851,7 @@ GtkInfoBar {
border-style: solid;
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
/************