[gtk+] Adwaita: notebook better header spacing



commit 6f3a3ea7f3445b0e9402d4e294778d86a4b94c8e
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Tue Mar 15 19:02:11 2016 +0100

    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 820e35d..a69ef1d 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 e96074a..a2d3ef1 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 8c0b675..b1e07ad 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; }


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]