Merge branch 'master' of gitlab.com:inkscape/inkscape

1 files changed, 266 insertions, 173 deletions

diff --git a/share/ui/style.css b/share/ui/style.css
index 1a64fa8dc..93439b95e 100644
--- a/share/ui/style.css
+++ b/share/ui/style.css
@@ -26,179 +26,272 @@
  *
  */
 
-
 /* Our own custom shades... better not to use.
  * Lightest to darkest based on linear rgb.
  */
-@define-color bg_color0  #ffffff; /* White */
-@define-color bg_color05 #f8f8f8; /* Slightly off white */
-@define-color bg_color1  #f0f0f0;
-@define-color bg_color2  #e0e0e0;
-@define-color bg_color3  #d0d0d0;
-@define-color bg_color4  #bbbbbb; /* 50% Gray */
-@define-color bg_color5  #a5a5a5;
-@define-color bg_color6  #898989;
-@define-color bg_color7  #636363;
-@define-color bg_color8  #000000; /* Black */
-
-/* 'GtkWidget' for Gtk  <= 3.18   */
-/* 'widget'    for Gtk  <= 3.19.2 */   
-GtkWidget, widget {
-/*    font-size: 12pt; */
-}
-
-GtkSpinButton {
-    padding: 0;
-    outline-style : none;
-}
-
-spinbutton {
-    padding: 0;
-    outline-style : none;
-}
-
-GtkSpinButton entry {
-    padding-left: 2px;
-    padding-right:0;
-}
-
-spinbutton entry {
-    padding-left: 2px;
-    padding-right:0;
-}
-
-GtkSpinButton button {
-	-gtk-icon-style: symbolic;
-	color:inherit;
-}
-
-spinbutton button {
-	-gtk-icon-style: symbolic;
-	color:inherit;
-}
-
-GtkSpinButton undershoot {
-	outline-style : none;
-}
-
-spinbutton undershoot {
-	outline-style : none;
-}
-
-
-
-SPRuler {
-    background-color: @theme_bg_color;
-    color:            @theme_fg_color;
-}
-
-ruler-widget {
-    background-color: @theme_bg_color;
-    color:            @theme_fg_color;
-}
-
-/* The actual canvas (Inkscape's drawing area). */
-SPCanvas {
-    background-color: white;
-}
-
-combobox window.popup scrolledwindow treeview separator {
-}
-
-#font_selector_family {
-}
-
-#TextFontFamilyAction_combobox {
-    -GtkComboBox-appears-as-list: true;
-}
-
-#LockGuides,
-#StickyZoom,
-#CMS_Adjust {
-    padding: 0;
-}
-
-/* Keep palette scrollbar from generating warnings. */
-#PreviewHolderScroller .vertical slider {
-    min-height: 15px;
-}
-
-/* Override minimum size of container children for palette. */
-#ColorItemPreview {
-  min-height: 5px;
-  min-width:  5px;
-}
-
-/* Reduce width of Fill and Stroke dialog */
-#ColorModeButton {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-/* Reduce width of +/- buttons. */
-.up, .down {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-/* InkSpinScale */
-#InkSpinScale {
-  background : @theme_bg_color;
-  border : 1px black;
-  border-radius: 3px;
-  padding: 0px;
-}
-
-#InkSpinScale spinbutton {
-  border-color: #eee;
-  border-width: 0 0 0 0;
-  border-radius: 0 3px 3px 0;
-  box-shadow: none;
-  padding: 0 0 0 1px;
-  min-height : 10px;
-}
-
-/* Hide slider */
-#InkSpinScale slider {
-    background: none;
-    border:     none;
-    outline:    none;
-    min-width:  0px;
-    min-height: 0px;
-    padding:    0px;
-    margin:     0px;
-}
-
-#InkSpinScale slider, #InkSpinScale highlight {
-	border-top-right-radius : 0;
-	border-bottom-right-radius : 0;
-}
-
-#InkSpinScale scale {
-    padding: 0px;
-}
-
-#InkSpinScale trough {
-    min-height: 30px;
-}
-
-#InkSpinScale box.active {
-  box-shadow: 0 0 0 1px  rgb(74,144,217);
-}
-
-#InkSpinScale spinbutton entry {
-	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);
-}
-
+ @define-color bg_color0  #ffffff; /* White */
+ @define-color bg_color05 #f8f8f8; /* Slightly off white */
+ @define-color bg_color1  #f0f0f0;
+ @define-color bg_color2  #e0e0e0;
+ @define-color bg_color3  #d0d0d0;
+ @define-color bg_color4  #bbbbbb; /* 50% Gray */
+ @define-color bg_color5  #a5a5a5;
+ @define-color bg_color6  #898989;
+ @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_text_color; 
+     background-color: @theme_base_color;
+     background-image:image(@theme_base_color);
+     border-radius:4px;
+ }
+ .dark .combobright *{
+     color: @theme_base_color; 
+     background-color: @theme_text_color;
+     background-image:image(@theme_text_color);
+     border-radius:4px;
+ }
+ 
+ 
+ /* 'GtkWidget' for Gtk  <= 3.18   */
+ /* 'widget'    for Gtk  <= 3.19.2 */   
+ GtkWidget, widget {
+ /*    font-size: 12pt; */
+ }
+ 
+ GtkSpinButton {
+     padding: 0;
+     outline-style : none;
+ }
+ 
+ spinbutton {
+     padding: 0;
+     outline-style : none;
+ }
+ 
+ GtkSpinButton entry {
+     padding-left: 2px;
+     padding-right:0;
+ }
+ 
+ spinbutton entry {
+     padding-left: 2px;
+     padding-right:0;
+ }
+ 
+ GtkSpinButton undershoot {
+     outline-style : none;
+ }
+ 
+ spinbutton undershoot {
+     outline-style : none;
+ }
+ 
+  
+ SPRuler {
+     background-color: @theme_bg_color;
+     color:            @theme_fg_color;
+ }
+ 
+ ruler-widget {
+     background-color: @theme_bg_color;
+     color:            @theme_fg_color;
+ }
+ 
+ /* The actual canvas (Inkscape's drawing area). */
+ SPCanvas {
+     background-color: white;
+ }
+ 
+ combobox window.popup scrolledwindow treeview separator {
+ }
+ 
+ #font_selector_family {
+ }
+ 
+ #TextFontFamilyAction_combobox {
+     -GtkComboBox-appears-as-list: true;
+ }
+ 
+ #LockGuides,
+ #StickyZoom,
+ #CMS_Adjust {
+     padding: 0;
+ }
+ 
+ /* Keep palette scrollbar from generating warnings. */
+ #PreviewHolderScroller .vertical slider {
+     min-height: 15px;
+ }
+ 
+ /* Override minimum size of container children for palette. */
+ #ColorItemPreview {
+   min-height: 5px;
+   min-width:  5px;
+ }
+ 
+ /* Reduce width of Fill and Stroke dialog */
+ #ColorModeButton {
+     padding-left: 0;
+     padding-right: 0;
+ }
+ 
+ /* Reduce width of +/- buttons. */
+ .up, .down {
+     padding-left: 0;
+     padding-right: 0;
+ }
+ 
+ /* InkSpinScale */
+ #InkSpinScale {
+   background : @theme_bg_color;
+   border : 1px black;
+   border-radius: 3px;
+   padding: 0px;
+ }
+ 
+ #InkSpinScale spinbutton {
+   border-color: #eee;
+   border-width: 0 0 0 0;
+   border-radius: 0 3px 3px 0;
+   box-shadow: none;
+   padding: 0 0 0 1px;
+   min-height : 10px;
+ }
+ 
+ /* Hide slider */
+ #InkSpinScale slider {
+     background: none;
+     border:     none;
+     outline:    none;
+     min-width:  0px;
+     min-height: 0px;
+     padding:    0px;
+     margin:     0px;
+ }
+ 
+ #InkSpinScale slider, #InkSpinScale highlight {
+     border-top-right-radius : 0;
+     border-bottom-right-radius : 0;
+ }
+ 
+ #InkSpinScale scale {
+     padding: 0px;
+ }
+ 
+ #InkSpinScale trough {
+     min-height: 30px;
+ }
+ 
+ #InkSpinScale box.active {
+   box-shadow: 0 0 0 1px  rgb(74,144,217);
+ }
+ 
+ #InkSpinScale spinbutton entry {
+     padding : 0 ;
+     outline-style : none;
+ }
+