From 6f3a3ea7f3445b0e9402d4e294778d86a4b94c8e Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Tue, 15 Mar 2016 19:02:11 +0100 Subject: [PATCH] Adwaita: notebook better header spacing added some padding to the header and margins to the tabs node when it's not the only child. --- gtk/theme/Adwaita/_common.scss | 39 ++++++++++++++++++------ gtk/theme/Adwaita/gtk-contained-dark.css | 29 ++++++++++++++---- gtk/theme/Adwaita/gtk-contained.css | 29 ++++++++++++++---- 3 files changed, 75 insertions(+), 22 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 820e35d3e2..a69ef1dda9 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -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; diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index e96074a04b..a2d3ef180d 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -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; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 8c0b675be8..b1e07aded2 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -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; }