Adwaita: button work

- finally fixed +|- buttons on inline toolbars
- commented out :focus and :selected for normal buttons since it makes
  flat buttons background blue...

3 files changed, 226 insertions, 36 deletions

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index c69112ca36..f88eea3dbf 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -205,7 +205,7 @@
 
 .button {
   border-radius: 3px;
-  transition: all 200ms ease-out;
+//  transition: all 200ms ease-out;
   padding: 4px 6px;
   @include button(normal);
   &:hover, &.flat:hover {
@@ -227,10 +227,10 @@
       @include button(backdrop-insensitive-active);
     }
   }
-  &:selected, &.flat:selected,
-  &:selected:focus, &.flat:focus {
-    @extend %selected_items;
-  }
+  //&:selected, &.flat:selected,       Why this?
+  //&:selected:focus, &.flat:focus {
+  //  @extend %selected_items;
+  //}
   &:insensitive {
     @include button(insensitive);
     &:active, &.flat:active {
@@ -307,6 +307,45 @@
   }
 }
 
+// all the following is for the +|- buttons on inline toolbars, that way
+// should really be reprecated...
+.inline-toolbar GtkToolButton > .button { // redefining the button look is
+                                               // needed since those are flat...
+  @include button(normal, $noedge: true); // the box-shadow outset doesn't work
+                                          // in this case, hence $noedge
+  &:hover { @include button(hover, $noedge: true); }
+  &:active { @include button(active, $noedge:true); }
+  &:insensitive { @include button(insensitive, $noedge:true); }
+  &:insensitive:active { @include button(insensitive-active, $noedge:true); }
+  &:backdrop { @include button(backdrop); };
+  &:backdrop:active { @include button(backdrop-active); }
+  &:backdrop:insensitive { @include button(backdrop-insensitive); }
+  &:backdrop:insensitive:active { @include button(backdrop-insensitive-active);}
+}
+.inline-toolbar.toolbar GtkToolButton { // .inline-toolbar.toolbar here for
+                                        // higher specificity than the previous
+                                        // "button look" selector
+  & > .button.flat {
+    border-radius: 0;
+    border-left-style: none;
+  }
+  &:dir(rtl) > .button.flat {}
+  &:first-child > .button.flat {
+    border-radius: 3px 0 0 3px;
+    border-left-style: solid;
+  }
+  &:last-child > .button.flat {
+    border-radius: 0 3px 3px 0;
+  }
+  &:last-child:dir(rtl) > .button.flat {
+    border-right-style: solid;
+  }
+  &:only-child > .button.flat {
+    border-radius: 3px;
+    border-style: solid;
+  }
+}
+
 %linked_buttons {
   border-radius: 0;
   border-left-style: none;
@@ -369,11 +408,8 @@
   }
 }
 
-GtkColorButton.button { padding: 4px; } // Uniform padding on the GtkColorButton.button
-
-.inline-toolbar.toolbar GtkToolButton .button { @include button(normal); }
-
-//GtkCheckButton:hover { -gtk-image-effect: highlight; }
+GtkColorButton.button { padding: 4px; } // Uniform padding on the
+                                        // GtkColorButton.button
 
 /*********
  * Links *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 6df4ba602d..e298130a3c 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -213,7 +213,6 @@
  ***********/
 .button {
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 4px 6px;
   border-width: 1px;
   border-style: solid;
@@ -431,6 +430,94 @@
   .primary-toolbar .button {
     icon-shadow: none; }
 
+.inline-toolbar GtkToolButton > .button {
+  border-width: 1px;
+  border-style: solid;
+  color: #eeeeec;
+  background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
+  border-color: #1c1f1f;
+  text-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); }
+  .inline-toolbar GtkToolButton > .button:hover {
+    border-width: 1px;
+    border-style: solid;
+    color: #eeeeec;
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+    text-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); }
+  .inline-toolbar GtkToolButton > .button:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #eeeeec;
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
+    text-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); }
+  .inline-toolbar GtkToolButton > .button:insensitive {
+    border-width: 1px;
+    border-style: solid;
+    color: #939695;
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #323636);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:insensitive:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #939695;
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #2f3333);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:backdrop {
+    border-width: 1px;
+    border-style: solid;
+    color: #c9cbc9;
+    border-color: #1e2222;
+    background-image: linear-gradient(to bottom, #393f3f);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:backdrop:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #c9cbc9;
+    border-color: #1e2222;
+    background-image: linear-gradient(to bottom, #2f3434);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:backdrop:insensitive {
+    border-width: 1px;
+    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); }
+  .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #454c4c;
+    border-color: #1e2222;
+    background-image: linear-gradient(to bottom, #363c3c);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+
+.inline-toolbar.toolbar GtkToolButton > .button.flat {
+  border-radius: 0;
+  border-left-style: none; }
+.inline-toolbar.toolbar GtkToolButton:first-child > .button.flat {
+  border-radius: 3px 0 0 3px;
+  border-left-style: solid; }
+.inline-toolbar.toolbar GtkToolButton:last-child > .button.flat {
+  border-radius: 0 3px 3px 0; }
+.inline-toolbar.toolbar GtkToolButton:last-child:dir(rtl) > .button.flat {
+  border-right-style: solid; }
+.inline-toolbar.toolbar GtkToolButton:only-child > .button.flat {
+  border-radius: 3px;
+  border-style: solid; }
+
 .osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:backdrop {
   border-radius: 0;
   border-left-style: none; }
@@ -478,16 +565,6 @@
 GtkColorButton.button {
   padding: 4px; }
 
-.inline-toolbar.toolbar GtkToolButton .button {
-  border-width: 1px;
-  border-style: solid;
-  color: #eeeeec;
-  background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
-  border-color: #1c1f1f;
-  text-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); }
-
 /*********
  * Links *
  *********/
@@ -2171,11 +2248,11 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(201, 203, 201, 0.15); }
 
