[gtk/gtk-3-24: 1/2] Outline/focus ring border-radii fixes
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk/gtk-3-24: 1/2] Outline/focus ring border-radii fixes
- Date: Wed, 5 Feb 2020 12:19:43 +0000 (UTC)
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]