BUGfix: GTK3&4 - dialog buttons shape and color

thekomer · Apr 21, 2022 · e2d7f05 · e2d7f05
1 parent 1f3624f
commit e2d7f05
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 39 deletions.
diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -1869,17 +1869,30 @@ messagedialog, dialog {
     border-left-style: solid;
     border-right-style: none;
     border-bottom-style: none;
-    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.05);
+    font-weight: normal;
     color: #BFC3CD;
-    box-shadow: none; }
+    background-color: #191e34;
+    text-shadow: none;
+    box-shadow: none;
+    margin: 2px; }
     messagedialog.csd .dialog-action-area button:hover, dialog.csd .dialog-action-area button:hover {
-      background-color: rgba(255, 106, 0, 0.9);
-      color: white; }
+      color: #ffffff;
+      background: rgba(255, 106, 0, 0.5);
+      outline-color: rgba(255, 255, 255, 0.3);
+      text-shadow: none; }
+    messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:checked, dialog.csd .dialog-action-area button:active, dialog.csd .dialog-action-area button:checked {
+      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      transition-duration: 50ms;
+      color: #ffffff;
+      outline-color: rgba(255, 255, 255, 0.3);
+      background-color: #e65f00;
+      text-shadow: none; }
     messagedialog.csd .dialog-action-area button:first-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(rtl), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area button:first-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(rtl), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo {
       border-left-style: none;
-      border-bottom-left-radius: 4px; }
+      border-bottom-left-radius: 10px; }
     messagedialog.csd .dialog-action-area button:last-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(ltr), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area button:last-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(ltr), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo {
-      border-bottom-right-radius: 4px; }
+      border-bottom-right-radius: 10px; }
     messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area .selection-mode button.titlebutton, .selection-mode messagedialog.csd .dialog-action-area button.titlebutton, dialog.csd .dialog-action-area button.destructive-action, dialog.csd .dialog-action-area button.suggested-action, dialog.csd .dialog-action-area .selection-mode button.titlebutton, .selection-mode dialog.csd .dialog-action-area button.titlebutton {
       color: white; }
 

diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
@@ -1869,17 +1869,30 @@ messagedialog, dialog {
     border-left-style: solid;
     border-right-style: none;
     border-bottom-style: none;
-    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.05);
+    font-weight: normal;
     color: #BFC3CD;
-    box-shadow: none; }
+    background-color: #191e34;
+    text-shadow: none;
+    box-shadow: none;
+    margin: 2px; }
     messagedialog.csd .dialog-action-area button:hover, dialog.csd .dialog-action-area button:hover {
-      background-color: rgba(255, 106, 0, 0.9);
-      color: white; }
+      color: #ffffff;
+      background: rgba(255, 106, 0, 0.5);
+      outline-color: rgba(255, 255, 255, 0.3);
+      text-shadow: none; }
+    messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:checked, dialog.csd .dialog-action-area button:active, dialog.csd .dialog-action-area button:checked {
+      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      transition-duration: 50ms;
+      color: #ffffff;
+      outline-color: rgba(255, 255, 255, 0.3);
+      background-color: #e65f00;
+      text-shadow: none; }
     messagedialog.csd .dialog-action-area button:first-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(rtl), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area button:first-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(rtl), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo {
       border-left-style: none;
-      border-bottom-left-radius: 4px; }
+      border-bottom-left-radius: 10px; }
     messagedialog.csd .dialog-action-area button:last-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(ltr), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area button:last-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(ltr), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo {
-      border-bottom-right-radius: 4px; }
+      border-bottom-right-radius: 10px; }
     messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area .selection-mode button.titlebutton, .selection-mode messagedialog.csd .dialog-action-area button.titlebutton, dialog.csd .dialog-action-area button.destructive-action, dialog.csd .dialog-action-area button.suggested-action, dialog.csd .dialog-action-area .selection-mode button.titlebutton, .selection-mode dialog.csd .dialog-action-area button.titlebutton {
       color: white; }
 

