HC: Fix MessageDialog’s rounded bottom borders

A missing decoration selector meant that we got a solid black background
behind the rounded corners of the dialog.

Copy the equivalent code from Adwaita, including nicely rounding the
focus outline too (& sorry, but this needs more newlines to be readable)

https://bugzilla.gnome.org/show_bug.cgi?id=788574
This commit is contained in:
Daniel Boles 2017-10-06 00:20:25 +01:00
parent d9df5dfa74
commit 3a0ea4e0d2
3 changed files with 45 additions and 10 deletions

View File

@ -2831,6 +2831,7 @@ calendar {
&.highlight, &.highlight:backdrop { color: $fg_color; }
}
/***********
* Dialogs *
***********/
@ -2844,27 +2845,36 @@ messagedialog { // Message Dialog styling
border-style: none;
box-shadow: inset 0 1px $borders_edge;
}
&.csd { // rounded bottom border styling for csd version
// bigger radius for better antialiasing
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
&.background {
// bigger radius for better antialiasing
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.dialog-action-area button {
padding: 12px;
border-radius: 0;
@include button(normal, $edge: none);
@extend %middle_button;
&:hover {
@include button(hover, $edge: none);
@extend %middle_button;
}
&:active {
@include button(active, $edge: none);
@extend %middle_button;
}
&:disabled {
@include button(insensitive, $edge: none);
@extend %middle_button;
}
&:backdrop {
@include button(backdrop, $edge: none);
@extend %middle_button;
@ -2873,44 +2883,58 @@ messagedialog { // Message Dialog styling
@include button(backdrop-insensitive, $edge: none);
@extend %middle_button;
}
@each $b_type, $b_color in (suggested-action, $suggested_color),
(destructive-action, $destructive_color) {
&.#{$b_type} {
@include button(normal, $b_color, white, $edge: none);
@extend %middle_button;
&:hover {
@include button(hover, $b_color, white, $edge: none);
@extend %middle_button;
}
&:active {
@include button(active, $b_color, white, $edge: none);
@extend %middle_button;
}
&:backdrop {
@include button(backdrop, $b_color, white);
@extend %middle_button;
&:disabled {
@include button(backdrop-insensitive);
@extend %middle_button;
}
}
&:disabled {
@include button(insensitive);
@extend %middle_button;
}
}
}
&:first-child{ @extend %first_button; }
&:last-child { @extend %last_button; }
}
%middle_button {
border-right-style: none;
border-bottom-style: none;
}
%last_button { border-bottom-right-radius: 7px; }
%last_button {
border-bottom-right-radius: 7px;
-gtk-outline-bottom-right-radius: 5px;
}
%first_button {
border-left-style: none;
border-bottom-left-radius: 7px;
-gtk-outline-bottom-left-radius: 5px;
}
}
}
@ -2930,6 +2954,7 @@ filechooserbutton:drop(active) {
border-color: transparent;
}
/***********
* Sidebar *
***********/
@ -3307,6 +3332,12 @@ decoration {
box-shadow: none;
}
messagedialog.csd & {
border-radius: 7px;
box-shadow: 0 1px 2px transparentize(black, 0.8),
0 0 0 1px transparentize($_wm_border, 0.1);
}
.solid-csd & {
border-radius: 0;
margin: 4px;

View File

@ -1266,7 +1266,7 @@ messagedialog .dialog-action-area button { padding: 8px; }
messagedialog .titlebar { border-style: none; box-shadow: inset 0 1px #000; }
messagedialog.csd { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
messagedialog.csd.background { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
messagedialog.csd .dialog-action-area button { padding: 12px; border-radius: 0; border-width: 2px; border-style: solid; color: #fff; background-image: none; background-color: #000; border-color: gray; }
@ -1306,9 +1306,9 @@ messagedialog.csd .dialog-action-area button.destructive-action:disabled { borde
messagedialog.csd .dialog-action-area button, messagedialog.csd .dialog-action-area button:hover, messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:disabled, messagedialog.csd .dialog-action-area button:backdrop, messagedialog.csd .dialog-action-area button:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area button.suggested-action:hover, messagedialog.csd .dialog-action-area button.suggested-action:active, messagedialog.csd .dialog-action-area button.suggested-action:backdrop, messagedialog.csd .dialog-action-area button.suggested-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action:disabled, messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.destructive-action:hover, messagedialog.csd .dialog-action-area button.destructive-action:active, messagedialog.csd .dialog-action-area button.destructive-action:backdrop, messagedialog.csd .dialog-action-area button.destructive-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.destructive-action:disabled { border-right-style: none; border-bottom-style: none; }
messagedialog.csd .dialog-action-area button:last-child { border-bottom-right-radius: 7px; }
messagedialog.csd .dialog-action-area button:last-child { border-bottom-right-radius: 7px; -gtk-outline-bottom-right-radius: 5px; }
messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 7px; }
messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 7px; -gtk-outline-bottom-left-radius: 5px; }
filechooser .dialog-action-box { border-top: 1px solid gray; }
@ -1479,6 +1479,8 @@ decoration:backdrop { box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 3px 9px 1p
tooltip.csd decoration { border-radius: 5px; box-shadow: none; }
messagedialog.csd decoration { border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); }
.solid-csd decoration { border-radius: 0; margin: 4px; background-color: #000; border: solid 1px #737373; box-shadow: none; }
/********************** Touch Copy & Paste * */

View File

@ -1272,7 +1272,7 @@ messagedialog .dialog-action-area button { padding: 8px; }
messagedialog .titlebar { border-style: none; box-shadow: inset 0 1px #fff; }
messagedialog.csd { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
messagedialog.csd.background { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
messagedialog.csd .dialog-action-area button { padding: 12px; border-radius: 0; border-width: 2px; border-style: solid; color: #000; background-image: none; background-color: #fff; border-color: gray; }
@ -1312,9 +1312,9 @@ messagedialog.csd .dialog-action-area button.destructive-action:disabled { borde
messagedialog.csd .dialog-action-area button, messagedialog.csd .dialog-action-area button:hover, messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:disabled, messagedialog.csd .dialog-action-area button:backdrop, messagedialog.csd .dialog-action-area button:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area button.suggested-action:hover, messagedialog.csd .dialog-action-area button.suggested-action:active, messagedialog.csd .dialog-action-area button.suggested-action:backdrop, messagedialog.csd .dialog-action-area button.suggested-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action:disabled, messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.destructive-action:hover, messagedialog.csd .dialog-action-area button.destructive-action:active, messagedialog.csd .dialog-action-area button.destructive-action:backdrop, messagedialog.csd .dialog-action-area button.destructive-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.destructive-action:disabled { border-right-style: none; border-bottom-style: none; }
messagedialog.csd .dialog-action-area button:last-child { border-bottom-right-radius: 7px; }
messagedialog.csd .dialog-action-area button:last-child { border-bottom-right-radius: 7px; -gtk-outline-bottom-right-radius: 5px; }
messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 7px; }
messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 7px; -gtk-outline-bottom-left-radius: 5px; }
filechooser .dialog-action-box { border-top: 1px solid gray; }
@ -1485,6 +1485,8 @@ decoration:backdrop { box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 3px 9px 1p
tooltip.csd decoration { border-radius: 5px; box-shadow: none; }
messagedialog.csd decoration { border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); }
.solid-csd decoration { border-radius: 0; margin: 4px; background-color: #fff; border: solid 1px #8d8d8d; box-shadow: none; }
/********************** Touch Copy & Paste * */