[libadwaita/wip/exalm/borderless: 30/32] a

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [libadwaita/wip/exalm/borderless: 30/32] a
Date: Mon, 26 Jul 2021 12:57:22 +0000 (UTC)

commit 12ede369a2fe62a14141e371461d3b56f66d6ac7
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Jun 21 13:29:23 2021 +0500

    a

 src/stylesheet/_colors.scss                   | 15 ++++++++++-----
 src/stylesheet/_common.scss                   |  2 --
 src/stylesheet/_drawing.scss                  |  4 ++--
 src/stylesheet/widgets/_calendar.scss         |  1 +
 src/stylesheet/widgets/_dialogs.scss          |  2 ++
 src/stylesheet/widgets/_entries.scss          |  1 +
 src/stylesheet/widgets/_file-chooser.scss     |  4 +---
 src/stylesheet/widgets/_header-bar.scss       |  4 +---
 src/stylesheet/widgets/_lists.scss            | 24 +++++++++++++++++-------
 src/stylesheet/widgets/_message-dialog.scss   |  1 +
 src/stylesheet/widgets/_misc.scss             |  2 +-
 src/stylesheet/widgets/_notebook.scss         | 15 +++++++--------
 src/stylesheet/widgets/_popovers.scss         |  1 -
 src/stylesheet/widgets/_scrolling.scss        | 10 +++++-----
 src/stylesheet/widgets/_shortcuts-window.scss |  5 +++--
 src/stylesheet/widgets/_sidebars.scss         |  1 +
 src/stylesheet/widgets/_spin-button.scss      |  2 +-
 src/stylesheet/widgets/_switch.scss           | 13 +++++++++----
 src/stylesheet/widgets/_tab-view.scss         | 12 +++++++-----
 src/stylesheet/widgets/_toolbars.scss         | 16 ++++++++++------
 src/stylesheet/widgets/_trees.scss            | 15 +++++++++------
 21 files changed, 89 insertions(+), 61 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 579f7161..1b044e8c 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -23,10 +23,12 @@ $text_color: if($variant == 'light', black, white);
 $bg_color: if($variant == 'light', $light_bg, $dark_bg);
 $fg_color: if($variant == 'light', $light_fg, $dark_fg);
 
-$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
+$borders_color: gtkalpha(currentColor, .15);
+$thin_borders_color: gtkalpha(currentColor, .05);
+$half_borders_color: gtkalpha(currentColor, .075);
 $link_color: $accent_color;
 $link_visited_color: gtkmix($accent_color, $text_color, 80%);
-$dark_fill: mix($borders_color, $bg_color, 50%);
+$dark_fill: if($variant == 'light', darken($bg_color, 9%), darken($bg_color, 5%));
 $headerbar_bg_color: $bg_color;
 $menu_color: $base_color;
 
@@ -77,7 +79,6 @@ $drop_target_color: if($variant == 'light', $green_4, $green_5);
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
-$insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 
 //special cased widget colors
 $focus_border_color:  gtkalpha($accent_bg_color, 0.5);
@@ -89,12 +90,13 @@ $dim_label_opacity: 0.55;
 
   $fg_color: if($variant == 'light', darken($fg_color, 3%), lighten($fg_color, 2%));
   $bg_color: if($variant == 'light', lighten($bg_color, 3%), darken($bg_color, 2%));
-  $borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%));
+  $borders_color: gtkalpha(currentColor, .5);
+  $thin_borders_color: gtkalpha(currentColor, .25);
+  $half_borders_color: gtkalpha(currentColor, .25);
 
   //insensitive state derived colors
   $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
   $insensitive_bg_color: mix($bg_color, $base_color, 60%);
-  $insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 
   //focus rings
   $focus_border_color: gtkalpha($accent_bg_color, 0.8);
@@ -102,4 +104,7 @@ $dim_label_opacity: 0.55;
 
   $dim_label_opacity: 0.9;
 
