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)
This commit is contained in:
Daniel Boles 2017-10-06 00:20:25 +01:00 committed by Daniel Boles
parent 84de918ce0
commit efaf9948be
3 changed files with 45 additions and 10 deletions

View File

@ -2815,6 +2815,7 @@ calendar {
&.highlight, &.highlight:backdrop { color: $fg_color; } &.highlight, &.highlight:backdrop { color: $fg_color; }
} }
/*********** /***********
* Dialogs * * Dialogs *
***********/ ***********/
@ -2828,27 +2829,36 @@ messagedialog { // Message Dialog styling
border-style: none; border-style: none;
box-shadow: inset 0 1px $borders_edge; box-shadow: inset 0 1px $borders_edge;
} }
&.csd { // rounded bottom border styling for csd version &.csd { // rounded bottom border styling for csd version
// bigger radius for better antialiasing &.background {
border-bottom-left-radius: 9px; // bigger radius for better antialiasing
border-bottom-right-radius: 9px; border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.dialog-action-area button { .dialog-action-area button {
padding: 12px; padding: 12px;
border-radius: 0; border-radius: 0;
@include button(normal, $edge: none); @include button(normal, $edge: none);
@extend %middle_button; @extend %middle_button;
&:hover { &:hover {
@include button(hover, $edge: none); @include button(hover, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:active { &:active {
@include button(active, $edge: none); @include button(active, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:disabled { &:disabled {
@include button(insensitive, $edge: none); @include button(insensitive, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:backdrop { &:backdrop {
@include button(backdrop, $edge: none); @include button(backdrop, $edge: none);
@extend %middle_button; @extend %middle_button;
@ -2857,44 +2867,58 @@ messagedialog { // Message Dialog styling
@include button(backdrop-insensitive, $edge: none); @include button(backdrop-insensitive, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
@each $b_type, $b_color in (suggested-action, $suggested_color), @each $b_type, $b_color in (suggested-action, $suggested_color),
(destructive-action, $destructive_color) { (destructive-action, $destructive_color) {
&.#{$b_type} { &.#{$b_type} {
@include button(normal, $b_color, white, $edge: none); @include button(normal, $b_color, white, $edge: none);
@extend %middle_button; @extend %middle_button;
&:hover { &:hover {
@include button(hover, $b_color, white, $edge: none); @include button(hover, $b_color, white, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:active { &:active {
@include button(active, $b_color, white, $edge: none); @include button(active, $b_color, white, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:backdrop { &:backdrop {
@include button(backdrop, $b_color, white); @include button(backdrop, $b_color, white);
@extend %middle_button; @extend %middle_button;
&:disabled { &:disabled {
@include button(backdrop-insensitive); @include button(backdrop-insensitive);
@extend %middle_button; @extend %middle_button;
} }
} }
&:disabled { &:disabled {
@include button(insensitive); @include button(insensitive);
@extend %middle_button; @extend %middle_button;
} }
} }
} }
&:first-child{ @extend %first_button; } &:first-child{ @extend %first_button; }
&:last-child { @extend %last_button; } &:last-child { @extend %last_button; }
} }
%middle_button { %middle_button {
border-right-style: none; border-right-style: none;
border-bottom-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 { %first_button {
border-left-style: none; border-left-style: none;
border-bottom-left-radius: 7px; border-bottom-left-radius: 7px;
-gtk-outline-bottom-left-radius: 5px;
} }
} }
} }
@ -2914,6 +2938,7 @@ filechooserbutton:drop(active) {
border-color: transparent; border-color: transparent;
} }
/*********** /***********
* Sidebar * * Sidebar *
***********/ ***********/
@ -3291,6 +3316,12 @@ decoration {
box-shadow: none; 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 & { .solid-csd & {
border-radius: 0; border-radius: 0;
margin: 4px; 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 .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; } 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, 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; } 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; } 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; } .solid-csd decoration { border-radius: 0; margin: 4px; background-color: #000; border: solid 1px #737373; box-shadow: none; }
/********************** Touch Copy & Paste * */ /********************** 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 .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; } 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, 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; } 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; } 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; } .solid-csd decoration { border-radius: 0; margin: 4px; background-color: #fff; border: solid 1px #8d8d8d; box-shadow: none; }
/********************** Touch Copy & Paste * */ /********************** Touch Copy & Paste * */