Skip to content

Commit

Permalink
Improvement: gtk3&4 - linked buttons shape
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekomer
thekomer committed Jan 25, 2022
1 parent 1127ea7 commit 6304d0b
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 69 deletions.
20 changes: 10 additions & 10 deletions gtk-3.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1128,16 +1128,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px; }
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 {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

.linked.vertical > button,
Expand All @@ -1149,16 +1149,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-top-right-radius: 3px; }
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 {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

modelbutton.flat, popover.background checkbutton,
Expand Down
20 changes: 10 additions & 10 deletions gtk-3.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1128,16 +1128,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px; }
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 {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

.linked.vertical > button,
Expand All @@ -1149,16 +1149,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-top-right-radius: 3px; }
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 {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

modelbutton.flat, popover.background checkbutton,
Expand Down
20 changes: 10 additions & 10 deletions gtk-3.0/widgets/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -484,18 +484,18 @@ toolbar.inline-toolbar toolbutton:backdrop {
@extend %linked_middle;

&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 0.4em; //3px;
border-bottom-left-radius: 0.4em; //3px;
}

&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: 0.4em; //3px;
border-bottom-right-radius: 0.4em; //3px;
border-right-style: solid;
}

&:only-child {
border-radius: 3px;
border-radius: 0.4em; //3px;
border-style: solid;
}
}
Expand All @@ -509,18 +509,18 @@ toolbar.inline-toolbar toolbutton:backdrop {
@extend %linked_vertical_middle;

&:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 0.4em; //3px;
border-top-right-radius: 0.4em; //3px;
}

&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 0.4em; //3px;
border-bottom-right-radius: 0.4em; //3px;
border-style: solid;
}

&:only-child {
border-radius: 3px;
border-radius: 0.4em; //3px;
border-style: solid;
}
}
Expand Down
27 changes: 14 additions & 13 deletions gtk-4.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,13 +485,14 @@ button {
background-color: #ff6a00; }
notebook > header > tabs > arrow.text-button,
button.text-button {
padding-left: 16px;
padding-right: 16px; }
padding-left: 3em;
padding-right: 3em;
border-radius: 0.4em; }
notebook > header > tabs > arrow.text-button.image-button,
button.text-button.image-button {
padding-left: 8px;
padding-right: 8px;
border-radius: 0.2em; }
border-radius: 0.4em; }
notebook > header > tabs > arrow.text-button.image-button label,
button.text-button.image-button label {
padding-left: 8px;
Expand Down Expand Up @@ -1120,16 +1121,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px; }
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 {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

.linked.vertical > button,
Expand All @@ -1141,16 +1142,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-top-right-radius: 3px; }
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 {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

modelbutton.flat,
Expand Down
27 changes: 14 additions & 13 deletions gtk-4.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,13 +485,14 @@ button {
background-color: #ff6a00; }
notebook > header > tabs > arrow.text-button,
button.text-button {
padding-left: 16px;
padding-right: 16px; }
padding-left: 3em;
padding-right: 3em;
border-radius: 0.4em; }
notebook > header > tabs > arrow.text-button.image-button,
button.text-button.image-button {
padding-left: 8px;
padding-right: 8px;
border-radius: 0.2em; }
border-radius: 0.4em; }
notebook > header > tabs > arrow.text-button.image-button label,
button.text-button.image-button label {
padding-left: 8px;
Expand Down Expand Up @@ -1120,16 +1121,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px; }
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 {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

.linked.vertical > button,
Expand All @@ -1141,16 +1142,16 @@ toolbar.inline-toolbar toolbutton:backdrop > button.flat:backdrop {
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 {
border-top-left-radius: 3px;
border-top-right-radius: 3px; }
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 {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
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 {
border-radius: 3px;
border-radius: 0.4em;
border-style: solid; }

modelbutton.flat,
Expand Down
27 changes: 14 additions & 13 deletions gtk-4.0/widgets/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,15 @@ button {


&.text-button {
padding-left: 16px;
padding-right: 16px;
padding-left: 3em; // 16px;
padding-right: 3em; // 16px;
border-radius: 0.4em; //border-radius: 2px;
}

&.text-button.image-button {
padding-left: 8px;
padding-right: 8px;
border-radius: 0.2em; //border-radius: 2px;
border-radius: 0.4em; //border-radius: 2px;
label {
padding-left: 8px;
padding-right: 8px;
Expand Down Expand Up @@ -461,18 +462,18 @@ toolbar.inline-toolbar toolbutton:backdrop {
@extend %linked_middle;

&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 0.4em; //3px;
border-bottom-left-radius: 0.4em; //3px;
}

&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: 0.4em; //3px;
border-bottom-right-radius: 0.4em; //3px;
border-right-style: solid;
}

&:only-child {
border-radius: 3px;
border-radius: 0.4em; //3px;
border-style: solid;
}
}
Expand All @@ -486,18 +487,18 @@ toolbar.inline-toolbar toolbutton:backdrop {
@extend %linked_vertical_middle;

&:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 0.4em; //3px;
border-top-right-radius: 0.4em; //3px;
}

&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 0.4em; //3px;
border-bottom-right-radius: 0.4em; //3px;
border-style: solid;
}

&:only-child {
border-radius: 3px;
border-radius: 0.4em; //3px;
border-style: solid;
}
}
Expand Down

0 comments on commit 6304d0b

Please sign in to comment.