update

install.sh

@@ -1,4 +1,4 @@
-#! /bin/bash
+#! /usr/bin/env bash
 
 # WARNING: Please make this shell not working-directory dependant, for example
 # instead of using 'cd blabla', use 'cd "${REPO_DIR}/blabla"'

lib-core.sh

@@ -74,12 +74,12 @@ THEME_VARIANTS=('default' 'blue' 'purple' 'pink' 'red' 'orange' 'yellow' 'green'
 ICON_VARIANTS=('standard' 'simple' 'gnome' 'ubuntu' 'arch' 'manjaro' 'fedora' 'debian' 'void')
 SIDEBAR_SIZE_VARIANTS=('default' '220' '240' '260' '280')
 PANEL_OPACITY_VARIANTS=('default' '30' '45' '60' '75')
-NAUTILUS_STYLE_VARIANTS=('default' 'mojave' 'glassy')
+NAUTILUS_STYLE_VARIANTS=('default' 'stable' 'mojave' 'glassy')
 
 # Customization, default values
 dest="${THEME_DIR}"
 name="${THEME_NAME}"
-colors=("${COLOR_VARIANTS[0]}")
+colors=("${COLOR_VARIANTS}")
 opacities=("${OPACITY_VARIANTS[0]}")
 alts=("${ALT_VARIANTS[0]}")
 themes=("${THEME_VARIANTS[0]}")

lib-install.sh

@@ -144,6 +144,7 @@ install_theemy() {
 
   mkdir -p                                                                                    "${TMP_DIR}"
   cp -r "${THEME_SRC_DIR}/assets/gtk-3.0/common-assets/assets"                                "${TMP_DIR}"
+  cp -r "${THEME_SRC_DIR}/assets/gtk-3.0/common-assets/sidebar-assets/"*".png"                "${TMP_DIR}/assets"
   cp -r "${THEME_SRC_DIR}/assets/gtk-3.0/windows-assets/titlebutton${alt}"                    "${TMP_DIR}/windows-assets"
 
   if [[ "${theme}" != '' ]]; then
@@ -486,12 +487,14 @@ show_nautilus_style_dialog() {
     tui=$(dialog --backtitle "${THEME_NAME} gtk theme installer" \
     --radiolist "Choose your Nautilus style (default is BigSur-like style):" 15 40 5 \
       0 "${NAUTILUS_STYLE_VARIANTS[0]}" on \
-      1 "${NAUTILUS_STYLE_VARIANTS[1]}" on \
+      1 "${NAUTILUS_STYLE_VARIANTS[1]}" off \
-      2 "${NAUTILUS_STYLE_VARIANTS[2]}" off --output-fd 1 )
+      1 "${NAUTILUS_STYLE_VARIANTS[2]}" off \
+      2 "${NAUTILUS_STYLE_VARIANTS[3]}" off --output-fd 1 )
       case "$tui" in
         0) nautilus_style="${NAUTILUS_STYLE_VARIANTS[0]}" ;;
         1) nautilus_style="${NAUTILUS_STYLE_VARIANTS[1]}" ;;
         2) nautilus_style="${NAUTILUS_STYLE_VARIANTS[2]}" ;;
+        3) nautilus_style="${NAUTILUS_STYLE_VARIANTS[3]}" ;;
         *) operation_canceled ;;
       esac
   fi

src/assets/gtk-3.0/common-assets/render-sidebar-assets.sh

@@ -0,0 +1,37 @@
+#! /bin/bash
+
+INKSCAPE="/usr/bin/inkscape"
+OPTIPNG="/usr/bin/optipng"
+
+SRC_FILE="sidebar-assets.svg"
+ASSETS_DIR="sidebar-assets"
+INDEX="sidebar-assets.txt"
+
+[[ -d $ASSETS_DIR ]] && rm -rf $ASSETS_DIR
+mkdir -p $ASSETS_DIR
+
+for i in `cat $INDEX`
+do 
+if [ -f $ASSETS_DIR/$i.png ]; then
+    echo $ASSETS_DIR/$i.png exists.
+else
+    echo
+    echo Rendering $ASSETS_DIR/$i.png
+    $INKSCAPE --export-id=$i \
+              --export-id-only \
+              --export-filename=$ASSETS_DIR/$i.png $SRC_FILE >/dev/null
+    $OPTIPNG -o7 --quiet $ASSETS_DIR/$i.png 
+fi
+if [ -f $ASSETS_DIR/$i@2.png ]; then
+    echo $ASSETS_DIR/$i@2.png exists.
+else
+    echo
+    echo Rendering $ASSETS_DIR/$i@2.png
+    $INKSCAPE --export-id=$i \
+              --export-dpi=192 \
+              --export-id-only \
+              --export-filename=$ASSETS_DIR/$i@2.png $SRC_FILE >/dev/null
+    $OPTIPNG -o7 --quiet $ASSETS_DIR/$i@2.png 
+fi
+done
+exit 0

