Adding styling refactoring, moving after to other branch the CSS part

9 files changed, 265 insertions, 115 deletions

diff --git a/share/ui/filter-editor.glade b/share/ui/dialog-filter-editor.ui
index 908e0d7e3..908e0d7e3 100644
--- a/share/ui/filter-editor.glade
+++ b/share/ui/dialog-filter-editor.ui
diff --git a/share/ui/lpe-selector-item.ui b/share/ui/dialog-livepatheffect-add-effect.ui
index 98e35fa92..b423a32f4 100644
--- a/share/ui/lpe-selector-item.ui
+++ b/share/ui/dialog-livepatheffect-add-effect.ui
@@ -2,7 +2,7 @@
 <!-- Generated with glade 3.22.1 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
-  <object class="GtkBox" id="LPESelectorItem">
+  <object class="GtkBox" id="LPESelectorEffect">
     <property name="width_request">200</property>
     <property name="visible">True</property>
     <property name="can_focus">True</property>
@@ -71,7 +71,7 @@
             <property name="can_focus">False</property>
             <property name="halign">end</property>
             <property name="pixel_size">30</property>
-            <property name="icon_name">draw-star</property>
+            <property name="icon_name">draw-star-outline</property>
             <property name="icon_size">2</property>
             <style>
               <class name="fab"/>
@@ -112,7 +112,7 @@
       </packing>
     </child>
     <style>
-      <class name="lpeselectoritem"/>
+      <class name="lpeselectoreffect"/>
     </style>
   </object>
 </interface>
diff --git a/share/ui/dialog-livepatheffect-add.ui b/share/ui/dialog-livepatheffect-add.ui
new file mode 100644
index 000000000..3bee689a5
--- /dev/null
+++ b/share/ui/dialog-livepatheffect-add.ui
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.1 -->
+<interface>
+  <requires lib="gtk+" version="3.20"/>
+  <object class="GtkDialog" id="LPEDialogSelector">
+    <property name="name">LPEDialogSelector</property>
+    <property name="height_request">500</property>
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="title" translatable="yes">Live Path Effect Selector</property>
+    <property name="modal">True</property>
+    <property name="window_position">center-on-parent</property>
+    <property name="destroy_with_parent">True</property>
+    <property name="type_hint">dialog</property>
+    <property name="gravity">center</property>
+    <child>
+      <placeholder/>
+    </child>
+    <child internal-child="vbox">
+      <object class="GtkBox">
+        <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
+        <property name="spacing">2</property>
+        <child internal-child="action_area">
+          <object class="GtkButtonBox">
+            <property name="can_focus">False</property>
+            <property name="layout_style">end</property>
+            <child>
+              <placeholder/>
+            </child>
+            <child>
+              <placeholder/>
+            </child>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">False</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox" id="LPESelector">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">start</property>
+            <property name="orientation">vertical</property>
+            <property name="baseline_position">top</property>
+            <child>
+              <object class="GtkSearchBar">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="search_mode_enabled">True</property>
+                <child>
+                  <object class="GtkSearchEntry" id="LPEFilter">
+                    <property name="width_request">400</property>
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="primary_icon_name">edit-find-symbolic</property>
+                    <property name="primary_icon_activatable">False</property>
+                    <property name="primary_icon_sensitive">False</property>
+                    <style>
+                      <class name="iconymbolic"/>
+                    </style>
+                  </object>
+                </child>
+                <style>
+                  <class name="searchbar"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="LPEInfo">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Message</property>
+                <property name="justify">center</property>
+                <property name="ellipsize">end</property>
+                <style>
+                  <class name="lpeinfo"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkScrolledWindow">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="hscrollbar_policy">never</property>
+                <property name="shadow_type">in</property>
+                <property name="min_content_width">800</property>
+                <property name="min_content_height">10</property>
+                <property name="propagate_natural_height">True</property>
+                <child>
+                  <object class="GtkViewport">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <child>
+                      <object class="GtkFlowBox" id="LPESelectorFlowBox">
+                        <property name="name">lpeflow</property>
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="no_show_all">True</property>
+                        <property name="column_spacing">10</property>
+                        <property name="row_spacing">10</property>
+                        <property name="min_children_per_line">3</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">False</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <style>
+      <class name="iconsymbolic"/>
+      <class name="colordefault"/>
+    </style>
+  </object>
+</interface>
diff --git a/share/ui/lpe-selector.ui b/share/ui/lpe-selector.ui
deleted file mode 100644
index 1c88c9e93..000000000
--- a/share/ui/lpe-selector.ui
+++ /dev/null
@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.1 -->
-<interface>
-  <requires lib="gtk+" version="3.20"/>
-  <object class="GtkBox" id="LPESelector">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="valign">start</property>
-    <property name="orientation">vertical</property>
-    <property name="baseline_position">top</property>
-    <child>
-      <object class="GtkSearchBar">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="has_focus">True</property>
-        <property name="search_mode_enabled">True</property>
-        <child>
-          <object class="GtkSearchEntry" id="LPEFilter">
-            <property name="width_request">400</property>
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="primary_icon_name">edit-find-symbolic</property>
-            <property name="primary_icon_activatable">False</property>
-            <property name="primary_icon_sensitive">False</property>
-          </object>
-        </child>
-        <style>
-          <class name="searchbar"/>
-        </style>
-      </object>
-      <packing>
-        <property name="expand">True</property>
-        <property name="fill">True</property>
-        <property name="position">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="LPEInfo">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Message</property>
-        <property name="justify">center</property>
-        <property name="ellipsize">end</property>
-        <style>
-          <class name="lpeinfo"/>
-        </style>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkScrolledWindow">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="hscrollbar_policy">never</property>
-        <property name="shadow_type">in</property>
-        <property name="min_content_width">800</property>
-        <property name="min_content_height">10</property>
-        <property name="propagate_natural_height">True</property>
-        <child>
-          <object class="GtkViewport">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <child>
-              <object class="GtkFlowBox" id="LPESelectorFlowBox">
-                <property name="name">lpeflow</property>
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="no_show_all">True</property>
-                <property name="column_spacing">10</property>
-                <property name="row_spacing">10</property>
-                <property name="min_children_per_line">3</property>
-              </object>
-            </child>
-          </object>
-        </child>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">False</property>
-        <property name="position">2</property>
-      </packing>
-    </child>
-  </object>
-</interface>
diff --git a/share/ui/style.css b/share/ui/style.css
index 6598d5e69..8063477bf 100644
--- a/share/ui/style.css
+++ b/share/ui/style.css
@@ -26,7 +26,6 @@
  *
  */
 
