rubberband and content-view tweaks

7 files changed, 72 insertions, 46 deletions

diff --git a/common/gtk-3.0/3.18/gtk-contained-dark.css b/common/gtk-3.0/3.18/gtk-contained-dark.css
index fa44bae..e5fa09b 100644
--- a/common/gtk-3.0/3.18/gtk-contained-dark.css
+++ b/common/gtk-3.0/3.18/gtk-contained-dark.css
@@ -69,9 +69,9 @@
       color: rgba(255, 255, 255, 0.65);
       text-shadow: none; }
 
-.rubberband {
-  border: 1px solid #5294E2;
-  background-color: rgba(82, 148, 226, 0.2); }
+.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
+  border: 1px solid #2679db;
+  background-color: rgba(38, 121, 219, 0.2); }
 
 .label.separator, .popover .label.separator, .sidebar .label.view.separator {
   color: #D3DAE3; }
@@ -1926,13 +1926,11 @@ GtkTreeView.view.radio:checked:insensitive:selected,
 .list-row:selected .radio:checked:insensitive {
   -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive-selected.png"), url("assets/radio-checked-insensitive-selected@2.png")); }
 
-GtkIconView.view.check,
-GtkFlowBox.view.check {
+.view.content-view.check:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode-dark.png"), url("assets/checkbox-selectionmode-dark@2.png"));
   background-color: transparent; }
 
-GtkIconView.view.check:checked,
-GtkFlowBox.view.check:checked {
+.view.content-view.check:checked:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode-dark.png"), url("assets/checkbox-checked-selectionmode-dark@2.png"));
   background-color: transparent; }
 
@@ -2484,6 +2482,11 @@ GtkColorButton.button {
 /********
  * Misc *
  ********/
+.content-view {
+  background-color: #404552; }
+  .content-view:hover {
+    -gtk-image-effect: highlight; }
+
 .scale-popup .button {
   padding: 6px; }
   .scale-popup .button:hover {
diff --git a/common/gtk-3.0/3.18/gtk-contained-darker.css b/common/gtk-3.0/3.18/gtk-contained-darker.css
index 9956d5f..c57d00b 100644
--- a/common/gtk-3.0/3.18/gtk-contained-darker.css
+++ b/common/gtk-3.0/3.18/gtk-contained-darker.css
@@ -69,9 +69,9 @@
       color: rgba(255, 255, 255, 0.65);
       text-shadow: none; }
 
-.rubberband {
-  border: 1px solid #5294E2;
-  background-color: rgba(82, 148, 226, 0.2); }
+.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
+  border: 1px solid #2679db;
+  background-color: rgba(38, 121, 219, 0.2); }
 
 .label.separator, .popover .label.separator, .sidebar .label.view.separator {
   color: #5c616c; }
@@ -1926,13 +1926,11 @@ GtkTreeView.view.radio:checked:insensitive:selected,
 .list-row:selected .radio:checked:insensitive {
   -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive-selected.png"), url("assets/radio-checked-insensitive-selected@2.png")); }
 
-GtkIconView.view.check,
-GtkFlowBox.view.check {
+.view.content-view.check:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png"));
   background-color: transparent; }
 
-GtkIconView.view.check:checked,
-GtkFlowBox.view.check:checked {
+.view.content-view.check:checked:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png"));
   background-color: transparent; }
 
@@ -2484,6 +2482,11 @@ GtkColorButton.button {
 /********
  * Misc *
  ********/
+.content-view {
+  background-color: #ffffff; }
+  .content-view:hover {
+    -gtk-image-effect: highlight; }
+
 .scale-popup .button {
   padding: 6px; }
   .scale-popup .button:hover {
diff --git a/common/gtk-3.0/3.18/gtk-contained-solid-dark.css b/common/gtk-3.0/3.18/gtk-contained-solid-dark.css
index e1cd756..5c651a0 100644
--- a/common/gtk-3.0/3.18/gtk-contained-solid-dark.css
+++ b/common/gtk-3.0/3.18/gtk-contained-solid-dark.css
@@ -69,9 +69,9 @@
       color: rgba(255, 255, 255, 0.65);
       text-shadow: none; }
 
-.rubberband {
-  border: 1px solid #5294E2;
-  background-color: rgba(82, 148, 226, 0.2); }
+.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
+  border: 1px solid #2679db;
+  background-color: rgba(38, 121, 219, 0.2); }
 
 .label.separator, .popover .label.separator, .sidebar .label.view.separator {
   color: #D3DAE3; }
@@ -1926,13 +1926,11 @@ GtkTreeView.view.radio:checked:insensitive:selected,
 .list-row:selected .radio:checked:insensitive {
   -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive-selected.png"), url("assets/radio-checked-insensitive-selected@2.png")); }
 
-GtkIconView.view.check,
-GtkFlowBox.view.check {
+.view.content-view.check:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode-dark.png"), url("assets/checkbox-selectionmode-dark@2.png"));
   background-color: transparent; }
 
-GtkIconView.view.check:checked,
-GtkFlowBox.view.check:checked {
+.view.content-view.check:checked:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode-dark.png"), url("assets/checkbox-checked-selectionmode-dark@2.png"));
   background-color: transparent; }
 
@@ -2484,6 +2482,11 @@ GtkColorButton.button {
 /********
  * Misc *
  ********/
+.content-view {
+  background-color: #404552; }
+  .content-view:hover {
+    -gtk-image-effect: highlight; }
+
 .scale-popup .button {
   padding: 6px; }
   .scale-popup .button:hover {
diff --git a/common/gtk-3.0/3.18/gtk-contained-solid-darker.css b/common/gtk-3.0/3.18/gtk-contained-solid-darker.css
index a822cdf..4eacc75 100644
--- a/common/gtk-3.0/3.18/gtk-contained-solid-darker.css
+++ b/common/gtk-3.0/3.18/gtk-contained-solid-darker.css
@@ -69,9 +69,9 @@
       color: rgba(255, 255, 255, 0.65);
       text-shadow: none; }
 
-.rubberband {
-  border: 1px solid #5294E2;
-  background-color: rgba(82, 148, 226, 0.2); }
+.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
+  border: 1px solid #2679db;
+  background-color: rgba(38, 121, 219, 0.2); }
 
 .label.separator, .popover .label.separator, .sidebar .label.view.separator {
   color: #5c616c; }
@@ -1926,13 +1926,11 @@ GtkTreeView.view.radio:checked:insensitive:selected,
 .list-row:selected .radio:checked:insensitive {
   -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive-selected.png"), url("assets/radio-checked-insensitive-selected@2.png")); }
 
-GtkIconView.view.check,
-GtkFlowBox.view.check {
+.view.content-view.check:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png"));
   background-color: transparent; }
 
-GtkIconView.view.check:checked,
-GtkFlowBox.view.check:checked {
+.view.content-view.check:checked:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png"));
   background-color: transparent; }
 
@@ -2484,6 +2482,11 @@ GtkColorButton.button {
 /********
  * Misc *
  ********/
+.content-view {
+  background-color: #ffffff; }
+  .content-view:hover {
+    -gtk-image-effect: highlight; }
+
 .scale-popup .button {
   padding: 6px; }
   .scale-popup .button:hover {
diff --git a/common/gtk-3.0/3.18/gtk-contained-solid.css b/common/gtk-3.0/3.18/gtk-contained-solid.css
index 1c583c3..ee50e07 100644
--- a/common/gtk-3.0/3.18/gtk-contained-solid.css
+++ b/common/gtk-3.0/3.18/gtk-contained-solid.css
@@ -69,9 +69,9 @@
       color: rgba(255, 255, 255, 0.65);
       text-shadow: none; }
 
-.rubberband {
-  border: 1px solid #5294E2;
-  background-color: rgba(82, 148, 226, 0.2); }
+.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
+  border: 1px solid #2679db;
+  background-color: rgba(38, 121, 219, 0.2); }
 
 .label.separator, .popover .label.separator, .sidebar .label.view.separator {
   color: #5c616c; }
@@ -1926,13 +1926,11 @@ GtkTreeView.view.radio:checked:insensitive:selected,
 .list-row:selected .radio:checked:insensitive {
   -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive-selected.png"), url("assets/radio-checked-insensitive-selected@2.png")); }
 
-GtkIconView.view.check,
-GtkFlowBox.view.check {
+.view.content-view.check:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png"));
   background-color: transparent; }
 
-GtkIconView.view.check:checked,
-GtkFlowBox.view.check:checked {
+.view.content-view.check:checked:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png"));
   background-color: transparent; }
 
@@ -2484,6 +2482,11 @@ GtkColorButton.button {
 /********
  * Misc *
  ********/
+.content-view {
+  background-color: #ffffff; }
+  .content-view:hover {
+    -gtk-image-effect: highlight; }
+
 .scale-popup .button {
   padding: 6px; }
   .scale-popup .button:hover {
diff --git a/common/gtk-3.0/3.18/gtk-contained.css b/common/gtk-3.0/3.18/gtk-contained.css
index 45f22fc..a2e73ea 100644
--- a/common/gtk-3.0/3.18/gtk-contained.css
+++ b/common/gtk-3.0/3.18/gtk-contained.css
@@ -69,9 +69,9 @@
       color: rgba(255, 255, 255, 0.65);
       text-shadow: none; }
 
-.rubberband {
-  border: 1px solid #5294E2;
-  background-color: rgba(82, 148, 226, 0.2); }
+.rubberband, GtkTreeView.view.rubberband, .content-view.rubberband {
+  border: 1px solid #2679db;
+  background-color: rgba(38, 121, 219, 0.2); }
 
 .label.separator, .popover .label.separator, .sidebar .label.view.separator {
   color: #5c616c; }
@@ -1926,13 +1926,11 @@ GtkTreeView.view.radio:checked:insensitive:selected,
 .list-row:selected .radio:checked:insensitive {
   -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive-selected.png"), url("assets/radio-checked-insensitive-selected@2.png")); }
 
-GtkIconView.view.check,
-GtkFlowBox.view.check {
+.view.content-view.check:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png"));
   background-color: transparent; }
 
-GtkIconView.view.check:checked,
-GtkFlowBox.view.check:checked {
+.view.content-view.check:checked:not(.list) {
   -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png"));
   background-color: transparent; }
 
@@ -2484,6 +2482,11 @@ GtkColorButton.button {
 /********
  * Misc *
  ********/
+.content-view {
+  background-color: #ffffff; }
+  .content-view:hover {
+    -gtk-image-effect: highlight; }
+
 .scale-popup .button {
   padding: 6px; }
   .scale-popup .button:hover {
diff --git a/common/gtk-3.0/3.18/sass/_common.scss b/common/gtk-3.0/3.18/sass/_common.scss
index d555aef..dab3844 100644
--- a/common/gtk-3.0/3.18/sass/_common.scss
+++ b/common/gtk-3.0/3.18/sass/_common.scss
@@ -119,8 +119,8 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix);
 }
 
 .rubberband {
-  border: 1px solid $selected_bg_color;
-  background-color: transparentize($selected_bg_color,0.8);
+  border: 1px solid darken($selected_bg_color, 10%);
+  background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
 }
 
 .label {
@@ -1439,6 +1439,8 @@ GtkTreeView.view {                                      // treeview grid lines a
   border-left-color: transparentize($fg_color, 0.85);   // this is actually the tree lines color,
   border-top-color: transparentize(black, 0.9);         // while this is the grid lines color, better then nothing
 
+  &.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
+
   &:selected {
     border-radius: 0;
     border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
@@ -2066,8 +2068,7 @@ GtkSwitch {
 //selection-mode
 @each $s,$as in ('','-selectionmode'),
                   (':checked', '-checked-selectionmode') {
-  GtkIconView.view.check#{$s},
-  GtkFlowBox.view.check#{$s} {
+  .view.content-view.check#{$s}:not(.list) {
     -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
                                     url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
     background-color: transparent;
@@ -2816,6 +2817,13 @@ GtkColorButton.button {
 /********
  * Misc *
  ********/
+//content view (grid/list)
+.content-view {
+  background-color: $base_color;
+  &:hover { -gtk-image-effect: highlight; }
+  &.rubberband { @extend .rubberband; }
+}
+
 .scale-popup .button { // +/- buttons on GtkVolumeButton popup
   padding: 6px;
   &:hover {