1 files changed, 737 insertions, 0 deletions
diff --git a/share/ui/style.css b/share/ui/style.css
new file mode 100644
index 0000000..fc6e1db
--- /dev/null
+++ b/share/ui/style.css
@@ -0,0 +1,737 @@
+/* GTK3 WIDGET STYLING */
+
+
+/*
+ * Keep in order of:
+ *   General -> Specific
+ *   Order of appearance in widget tree.
+ *   See GtkInspector
+ *     GTK_DEBUG=interactive ~/path_to_gtk3/bin/inkscape
+ *
+ * We need a standardized naming scheme.
+ *
+ * As of Gtk 3.20, you cannot use widget names.
+ */
+
+
+/* Standard theme based colors. Prefer these.
+ *
+ * @theme_bg_color
+ * @theme_fg_color
+ * @theme_base_color
+ * @theme_text_color
+ * @theme_selected_bg_color
+ * @theme_selected_fg_color
+ * @theme_tooltip_bg_color
+ * @theme_tooltip_fg_color
+ *
+ */
+
+
+/* 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 */
+
+@import url("highlight-colors.css");
+
+/* 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
+    * Each Inkscape desktop has some classes in top level window
+    * called "dark|bright" (syncked with dark or brighrt themes) and "symbolic|regular" (defined by the user in themes preferences) 
+    * so you can style using this clases 
+    * by this way you can always know if the UI is in dark mode or using symbolic icons
+    * Also added some helper clases:
+    * ".inverted" invert colors fon widhet and childs
+    * ".highlight-dark" highlights with red tint
+    * ".highlight-light" highlights with yellow tint
+    * ".symbolic" Force icon symbolic
+    * ".regular" Force colorful icons
+    * " .forcebright Force darlk even if the towp wingow has clas dark (happends when theme is dark)
+    * " .forcedark" Force darlk even if the towp wingow has clas bright
+    * :::::::: Combo box.
+    * "..combobright" Combo bright
+    */
+
+*{
+    font-feature-settings: "tnum=1";
+}
+
+*:disabled image {
+    opacity: 0.4;
+}
+
+.symbolic image {
+    -gtk-icon-style: symbolic;
+}
+
+.regular image {
+    -gtk-icon-style: regular;
+}
+
+.regular .symbolic image {
+    -gtk-icon-style: symbolic;
+}
+
+.titlebutton > image {
+    -gtk-icon-style: requested;
+}
+
+.inverted,
+.dark .forcebright,
+.bright .forcedark {
+    color: @theme_bg_color;
+    background-color: @theme_fg_color;
+    background-image: image(@theme_fg_color);
+    caret-color: @theme_bg_color;
+    -gtk-secondary-caret-color: @theme_fg_color;
+}
+
+.highlight {
+    color: @theme_fg_color;
+    background-color: alpha(@theme_selected_bg_color,0.5);
+    background-image: image(alpha(@theme_selected_bg_color,0.5));
+    caret-color: @theme_bg_color;
+    border-radius:4px;
+    -gtk-secondary-caret-color: @theme_fg_color;
+}
+
+.noborder{
+    border-width:0;
+}
+
+/* blinking animation for dialogs */
+@keyframes blink_border {
+  from { border-color: @theme_selected_fg_color; }
+  to   { border-color: @theme_selected_bg_color; }
+}
+@keyframes blink_background {
+  from { background-color: @theme_bg_color; }
+  to   { background-color: @theme_selected_bg_color; }
+}
+notebook.blink {
+  animation: blink_border 333ms ease-in-out infinite;
+}
+notebook.blink > header > tabs > tab:checked {
+  animation: blink_background 333ms ease-in-out infinite;
+}
+
+
+.inverted :not(menuitem):not(.rawstyle):not(overshoot):not(undershoot):not(selection),
+.bright .forcedark :not(menuitem):not(.rawstyle):not(overshoot):not(undershoot):not(selection),
+.dark .forcebright :not(menuitem):not(.rawstyle):not(overshoot):not(undershoot):not(selection) {
+    color: inherit;
+    background-color: inherit;
+    background-image: inherit;
+}
+
+.dark .combobright .combo,
+.dark .combobright menu{
+    background-color: @theme_text_color;
+    background-image: linear-gradient(to top, @theme_text_color, @theme_fd_color);
+    caret-color: @theme_base_color;
+    -gtk-secondary-caret-color: @theme_base_color;
+}
+.dark .combobright box *{
+    color: @theme_base_color;
+}
+.dark .combobright .combo *,
+.dark .combobright menu *{
+    color: inherit;
+}
+
+/* attribute dialog popup size */
+.attrpop textview {
+    font-size: 13px;
+}
+
+/* 
+*to get system default colors
+* with Gdk::RGBA success =_symbolic_error_color.get_stseparatole_context()->get_color();
+* _symbolic_error_color has one of this classes applied
+*/
+
+.system_base_color {
+    color: @theme_fg_color;
+    background-color: @theme_bg_color;
+}
+
+.system_error_color {
+    color: @error_color;
+}
+
+.system_warning_color {
+    color: @warning_color;
+}
+
+.system_success_color {
+    color: @success_color;
+}
+
+iconview *:hover {
+    border-width: 1px;
+    border-color: @theme_fg_color;
+    border-style: solid;
+    border-radius: 4px;
+}
+
+.dark iconview *:hover {
+    border-color: @theme_bg_color;
+}
+
+#startscreennotebook iconview *:hover{
+    background-color:@theme_selected_bg_color;
+    border-radius:5px;
+    border-width:0;
+}
+
+#start-screen-window .combo {
+    padding:15px 20px;
+}
+#start-screen-window notebook > *:nth-child(2) label{
+    font-size:12px;
+}
+
+.inksmall {
+    font-size: 11px;
+}
+
+.menu-category {
+    font-size: small;
+    font-weight: bold;
+}
+
+.small-heading {
+    font-size: small;
+    font-weight: bold;
+    opacity: 0.5;
+}
+
+.halfrem-vert-space {
+    margin-top: 0.5rem;
+}
+
+#CommandPaletteBase {
+    background-color: @theme_base_color; /* some themes don't seem to have a background color for list rows defined and would end up transparent otherwise */
+    border: 5px solid @theme_bg_color;
+    border-radius: 5px;
+}
+
+#CommandPaletteBase list row:not(:last-child) {
+    border-bottom: 1px solid @bg_color5;
+}
+
+/* LPE Dialog add */
+#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 image,
+#LPESelectorFlowBox flowboxchild label {
+    background-color: transparent;
+    background-image: image(transparent);
+}
+
+#LPESelectorFlowBox flowboxchild:selected image,
+#LPESelectorFlowBox flowboxchild:selected label {
+    color: @theme_selected_fg_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_bg_color;
+    color: @theme_selected_fg_color;
+    border-color: @theme_selected_bg_color;
+    border-style: solid;
+    margin: 0px 0px 10px 0px;
+    border-radius: 0px;
+    border-width: 0 0 1px 0;
+    padding:5px;
+}
+
+#LPESelectorFlowBox image{
+    background-color:@theme_bg_color;
+    border-color:transparent;
+}
+
+#LPEExperimental image {
+    color: transparent;
+}
+
+#LPEDialogSelector .searchbar entry image,
+#LPEDialogSelector .searchbar label,
+#LPEDialogSelector .searchbar #LPESelectorEffectFavShowImage {
+    color: @theme_fg_color;
+}
+
+#LPEDialogSelector.LPEPackMore flowboxchild {
+margin:5px 1px 0px;
+padding:3px 3px 10px 3px;
+}
+
+#LPEDialogSelector.LPEPackMore flowboxchild label {
+font-size:14px;
+}
+
+#LPEDialogSelector.LPEPackMore #LPESelectorEffectInfoPop label{
+font-size:13px;
+}
+
+#LPEDialogSelector.LPEList .lpename {
+    margin-bottom: 1px;
+    font-weight:bold;
+}
+
+#LPEDialogSelector.LPEList flowboxchild {
+    padding:3px 1px 3px 10px;
+    margin:1px 0px 1px;
+    border-radius:0;
+    border-style:dotted;
+    border-color:@theme_fg_color;
+    border-width: 0 0 1px 0;
+}
+
+#LPEDialogSelector.LPEList flowboxchild:selected {
+    border-style:none;
+    margin:-3px 0px 0px;
+    padding:4px 1px 4px 10px;
+}
+
+#LPEDialogSelector.LPEList #LPESelectorFlowBox *:selected #LPESelectorEffectFavTop,
+#LPEDialogSelector.LPEList #LPESelectorFlowBox *:selected:focus #LPESelectorEffectFavTop {
+    opacity: 1;
+}
+
+/* Selector and XML dialog */
+#SelectorsAndStyleDialog button {
+    padding: 4px;
+    min-height: 16px;
+    margin: 2px;
+    padding: 2px;
+}
+
+#XMLAndAttributesDialog .toggle,
+#SelectorsAndStyleDialog .toggle {
+    min-width: 18px;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+#XMLAndAttributesDialog .radio.image-button,
+#SelectorsAndStyleDialog .radio.image-button {
+    margin: 0;
+    padding: 0px;
+    border-radius: 2px 0 0 2px;
+}
+
+#XMLAndAttributesDialog .radio.image-button:last-child,
+#SelectorsAndStyleDialog .radio.image-button:last-child {
+    border-radius: 0 2px 2px 0;
+    border-left-width: 0;
+}
+
+#SelectorsAndStyleDialog treeview button {
+    border-width: 0;
+    margin: 0 0 1px 0;
+}
+
+#SelectorsAndStyleDialog treeview button:nth-child(3),
+#SelectorsAndStyleDialog treeview.style_sheet button:nth-child(4) {
+    border-width: 0 0 0 2px;
+    border-color: @theme_fg_color;
+    border-style: solid;
+    opacity: 0.5;
+}
+
+#SelectorsAndStyleDialog treeview.style_sheet button:nth-child(3) {
+    border-width: 0;
+}
+
+#SelectorsAndStyleDialog #StyleDialog treeview button *{
+    font-size:5px;
+    min-height:1px;
+    padding:0;
+    margin:0;
+}
+
+#SelectorsAndStyleDialog #StyleDialog treeview button {
+    padding:0;
+    min-height:1px;
+    border-left-width:4px;
+    border-color:@success_color;
+}
+
+#InkRuler {
+    /* make size relative */
+    font-size: smaller;
+    opacity: 0.6;
+}
+
+/* The actual canvas (Inkscape's drawing area). */
+SPCanvas {
+    background-color: white;
+}
+
+#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;
+}
+
+/* InkSpinScale */
+#InkSpinScale {
+    background: @theme_bg_color;
+    padding: 0px;
+    margin: 2px 4px;
+}
+
+#InkSpinScale trough,
+#InkSpinScale slider,
+#InkSpinScale highlight {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* Hide slider */
+#InkSpinScale slider {
+    background: none;
+    border: none;
+    outline: none;
+    min-width: 0px;
+    min-height: 0px;
+    padding: 0px;
+    margin: 0px;
+}
+
+#InkSpinScale scale {
+    padding: 0px;
+    margin:0;
+}
+
+#InkSpinScale trough {
+    min-height: 26px;
+    padding: 2px; /* some themes have humongous scale margins; rein in */
+}
+
+#InkSpinScale box.active {
+    box-shadow: 0 0 0 1px rgb(74, 144, 217);
+}
+
+#InkSpinScale spinbutton {
+    box-shadow: none;
+    min-height: 10px;
+    border-left:0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+#InkSpinScale spinbutton entry {
+    min-height: 30px;
+    outline-style: none;
+}
+
+#UnicodeIconView {
+    font-size: 16px;
+}
+
+/* GtkTreeView: clarify drop locations (especially important for XML editor) */
+treeview.view:drop(active) {
+    border-style: solid;
+    border-width: 2px;
+}
+
+treeview.view:drop(active).after {
+    border-style: none none solid none;
+}
+
+treeview.view:drop(active).before {
+    border-style: solid none none none;
+}
+
+treeview.view:drop(active).after,
+treeview.view:drop(active).before {
+    border-width: 4px;
+    border-radius: 10px;
+}
+
+button.close-button{
+    background-image: none;
+    padding: 0px;
+    min-height: 1px;
+    min-width: 1px;
+    border: none;
+    opacity: 0.5;
+    box-shadow: none;
+}
+
+button.close-button:hover{
+    box-shadow: none;
+    opacity: 1;
+}
+
+/*
+ * Inkscape start dialog styles
+ */
+button.primary {
+    background-image: linear-gradient(to bottom, rgba(22, 169, 249, 1), rgba(2, 135, 204, 1));
+    box-shadow: 0 1px rgba(255, 255, 255, 0.3) inset;
+    text-shadow: none;
+}
+button.primary:hover {
+    background-image: linear-gradient(to bottom, rgba(32, 179, 255, 1), rgba(12, 145, 214, 1));
+}
+button.primary:active {
+    background-image: linear-gradient(to top, rgba(12, 149, 219, 1), rgba(0, 115, 184, 1));
+}
+button.primary label {
+    color: white;
+}
+button.link:hover image {
+    -gtk-icon-effect: dim;
+}
+
+.marker-item.box {
+    padding: 4px;
+}
+.marker-separator {
+    padding: 0;
+}
+
+.tight-button {
+    padding: 5px 3px;
+}
+
+.link-edit-button {
+    padding: 5px 3px;
+    min-width: 0.5em;
+}
+
+/* In some themes stack switcher buttons are extra wide forcing dialogs too wide */
+stackswitcher button {
+    padding-left: 1px;
+    padding-right: 1px;
+    min-width: 40px;
+}
+
+/*removes dashed line (scrolling indicator) on color palette for all themes */
+.color-palette-main-box scrolledwindow undershoot.top,
+.color-palette-main-box scrolledwindow undershoot.right,
+.color-palette-main-box scrolledwindow undershoot.bottom,
+.color-palette-main-box scrolledwindow undershoot.left {
+    background-image: none;
+}
+
+.backgnd-passive {
+    background-color: @theme_bg_color;
+    opacity: 0.5;
+    transition: background-color 300ms linear;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
+
+.backgnd-active {
+  animation-name: pulse;
+  background-color: @theme_selected_bg_color;
+  animation-duration: 1s;
+  animation-timing-function: ease;
+  animation-iteration-count: infinite;
+}
+
+.nb-highlight > header.top {
+  background-color: @theme_selected_bg_color;
+}
+
+.tight-flowbox flowboxchild {
+    margin: 0;
+    padding: 0px;
+}
+.tight-flowbox button {
+    margin: 0;
+    padding: 4px;
+}
+
+/* add .small-marks class to Gtk::Scale to have smaller font used, since markup didn't work there */
+scale.small-marks.marks-after {
+    font-size: small;
+}
+
+/* Square toolbar buttons: request square buttons for all toolbars. */
+button.square-button {
+    padding: 3px;
+}
+
+button.square-button image {
+    padding: 0;
+    min-width: 16px;
+    min-height: 16px;
+}
+
+/* Give layer selector button label a highlight color */
+#LayerSelector label
+{
+    padding-left: 6px;
+    border-left: 3px solid white;
+}
+
+#StyleSwatch label {
+    font-size: small;
+}
+
+#DocumentProperties #NotebookPage {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+/* heading label in dialogs */
+.heading {
+    font-weight: bold;
+    font-size: 1.1em; /* make it optically comparable with non-bold */
+    margin-top: 0.5em;
+}
+/* topmost heading in dialogs */
+.heading.top {
+    margin-top: 0.2em;
+}
+
+/* single-level indentation for labels in a dialog */
+.indent {
+    margin-left: 1em;
+}
+
+.small-font {
+    font-size: small;
+}
+
+.toolbar-separator {
+    margin: 7px 3px;
+}
+
+/* for dialogs with "Apply" button (or equivalent) - larger hit target */
+.wide-apply-button {
+    min-width: 150px;
+}
+
+#DockedDialogNotebook {
+    border: none;
+}
+
+#DialogMenuButton {
+    padding: 3px;
+    border: none;
+    opacity: 0.5;
+}
+
+#DialogMenuButton:hover {
+    opacity: 1;
+}
+
+#DesktopStatusBar {
+    margin-right: 1em;
+}
+/*
+ * Inkscape Export Dialog
+ */
+#ExportDialog #export_selection{
+    border-radius: 0px;
+}
+#ExportDialog #export_preview_single {
+    border: 1px solid;
+}
+#ExportDialog #export_preview_batch {
+    border: 1px solid;
+}