-
 /* Our own custom shades... better not to use.
  * Lightest to darkest based on linear rgb.
  */
@@ -41,6 +40,121 @@
 @define-color bg_color7  #636363;
 @define-color bg_color8  #000000; /* Black */
 
+ /* Inkscape CSS helper
+  * to add a class to a widget do some thing like
+  * widget->get_style_context()->add_class("mycoolclass");
+  * we define a bunch of helper CSS styles
+  * Ecah Inkscape desktop has a class in top level window
+  * call "dark" so you can style using 2 clases with or without 
+  * "dark" by this way you can always know if the UI is in dark mode
+  * Also added some helper clases:
+  * ::::::: Color based 
+  * ::::::: apply to colors
+  * ::::::: scope widget and all his childs
+  * ".colordefault" use default window color
+  * ".colorinverse" invert window colors
+  * ".colorbright" force bright colors no matter the UI is dark or bright
+  * ".colordark" same but dark
+  * ::::::: Background based 
+  * ::::::: apply to backgrounds
+  * ::::::: scope widget and all his childs
+  * ".backgrounddefault" use default window color
+  * ".backgroundinverse" invert window colors
+  * ".backgroundbright" force bright colors no matter the UI is dark or bright
+  * ".backgrounddark" same but dark
+  * :::::::: Icon Based.
+  * :::::::: apply to color (foreground)
+  * :::::::: scope widget and all nested images
+  * ".iconsymbolic" Force icon symbolic
+  * ".iconregular" Force colorfull icons
+  * ".iconcolordefault" Theme color default
+  * ".iconcolorinverse" Inverse color from theme
+  * ".iconcolorbright, Force clear icon
+  * ".iconcolordark" Force dark icon
+  * ".iconcolornamed" Icon in prefs selected color;
+  * ".iconcolornamedinverse" Icon in inverse color from prefs"
+  * :::::::: Combo box.
+  * "..combobright" Combo bright
+  */
+
+.colordefault, 
+.colordefault *{ 
+    color: @theme_fg_color; 
+}
+
+.colorinverse, 
+.colorinverse *{ 
+    color: @theme_bg_color; 
+}
+.colorbright,
+.colorbright *{
+    color: @theme_fg_color; 
+}
+.dark .colorbright, 
+.dark .colorbright *{
+    color: @theme_bg_color; 
+}
+.colordark, 
+.colordark *{
+    color: @theme_bg_color; 
+}
+.dark .colordark,
+.dark .colordark *{
+    color: @theme_fg_color;
+}
+.backgrounddefault, 
+.backgrounddefault *{ 
+    background-color: @theme_bg_color; 
+    background-image:image(@theme_bg_color);
+}
+.backgroundinverse, 
+.backgroundinverse *{ 
+    background-color: @theme_fg_color; 
+    background-image:image(@theme_fg_color);
+}
+.backgroundbright,
+.backgroundbright *{
+    background-color: @theme_bg_color;
+    background-image:image(@theme_bg_color);
+}
+.dark .backgroundbright, 
+.dark .backgroundbright *{
+    background-color: @theme_fg_color;
+    background-image:image(@theme_fg_color);
+}
+.backgrounddark, 
+.backgrounddark *{
+    background-color: @theme_fg_color;
+    background-image:image(@theme_fg_color);
+}
+.dark .backgrounddark,
+.dark .backgrounddark *{
+    background-color: @theme_bg_color;
+    background-image:image(@theme_bg_color);
+}
+.iconsymbolic,
+.iconsymbolic image{
+    -gtk-icon-style: symbolic;
+}
+.iconregular,
+.iconregular image{
+    -gtk-icon-style: regular;
+}
+
+.combobright *{
+    color: @theme_fg_color; 
+    background-color: @theme_bg_color;
+    background-image:image(@theme_bg_color);
+    border-radius:4px;
+}
+.dark .combobright *{
+    color: @theme_bg_color; 
+    background-color: @theme_fg_color;
+    background-image:image(@theme_fg_color);
+    border-radius:4px;
+}
+
+
 /* 'GtkWidget' for Gtk  <= 3.18   */
 /* 'widget'    for Gtk  <= 3.19.2 */   
 GtkWidget, widget {
@@ -78,10 +192,10 @@ spinbutton undershoot {
 .lpeinfo{
     font-size:16px;
     padding:20px;
-    }
-    #lpedialogselector,
-    #lpedialogselector .frame,
-    #lpedialogselector .searchbar {
+}
+#lpedialogselector,
+#lpedialogselector .frame,
+#lpedialogselector .searchbar {
     border-bottom-width:0;
     border-top-width:0;
     outline-width:0;
@@ -96,22 +210,18 @@ spinbutton undershoot {
     margin:10px;
     margin-bottom:30px;
     padding-bottom:10px;
-    background-color:@theme_bg_color;
-    color:@theme_fg_color;
 }
 
 #lpeflow GtkFlowBoxChild.lpeactive,
 #lpeflow flowboxchild.lpeactive{
-    background-color:@theme_fg_color;
-    color:@theme_bg_color;
     margin-bottom:0px;
     padding-bottom:10px;
     outline:none;
 }
 