src/assets/gtk-3.0/common-assets/sidebar-assets.svg

@@ -0,0 +1,123 @@
+<svg width="760" height="800" version="1.1" viewBox="0 0 201.08 211.67" xmlns="http://www.w3.org/2000/svg">
+ <g id="sidebar-view-hover-220px">
+  <rect x="15.875" y="50.271" width="58.208" height="7.4083" opacity="0" stroke-width=".79507"/>
+  <rect x="18.521" y="50.271" width="52.917" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".1"/>
+ </g>
+ <rect x="93.927" y="7.9375" width="85.99" height="198.44" rx="0" ry="0" fill="#333333" stroke-linecap="square" stroke-width=".61172"/>
+ <g id="sidebar-view-hover-200px" transform="matrix(.29398 0 0 .26458 -202.26 9.7896)">
+  <rect x="742" y="8" width="180" height="28" opacity="0" stroke-width="2.7181"/>
+  <rect x="751" y="8" width="162" height="28" ry="5" fill="#00000c" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-200px" transform="matrix(.29398 0 0 .26458 -202.26 19.844)">
+  <rect x="742" y="8" width="180" height="28" opacity="0" stroke-width="2.7181"/>
+  <rect x="751" y="8" width="162" height="28" ry="5" fill="#00000c" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-200px" transform="matrix(.29398 0 0 .26458 -202.26 30.427)">
+  <rect x="742" y="8" width="180" height="28" opacity="0" stroke-width="2.7181"/>
+  <rect x="751" y="8" width="162" height="28" ry="5" fill="#00000c" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-200px-dark" transform="matrix(.29398 0 0 .26458 -120.24 9.7896)">
+  <rect x="742" y="8" width="180" height="28" opacity="0" stroke-width="2.7181"/>
+  <rect x="751" y="8" width="162" height="28" ry="5" fill="#ffffff" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-200px-dark" transform="matrix(.29398 0 0 .26458 -120.24 19.844)">
+  <rect x="742" y="8" width="180" height="28" opacity="0" stroke-width="2.7181"/>
+  <rect x="751" y="8" width="162" height="28" ry="5" fill="#ffffff" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-200px-dark" transform="matrix(.29398 0 0 .26458 -120.24 30.427)">
+  <rect x="742" y="8" width="180" height="28" opacity="0" stroke-width="2.7181"/>
+  <rect x="751" y="8" width="162" height="28" ry="5" fill="#ffffff" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-active-220px">
+  <rect x="15.875" y="60.325" width="58.208" height="7.4083" opacity="0" stroke-width=".79507"/>
+  <rect x="18.521" y="60.325" width="52.917" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-220px">
+  <rect x="15.875" y="70.908" width="58.208" height="7.4083" opacity="0" stroke-width=".79507"/>
+  <rect x="18.521" y="70.908" width="52.917" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-240px">
+  <rect x="15.875" y="91.81" width="63.5" height="7.4083" opacity="0" stroke-width=".83043"/>
+  <rect x="18.521" y="91.81" width="58.208" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-240px">
+  <rect x="15.875" y="101.86" width="63.5" height="7.4083" opacity="0" stroke-width=".83043"/>
+  <rect x="18.521" y="101.86" width="58.208" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-240px">
+  <rect x="15.875" y="112.45" width="63.5" height="7.4083" opacity="0" stroke-width=".83043"/>
+  <rect x="18.521" y="112.45" width="58.208" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-260px">
+  <rect x="15.875" y="131.23" width="68.792" height="7.4083" opacity="0" stroke-width=".86434"/>
+  <rect x="18.521" y="131.23" width="63.5" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-260px">
+  <rect x="15.875" y="141.29" width="68.792" height="7.4083" opacity="0" stroke-width=".86434"/>
+  <rect x="18.521" y="141.29" width="63.5" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-260px">
+  <rect x="15.875" y="151.87" width="68.792" height="7.4083" opacity="0" stroke-width=".86434"/>
+  <rect x="18.521" y="151.87" width="63.5" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-280px">
+  <rect x="15.875" y="171.98" width="74.083" height="7.4083" opacity="0" stroke-width=".89696"/>
+  <rect x="18.521" y="171.98" width="68.792" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-280px">
+  <rect x="15.875" y="182.03" width="74.083" height="7.4083" opacity="0" stroke-width=".89696"/>
+  <rect x="18.521" y="182.03" width="68.792" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-280px">
+  <rect x="15.875" y="192.62" width="74.083" height="7.4083" opacity="0" stroke-width=".89696"/>
+  <rect x="18.521" y="192.62" width="68.792" height="7.4083" rx="1.3229" ry="1.3229" fill="#00000c" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-220px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="50.271" width="58.208" height="7.4083" opacity="0" stroke-width=".79507"/>
+  <rect x="18.521" y="50.271" width="52.917" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-220px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="60.325" width="58.208" height="7.4083" opacity="0" stroke-width=".79507"/>
+  <rect x="18.521" y="60.325" width="52.917" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-220px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="70.908" width="58.208" height="7.4083" opacity="0" stroke-width=".79507"/>
+  <rect x="18.521" y="70.908" width="52.917" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-240px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="91.81" width="63.5" height="7.4083" opacity="0" stroke-width=".83043"/>
+  <rect x="18.521" y="91.81" width="58.208" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-240px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="101.86" width="63.5" height="7.4083" opacity="0" stroke-width=".83043"/>
+  <rect x="18.521" y="101.86" width="58.208" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-240px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="112.45" width="63.5" height="7.4083" opacity="0" stroke-width=".83043"/>
+  <rect x="18.521" y="112.45" width="58.208" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-260px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="131.23" width="68.792" height="7.4083" opacity="0" stroke-width=".86434"/>
+  <rect x="18.521" y="131.23" width="63.5" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-260px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="141.29" width="68.792" height="7.4083" opacity="0" stroke-width=".86434"/>
+  <rect x="18.521" y="141.29" width="63.5" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-260px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="151.87" width="68.792" height="7.4083" opacity="0" stroke-width=".86434"/>
+  <rect x="18.521" y="151.87" width="63.5" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".15"/>
+ </g>
+ <g id="sidebar-view-hover-280px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="171.98" width="74.083" height="7.4083" opacity="0" stroke-width=".89696"/>
+  <rect x="18.521" y="171.98" width="68.792" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".1"/>
+ </g>
+ <g id="sidebar-view-active-280px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="182.03" width="74.083" height="7.4083" opacity="0" stroke-width=".89696"/>
+  <rect x="18.521" y="182.03" width="68.792" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".2"/>
+ </g>
+ <g id="sidebar-view-checked-280px-dark" transform="translate(82.021)">
+  <rect x="15.875" y="192.62" width="74.083" height="7.4083" opacity="0" stroke-width=".89696"/>
+  <rect x="18.521" y="192.62" width="68.792" height="7.4083" rx="1.3229" ry="1.3229" fill="#ffffff" opacity=".15"/>
+ </g>
+</svg>

