[gtk/gtk-3-24: 1/2] Outline/focus ring border-radii fixes



commit cfd530db0de4f988b31d90487895cd96bd800108
Author: Feichtmeier <frederik feichtmeier gmail com>
Date:   Mon Feb 3 21:32:23 2020 +0100

    Outline/focus ring border-radii fixes
    
    - change %linked_XXX class outline-radii to match the border-radii
    - adapt the .dialog-action-area buttons to this

 gtk/theme/Adwaita/_common.scss           | 40 ++++++++++++++++++++++++++------
 gtk/theme/Adwaita/gtk-contained-dark.css | 14 ++++++-----
 gtk/theme/Adwaita/gtk-contained.css      | 14 ++++++-----
 3 files changed, 49 insertions(+), 19 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d93c451d4b..6a42116650 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1018,6 +1018,7 @@ toolbar.inline-toolbar toolbutton:backdrop {
 %linked_middle {
   border-radius: 0;
   border-right-style: none;
+  -gtk-outline-radius: 0;
 }
 
 %linked_left {
@@ -1026,6 +1027,10 @@ toolbar.inline-toolbar toolbutton:backdrop {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right-style: none;
+    -gtk-outline-bottom-left-radius: $button_radius;
+    -gtk-outline-top-left-radius: $button_radius;
+    -gtk-outline-top-right-radius: 0;
+    -gtk-outline-bottom-right-radius: 0;
 }
 
 %linked_right {
@@ -1034,11 +1039,16 @@ toolbar.inline-toolbar toolbutton:backdrop {
     border-top-right-radius: $button_radius;
     border-bottom-right-radius: $button_radius;
     border-right-style: solid;
+    -gtk-outline-bottom-right-radius: $button_radius;
+    -gtk-outline-top-right-radius: $button_radius;
+    -gtk-outline-bottom-left-radius: 0;
+    -gtk-outline-top-left-radius: 0;
 }
 
 %linked_only_child {
     border-radius: $button_radius;
     border-style: solid;
+    -gtk-outline-radius: $button_radius;
 }
 
 // .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
@@ -3981,15 +3991,31 @@ messagedialog { // Message Dialog styling
       border-right-style: none;
       border-bottom-style: none;
 
-      &:first-child{
+      &:first-child:not(:only-child) {
         border-left-style: none;
-        border-bottom-left-radius: 7px;
-        -gtk-outline-bottom-left-radius: 5px;
+        border-bottom-left-radius: $button_radius + 2;
+        -gtk-outline-bottom-left-radius: $button_radius + 2;
+        -gtk-outline-top-left-radius: 0px;
+        -gtk-outline-top-right-radius: 0px;
+        -gtk-outline-bottom-right-radius: 0px;
       }
-
-      &:last-child {
-        border-bottom-right-radius: 7px;
-        -gtk-outline-bottom-right-radius: 5px;
+  
+      &:last-child:not(:only-child) {
+        border-bottom-right-radius: $button_radius + 2;
+        -gtk-outline-bottom-right-radius: $button_radius + 2;
+        -gtk-outline-top-right-radius: 0px;
+        -gtk-outline-bottom-left-radius: 0px;
+        -gtk-outline-top-left-radius: 0px;
+      }
+      &:only-child {
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: $button_radius + 2;
+        border-bottom-right-radius: $button_radius + 2;
+        -gtk-outline-top-right-radius: 0px;
+        -gtk-outline-top-left-radius: 0px;
+        -gtk-outline-bottom-left-radius: $button_radius + 2;
+        -gtk-outline-bottom-right-radius: $button_radius + 2;
       }
     }
   }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index e5b8428a84..7ec259723d 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -392,13 +392,13 @@ button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
 
 .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > 
button:backdrop:disabled:checked { color: #5b5b5b; border-color: #202020; background-image: image(#2a2a2a); 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .inline-toolbar button, 
.inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > 
button:checked, .linked > button:backdrop, filechooser .path-bar.linked > button, .linked > combobox > box > 
button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 0; 
border-right-style: none; }
+toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .inline-toolbar button, 
.inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > 
button:checked, .linked > button:backdrop, filechooser .path-bar.linked > button, .linked > combobox > box > 
button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 0; 
border-right-style: none; -gtk-outline-radius: 0; }
 
-toolbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:first-child > button.flat, .linked:not(.vertical) > 
spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .inline-toolbar 
button:first-child, .linked > button:first-child, filechooser .path-bar.linked > button:dir(ltr):first-child, 
filechooser .path-bar.linked > button:dir(rtl):last-child, combobox.linked button:nth-child(2):dir(rtl), 
.linked:not(.vertical) > combobox:first-child > box > button.combo { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; }
+toolbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:first-child > button.flat, .linked:not(.vertical) > 
spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .inline-toolbar 
button:first-child, .linked > button:first-child, filechooser .path-bar.linked > button:dir(ltr):first-child, 
filechooser .path-bar.linked > button:dir(rtl):last-child, combobox.linked button:nth-child(2):dir(rtl), 
.linked:not(.vertical) > combobox:first-child > box > button.combo { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; -gtk-outline-bottom-left-radius: 5px; -gtk-outline-top-left-radius: 5px; 
-gtk-outline-top-right-radius: 0; -gtk-outline-bottom-right-radius: 0; }
 
-toolbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:last-child > button.flat, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), 
.linked:not(.vertical) > entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, 
filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > 
button:dir(rtl):first-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > 
combobox:last-child > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; 
border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; }
+toolbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:last-child > button.flat, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), 
.linked:not(.vertical) > entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, 
filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > 
button:dir(rtl):first-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > 
combobox:last-child > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; 
border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; 
-gtk-outline-bottom-right-radius: 5px; -gtk-outline-top-right-radius: 5px; -gtk-outline-bottom-left-radius: 
0; -gtk-outline-top-left-radius: 0; }
 
-toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), 
.linked:not(.vertical) > entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, 
filechooser .path-bar.linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > 
button.combo { border-radius: 5px; border-style: solid; }
+toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), 
.linked:not(.vertical) > entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, 
filechooser .path-bar.linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > 
button.combo { border-radius: 5px; border-style: solid; -gtk-outline-radius: 5px; }
 
 .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, 
.linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, 
.linked.vertical > button:backdrop, .linked.vertical > combobox > box > button.combo { border-style: solid 
solid none solid; border-radius: 0; }
 
@@ -1596,9 +1596,11 @@ messagedialog.csd.background { border-bottom-left-radius: 9px; border-bottom-rig
 
 messagedialog.csd .dialog-action-area button { padding: 10px 14px; border-radius: 0; border-left-style: 
solid; border-right-style: none; border-bottom-style: none; }
 
-messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; 
border-bottom-left-radius: 7px; -gtk-outline-bottom-left-radius: 5px; }
+messagedialog.csd .dialog-action-area button:first-child:not(:only-child) { border-left-style: none; 
border-bottom-left-radius: 7px; -gtk-outline-bottom-left-radius: 7px; -gtk-outline-top-left-radius: 0px; 
-gtk-outline-top-right-radius: 0px; -gtk-outline-bottom-right-radius: 0px; }
 
