Improveent: GTK3&4 - rounded linked entry border radius(2)

thekomer · Feb 1, 2022 · f5f908a · f5f908a
1 parent 95d4fc1
commit f5f908a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 16 deletions.
diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -1109,19 +1109,32 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
   border-right-style: none;
   box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); }
 
-.inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child {
+.inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo {
   border-top-left-radius: 0.4em;
   border-bottom-left-radius: 0.4em; }
 
-.inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child {
+.inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo {
   border-top-right-radius: 0.4em;
   border-bottom-right-radius: 0.4em;
   border-right-style: solid; }
 
-.inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child {
+.inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo {
   border-radius: 0.4em;
   border-style: solid; }
 
+.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child {
+  border-top-left-radius: 1em;
+  border-bottom-left-radius: 1em; }
+
+.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child {
+  border-top-right-radius: 1em;
+  border-bottom-right-radius: 1em;
+  border-right-style: solid; }
+
+.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child {
+  border-radius: 1em;
+  border-style: solid; }
+
 .linked.vertical > button,
 .linked.vertical > button:hover,
 .linked.vertical > button:active,
@@ -1130,19 +1143,32 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
   border-style: solid solid none solid;
   border-radius: 0; }
 
-.linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child {
+.linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo {
   border-top-left-radius: 0.4em;
   border-top-right-radius: 0.4em; }
 
-.linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child {
+.linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo {
   border-bottom-left-radius: 0.4em;
   border-bottom-right-radius: 0.4em;
   border-style: solid; }
 
-.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child {
+.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
   border-radius: 0.4em;
   border-style: solid; }
 
+.linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child {
+  border-top-left-radius: 1em;
+  border-top-right-radius: 1em; }
+
+.linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child {
+  border-bottom-left-radius: 1em;
+  border-bottom-right-radius: 1em;
+  border-style: solid; }
+
+.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child {
+  border-radius: 1em;
+  border-style: solid; }
+
 modelbutton.flat,
 .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover,
 .menuitem.button.flat:backdrop,

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -1109,19 +1109,32 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
   border-right-style: none;
   box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); }
 
-.inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child {
+.inline-toolbar button:first-child, .linked > button:first-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo {
   border-top-left-radius: 0.4em;
   border-bottom-left-radius: 0.4em; }
 
-.inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child {
+.inline-toolbar button:last-child, .linked > button:last-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo {
   border-top-right-radius: 0.4em;
   border-bottom-right-radius: 0.4em;
   border-right-style: solid; }
 
-.inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child {
+.inline-toolbar button:only-child, .linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo {
   border-radius: 0.4em;
   border-style: solid; }
 
+.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child {
+  border-top-left-radius: 1em;
+  border-bottom-left-radius: 1em; }
+
+.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child {
+  border-top-right-radius: 1em;
+  border-bottom-right-radius: 1em;
+  border-right-style: solid; }
+
+.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child {
+  border-radius: 1em;
+  border-style: solid; }
+
 .linked.vertical > button,
 .linked.vertical > button:hover,
 .linked.vertical > button:active,
@@ -1130,19 +1143,32 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
   border-style: solid solid none solid;
   border-radius: 0; }
 
-.linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child {
+.linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo {
   border-top-left-radius: 0.4em;
   border-top-right-radius: 0.4em; }
 
-.linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child {
+.linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo {
   border-bottom-left-radius: 0.4em;
   border-bottom-right-radius: 0.4em;
   border-style: solid; }
 
-.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child {
+.linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
   border-radius: 0.4em;
   border-style: solid; }
 
+.linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child {
+  border-top-left-radius: 1em;
+  border-top-right-radius: 1em; }
+
+.linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child {
+  border-bottom-left-radius: 1em;
+  border-bottom-right-radius: 1em;
+  border-style: solid; }
+
+.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child {
+  border-radius: 1em;
+  border-style: solid; }
+
 modelbutton.flat,
 .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton.flat:backdrop:hover,
 .menuitem.button.flat:backdrop,

diff --git a/gtk-4.0/widgets/_entries.scss b/gtk-4.0/widgets/_entries.scss
@@ -104,8 +104,8 @@ entry {
     &:backdrop { background-color: transparent; }
   }
 
-   // linked entries
-	.linked:not(.vertical) > & { @extend %linked; }
+   // linked entries ( %linked_entry is defined in _buttons.scss)
+	.linked:not(.vertical) > & { @extend %linked_entry; }
 	.linked:not(.vertical) > &:focus-within + &,
 	.linked:not(.vertical) > &:focus-within + button,
 	.linked:not(.vertical) > &:focus-within + combobox > box > button.combo { border-left-color: entry_focus_border(); }
@@ -116,10 +116,10 @@ entry {
   .linked:not(.vertical) > &:drop(active) + button,
   .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
 
-  // Vertically linked entries
+  // Vertically linked entries ( %linked_vertical_entry is defined in _buttons.scss)
   // FIXME: take care of "colored" entries
   .linked.vertical > & {
-    @extend %linked_vertical;
+    @extend %linked_vertical_entry;
 
     // brighter border between linked entries
     &:not(:disabled) + entry:not(:disabled),