src/assets/gtk-3.0/common-assets/sidebar-assets.txt

@@ -0,0 +1,30 @@
+sidebar-view-hover-200px
+sidebar-view-active-200px
+sidebar-view-checked-200px
+sidebar-view-hover-200px-dark
+sidebar-view-active-200px-dark
+sidebar-view-checked-200px-dark
+sidebar-view-hover-220px
+sidebar-view-active-220px
+sidebar-view-checked-220px
+sidebar-view-hover-220px-dark
+sidebar-view-active-220px-dark
+sidebar-view-checked-220px-dark
+sidebar-view-hover-240px
+sidebar-view-active-240px
+sidebar-view-checked-240px
+sidebar-view-hover-240px-dark
+sidebar-view-active-240px-dark
+sidebar-view-checked-240px-dark
+sidebar-view-hover-260px
+sidebar-view-active-260px
+sidebar-view-checked-260px
+sidebar-view-hover-260px-dark
+sidebar-view-active-260px-dark
+sidebar-view-checked-260px-dark
+sidebar-view-hover-280px
+sidebar-view-active-280px
+sidebar-view-checked-280px
+sidebar-view-hover-280px-dark
+sidebar-view-active-280px-dark
+sidebar-view-checked-280px-dark

src/main/gtk-3.0/gtk.gresource.xml