+  $trough_color: gtkalpha(currentColor, .3);
+  $trough_hover_color: gtkalpha(currentColor, .4);
+  $trough_active_color: gtkalpha(currentColor, .5);
 }
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 896ac12d..52d21d1a 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -9,8 +9,6 @@ $menu_padding: 12px; //inner menuitem padding
 $window_radius: $button_radius + 3;
 $popover_radius: $button_radius + 4;
 
-$treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, 
$base_color, 20%));
-
 .background {
   color: $fg_color;
   background-color: $bg_color;
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index dbe3e6d6..81da046f 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -53,13 +53,13 @@
 
   @if $t==normal {
     color: $text_color;
-    border-color: mix($borders_color, $base_color, 75%);
+    border-color: $borders_color;
     background-color: $base_color;
     // for the transition to work the number of shadows in different states needs to match, hence the 
transparent shadow here.
   }
   @if $t==insensitive {
     color: $insensitive_fg_color;
-    border-color: mix($borders_color, $insensitive_bg_color, 75%);
+    border-color: $borders_color;
     background-color: $insensitive_bg_color;
   }
   @if $t==osd {
diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index 278fbf0b..baf8a6e2 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -1,5 +1,6 @@
 calendar {
   color: $text_color;
+  background-clip: padding-box;
   border: 1px solid $borders_color;
 
   > header {
diff --git a/src/stylesheet/widgets/_dialogs.scss b/src/stylesheet/widgets/_dialogs.scss
index 41fe0797..d470da2d 100644
--- a/src/stylesheet/widgets/_dialogs.scss
+++ b/src/stylesheet/widgets/_dialogs.scss
@@ -17,6 +17,7 @@ window.dialog.print {
     paper {
       background: white;
       color: $light_fg;
+      background-clip: padding-box;
       border: 1px solid $borders_color;
     }
   }
@@ -29,6 +30,7 @@ window.dialog.print {
 window.assistant {
   .sidebar {
     padding: $menu-margin;
+    background-clip: padding-box;
     border-top: 1px solid $borders_color;
   }
 
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 88314ab3..e2c1d693 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -7,6 +7,7 @@ entry {
     border: 1px solid;
     border-radius: $button_radius;
     border-spacing: 6px;
+    background-clip: padding-box;
     transition: all 200ms $ease-out-quad;
 
     @include entry(normal);
diff --git a/src/stylesheet/widgets/_file-chooser.scss b/src/stylesheet/widgets/_file-chooser.scss
index a7111bb7..b5f89abd 100644
--- a/src/stylesheet/widgets/_file-chooser.scss
+++ b/src/stylesheet/widgets/_file-chooser.scss
@@ -17,9 +17,7 @@ placesview {
 }
 
 filechooser {
-  .dialog-action-box {
-    border-top: 1px solid $borders_color;
-  }
+  box-shadow: 0 1px $borders_color;
 
   #pathbarbox { border-bottom: 1px solid $bg_color; }
 
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 45729205..cb43aeff 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -1,8 +1,6 @@
 headerbar {
   min-height: 46px;
-  border-width: 0 0 1px;
-  border-style: solid;
-  border-color: $borders_color;
+  box-shadow: inset 0 -1px $borders_color;
   background-color: $headerbar_bg_color;
 
   @extend %toolbar;
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 6fcbd092..fd5bd37c 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -2,25 +2,33 @@ listview,
 list {
   color: $text_color;
   background-color: $base_color;
+  background-clip: padding-box;
   border-color: $borders_color;
 
-  > row { padding: 2px; }
+  > row {
+    padding: 2px;
+    background-clip: padding-box;
+  }
+
   > row.expander { padding: 0px; }
   > row.expander .row-header { padding: 2px; }
 
   &.horizontal row.separator,
   &.separators.horizontal > row:not(.separator) {
-    border-left: 1px solid $treeview_borders_color;
+    border-left: 1px solid $borders_color;
   }
+
   &:not(.horizontal) row.separator,
   &.separators:not(.horizontal) > row:not(.separator) {
-    border-bottom: 1px solid $treeview_borders_color;
+    border-bottom: 1px solid $borders_color;
   }
 }
 
 row {
   @include focus-ring($focus-state: 'focus-visible:focus-within');
 
+  background-clip: padding-box;
+
   &.activatable {
     &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
     &:hover { background-color: $view_hover_color; }
@@ -93,10 +101,10 @@ popover.background.combo > contents {
     background-color: transparent;
     min-width: 200px;
 
-    & > row {
+    > row {
       padding: 0px 12px 0px 12px;
       min-height: 50px;
-      border-bottom: 1px solid transparentize($borders_color, 0.5);
+      border-bottom: 1px solid $borders_color;
 
       &:first-child {
         border-top-left-radius: $popover_radius - 2;
@@ -143,7 +151,8 @@ row.expander {
 
   list.nested > row {
     background-color: transparentize($bg_color, 0.5);
-    border-color: transparentize($borders_color, 0.3);
+    border-color: $borders_color;
+    background-clip: padding-box;
     border-style: solid;
     border-width: 1px 0px 0px 0px;
   }
@@ -248,8 +257,9 @@ listview.content {
 
     &,
     list > row {
-      border-color: transparentize($borders_color, 0.3);
+      border-color: $borders_color;
       border-style: solid;
+      background-clip: padding-box;
       transition: 200ms $ease-out-quad;
     }
 
diff --git a/src/stylesheet/widgets/_message-dialog.scss b/src/stylesheet/widgets/_message-dialog.scss
index 133c64b2..59f1f715 100644
--- a/src/stylesheet/widgets/_message-dialog.scss
+++ b/src/stylesheet/widgets/_message-dialog.scss
@@ -33,6 +33,7 @@ window.dialog.message {
         padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
         border-radius: 0;
         border: none;
+        background-clip: padding-box;
         border-left: 1px solid $borders_color;
 
         &:first-child {
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index 426df4c2..069b221a 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -19,7 +19,7 @@ frame {
  **************/
 
 separator {
-  background: lighten($borders_color, 5%);
+  background: $borders_color;
   min-width: 1px;
   min-height: 1px;
 }
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index c9b5bb26..00dc48a1 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -6,6 +6,7 @@ notebook {
     border-color: $borders_color;
     border-width: 1px;
     background-color: $dark_fill;
+    background-clip: padding-box;
 
     > tabs { margin: -1px; }
 
@@ -126,16 +127,15 @@ notebook {
       color: $fg_color;
       font-weight: normal;
 
-      border-width: 1px;         // for reorderable tabs
-      border-color: transparent; //
+      border-width: 1px;            // for reorderable tabs
+      border-color: transparent;    //
+      background-clip: padding-box; //
 
       &:hover {
-        color: $fg_color;
-        background-color: darken($dark_fill,4%);
+        background-color: transparentize($bg_color, 0.8);
 
         &.reorderable-page {
-          border-color: transparentize($borders_color, 0.7);
-          background-color: transparentize($bg_color, 0.8);
+          border-color: $thin_borders_color;
         }
       }
 
@@ -144,10 +144,9 @@ notebook {
       }
 
       &:checked {
-        color: $fg_color;
         &.reorderable-page {
-          border-color: transparentize($borders_color, 0.5);
           background-color: transparentize($bg_color, 0.5);
+          border-color: $thin_borders_color;
 
           &:hover { background-color: transparentize($bg_color, 0.3); }
         }
diff --git a/src/stylesheet/widgets/_popovers.scss b/src/stylesheet/widgets/_popovers.scss
index 122452fd..627a5c00 100644
--- a/src/stylesheet/widgets/_popovers.scss
+++ b/src/stylesheet/widgets/_popovers.scss
@@ -34,7 +34,6 @@ popover.background {
     }
 
     separator {
-      background-color: mix($bg_color, $borders_color, 30%);
       margin: 3px;
     }
 
diff --git a/src/stylesheet/widgets/_scrolling.scss b/src/stylesheet/widgets/_scrolling.scss
index 8d18e64f..3794c287 100644
--- a/src/stylesheet/widgets/_scrolling.scss
+++ b/src/stylesheet/widgets/_scrolling.scss
@@ -8,10 +8,10 @@ scrollbar {
   transition: $_scrollbar_transition;
 
   // scrollbar border
-  &.top { border-bottom: 1px solid $borders_color; }
-  &.bottom { border-top: 1px solid $borders_color; }
-  &.left { border-right: 1px solid $borders_color; }
-  &.right { border-left: 1px solid $borders_color; }
+  &.top    { box-shadow: inset 0 -1px $borders_color; }
+  &.bottom { box-shadow: inset 0  1px $borders_color; }
+  &.left   { box-shadow: inset -1px 0 $borders_color; }
+  &.right  { box-shadow: inset  1px 0 $borders_color; }
 
   > range > trough > slider {
     min-width: $_slider_width;
@@ -43,7 +43,7 @@ scrollbar {
 
   &.overlay-indicator {
     &:not(.dragging):not(.hovering) {
-      border-color: transparent;
+      box-shadow: none;
       opacity: 0.4;
       background-color: transparent;
 
diff --git a/src/stylesheet/widgets/_shortcuts-window.scss b/src/stylesheet/widgets/_shortcuts-window.scss
index 06d2ba01..67968c27 100644
--- a/src/stylesheet/widgets/_shortcuts-window.scss
+++ b/src/stylesheet/widgets/_shortcuts-window.scss
@@ -21,10 +21,11 @@ shortcut {
 
     color: $fg_color;
     background-color: $base_color;
+    background-clip: padding-box;
     border: 1px solid;
-    border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
+    border-color: $borders_color;
     border-radius: 5px;
-    box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px 
mix($borders_color, $base_color, 60%));
+    box-shadow: inset 0 -3px $thin_borders_color;
     font-size: smaller;
   }
 }
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 8a0481f8..1774b5a8 100644
--- a/src/stylesheet/widgets/_sidebars.scss
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -1,5 +1,6 @@
 .sidebar {
   background-color: mix($bg_color, $base_color, 50%);
+  background-clip: padding-box;
 
   &:not(separator) {
     &:dir(ltr),
diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index 4d00e847..ddcb5620 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -10,7 +10,7 @@ spinbutton {
     margin: 0;
     background: none;
     border-style: solid;
-    border-color: transparentize($borders_color, 0.7);
+    border-color: $thin_borders_color;
     border-radius: 0;
     box-shadow: none;
     color: inherit;
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index 195e89cf..77650c89 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -6,14 +6,15 @@ switch {
   transition: $focus_transition;
 
   @if $contrast == "high" {
-     background-color: $borders_color;
-     color: white;
+     background-color: gtkalpha(currentColor, .5);
 
      &:hover {
-      background-color: mix($borders_color, $text_color, 90%);
+      background-color: gtkalpha(currentColor, .6);
 
-      &:active { background-color: mix($borders_color, black, 80%); }
+      &:active { background-color: gtkalpha(currentColor, .7); }
     }
+
+    > image { color: white; }
    }
    @else {
      background-color: $trough_color;
@@ -62,5 +63,9 @@ switch {
     > slider {
       background-color: $slider_hover_color;
     }
+
+    @if $contrast == "high" {
+      > image {  color: inherit; }
+    }
   }
 }
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index 2bb06d73..9e446e88 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -24,7 +24,8 @@ tabbar {
   .box {
     min-height: 38px;
     background: darken($tab_bg, 3%);
-    border-bottom: 1px solid $borders_color;
+    padding-bottom: 1px;
+    box-shadow: inset 0 -1px $borders_color;
   }
 
   &:backdrop {
@@ -48,11 +49,11 @@ tabbar {
 
     tabbox {
       &:dir(ltr) {
-        box-shadow: inset -1px 0 $borders_color;
+        box-shadow: inset -1px 0 $half_borders_color;
       }
 
       &:dir(rtl) {
-        box-shadow: inset 1px 0 $borders_color;
+        box-shadow: inset 1px 0 $half_borders_color;
       }
     }
   }
@@ -79,10 +80,11 @@ tabbar {
 
   tab {
     border-style: solid;
-    border-color: $borders_color;
+    border-color: $half_borders_color;
     border-width: 0 1px 0 1px;
     transition: background 150ms ease-in-out, $focus_transition;
     background-color: $tab_bg;
+    background-clip: padding-box;
 
     @include focus-ring();
 
@@ -112,7 +114,7 @@ tabbar {
   .start-action,
   .end-action {
     background: $tab_bg;
-    border-color: $borders_color;
+    border-color: $half_borders_color;
     border-style: solid;
     transition: background 150ms ease-in-out;
 
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 3bdfba8e..6fb4118d 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -111,11 +111,10 @@ searchbar > revealer > box {
   padding: 6px;
   border-spacing: 6px;
 
-  border-width: 0 0 1px;
-  border-style: solid;
-  border-color: $borders_color;
+  padding-bottom: 7px;
+  box-shadow: inset 0 -1px $borders_color;
 
-  background-color: mix($bg_color, $borders_color, 70%);
+  background-color: $dark_fill;
 
  .close {
     min-width: 18px;
@@ -132,7 +131,10 @@ searchbar > revealer > box {
 
 actionbar > revealer > box {
   padding: 0 6px;
-  border-top: 1px solid $borders_color;
+
+  padding-top: 7px;
+  box-shadow: inset 0 1px $borders_color;
+
   @extend %toolbar;
 
   &, > box.start, > box.end {
@@ -148,7 +150,9 @@ infobar {
   > revealer > box {
     padding: 8px;
     border-spacing: 12px;
-    box-shadow: inset 0 -1px gtkalpha(currentColor, .1);
+
+    padding-bottom: 9px;
+    box-shadow: inset 0 -1px $borders_color;
   }
 
   &.action:hover > revealer > box {
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index e093bc91..1d4b954d 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -1,12 +1,15 @@
 // To be used for opaque elements overlaid atop the selected row
 $treeview_selection_default: transparentize($text_color, .9);
 $treeview_selection_opaque: mix(opacify($treeview_selection_default, 1), $base_color, 100% * 
alpha($treeview_selection_default));
+$treeview_borders_opaque: mix($text_color, $base_color, if($contrast == 'high', 40%, 20%));
 
-columnview.view,
 treeview.view {
-  border-left-color: $treeview_borders_color; // this is actually the tree lines color,
-  border-top-color: $treeview_borders_color; // while this is the grid lines color, better then nothing
+  border-left-color: $treeview_borders_opaque; // this is actually the tree lines color,
+  border-top-color: $treeview_borders_opaque; // while this is the grid lines color, better then nothing
+}
 
+columnview.view,
+treeview.view {
   @include focus-ring();
 
   &:selected {
@@ -17,7 +20,7 @@ treeview.view {
 
   &.separator {
     min-height: 2px;
-    color: $treeview_borders_color;
+    color: $borders_color;
   }
 
   &:drop(active) {
@@ -130,7 +133,7 @@ treeview.view {
   background-image: none;
   border-style: solid;
   border-width: 0 0 1px 1px;
-  border-color: $treeview_borders_color;
+  border-color: $borders_color;
   border-radius: 0;
 
   &:disabled {
@@ -164,7 +167,7 @@ columnview {
 
   // make column separators visible when :show-column-separators is true
   &.column-separators > listview > row > cell {
-    border-left-color: $treeview_borders_color;
+    border-left-color: $borders_color;
   }
 
   // shrink vertically for .data-table
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]