GNOME.org
 

[gnome-themes-standard/wip/sass] notebook work considering widget brokenness - use box-shadow on the header bar to simulate the not

commit 5615614c55ea8597049f4be8edbba6f24c5f3ef4
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Fri May 30 16:56:41 2014 +0200

    notebook work considering widget brokenness
      - use box-shadow on the header bar to simulate the notebook border
        which is not always there
      - added hover state to reorderable tabs
      - style .header istead of .header.frame since it's broken, this
        fixes backdrop state not working in some casses

 themes/Adwaita/gtk-3.0/_common.scss           |   96 +++++++++++++++++--------
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   70 +++++++++++-------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   70 +++++++++++-------
 3 files changed, 151 insertions(+), 85 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 7f6ad94..a094391 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -621,8 +621,12 @@ GtkPopover {
  *****************/
 
 .notebook {
+  // Through me you go to the grief wracked city;
+  // Through me you go to everlasting pain;
+  // Through me you go a pass among lost souls.
+  // ...
+  // Abandon all hope — Ye Who Enter Here
   padding: 0;
-  border-style: solid;
   background-color: $base_color;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -639,30 +643,54 @@ GtkPopover {
     border-width: 1px;
     border-color: $borders_color;
     &:backdrop { border-color: $backdrop_borders_color; }
+    border-width: 0;
   }
   &.header {
+    // FIXME: double borders in some case, can't fix it w/o a class tho
     background-color: mix($bg_color, $borders_color, 60%);
-    box-shadow: inset 0 2px 3px -1px transparentize(black, 0.85);
-    &.frame {
-      border: 1px solid $borders_color;
-      &.top { border-bottom: none; };
-      &.bottom { border-top: none; };
-      &.right { border-left: none; };
-      &.left { border-right: none; };
-      &:backdrop {
-        border-color: $backdrop_borders_color;
-        // same color as backdrop pushed button
-        background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
-        box-shadow: none;
-      }
+    border: 1px solid $borders_color;
+
+    // this is the shading of the header behind the tabs
+    $_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
+
+    &.top {
+      border-bottom: none;
+      box-shadow: $_header_shade,
+                  inset 0 -1px $borders_color; // border
+      &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
+    }
+    &.bottom {
+      border-top: none;
+      box-shadow: $_header_shade,
+                  inset 0 1px $borders_color;
+      &:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
+    }
+    &.right {
+      border-left: none;
+      box-shadow: $_header_shade,
+                  inset 1px 0 $borders_color;
+      &:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
+    }
+    &.left {
+      border-right: none;
+      box-shadow: $_header_shade,
+                  inset -1px 0 $borders_color;
+      &:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
+    }
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      // same color as backdrop pushed button
+      background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
+      box-shadow: none;
     }
   }
   tab {
     border-width: 0;
+    border-style: solid;
     border-color: transparent;
     background-color: transparent;
 
-    $tab_indicator_size: 2px;
+    $tab_indicator_size: 3px;
     //vertical tab sizing
     $vt_vpadding: 8px;
     $vt_hpadding: 20px;
@@ -700,21 +728,32 @@ GtkPopover {
       background-color: transparent;
       border-color: transparent;
     }
-    &.reorderable-page:active {
-      border-width: 0 1px 0 1px;
-      background-color: transparentize($bg_color, .5); ;// darken($bg_color,3%);
-      border-color: transparentize($borders_color,0.5);
-      &:backdrop {
-        border-color: $backdrop_borders_color;
-        background-color: mix($backdrop_borders_color,$backdrop_bg_color, 8%);
+    // FIXME? we're considering just top reorderable tabs
+    &.reorderable-page {
+      &:active {
+        // not sure this makes any difference, but let's do things
+        // as good as possible
+        padding: $vt_vpadding ($vt_hpadding)-1px
+                 ($vt_vpadding)-1px ($vt_hpadding)-1px;
+        border-width: 0 1px 1px 1px;
+        background-color: transparentize($bg_color, .5);
+        border-color: transparentize($borders_color,0.5);
+        &:hover {
+          background-color: transparentize($bg_color, 0.3);
+        }
+        &:backdrop, &:active:backdrop {
+          border-color: $backdrop_borders_color;
+          background-color: mix($backdrop_borders_color,$backdrop_bg_color, 8%);
+        }
       }
     }
     GtkLabel { //tab text
+      // this doesn't affect labels on reorderable pages, not css fault.
       font-weight: bold;
       color: $insensitive_fg_color;
       // prelight tab text
       &.prelight-page { color: mix($fg_color, $insensitive_fg_color, 50%); }
-      //active tab text
+      // active tab text
       &.active-page {
         color: $fg_color;
         &:backdrop { color: $backdrop_fg_color; }
@@ -723,7 +762,6 @@ GtkPopover {
         color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
       }
     }
-
     .button { //tab close button
       border: 1px solid transparent; //avoid jumping around
       box-shadow: none; //FIXME glitch in the transition
@@ -731,8 +769,8 @@ GtkPopover {
       color: transparentize($fg_color, .5);
       &:hover { @include button(normal); }
       &:active { @include button(active); }
-      & > GtkImage { // this is a hack
-        padding: 4px;
+      & > GtkImage { // this is a hack which makes tabs grow
+        padding: 3px;
       }
     }
   }
@@ -821,9 +859,9 @@ GtkSwitch {
 // all assets are rendered from assets.svg. never add pngs directly
 
 $asset_suffix: if($variant=='dark', '-dark', '');
- each $w,$a in ('check', 'checkbox'), 
+ each $w,$a in ('check', 'checkbox'),
                ('radio','radio') {
-  @each $s,$as in ('','-unchecked'), 
+  @each $s,$as in ('','-unchecked'),
                   (':hover', '-unchecked-hover'),
                   (':insensitive','-unchecked-insensitive'),
                   (':backdrop', '-unchecked-backdrop'),
@@ -831,7 +869,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
                   (':inconsistent', '-mixed'),
                   (':inconsistent:backdrop', '-mixed-backdrop'),
                   (':inconsistent:insensitive', '-mixed-insensitive'),
-                  (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'),                  
+                  (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'),
                   (':active', '-checked'),
                   (':active:insensitive','-checked-insensitive'),
                   (':hover:active', '-checked-hover'),
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 3022b99..789995a 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -668,7 +668,6 @@ GtkPopover {
  *****************/
 .notebook {
   padding: 0;
-  border-style: solid;
   background-color: #333333;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -682,28 +681,40 @@ GtkPopover {
     background-color: #262626; }
   .notebook.frame {
     border-width: 1px;
-    border-color: #1c1f1f; }
+    border-color: #1c1f1f;
+    border-width: 0; }
     .notebook.frame:backdrop {
       border-color: #1c1f1f; }
   .notebook.header {
     background-color: #2d3232;
-    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15); }
-    .notebook.header.frame {
-      border: 1px solid #1c1f1f; }
-      .notebook.header.frame.top {
-        border-bottom: none; }
-      .notebook.header.frame.bottom {
-        border-top: none; }
-      .notebook.header.frame.right {
-        border-left: none; }
-      .notebook.header.frame.left {
-        border-right: none; }
-      .notebook.header.frame:backdrop {
-        border-color: #1c1f1f;
-        background-color: #2e3333;
-        box-shadow: none; }
+    border: 1px solid #1c1f1f; }
+    .notebook.header.top {
+      border-bottom: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; }
+      .notebook.header.top:backdrop {
+        box-shadow: inset 0 -1px #1c1f1f; }
+    .notebook.header.bottom {
+      border-top: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #1c1f1f; }
+      .notebook.header.bottom:backdrop {
+        box-shadow: inset 0 1px #1c1f1f; }
+    .notebook.header.right {
+      border-left: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #1c1f1f; }
+      .notebook.header.right:backdrop {
+        box-shadow: inset 1px 0 #1c1f1f; }
+    .notebook.header.left {
+      border-right: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #1c1f1f; }
+      .notebook.header.left:backdrop {
+        box-shadow: inset -1px 0 #1c1f1f; }
+    .notebook.header:backdrop {
+      border-color: #1c1f1f;
+      background-color: #2e3333;
+      box-shadow: none; }
   .notebook tab {
     border-width: 0;
+    border-style: solid;
     border-color: transparent;
     background-color: transparent; }
     .notebook tab.top, .notebook tab.bottom {
@@ -711,17 +722,17 @@ GtkPopover {
     .notebook tab.left, .notebook tab.right {
       padding: 5px 20px; }
     .notebook tab.top {
-      padding-bottom: 6px;
-      border-bottom-width: 2px; }
+      padding-bottom: 5px;
+      border-bottom-width: 3px; }
     .notebook tab.bottom {
-      padding-top: 6px;
-      border-top-width: 2px; }
+      padding-top: 5px;
+      border-top-width: 3px; }
     .notebook tab.left {
-      padding-right: 18px;
-      border-right-width: 2px; }
+      padding-right: 17px;
+      border-right-width: 3px; }
     .notebook tab.right {
-      padding-left: 18px;
-      border-left-width: 2px; }
+      padding-left: 17px;
+      border-left-width: 3px; }
     .notebook tab:hover {
       border-color: #1c1f1f; }
     .notebook tab:active, .notebook tab:backdrop:active {
@@ -730,10 +741,13 @@ GtkPopover {
       background-color: transparent;
       border-color: transparent; }
     .notebook tab.reorderable-page:active {
-      border-width: 0 1px 0 1px;
+      padding: 8px 19px 7px 19px;
+      border-width: 0 1px 1px 1px;
       background-color: rgba(57, 63, 63, 0.5);
       border-color: rgba(28, 31, 31, 0.5); }
-      .notebook tab.reorderable-page:active:backdrop {
+      .notebook tab.reorderable-page:active:hover {
+        background-color: rgba(57, 63, 63, 0.7); }
+      .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page:active:active:backdrop {
         border-color: #1c1f1f;
         background-color: #363c3c; }
     .notebook tab GtkLabel {
@@ -771,7 +785,7 @@ GtkPopover {
         icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
         box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
       .notebook tab .button > GtkImage {
-        padding: 4px; }
+        padding: 3px; }
 
 /**************
  * Scrollbars *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 6e61cd1..9beb5a7 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -668,7 +668,6 @@ GtkPopover {
  *****************/
 .notebook {
   padding: 0;
-  border-style: solid;
   background-color: white;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -682,28 +681,40 @@ GtkPopover {
     background-color: #fcfcfc; }
   .notebook.frame {
     border-width: 1px;
-    border-color: #a1a1a1; }
+    border-color: #a1a1a1;
+    border-width: 0; }
     .notebook.frame:backdrop {
       border-color: #a1a1a1; }
   .notebook.header {
     background-color: #cecece;
-    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15); }
-    .notebook.header.frame {
-      border: 1px solid #a1a1a1; }
-      .notebook.header.frame.top {
-        border-bottom: none; }
-      .notebook.header.frame.bottom {
-        border-top: none; }
-      .notebook.header.frame.right {
-        border-left: none; }
-      .notebook.header.frame.left {
-        border-right: none; }
-      .notebook.header.frame:backdrop {
-        border-color: #a1a1a1;
-        background-color: #d2d2d2;
-        box-shadow: none; }
+    border: 1px solid #a1a1a1; }
+    .notebook.header.top {
+      border-bottom: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; }
+      .notebook.header.top:backdrop {
+        box-shadow: inset 0 -1px #a1a1a1; }
+    .notebook.header.bottom {
+      border-top: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #a1a1a1; }
+      .notebook.header.bottom:backdrop {
+        box-shadow: inset 0 1px #a1a1a1; }
+    .notebook.header.right {
+      border-left: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #a1a1a1; }
+      .notebook.header.right:backdrop {
+        box-shadow: inset 1px 0 #a1a1a1; }
+    .notebook.header.left {
+      border-right: none;
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #a1a1a1; }
+      .notebook.header.left:backdrop {
+        box-shadow: inset -1px 0 #a1a1a1; }
+    .notebook.header:backdrop {
+      border-color: #a1a1a1;
+      background-color: #d2d2d2;
+      box-shadow: none; }
   .notebook tab {
     border-width: 0;
+    border-style: solid;
     border-color: transparent;
     background-color: transparent; }
     .notebook tab.top, .notebook tab.bottom {
@@ -711,17 +722,17 @@ GtkPopover {
     .notebook tab.left, .notebook tab.right {
       padding: 5px 20px; }
     .notebook tab.top {
-      padding-bottom: 6px;
-      border-bottom-width: 2px; }
+      padding-bottom: 5px;
+      border-bottom-width: 3px; }
     .notebook tab.bottom {
-      padding-top: 6px;
-      border-top-width: 2px; }
+      padding-top: 5px;
+      border-top-width: 3px; }
     .notebook tab.left {
-      padding-right: 18px;
-      border-right-width: 2px; }
+      padding-right: 17px;
+      border-right-width: 3px; }
     .notebook tab.right {
-      padding-left: 18px;
-      border-left-width: 2px; }
+      padding-left: 17px;
+      border-left-width: 3px; }
     .notebook tab:hover {
       border-color: #a1a1a1; }
     .notebook tab:active, .notebook tab:backdrop:active {
@@ -730,10 +741,13 @@ GtkPopover {
       background-color: transparent;
       border-color: transparent; }
     .notebook tab.reorderable-page:active {
-      border-width: 0 1px 0 1px;
+      padding: 8px 19px 7px 19px;
+      border-width: 0 1px 1px 1px;
       background-color: rgba(237, 237, 237, 0.5);
       border-color: rgba(161, 161, 161, 0.5); }
-      .notebook tab.reorderable-page:active:backdrop {
+      .notebook tab.reorderable-page:active:hover {
+        background-color: rgba(237, 237, 237, 0.7); }
+      .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page:active:active:backdrop {
         border-color: #a1a1a1;
         background-color: #e6e6e6; }
     .notebook tab GtkLabel {
@@ -771,7 +785,7 @@ GtkPopover {
         icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
         box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
       .notebook tab .button > GtkImage {
-        padding: 4px; }
+        padding: 3px; }
 
 /**************
  * Scrollbars *
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]