@@ -121,6 +121,66 @@
     <file>assets/paned-separator@2.png</file>
     <file>assets/paned-separator-dark.png</file>
     <file>assets/paned-separator-dark@2.png</file>
+    <file>assets/sidebar-view-hover-200px.png</file>
+    <file>assets/sidebar-view-hover-200px@2.png</file>
+    <file>assets/sidebar-view-active-200px.png</file>
+    <file>assets/sidebar-view-active-200px@2.png</file>
+    <file>assets/sidebar-view-checked-200px.png</file>
+    <file>assets/sidebar-view-checked-200px@2.png</file>
+    <file>assets/sidebar-view-hover-200px-dark.png</file>
+    <file>assets/sidebar-view-hover-200px-dark@2.png</file>
+    <file>assets/sidebar-view-active-200px-dark.png</file>
+    <file>assets/sidebar-view-active-200px-dark@2.png</file>
+    <file>assets/sidebar-view-checked-200px-dark.png</file>
+    <file>assets/sidebar-view-checked-200px-dark@2.png</file>
+    <file>assets/sidebar-view-hover-220px.png</file>
+    <file>assets/sidebar-view-hover-220px@2.png</file>
+    <file>assets/sidebar-view-active-220px.png</file>
+    <file>assets/sidebar-view-active-220px@2.png</file>
+    <file>assets/sidebar-view-checked-220px.png</file>
+    <file>assets/sidebar-view-checked-220px@2.png</file>
+    <file>assets/sidebar-view-hover-220px-dark.png</file>
+    <file>assets/sidebar-view-hover-220px-dark@2.png</file>
+    <file>assets/sidebar-view-active-220px-dark.png</file>
+    <file>assets/sidebar-view-active-220px-dark@2.png</file>
+    <file>assets/sidebar-view-checked-220px-dark.png</file>
+    <file>assets/sidebar-view-checked-220px-dark@2.png</file>
+    <file>assets/sidebar-view-hover-240px.png</file>
+    <file>assets/sidebar-view-hover-240px@2.png</file>
+    <file>assets/sidebar-view-active-240px.png</file>
+    <file>assets/sidebar-view-active-240px@2.png</file>
+    <file>assets/sidebar-view-checked-240px.png</file>
+    <file>assets/sidebar-view-checked-240px@2.png</file>
+    <file>assets/sidebar-view-hover-240px-dark.png</file>
+    <file>assets/sidebar-view-hover-240px-dark@2.png</file>
+    <file>assets/sidebar-view-active-240px-dark.png</file>
+    <file>assets/sidebar-view-active-240px-dark@2.png</file>
+    <file>assets/sidebar-view-checked-240px-dark.png</file>
+    <file>assets/sidebar-view-checked-240px-dark@2.png</file>
+    <file>assets/sidebar-view-hover-260px.png</file>
+    <file>assets/sidebar-view-hover-260px@2.png</file>
+    <file>assets/sidebar-view-active-260px.png</file>
+    <file>assets/sidebar-view-active-260px@2.png</file>
+    <file>assets/sidebar-view-checked-260px.png</file>
+    <file>assets/sidebar-view-checked-260px@2.png</file>
+    <file>assets/sidebar-view-hover-260px-dark.png</file>
+    <file>assets/sidebar-view-hover-260px-dark@2.png</file>
+    <file>assets/sidebar-view-active-260px-dark.png</file>
+    <file>assets/sidebar-view-active-260px-dark@2.png</file>
+    <file>assets/sidebar-view-checked-260px-dark.png</file>
+    <file>assets/sidebar-view-checked-260px-dark@2.png</file>
+    <file>assets/sidebar-view-hover-280px.png</file>
+    <file>assets/sidebar-view-hover-280px@2.png</file>
+    <file>assets/sidebar-view-active-280px.png</file>
+    <file>assets/sidebar-view-active-280px@2.png</file>
+    <file>assets/sidebar-view-checked-280px.png</file>
+    <file>assets/sidebar-view-checked-280px@2.png</file>
+    <file>assets/sidebar-view-hover-280px-dark.png</file>
+    <file>assets/sidebar-view-hover-280px-dark@2.png</file>
+    <file>assets/sidebar-view-active-280px-dark.png</file>
+    <file>assets/sidebar-view-active-280px-dark@2.png</file>
+    <file>assets/sidebar-view-checked-280px-dark.png</file>
+    <file>assets/sidebar-view-checked-280px-dark@2.png</file>
     <file>windows-assets/titlebutton-close.png</file>
     <file>windows-assets/titlebutton-close@2.png</file>
     <file>windows-assets/titlebutton-close-dark.png</file>

