actionbar: Make style more compact and light

2 files changed, 39 insertions, 188 deletions

diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index 27627dcc7..c6f4e6d41 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -4,121 +4,6 @@
     background: @theme_base_color;
 }
 
-.nautilus-window.devel headerbar {
-    background: #cbd2d9 -gtk-icontheme("system-run-symbolic") 70% 0/64px 64px no-repeat, linear-gradient(to top, #a5b1bd, #c5cdd5 2px, #cbd2d9 3px);
-    box-shadow: inset 0 1px #f1f3f5;
-    border-color: #909fae;
-    color: rgba(46, 52, 54, 0.2);
-}
-.nautilus-window.devel headerbar > * {
-    color: #2e3436;
-}
-.nautilus-window.devel headerbar > *:backdrop {
-    color: #8b8e8f;
-}
-.nautilus-window.devel headerbar:backdrop {
-    background-image: -gtk-icontheme("system-run-symbolic"), image(#cbd2d9);
-    box-shadow: inset 0 1px #f1f3f5;
-    color: rgba(139, 142, 143, 0.1);
-}
-.nautilus-window.devel headerbar button {
-    color: #2e3436;
-    outline-color: rgba(46, 52, 54, 0.3);
-    border-color: #909fae;
-    border-bottom-color: #738698;
-    background-image: linear-gradient(to bottom, #cbd2d9, #bfc8d0 60%, #aeb9c3);
-    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
-}
-.nautilus-window.devel headerbar button.flat,
-.nautilus-window.devel headerbar button.titlebutton {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-}
-.nautilus-window.devel headerbar button.titlebutton {
-    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-}
-.nautilus-window.devel headerbar button:hover {
-    color: #2e3436;
-    outline-color: rgba(46, 52, 54, 0.3);
-    border-color: #909fae;
-    border-bottom-color: #738698;
-    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
-    background-image: linear-gradient(to bottom, #dde1e6, #cbd2d9 60%, #bfc8d0);
-}
-.nautilus-window.devel headerbar button:active,
-.nautilus-window.devel headerbar button:checked {
-    color: #2e3436;
-    outline-color: rgba(46, 52, 54, 0.3);
-    border-color: #909fae;
-    background-image: image(#b9c3cc);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-}
-.nautilus-window.devel headerbar button:disabled {
-    border-color: #909fae;
-    background-image: image(#d3d9df);
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-}
-.nautilus-window.devel headerbar button:disabled label,
-.nautilus-window.devel headerbar button:disabled {
-    color: #8b8e8f;
-}
-.nautilus-window.devel headerbar button:backdrop {
-    border-color: #cbd2d9;
-    background-image: image(#cbd2d9);
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-    border-color: #909fae;
-}
-.nautilus-window.devel headerbar button:backdrop label,
-.nautilus-window.devel headerbar button:backdrop {
-    color: #8b8e8f;
-}
-.nautilus-window.devel headerbar button:backdrop:active {
-    border-color: #bbc5ce;
-    background-image: image(#bbc5ce);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-    border-color: #909fae;
-}
-.nautilus-window.devel headerbar button:backdrop:active label,
-.nautilus-window.devel headerbar button:backdrop:active {
-        color: #8b8e8f;
-}
-.nautilus-window.devel headerbar button:backdrop:disabled {
-    border-color: #d3d9df;
-    background-image: image(#d3d9df);
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-    border-color: #909fae;
-}
-.nautilus-window.devel headerbar button:backdrop:disabled label,
-.nautilus-window.devel headerbar button:backdrop:disabled {
-    color: #999fa4;
-}
-.nautilus-window.devel headerbar button.flat:backdrop,
-.nautilus-window.devel headerbar button.titlebutton:backdrop {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-}
-
 .nautilus-canvas-item {
     border-radius: 5px;
 }
@@ -136,43 +21,43 @@
 /* Path bar */
 
 .path-bar button {
-	background: none;
-	border: 1px solid transparent;
-	box-shadow: none;
-	padding: 0;
+  background: none;
+  border: 1px solid transparent;
+  box-shadow: none;
+  padding: 0;
 }
 
 .path-bar button:not(:first-child) {
-	border-left: 5px solid transparent;
+  border-left: 5px solid transparent;
 }
 
 .path-bar button:not(:last-child) {
-	border-right: 4px solid transparent;
+  border-right: 4px solid transparent;
 }
 
 .path-bar button:not(:first-child) {
-	background-image: image(mix(@theme_bg_color, @borders, 1.0));
-	background-size: 1px 12px;
-	background-repeat: no-repeat;
-	background-position: -5px 50%
+  background-image: image(mix(@theme_bg_color, @borders, 1.0));
+  background-size: 1px 12px;
+  background-repeat: no-repeat;
+  background-position: -5px 50%
 }
 
 .path-bar button:not(:first-child):backdrop {
-	background-image: image(mix(@theme_bg_color, @borders, 0.5));
+  background-image: image(mix(@theme_bg_color, @borders, 0.5));
 }
 
 .path-bar button:checked,
 .path-bar button:active {
-	box-shadow: inset 0 -2px 0 @theme_selected_bg_color;
+  box-shadow: inset 0 -2px 0 @theme_selected_bg_color;
 }
 
 .path-bar button:not(:checked):hover,
 .path-bar button:checked:backdrop {
-	box-shadow: inset 0 -2px 0 mix(@theme_bg_color, @borders, 0.5);
+  box-shadow: inset 0 -2px 0 mix(@theme_bg_color, @borders, 0.5);
 }
 
 .path-bar button.slider-button:disabled {
-	color: mix(@theme_bg_color, @theme_fg_color, 0.2);
+  color: mix(@theme_bg_color, @theme_fg_color, 0.2);
 }
 
 /* Sidebar */
@@ -336,9 +221,10 @@ actionbar
 
 .border-box
 {
-  border-width: 0px 0px 0px 1px;
-  border-style: solid;
-  border-color: @borders;
   /* Same as spacing between icons */
   padding-left: 6px;
+  background-image: image(mix(@theme_bg_color, @borders, 1.0));
+  background-size: 1px 12px;
+  background-repeat: no-repeat;
+  background-position: 100%
 }
\ No newline at end of file
diff --git a/src/resources/ui/nautilus-action-bar.ui b/src/resources/ui/nautilus-action-bar.ui
index 818434d53..2a8edcac0 100644
--- a/src/resources/ui/nautilus-action-bar.ui
+++ b/src/resources/ui/nautilus-action-bar.ui
@@ -22,8 +22,9 @@
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="valign">center</property>
-            <property name="border-width">6</property>
-            <property name="spacing">6</property>
+            <property name="border-width">2</property>
+            <property name="margin-start">6</property>
+            <property name="spacing">0</property>
             <child>
               <object class="GtkBox">
                 <property name="visible">True</property>
@@ -72,72 +73,30 @@
               </packing>
             </child>
             <child>
-              <object class="GtkBox">
+              <object class="GtkMenuButton">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="spacing">6</property>
-                <child>
-                  <object class="GtkMenuButton">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="valign">center</property>
-                    <property name="menu_model">selection-menu</property>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">view-more-symbolic</property>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="image-button"/>
-                      <class name="flat"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">True</property>
-                    <property name="pack_type">end</property>
-                    <property name="position">0</property>
-                  </packing>
-                </child>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <property name="menu_model">selection-menu</property>
+                <property name="margin-start">6</property>
                 <child>
-                  <object class="GtkButton">
+                  <object class="GtkImage">
                     <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="valign">center</property>
-                    <property name="tooltip_text" translatable="yes">Create a new folder</property>
-                    <property name="action_name">view.new-folder</property>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">folder-new-symbolic</property>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="image-button"/>
-                      <class name="flat"/>
-                    </style>
+                    <property name="can_focus">False</property>
+                    <property name="icon_name">view-more-symbolic</property>
                   </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">True</property>
-                    <property name="pack_type">end</property>
-                    <property name="position">1</property>
-                  </packing>
                 </child>
                 <style>
-                  <class name="border-box"/>
+                  <class name="image-button"/>
+                  <class name="flat"/>
                 </style>
               </object>
               <packing>
                 <property name="expand">False</property>
                 <property name="fill">True</property>
                 <property name="pack_type">end</property>
-                <property name="position">1</property>
+                <property name="position">0</property>
               </packing>
             </child>
             <child>
@@ -172,6 +131,7 @@
                     <property name="receives_default">True</property>
                     <property name="tooltip_text" translatable="yes">Open the selected items</property>
                     <property name="action_name">view.open-with-default-application</property>
+                    <property name="margin-end">6</property>
                     <style>
                       <class name="suggested-action"/>
                       <class name="flat"/>
@@ -281,6 +241,7 @@
                     <property name="receives_default">True</property>
                     <property name="tooltip_text" translatable="yes">Move to trash</property>
                     <property name="action_name">view.move-to-trash</property>
+                    <property name="margin-end">6</property>
                     <child>
                       <object class="GtkImage">
                         <property name="visible">True</property>
@@ -299,6 +260,9 @@
                     <property name="position">3</property>
                   </packing>
                 </child>
+                <style>
+                  <class name="border-box"/>
+                </style>
               </object>
               <packing>
                 <property name="expand">False</property>
@@ -379,6 +343,7 @@
       </object>
     </child>
   </template>
+
   <menu id="selection-menu">
     <section>
       <item>