path: root/share/ui/style.css

/* 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 */


/* 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
    * ".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
    */

*:disabled image {
    opacity: 0.4;
}

.symbolic image {
    -gtk-icon-style: symbolic;
}

.regular image {
    -gtk-icon-style: regular;
}

.regular .symbolic image {
    -gtk-icon-style: symbolic;
}

.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;
}

.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;
}

/* atribute 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 calsses 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;
}

.inksmall {
    font-size: 11px;
}


/* 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:selected image,
#LPESelectorFlowBox flowboxchild:selected label {
    color: @theme_selected_fg_color;
    background-color: @theme_selected_bg_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_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 treeview button {
    min-height: 3px;
    font-size: 1px;
}

#InkRuler {
    font-size: 7pt;
}

/* 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;
    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;
}

#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;
}