src/main/gtk-3.0/make_gresource_xml.sh

@@ -1,6 +1,7 @@
 #! /bin/bash
 
 INDEX="../../assets/gtk-3.0/common-assets/assets.txt"
+SINDEX="../../assets/gtk-3.0/common-assets/sidebar-assets.txt"
 WINDEX="../../assets/gtk-3.0/windows-assets/assets.txt"
 
 if [ -f gtk.gresource.xml ]; then
@@ -17,6 +18,12 @@ do
   echo "    <file>assets/$i@2.png</file>" >> gtk.gresource.xml
 done
 
+for i in `cat $SINDEX`
+do
+  echo "    <file>assets/$i.png</file>" >> gtk.gresource.xml
+  echo "    <file>assets/$i@2.png</file>" >> gtk.gresource.xml
+done
+
 for i in `cat $WINDEX`
 do
   echo "    <file>windows-assets/$i.png</file>" >> gtk.gresource.xml

src/sass/_theme-options.scss

@@ -12,7 +12,7 @@ $nautilus_use_colors: false;
 $sidebar_size: 200px;
 
 // Nautilus style
-$nautilus_style: default;
+$nautilus_style: stable;
 
 // Gnome-shell panel opacity
 $panel_opacity: 0.15;

src/sass/gtk/_applications.scss

@@ -56,18 +56,12 @@ window.background.csd { // gnome-terminal 3.32 setting
   }
 }
 
-window.background.csd, dialog.background.csd {
-  actionbar {
-    border-radius: 0 0 $wm_radius $wm_radius;
-  }
-}
-
 //
 // Filechooser, Dialog, and Nautilus
 //
 $nautilus_radius: $wm_radius + 2px;
 $nautilus_sidebar_size: $sidebar_size;
-$nautilus_borders_color: darken(rgba($dark_sidebar_bg, 1), 12%);
+$nautilus_borders_color: if($variant=='light', darken(rgba($dark_sidebar_bg, 1), 12%), $header_border);
 
 $nautilus_header_image: image($header_bg);
 $nautilus_header_borders_image: image($header_border);
@@ -76,24 +70,55 @@ $nautilus_actionbar_borders_image: image($header_border);
 $dialog_header_image: image($dark_header_bg);
 $dialog_header_borders_image: image($header_border);
 $nautilus_bg_image: image($dark_sidebar_bg);
+$nautilus_sidebar_image: image($dark_sidebar_bg);
 
