Lerking/gtk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adwaita: notebook better header spacing

Browse Source 
added some padding to the header and margins to the tabs node when
it's not the only child.
This commit is contained in:
Lapo Calamandrei
2016-03-15 19:02:11 +01:00
parent 3e567b4900
commit 6f3a3ea7f3
3 changed files with 75 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
gtk/theme/Adwaita/_common.scss
View File

@@ -1926,6 +1926,7 @@ popover.background {
*************/
notebook {
> header {
padding: 1px;
border-color: $borders_color;
border-width: 1px;
background-color: $dark_fill;
@@ -1935,10 +1936,12 @@ notebook {
background-color: $backdrop_dark_fill;
}
tabs { margin: -1px; }
&.top {
border-bottom-style: solid;
> tabs {
margin-bottom: -1px;
margin-bottom: -2px;
> tab {
&:hover { box-shadow: inset 0 -3px $borders_color; }
@@ -1952,7 +1955,7 @@ notebook {
&.bottom {
border-top-style: solid;
> tabs {
margin-top: -1px;
margin-top: -2px;
> tab {
&:hover { box-shadow: inset 0 3px $borders_color; }
@@ -1966,7 +1969,7 @@ notebook {
&.left {
border-right-style: solid;
> tabs {
margin-right: -1px;
margin-right: -2px;
> tab {
&:hover { box-shadow: inset -3px 0 $borders_color; }
@@ -1980,7 +1983,7 @@ notebook {
&.right {
border-left-style: solid;
> tabs {
margin-left: -1px;
margin-left: -2px;
> tab {
&:hover { box-shadow: inset 3px 0 $borders_color; }
@@ -2134,10 +2137,18 @@ notebook {
&.top,
&.bottom {
padding-left: 4px;
padding-right: 4px;
tabs {
padding-left: 4px;
padding-right: 4px;
&:not(:only-child) {
margin-left: 3px;
margin-right: 3px;
&:first-child { margin-left: -1px; }
&:last-child { margin-right: -1px; }
}
tab {
margin-left: 4px;
margin-right: 4px;
@@ -2149,10 +2160,18 @@ notebook {
&.left,
&.right {
padding-top: 4px;
padding-bottom: 4px;
tabs {
padding-top: 4px;
padding-bottom: 4px;
&:not(:only-child) {
margin-top: 3px;
margin-bottom: 3px;
&:first-child { margin-top: -1px; }
&:last-child { margin-bottom: -1px; }
}
tab {
margin-top: 4px;
margin-bottom: 4px;

29
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@@ -1978,16 +1978,19 @@ popover.background {
* Notebooks *
*************/
notebook > header {
padding: 1px;
border-color: #1c1f1f;
border-width: 1px;
background-color: #2f3434; }
notebook > header:backdrop {
border-color: #1f2222;
background-color: #303535; }
notebook > header tabs {
margin: -1px; }
notebook > header.top {
border-bottom-style: solid; }
notebook > header.top > tabs {
margin-bottom: -1px; }
margin-bottom: -2px; }
notebook > header.top > tabs > tab:hover {
box-shadow: inset 0 -3px #1c1f1f; }
notebook > header.top > tabs > tab:backdrop {
@@ -1997,7 +2000,7 @@ notebook > header {
notebook > header.bottom {
border-top-style: solid; }
notebook > header.bottom > tabs {
margin-top: -1px; }
margin-top: -2px; }
notebook > header.bottom > tabs > tab:hover {
box-shadow: inset 0 3px #1c1f1f; }
notebook > header.bottom > tabs > tab:backdrop {
@@ -2007,7 +2010,7 @@ notebook > header {
notebook > header.left {
border-right-style: solid; }
notebook > header.left > tabs {
margin-right: -1px; }
margin-right: -2px; }
notebook > header.left > tabs > tab:hover {
box-shadow: inset -3px 0 #1c1f1f; }
notebook > header.left > tabs > tab:backdrop {
@@ -2017,7 +2020,7 @@ notebook > header {
notebook > header.right {
border-left-style: solid; }
notebook > header.right > tabs {
margin-left: -1px; }
margin-left: -2px; }
notebook > header.right > tabs > tab:hover {
box-shadow: inset 3px 0 #1c1f1f; }
notebook > header.right > tabs > tab:backdrop {
@@ -2114,17 +2117,31 @@ notebook > header {
notebook > header tab button.flat:first-child {
margin-left: -4px;
margin-right: 4px; }
notebook > header.top, notebook > header.bottom {
notebook > header.top tabs, notebook > header.bottom tabs {
padding-left: 4px;
padding-right: 4px; }
notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) {
margin-left: 3px;
margin-right: 3px; }
notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
margin-left: -1px; }
notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
margin-right: -1px; }
notebook > header.top tabs tab, notebook > header.bottom tabs tab {
margin-left: 4px;
margin-right: 4px; }
notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
border-style: none solid; }
notebook > header.left, notebook > header.right {
notebook > header.left tabs, notebook > header.right tabs {
padding-top: 4px;
padding-bottom: 4px; }
notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) {
margin-top: 3px;
margin-bottom: 3px; }
notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
margin-top: -1px; }
notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
margin-bottom: -1px; }
notebook > header.left tabs tab, notebook > header.right tabs tab {
margin-top: 4px;
margin-bottom: 4px; }

29
gtk/theme/Adwaita/gtk-contained.css
View File

@@ -1990,16 +1990,19 @@ popover.background {
* Notebooks *
*************/
notebook > header {
padding: 1px;
border-color: #9d9d99;
border-width: 1px;
background-color: #cececc; }
notebook > header:backdrop {
border-color: #a5a5a1;
background-color: #d1d1cf; }
notebook > header tabs {
margin: -1px; }
notebook > header.top {
border-bottom-style: solid; }
notebook > header.top > tabs {
margin-bottom: -1px; }
margin-bottom: -2px; }
notebook > header.top > tabs > tab:hover {
box-shadow: inset 0 -3px #9d9d99; }
notebook > header.top > tabs > tab:backdrop {
@@ -2009,7 +2012,7 @@ notebook > header {
notebook > header.bottom {
border-top-style: solid; }
notebook > header.bottom > tabs {
margin-top: -1px; }
margin-top: -2px; }
notebook > header.bottom > tabs > tab:hover {
box-shadow: inset 0 3px #9d9d99; }
notebook > header.bottom > tabs > tab:backdrop {
@@ -2019,7 +2022,7 @@ notebook > header {
notebook > header.left {
border-right-style: solid; }
notebook > header.left > tabs {
margin-right: -1px; }
margin-right: -2px; }
notebook > header.left > tabs > tab:hover {
box-shadow: inset -3px 0 #9d9d99; }
notebook > header.left > tabs > tab:backdrop {
@@ -2029,7 +2032,7 @@ notebook > header {
notebook > header.right {
border-left-style: solid; }
notebook > header.right > tabs {
margin-left: -1px; }
margin-left: -2px; }
notebook > header.right > tabs > tab:hover {
box-shadow: inset 3px 0 #9d9d99; }
notebook > header.right > tabs > tab:backdrop {
@@ -2126,17 +2129,31 @@ notebook > header {
notebook > header tab button.flat:first-child {
margin-left: -4px;
margin-right: 4px; }
notebook > header.top, notebook > header.bottom {
notebook > header.top tabs, notebook > header.bottom tabs {
padding-left: 4px;
padding-right: 4px; }
notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) {
margin-left: 3px;
margin-right: 3px; }
notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
margin-left: -1px; }
notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
margin-right: -1px; }
notebook > header.top tabs tab, notebook > header.bottom tabs tab {
margin-left: 4px;
margin-right: 4px; }
notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
border-style: none solid; }
notebook > header.left, notebook > header.right {
notebook > header.left tabs, notebook > header.right tabs {
padding-top: 4px;
padding-bottom: 4px; }
notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) {
margin-top: 3px;
margin-bottom: 3px; }
notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
margin-top: -1px; }
notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
margin-bottom: -1px; }
notebook > header.left tabs tab, notebook > header.right tabs tab {
margin-top: 4px;
margin-bottom: 4px; }