From 3a0ea4e0d2fac99e3866c411910b5977dff9a475 Mon Sep 17 00:00:00 2001 From: Daniel Boles Date: Fri, 6 Oct 2017 00:20:25 +0100 Subject: [PATCH] =?UTF-8?q?HC:=20Fix=20MessageDialog=E2=80=99s=20rounded?= =?UTF-8?q?=20bottom=20borders?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- gtk/theme/HighContrast/_common.scss | 39 +++++++++++++++++-- .../HighContrast/gtk-contained-inverse.css | 8 ++-- gtk/theme/HighContrast/gtk-contained.css | 8 ++-- 3 files changed, 45 insertions(+), 10 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 75c903fdd5..a0a48e0f4b 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -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; diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index 6f70a8e4de..5027cf9f87 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -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 * */ diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index 47f909ec61..79216f55a0 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -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 * */