-@if $gnome_version == 'new' {
+@if $gnome_version == 'new' and $nautilus_style != 'stable' {
   $nautilus_bg_image: linear-gradient(180deg, rgba($dark_sidebar_bg, 0) ($nautilus_headerbar_size + 1),
                                       $dark_sidebar_bg ($nautilus_headerbar_size + 1));
 }
 
+@if $nautilus_style == 'stable' {
+  @if $gnome_version == 'new' {
+    $nautilus_header_image: linear-gradient(90deg, transparent 0%,
+                                                   transparent $nautilus_sidebar_size,
+                                                   darken($dark_sidebar_bg, 12%) $nautilus_sidebar_size,
+                                                   darken($dark_sidebar_bg, 12%) ($nautilus_sidebar_size + 1px),
+                                                   $base_color ($nautilus_sidebar_size + 1px),
+                                                   $base_color 100%);
+  } @else {
+    $nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
+                                                   $dark_sidebar_bg $nautilus_sidebar_size,
+                                                   darken($dark_sidebar_bg, 12%) $nautilus_sidebar_size,
+                                                   darken($dark_sidebar_bg, 12%) ($nautilus_sidebar_size + 1px),
+                                                   $base_color ($nautilus_sidebar_size + 1px),
+                                                   $base_color 100%);
+  }
+
+  $nautilus_sidebar_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
+                                                  $dark_sidebar_bg $nautilus_sidebar_size,
+                                                  transparent $nautilus_sidebar_size,
+                                                  transparent 100%);
+
+  $nautilus_bg_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
+                                             $dark_sidebar_bg $nautilus_sidebar_size,
+                                             darken($dark_sidebar_bg, 12%) $nautilus_sidebar_size,
+                                             darken($dark_sidebar_bg, 12%) ($nautilus_sidebar_size + 1px),
+                                             $base_color ($nautilus_sidebar_size + 1px),
+                                             $base_color 100%);
+}
+
 @if $nautilus_style == 'default' or $nautilus_style == 'glassy' {
   $dialog_header_image: linear-gradient(90deg, $dialog_bg_color 5%,
-                                        $dark_header_bg 40%);
+                                               $dark_header_bg 40%);
 
   $dialog_header_borders_image: linear-gradient(90deg, $dialog_bg_color 0px,
-                                                $header_border 25%);
+                                                       $header_border 25%);
 
   $nautilus_actionbar_image: linear-gradient(90deg, rgba($dark_header_bg, 0) 5%,
-                                             transparentize($dark_header_bg, 0.2) 40%);
+                                                    transparentize($dark_header_bg, 0.2) 40%);
 
   $nautilus_actionbar_borders_image: linear-gradient(90deg, rgba($header_border, 0) 0px,
-                                                     $header_border 25%);
+                                                            $header_border 25%);
 }
 
 @if $nautilus_style == 'default' {
@@ -102,32 +127,20 @@ $nautilus_bg_image: image($dark_sidebar_bg);
                                           $nautilus_borders_color ($nautilus_sidebar_size + 1px),
                                           $base_color ($nautilus_sidebar_size + 1px));
 
-  $nautilus_header_borders_image: linear-gradient(90deg, $dark_sidebar_bg $nautilus_sidebar_size,
+  $nautilus_header_borders_image: linear-gradient(90deg, transparent $nautilus_sidebar_size,
-                                                  $header_border $nautilus_sidebar_size);
+                                                         $header_border $nautilus_sidebar_size);
 } @else if $nautilus_style == 'glassy' {
   $nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg ($nautilus_sidebar_size/2),
-                                          $dark_header_bg 40%);
+                                                 $dark_header_bg 40%);
 