diff --git a/gtk-3.0/widgets/_dialogs.scss b/gtk-3.0/widgets/_dialogs.scss
@@ -33,30 +33,35 @@ messagedialog, dialog { /* Message Dialog styling */
     border-top-right-radius: 10px; //4px;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
-  }
+		}
 
     .dialog-action-area button {
       padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
       border-radius: 0;
       border-left-style: solid;
       border-right-style: none;
       border-bottom-style: none;
-      background-color: transparent;
-      color: if($variant=='light', $headerbar_fg_color, $fg_color);
+      border-color: $borders_color;
+      @include button(normal);
       box-shadow: none;
+      margin: 2px;
 
       &:hover {
-        background-color: transparentize($selected_bg_color, 0.1);
-        color: white;
+				@include button(hover, $selected_bg_color, $selected_fg_color);
       }
-
+			&:active,
+			&:checked {
+				transition: $button_transition;
+				transition-duration: 50ms;
+				@include button(active, darken($selected_bg_color,5%), $selected_fg_color);
+			}
       &:first-child{
         border-left-style: none;
-        border-bottom-left-radius: 4px;
+        border-bottom-left-radius: 10px;//4px;
       }
 
       &:last-child {
-        border-bottom-right-radius: 4px;
+        border-bottom-right-radius: 10px; //4px;
       }
       &.destructive-action, &.suggested-action{
         color:white;

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -1787,17 +1787,30 @@ messagedialog, dialog {
     border-left-style: solid;
     border-right-style: none;
     border-bottom-style: none;
-    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.05);
+    font-weight: normal;
     color: #BFC3CD;
-    box-shadow: none; }
+    background-color: #191e34;
+    text-shadow: none;
+    box-shadow: none;
+    margin: 2px; }
     messagedialog.csd .dialog-action-area button:hover, dialog.csd .dialog-action-area button:hover {
-      background-color: rgba(255, 106, 0, 0.9);
-      color: white; }
+      color: #ffffff;
+      background: rgba(255, 106, 0, 0.5);
+      outline-color: rgba(255, 255, 255, 0.3);
+      text-shadow: none; }
+    messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:checked, dialog.csd .dialog-action-area button:active, dialog.csd .dialog-action-area button:checked {
+      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      transition-duration: 50ms;
+      color: #ffffff;
+      outline-color: rgba(255, 255, 255, 0.3);
+      background-color: #e65f00;
+      text-shadow: none; }
     messagedialog.csd .dialog-action-area button:first-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(rtl), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area button:first-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(rtl), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo {
       border-left-style: none;
-      border-bottom-left-radius: 4px; }
+      border-bottom-left-radius: 10px; }
     messagedialog.csd .dialog-action-area button:last-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(ltr), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area button:last-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(ltr), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo {
-      border-bottom-right-radius: 4px; }
+      border-bottom-right-radius: 10px; }
     messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area .selection-mode windowcontrols button, .selection-mode windowcontrols messagedialog.csd .dialog-action-area button, dialog.csd .dialog-action-area button.destructive-action, dialog.csd .dialog-action-area button.suggested-action, dialog.csd .dialog-action-area .selection-mode windowcontrols button, .selection-mode windowcontrols dialog.csd .dialog-action-area button {
       color: white; }
 

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -1787,17 +1787,30 @@ messagedialog, dialog {
     border-left-style: solid;
     border-right-style: none;
     border-bottom-style: none;
-    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.05);
+    font-weight: normal;
     color: #BFC3CD;
-    box-shadow: none; }
+    background-color: #191e34;
+    text-shadow: none;
+    box-shadow: none;
+    margin: 2px; }
     messagedialog.csd .dialog-action-area button:hover, dialog.csd .dialog-action-area button:hover {
-      background-color: rgba(255, 106, 0, 0.9);
-      color: white; }
+      color: #ffffff;
+      background: rgba(255, 106, 0, 0.5);
+      outline-color: rgba(255, 255, 255, 0.3);
+      text-shadow: none; }
+    messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:checked, dialog.csd .dialog-action-area button:active, dialog.csd .dialog-action-area button:checked {
+      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      transition-duration: 50ms;
+      color: #ffffff;
+      outline-color: rgba(255, 255, 255, 0.3);
+      background-color: #e65f00;
+      text-shadow: none; }
     messagedialog.csd .dialog-action-area button:first-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(rtl), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area button:first-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(rtl), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(rtl), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:first-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:first-child > box > button.combo {
       border-left-style: none;
-      border-bottom-left-radius: 4px; }
+      border-bottom-left-radius: 10px; }
     messagedialog.csd .dialog-action-area button:last-child, messagedialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked messagedialog.csd .dialog-action-area button:nth-child(2):dir(ltr), messagedialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, messagedialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area button:last-child, dialog.csd .dialog-action-area combobox.linked button:nth-child(2):dir(ltr), combobox.linked dialog.csd .dialog-action-area button:nth-child(2):dir(ltr), dialog.csd .dialog-action-area .linked:not(.vertical) > combobox:last-child > box > button.combo, dialog.csd .dialog-action-area .linked.vertical > combobox:last-child > box > button.combo {
-      border-bottom-right-radius: 4px; }
+      border-bottom-right-radius: 10px; }
     messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area .selection-mode windowcontrols button, .selection-mode windowcontrols messagedialog.csd .dialog-action-area button, dialog.csd .dialog-action-area button.destructive-action, dialog.csd .dialog-action-area button.suggested-action, dialog.csd .dialog-action-area .selection-mode windowcontrols button, .selection-mode windowcontrols dialog.csd .dialog-action-area button {
       color: white; }
 

diff --git a/gtk-4.0/widgets/_dialogs.scss b/gtk-4.0/widgets/_dialogs.scss
@@ -41,22 +41,27 @@ messagedialog, dialog { /* Message Dialog styling */
       border-left-style: solid;
       border-right-style: none;
       border-bottom-style: none;
-      background-color: transparent;
-      color: if($variant=='light', $headerbar_fg_color, $fg_color);
+      border-color: $borders_color;
+      @include button(normal);
       box-shadow: none;
+      margin: 2px;
 
       &:hover {
-        background-color: transparentize($selected_bg_color, 0.1);
-        color: white;
+				@include button(hover, $selected_bg_color, $selected_fg_color);
       }
-
+			&:active,
+			&:checked {
+				transition: $button_transition;
+				transition-duration: 50ms;
+				@include button(active, darken($selected_bg_color,5%), $selected_fg_color);
+			}
       &:first-child{
         border-left-style: none;
-        border-bottom-left-radius: 4px;
+        border-bottom-left-radius: 10px;//4px;
       }
 
       &:last-child {
-        border-bottom-right-radius: 4px;
+        border-bottom-right-radius: 10px; //4px;
       }
       &.destructive-action, &.suggested-action{
         color:white;