-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:last-child:not(:only-child) { border-bottom-right-radius: 7px; 
-gtk-outline-bottom-right-radius: 7px; -gtk-outline-top-right-radius: 0px; -gtk-outline-bottom-left-radius: 
0px; -gtk-outline-top-left-radius: 0px; }
+
+messagedialog.csd .dialog-action-area button:only-child { border-top-right-radius: 0; 
border-top-left-radius: 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; 
-gtk-outline-top-right-radius: 0px; -gtk-outline-top-left-radius: 0px; -gtk-outline-bottom-left-radius: 7px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 filechooser .dialog-action-box { border-top: 1px solid #1b1b1b; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index b2c62700d6..27f8a86d13 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -394,13 +394,13 @@ button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
 
 .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > 
button:backdrop:disabled:checked { color: #d4cfca; border-color: #d5d0cc; background-image: image(#e4e4e0); 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .inline-toolbar button, 
.inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > 
button:checked, .linked > button:backdrop, filechooser .path-bar.linked > button, .linked > combobox > box > 
button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 0; 
border-right-style: none; }
+toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .inline-toolbar button, 
.inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > 
button:checked, .linked > button:backdrop, filechooser .path-bar.linked > button, .linked > combobox > box > 
button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 0; 
border-right-style: none; -gtk-outline-radius: 0; }
 
-toolbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:first-child > button.flat, .linked:not(.vertical) > 
spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .inline-toolbar 
button:first-child, .linked > button:first-child, filechooser .path-bar.linked > button:dir(ltr):first-child, 
filechooser .path-bar.linked > button:dir(rtl):last-child, combobox.linked button:nth-child(2):dir(rtl), 
.linked:not(.vertical) > combobox:first-child > box > button.combo { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; }
+toolbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:first-child > button.flat, .linked:not(.vertical) > 
spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .inline-toolbar 
button:first-child, .linked > button:first-child, filechooser .path-bar.linked > button:dir(ltr):first-child, 
filechooser .path-bar.linked > button:dir(rtl):last-child, combobox.linked button:nth-child(2):dir(rtl), 
.linked:not(.vertical) > combobox:first-child > box > button.combo { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; -gtk-outline-bottom-left-radius: 5px; -gtk-outline-top-left-radius: 5px; 
-gtk-outline-top-right-radius: 0; -gtk-outline-bottom-right-radius: 0; }
 
-toolbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:last-child > button.flat, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), 
.linked:not(.vertical) > entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, 
filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > 
button:dir(rtl):first-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > 
combobox:last-child > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; 
border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; }
+toolbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:last-child > button.flat, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), 
.linked:not(.vertical) > entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, 
filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > 
button:dir(rtl):first-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > 
combobox:last-child > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; 
border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; 
-gtk-outline-bottom-right-radius: 5px; -gtk-outline-top-right-radius: 5px; -gtk-outline-bottom-left-radius: 
0; -gtk-outline-top-left-radius: 0; }
 
-toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), 
.linked:not(.vertical) > entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, 
filechooser .path-bar.linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > 
button.combo { border-radius: 5px; border-style: solid; }
+toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), 
.linked:not(.vertical) > entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, 
filechooser .path-bar.linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > 
button.combo { border-radius: 5px; border-style: solid; -gtk-outline-radius: 5px; }
 
 .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, 
.linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, 
.linked.vertical > button:backdrop, .linked.vertical > combobox > box > button.combo { border-style: solid 
solid none solid; border-radius: 0; }
 
@@ -1612,9 +1612,11 @@ messagedialog.csd.background { border-bottom-left-radius: 9px; border-bottom-rig
 
 messagedialog.csd .dialog-action-area button { padding: 10px 14px; border-radius: 0; border-left-style: 
solid; border-right-style: none; border-bottom-style: none; }
 
-messagedialog.csd .dialog-action-area button:first-child { border-left-style: none; 
border-bottom-left-radius: 7px; -gtk-outline-bottom-left-radius: 5px; }
+messagedialog.csd .dialog-action-area button:first-child:not(:only-child) { border-left-style: none; 
border-bottom-left-radius: 7px; -gtk-outline-bottom-left-radius: 7px; -gtk-outline-top-left-radius: 0px; 
-gtk-outline-top-right-radius: 0px; -gtk-outline-bottom-right-radius: 0px; }
 
-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:last-child:not(:only-child) { border-bottom-right-radius: 7px; 
-gtk-outline-bottom-right-radius: 7px; -gtk-outline-top-right-radius: 0px; -gtk-outline-bottom-left-radius: 
0px; -gtk-outline-top-left-radius: 0px; }
+
+messagedialog.csd .dialog-action-area button:only-child { border-top-right-radius: 0; 
border-top-left-radius: 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; 
-gtk-outline-top-right-radius: 0px; -gtk-outline-top-left-radius: 0px; -gtk-outline-bottom-left-radius: 7px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 filechooser .dialog-action-box { border-top: 1px solid #cdc7c2; }
 


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