Add @doctormo UX improvements

2 files changed, 400 insertions, 400 deletions

diff --git a/share/ui/dialog-css.ui b/share/ui/dialog-css.ui
index 96a235125..6ffcabc71 100644
--- a/share/ui/dialog-css.ui
+++ b/share/ui/dialog-css.ui
@@ -5,7 +5,6 @@
   <object class="GtkBox" id="CSSSelectorContainer">
     <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>
@@ -67,7 +66,8 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="has_tooltip">True</property>
-        <property name="valign">start</property>
+        <property name="hscroll_policy">natural</property>
+        <property name="vscroll_policy">natural</property>
         <property name="headers_visible">False</property>
         <property name="enable_search">False</property>
         <property name="fixed_height_mode">True</property>
diff --git a/share/ui/style.css b/share/ui/style.css
index cdca64d96..3a965efa4 100644
--- a/share/ui/style.css
+++ b/share/ui/style.css
@@ -32,30 +32,30 @@
  * 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 */
- 
- 
- /* Inkscape CSS helper
+@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
@@ -93,378 +93,378 @@
       * ".regular ..." Inkscape is in regular icon mode 
       * ".symbolic ..." Inkscape is in symbolic icon mode 
       */
- 
- .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;
- }
- 
- 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;
- }
- 
- #LPEDialogSelector,
- #LPEDialogSelector .frame,
- #LPEDialogSelector .searchbar {
-     outline-width: 0;
-     border-width: 0;
- }
- 
- #LPESelectorFlowBox GtkFlowBoxChild,
- #LPESelectorFlowBox flowboxchild {
-     border-width: 0px;
-     border-radius: 6px;
-     margin: 10px;
-     padding: 10px;
-     margin-bottom: 0px;
-     padding-bottom: 10px;
-     outline: none;
- }
- 
- #LPESelectorFlowBox flowboxchild * {
-     color: @theme_fg_color;
- }
- 
- #LPESelectorFlowBox flowboxchild:selected image,
- #LPESelectorFlowBox flowboxchild:selected label {
-     background-color: @theme_selected_bg_color;
-     color: @theme_selected_fg_color;
-     background-image: image(@theme_selected_bg_color);
- }
- 
- #LPESelectorFlowBox *:selected #LPESelectorEffectFavTop,
- #LPESelectorFlowBox *:selected:focus #LPESelectorEffectFavTop {
-     opacity: 0;
- }
- 
- #LPESelectorFlowBox .lpename {
-     font-size: 16px;
-     margin-bottom: 5px;
- }
- 
- #LPESelectorFlowBox .lpeinfo {
-     font-size: 16px;
-     padding: 20px;
- }
- 
- #LPESelectorFlowBox .lpedisabled {
-     opacity: 0.3;
- }
- 
- #LPESelectorEffectInfoPop {
-     padding: 15px;
- }
- 
- #LPESelectorEffectInfoName {
-     font-weight: bold;
-     padding: 15px;
- }
- 
- #LPEDialogSelector .lpeinfo {
-     padding: 8px;
-     background-color: @theme_selected_fg_color;
-     color: @theme_selected_bg_color;
-     margin: 10px 10px 0px 10px;
-     border-radius: 5px;
- }
- 
- 
- #LPEExperimental image {
-     color: transparent;
- }
- 
- #LPEDialogSelector .searchbar entry image,
- #LPEDialogSelector .searchbar label,
- #LPEDialogSelector .searchbar #LPESelectorEffectFavShowImage {
-     color: @theme_fg_color;
- }
- 
- #SelectorsAndStyleDialog button{
-    padding:4px;
-    min-height:16px;
-    margin:2px;
-    padding:2px;
- }
- 
- .inksmall{
-    font-size:11;
- }
-
- .inkswitch slider{
-    min-width:18px;
-    min-height:18px;
- }
-
- .inkswitch image{
+
+.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;
+}
+
+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;
+}
+
+#LPEDialogSelector,
+#LPEDialogSelector .frame,
+#LPEDialogSelector .searchbar {
+    outline-width: 0;
+    border-width: 0;
+}
+
+#LPESelectorFlowBox GtkFlowBoxChild,
+#LPESelectorFlowBox flowboxchild {
+    border-width: 0px;
+    border-radius: 6px;
+    margin: 10px;
+    padding: 10px;
+    margin-bottom: 0px;
+    padding-bottom: 10px;
+    outline: none;
+}
+
+#LPESelectorFlowBox flowboxchild * {
+    color: @theme_fg_color;
+}
+
+#LPESelectorFlowBox flowboxchild:selected image,
+#LPESelectorFlowBox flowboxchild:selected label {
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
+    background-image: image(@theme_selected_bg_color);
+}
+
+#LPESelectorFlowBox *:selected #LPESelectorEffectFavTop,
+#LPESelectorFlowBox *:selected:focus #LPESelectorEffectFavTop {
+    opacity: 0;
+}
+
+#LPESelectorFlowBox .lpename {
+    font-size: 16px;
+    margin-bottom: 5px;
+}
+
+#LPESelectorFlowBox .lpeinfo {
+    font-size: 16px;
+    padding: 20px;
+}
+
+#LPESelectorFlowBox .lpedisabled {
+    opacity: 0.3;
+}
+
+#LPESelectorEffectInfoPop {
+    padding: 15px;
+}
+
+#LPESelectorEffectInfoName {
+    font-weight: bold;
+    padding: 15px;
+}
+
+#LPEDialogSelector .lpeinfo {
+    padding: 8px;
+    background-color: @theme_selected_fg_color;
+    color: @theme_selected_bg_color;
+    margin: 10px 10px 0px 10px;
+    border-radius: 5px;
+}
+
+#LPEExperimental image {
+    color: transparent;
+}
+
+#LPEDialogSelector .searchbar entry image,
+#LPEDialogSelector .searchbar label,
+#LPEDialogSelector .searchbar #LPESelectorEffectFavShowImage {
+    color: @theme_fg_color;
+}
+
+#SelectorsAndStyleDialog button {
+    padding: 4px;
+    min-height: 16px;
+    margin: 2px;
+    padding: 2px;
+}
+
+.inksmall {
+    font-size: 11px;
+}
+
+.inkswitch slider {
+    min-width: 18px;
+    min-height: 18px;
+}
+
+.inkswitch image {
     color: transparent;
- }
-
- .inkswitch {
-    margin:2px;
-    padding:0;
-    font-size:8px;
- }
- 
- #XMLAndAttributesDialog .toggle,
- #SelectorsAndStyleDialog .toggle {
-     min-width: 18px;
-     padding-left: 6px;
-     padding-right: 6px;
-     padding-top: 0;
-     padding-bottom: 0;
- }
- 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;
- }
\ No newline at end of file
+}
+
+.inkswitch {
+    margin: 2px;
+    padding: 0;
+    font-size: 8px;
+}
+
+#XMLAndAttributesDialog .toggle,
+#SelectorsAndStyleDialog .toggle {
+    min-width: 18px;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+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;
+}
\ No newline at end of file