[gtk+] Adwaita: proper message dialog style.



commit d648a2c7acb1d992346bfe9cba158df14a41f462
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat Jul 5 16:30:43 2014 +0200

    Adwaita: proper message dialog style.
    
    Rounded bottom border added, custom style for csd versione only
    [read: non csd version looks right now].

 gtk/resources/theme/Adwaita/_common.scss           |   80 +++++++------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |  123 ++++++++++---------
 gtk/resources/theme/Adwaita/gtk-contained.css      |  119 ++++++++++---------
 3 files changed, 173 insertions(+), 149 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 16fbc72..08cef54 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -1822,48 +1822,55 @@ GtkCalendar {
  * Dialogs *
  ***********/
 
-.message-dialog {
-  // no spacing in message dialogs and the likes
+.message-dialog { // Message Dialog styling
   -GtkDialog-button-spacing: 0;
-}
-
-GtkMessageDialog .titlebar {
-  border-style: none;
-  box-shadow: inset 0 1px $borders_edge;
-}
-
-.dialog-action-area.linked {
-  & .button {
-    padding: 6px;
-    border-radius: 0;
-    @include button(normal, $noedge: true);
-    @extend %middle_button;
-    &:hover {
-      @include button(hover, $noedge: true);
-      @extend %middle_button;
-    }
-    &:active {
-      @include button(active, $noedge: true);
-      @extend %middle_button;
+  .titlebar {
+    border-style: none;
+    box-shadow: inset 0 1px $borders_edge;
+  }
+  &.csd { // rounded bottom border styling for csd version
+    &.background {
+      border-bottom-left-radius: 7px;
+      border-bottom-right-radius: 7px;
     }
-    &:insensitive {
-      @include button(insensitive, $noedge: true);
+    .dialog-action-area .button {
+      padding: 8px;
+      border-radius: 0;
+      @include button(normal, $noedge: true);
       @extend %middle_button;
+      &:hover {
+        @include button(hover, $noedge: true);
+        @extend %middle_button;
+      }
+      &:active {
+        @include button(active, $noedge: true);
+        @extend %middle_button;
+      }
+      &:insensitive {
+        @include button(insensitive, $noedge: true);
+        @extend %middle_button;
+      }
+      &:backdrop {
+        @include button(backdrop, $noedge: true);
+        @extend %middle_button;
+      }
+      &:backdrop:insensitive {
+        @include button(backdrop-insensitive, $noedge: true);
+        @extend %middle_button;
+      }
+      &:first-child{ @extend %first_button; }
+      &:last-child { @extend %last_button; }
     }
-    &:backdrop {
-      @include button(backdrop, $noedge: true);
-      @extend %middle_button;
+    %middle_button {
+      border-right-style: none;
+      border-bottom-style: none;
     }
-    &:backdrop:insensitive {
-      @include button(backdrop-insensitive, $noedge: true);
-      @extend %middle_button;
+    %last_button { border-bottom-right-radius: 7px; }
+    %first_button {
+      border-left-style: none;
+      border-bottom-left-radius: 7px;
     }
-    &:first-child{ @extend %first_button; }
   }
-  %middle_button {
-    border-style: solid none none solid;
-  }
-  %first_button { border-style: solid none none none; }
 }
 
 GtkFileChooserDialog .dialog-action-box {
@@ -2081,6 +2088,9 @@ GtkColorChooserWidget #add-color-button {
       border-radius: 5px;
       box-shadow: none;
     }
+    &.message-dialog {
+      border-radius: 7px;
+    }
   }
 }
 
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index b1ef1b7..193d5b7 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -2391,69 +2391,74 @@ GtkCalendar {
  ***********/
 .message-dialog {
   -GtkDialog-button-spacing: 0; }
-
-GtkMessageDialog .titlebar {
-  border-style: none;
-  box-shadow: inset 0 1px rgba(238, 238, 236, 0.1); }
-
-.dialog-action-area.linked .button {
-  padding: 6px;
-  border-radius: 0;
-  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); }
-  .dialog-action-area.linked .button:hover {
+  .message-dialog .titlebar {
+    border-style: none;
+    box-shadow: inset 0 1px rgba(238, 238, 236, 0.1); }
+  .message-dialog.csd.background {
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px; }
+  .message-dialog.csd .dialog-action-area .button {
+    padding: 8px;
+    border-radius: 0;
     border-width: 1px;
     border-style: solid;
     color: #eeeeec;
+    background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
     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);
+    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); }
-  .dialog-action-area.linked .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); }
-  .dialog-action-area.linked .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); }
-  .dialog-action-area.linked .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); }
-  .dialog-action-area.linked .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); }
-.dialog-action-area.linked .button, .dialog-action-area.linked .button:hover, .dialog-action-area.linked 
.button:active, .dialog-action-area.linked .button:insensitive, .dialog-action-area.linked .button:backdrop, 
.dialog-action-area.linked .button:backdrop:insensitive {
-  border-style: solid none none solid; }
-.dialog-action-area.linked .button:first-child {
-  border-style: solid none none none; }
+    .message-dialog.csd .dialog-action-area .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); }
+    .message-dialog.csd .dialog-action-area .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); }
+    .message-dialog.csd .dialog-action-area .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); }
+    .message-dialog.csd .dialog-action-area .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); }
+    .message-dialog.csd .dialog-action-area .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); }
+  .message-dialog.csd .dialog-action-area .button, .message-dialog.csd .dialog-action-area .button:hover, 
.message-dialog.csd .dialog-action-area .button:active, .message-dialog.csd .dialog-action-area 
.button:insensitive, .message-dialog.csd .dialog-action-area .button:backdrop, .message-dialog.csd 
.dialog-action-area .button:backdrop:insensitive {
+    border-right-style: none;
+    border-bottom-style: none; }
+  .message-dialog.csd .dialog-action-area .button:last-child {
+    border-bottom-right-radius: 7px; }
+  .message-dialog.csd .dialog-action-area .button:first-child {
+    border-left-style: none;
+    border-bottom-left-radius: 7px; }
 
 GtkFileChooserDialog .dialog-action-box {
   border-top: 1px solid #1c1f1f; }
@@ -2677,6 +2682,8 @@ GtkColorChooserWidget #add-color-button {
   .window-frame.csd.tooltip {
     border-radius: 5px;
     box-shadow: none; }
+  .window-frame.csd.message-dialog {
+    border-radius: 7px; }
 
 .button.titlebutton {
   padding: 8px;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index c0672ce..b5d9c67 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -2383,69 +2383,74 @@ GtkCalendar {
  ***********/
 .message-dialog {
   -GtkDialog-button-spacing: 0; }
-
-GtkMessageDialog .titlebar {
-  border-style: none;
-  box-shadow: inset 0 1px white; }
-
-.dialog-action-area.linked .button {
-  padding: 6px;
-  border-radius: 0;
-  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; }
-  .dialog-action-area.linked .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);
+  .message-dialog .titlebar {
+    border-style: none;
     box-shadow: inset 0 1px white; }
-  .dialog-action-area.linked .button:active {
+  .message-dialog.csd.background {
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px; }
+  .message-dialog.csd .dialog-action-area .button {
+    padding: 8px;
+    border-radius: 0;
     border-width: 1px;
     border-style: solid;
     color: #2e3436;
+    background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
     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); }
-  .dialog-action-area.linked .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); }
-  .dialog-action-area.linked .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); }
-  .dialog-action-area.linked .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); }
-.dialog-action-area.linked .button, .dialog-action-area.linked .button:hover, .dialog-action-area.linked 
.button:active, .dialog-action-area.linked .button:insensitive, .dialog-action-area.linked .button:backdrop, 
.dialog-action-area.linked .button:backdrop:insensitive {
-  border-style: solid none none solid; }
-.dialog-action-area.linked .button:first-child {
-  border-style: solid none none none; }
+    box-shadow: inset 0 1px white; }
+    .message-dialog.csd .dialog-action-area .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; }
+    .message-dialog.csd .dialog-action-area .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); }
+    .message-dialog.csd .dialog-action-area .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); }
+    .message-dialog.csd .dialog-action-area .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); }
+    .message-dialog.csd .dialog-action-area .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); }
+  .message-dialog.csd .dialog-action-area .button, .message-dialog.csd .dialog-action-area .button:hover, 
.message-dialog.csd .dialog-action-area .button:active, .message-dialog.csd .dialog-action-area 
.button:insensitive, .message-dialog.csd .dialog-action-area .button:backdrop, .message-dialog.csd 
.dialog-action-area .button:backdrop:insensitive {
+    border-right-style: none;
+    border-bottom-style: none; }
+  .message-dialog.csd .dialog-action-area .button:last-child {
+    border-bottom-right-radius: 7px; }
+  .message-dialog.csd .dialog-action-area .button:first-child {
+    border-left-style: none;
+    border-bottom-left-radius: 7px; }
 
 GtkFileChooserDialog .dialog-action-box {
   border-top: 1px solid #a1a1a1; }
@@ -2669,6 +2674,8 @@ GtkColorChooserWidget #add-color-button {
   .window-frame.csd.tooltip {
     border-radius: 5px;
     box-shadow: none; }
+  .window-frame.csd.message-dialog {
+    border-radius: 7px; }
 
 .button.titlebutton {
   padding: 8px;


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]