-  $nautilus_header_borders_image: linear-gradient(90deg, $dark_sidebar_bg (($nautilus_sidebar_size/2) - 40px),
+  $nautilus_header_borders_image: linear-gradient(90deg, transparent (($nautilus_sidebar_size/2) - 40px),
-                                                  $header_border 40%);
+                                                         $header_border 40%);
 }
 
 @mixin color_sidebar() {
-  > grid.horizontal > paned.horizontal > separator,
-  > box.vertical > paned.horizontal > separator,
-  > deck > box.vertical > paned.horizontal > separator { // Use paned separator to hide stack border-bottom-left-radius
-    border-left: none;
-    background-color: transparent;
-    background-image: image($nautilus_borders_color);
-    background-size: 1px 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
   placessidebar.sidebar {
     background-color: transparent;
     min-width: $nautilus_sidebar_size;
-    margin-bottom: $wm_radius;
     border: none;
 
     row.sidebar-row {
@@ -145,28 +158,66 @@ $nautilus_bg_image: image($dark_sidebar_bg);
       &:backdrop { opacity: 0.85; }
 
       // row style
-      border-radius: $bt_radius;
+      @if $nautilus_style == 'stable' {
-      margin: 0 6px;
+        &:hover {
-      padding: 2px 4px;
+          transition: background-image 0;
-
+          background-repeat: no-repeat;
-      &:hover {
+          background-color: transparent;
-        background-color: rgba($fg_color, 0.1);
+          background-position: left center;
-      }
+          background-size: $nautilus_sidebar_size 28px;
-
+          background-image: -gtk-scaled(url("assets/sidebar-view-hover-#{$nautilus_sidebar_size}#{$asset_suffix}.png"),
-      &:active, &:active:hover {
+                                        url("assets/sidebar-view-hover-#{$nautilus_sidebar_size}#{$asset_suffix}@2.png"));
-        transition: background-color ease-out 200ms;
-        background-color: rgba($fg_color, 0.2);
-      }
-
-      &:selected.has-open-popup,
-      &:selected, &:selected:hover {
-        color: $fg_color;
-        transition: background-color ease-out 200ms;
-        background-color: rgba($fg_color, 0.15);
-
-        &, label { color: $fg_color; }
         }
 
+        &:active, &:active:hover {
+          transition: background-image ease-out 200ms;
+          background-repeat: no-repeat;
+          background-color: transparent;
+          background-position: left center;
+          background-size: $nautilus_sidebar_size 28px;
+          background-image: -gtk-scaled(url("assets/sidebar-view-active-#{$nautilus_sidebar_size}#{$asset_suffix}.png"),
+                                        url("assets/sidebar-view-active-#{$nautilus_sidebar_size}#{$asset_suffix}@2.png"));
+        }
+
+        &:selected.has-open-popup,
+        &:selected, &:selected:hover {
+          color: $fg_color;
+          transition: background-image ease-out 200ms;
+          background-repeat: no-repeat;
+          background-position: left center;
+          background-size: $nautilus_sidebar_size 28px;
+          background-color: transparent;
+          background-image: -gtk-scaled(url("assets/sidebar-view-checked-#{$nautilus_sidebar_size}#{$asset_suffix}.png"),
+                                        url("assets/sidebar-view-checked-#{$nautilus_sidebar_size}#{$asset_suffix}@2.png"));
+
+          &, label { color: $fg_color; }
+        }
+      }
+
+      @else {
+        border-radius: $bt_radius;
+        margin: 0 6px;
+        padding: 2px 4px;
+
+        &:hover {
+          background-color: rgba($fg_color, 0.1);
+        }
+
+        &:active, &:active:hover {
+          transition: background-color ease-out 200ms;
+          background-color: rgba($fg_color, 0.2);
+        }
+
+        &:selected.has-open-popup,
+        &:selected, &:selected:hover {
+          color: $fg_color;
+          transition: background-color ease-out 200ms;
+          background-color: rgba($fg_color, 0.15);
+
+          &, label { color: $fg_color; }
+        }
+      }
+
       // other
       &.sidebar-new-bookmark-row {
         color: $selected_bg_color;
@@ -236,17 +287,17 @@ dialog.background.csd {
 
   > headerbar {
     &.titlebar {
-      border-image: image($header_border) 0 0 1 / 0px 0px 1px stretch;
+      // border-image: image($header_border) 0 0 1 / 0px 0px 1px stretch;
 
       > label:not(.title):not(.subtitle) { // wallpaper set dialog
         font-weight: 700;
       }
 
-      &:not(.default-decoration) {
+      // &:not(.default-decoration) {
-        border-image: $dialog_header_borders_image 0 0 1 / 0px 0px 1px stretch;
+      //   border-image: $dialog_header_borders_image 0 0 1 / 0px 0px 1px stretch;
-        background-image: $dialog_header_image;
+      //   background-image: $dialog_header_image;
-        background-color: transparent;
+      //   background-color: transparent;
-      }
+      // }
     }
   }
 
@@ -375,6 +426,8 @@ dialog.background.csd {
       background-image: $nautilus_actionbar_image;
       border-image: $nautilus_actionbar_borders_image 1 0 0 / 1px 0px 0px stretch;
       color: $dark_sidebar_fg;
+      border-radius: 0 0 $wm_radius 0;
+
       label, combobox { color: $dark_sidebar_fg; }
     }
 
@@ -412,23 +465,37 @@ dialog.background.csd {
       background-color: transparent;
       box-shadow: inset 0 1px rgba(white, 0.1);
       background-image: $nautilus_header_image;
-      border-image: $nautilus_header_borders_image 0 0 1 / 0px 0px 1px stretch;
+      border: none;
 
-      > box.left.horizontal {
+      @if $nautilus_style != 'stable' { border-image: $nautilus_header_borders_image 0 0 1 / 0px 0px 1px stretch; }
-        background-image: transparent;
+
+      @if $nautilus_style == 'stable' and $trans == 'false' {
+        > box.left.horizontal {
+          background-image: linear-gradient(0deg, $dark_sidebar_bg 0%, $dark_sidebar_bg 95%, transparent 95%, transparent 100%);
+        }
       }
 
-      @if $nautilus_style == 'default' {
+      @if $nautilus_style == 'default' or $nautilus_style == 'stable' {
         > .linked.raised > button:first-child { margin-left: $nautilus_sidebar_size - 80px; }
-      } @else {
-        > .linked.raised > button:first-child { margin-left: 0px }
-        > .linked.raised > button:last-child { margin-right: 0px }
-        //> .linked.raised > button:last-child { margin-right: $nautilus_sidebar_size - 80px }
       }
+
+      // @else {
+      //   > .linked.raised > button:first-child { margin-left: 0px }
+      //   > .linked.raised > button:last-child { margin-right: 0px }
+      // }
     }
 
     placessidebar.sidebar {
       border-bottom-left-radius: $wm_radius;
+
+      @if $nautilus_style == 'stable' {
+        // margin-bottom: $wm_radius;
+        background-image: if($trans == 'true', none, $nautilus_sidebar_image);
+      }
+
+      @else {
+        &.frame { border-right: 1px solid $nautilus_borders_color; }
+      }
     }
   }
 
@@ -474,8 +541,8 @@ dialog.background.csd {
 
     > stack {
       background-color: $base_color;
-      &:dir(ltr) { border-radius: 0 0 ($wm_radius+2) 0 }
+      // &:dir(ltr) { border-radius: 0 0 ($wm_radius+2) 0 }
-      &:dir(rtl) { border-radius: 0 0 0 ($wm_radius+2) }
+      // &:dir(rtl) { border-radius: 0 0 0 ($wm_radius+2) }
     }
 
     > stack:not(:only-child) {
@@ -519,6 +586,33 @@ dialog.background.csd {
     placessidebar { border-bottom-left-radius: $maximized_radius; }
   }
 
+  > grid.horizontal > paned.horizontal > separator,
+  > deck > box.vertical > paned.horizontal > separator { // Use paned separator to hide stack border-bottom-left-radius
+    border: none;
+    min-width: 2px;
+    min-height: 2px;
+    background-color: $base_color;
+    background-image: image($base_color);
+    background-size: $wm_radius $wm_radius;
+    background-position: bottom left;
+    background-repeat: no-repeat;
+
+    &:dir(ltr) { margin-left: -1px; }
+    &:dir(rtl) { margin-right: -1px; }
+
+    @if $nautilus_style == 'stable' {
+      &:dir(ltr) { margin-left: 2px; }
+      &:dir(rtl) { margin-right: 2px; }
+
+      &:hover {
+        background-image: image($solid_borders_color);
+        background-size: 2px 100px;
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+
   @include color_sidebar();
 }
 

src/sass/gtk/_common.scss

@@ -1313,6 +1313,10 @@ actionbar {
   padding: 6px;
   border-top: 1px solid $borders_color;
   background-color: darken($bg_color, 3%);
+
+  .background.csd revealer > & {
+    border-radius: 0 0 $wm_radius $wm_radius;
+  }
 }
 
 //
@@ -3355,10 +3359,48 @@ messagedialog { // Message Dialog styling
   }
 }
 
+//
+// Filechooser
+//
+filechooser {
+  .csd & {
+    background-color: $base_color;
+    border-radius: 0 0 $wm_radius $wm_radius;
+
+    placessidebar.sidebar { background-color: transparent; }
+
+    stack.view {
+      background-color: transparent;
+
+      scrolledwindow {
+        background-color: transparent;
+        border-radius: 0 0 $wm_radius $wm_radius;
+
+        list { background-color: transparent; }
+
+        treeview.view {
+          @extend %view;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  > box.vertical > paned.horizontal > separator {
+    border: none;
+    min-width: 1px;
+    background-image: image(if($variant=='light', $solid_borders_color, $header_border));
+
+    &:dir(ltr) { margin-left: -1px; }
+    &:dir(rtl) { margin-right: -1px; }
+  }
+
+  #pathbarbox { border-bottom: 1px solid transparentize($borders_color, 0.5); }
+}
+
 //
 // Sidebar
 //
-
 %sidebar_left {
   border-right: 1px solid $borders_color;
   border-left-style: none;
@@ -3396,7 +3438,7 @@ messagedialog { // Message Dialog styling
     }
   }
 
-  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border: none; }}
 }
 
 stacksidebar {