-#lpeflow GtkFlowBoxChild.lpeactive *,
-#lpeflow flowboxchild.lpeactive *{
-    color:inherit;
+
+#LPEDialogSelector .frame{
+    border-width:0;
 }
 
 SPRuler {
@@ -217,15 +327,3 @@ combobox window.popup scrolledwindow treeview separator {
 	padding : 0 ;
 	outline-style : none;
 }
-
-
-
-#symbolsView,
-#markerCombo button,
-#markerCombo menu,
-#dashCombo button,
-#dashCombo menu{
-    background-image:image(rgb(230,230,230));
-    color:rgb(0,0,0);
-}
-
diff --git a/share/ui/commands-toolbar.ui b/share/ui/toolbar-commands.ui
index c2b1ed965..c2b1ed965 100644
--- a/share/ui/commands-toolbar.ui
+++ b/share/ui/toolbar-commands.ui
diff --git a/share/ui/select-toolbar.ui b/share/ui/toolbar-select.ui
index 1c8c1efc3..1c8c1efc3 100644
--- a/share/ui/select-toolbar.ui
+++ b/share/ui/toolbar-select.ui
diff --git a/share/ui/snap-toolbar.ui b/share/ui/toolbar-snap.ui
index 90fa6bd61..90fa6bd61 100644
--- a/share/ui/snap-toolbar.ui
+++ b/share/ui/toolbar-snap.ui
diff --git a/share/ui/tool-toolbar.ui b/share/ui/toolbar-tool.ui
index a5dedad56..a5dedad56 100644
--- a/share/ui/tool-toolbar.ui
+++ b/share/ui/toolbar-tool.ui