-.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
+.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus {
   background-color: #215d9c;
   color: white;
   outline-color: rgba(255, 255, 255, 0.3); }
-  .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
+  .view:backdrop:selected, .entry:backdrop:selected {
     color: #2c2c2c; }
 
 /**********
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index bfa2ecf026..6a17dde7a0 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -213,7 +213,6 @@
  ***********/
 .button {
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 4px 6px;
   border-width: 1px;
   border-style: solid;
@@ -431,6 +430,94 @@
   .primary-toolbar .button {
     icon-shadow: none; }
 
+.inline-toolbar GtkToolButton > .button {
+  border-width: 1px;
+  border-style: solid;
+  color: #2e3436;
+  background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
+  border-color: #a1a1a1;
+  text-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; }
+  .inline-toolbar GtkToolButton > .button:hover {
+    border-width: 1px;
+    border-style: solid;
+    color: #2e3436;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+    text-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; }
+  .inline-toolbar GtkToolButton > .button:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #2e3436;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
+    text-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); }
+  .inline-toolbar GtkToolButton > .button:insensitive {
+    border-width: 1px;
+    border-style: solid;
+    color: #8d9091;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, #f4f4f4);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:insensitive:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #8d9091;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, #ebebeb);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:backdrop {
+    border-width: 1px;
+    border-style: solid;
+    color: #54595a;
+    border-color: #a8a8a8;
+    background-image: linear-gradient(to bottom, #ededed);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:backdrop:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #54595a;
+    border-color: #a8a8a8;
+    background-image: linear-gradient(to bottom, #d4d4d4);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:backdrop:insensitive {
+    border-width: 1px;
+    border-style: solid;
+    color: #c7c7c7;
+    border-color: #a8a8a8;
+    background-image: linear-gradient(to bottom, #ededed);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #c7c7c7;
+    border-color: #a8a8a8;
+    background-image: linear-gradient(to bottom, #e7e7e7);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+
+.inline-toolbar.toolbar GtkToolButton > .button.flat {
+  border-radius: 0;
+  border-left-style: none; }
+.inline-toolbar.toolbar GtkToolButton:first-child > .button.flat {
+  border-radius: 3px 0 0 3px;
+  border-left-style: solid; }
+.inline-toolbar.toolbar GtkToolButton:last-child > .button.flat {
+  border-radius: 0 3px 3px 0; }
+.inline-toolbar.toolbar GtkToolButton:last-child:dir(rtl) > .button.flat {
+  border-right-style: solid; }
+.inline-toolbar.toolbar GtkToolButton:only-child > .button.flat {
+  border-radius: 3px;
+  border-style: solid; }
+
 .osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:backdrop {
   border-radius: 0;
   border-left-style: none; }
@@ -478,16 +565,6 @@
 GtkColorButton.button {
   padding: 4px; }
 
-.inline-toolbar.toolbar GtkToolButton .button {
-  border-width: 1px;
-  border-style: solid;
-  color: #2e3436;
-  background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
-  border-color: #a1a1a1;
-  text-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; }
-
 /*********
  * Links *
  *********/
@@ -2169,11 +2246,11 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(84, 89, 90, 0.15); }
 
-.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
+.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus {
   background-color: #4a90d9;
   color: white;
   outline-color: rgba(255, 255, 255, 0.3); }
-  .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
+  .view:backdrop:selected, .entry:backdrop:selected {
     color: #fcfcfc; }
 
 /**********