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

/* Make icons in treeview etc use theme fg_color, not the stronger text_color */
.view.image {
    color: @theme_fg_color;
}
.view.image:backdrop {
    color: @theme_unfocused_fg_color;
}
.view.image:disabled {
    color: @insensitive_fg_color;
}

/* Select on both `image` for GtkImage and `.image` for GtkCellRendererPixbuf */
*:disabled .image,
*:disabled image {
    opacity: 0.4;
}

/* For these neednʼt be more specific, as this property only applies to icons */

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

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

.regular .symbolic {
    -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 reopen*/
@keyframes blink_border {
  0% { border-color: @theme_selected_fg_color;}
  90%   { border-color: @theme_selected_bg_color; }
  100%   { border-color: @theme_selected_fg_color;  }
}
@keyframes blink_background {
  0% { background-color: @theme_bg_color;  }
  90%   { background-color: @theme_selected_bg_color; }
  100%   { background-color: @theme_bg_color;  }
}
@keyframes blink_background_img {
  0%   { background-image: image(@theme_bg_color); }
  90%  { background-image: image(@theme_selected_bg_color); }
  100% { background-image: image(@theme_bg_color); }
}

button.blink {
    animation: 0.5s blink_background_img 0.1s ease 1;
}

notebook.blink {
  animation: 0.5s blink_border 0.1s ease 1;
}

notebook.blink > header > tabs > tab:checked {
  animation: 0.5s blink_background 0.1s ease 1;
}


.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: 1em;
}

.mono-font {
    /* note: monospaced font is set by ThemeContext::adjust_global_font_scale() */
}

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

.inksmall {
    font-size: 0.8em;
}

.menu-category {
    font-size: smaller;
    font-weight: bold;
}

.small-heading {
    font-size: smaller;
    font-weight: bold;
    opacity: 0.5;
}

.secondary {
    opacity: 0.7;
}

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


/* Selector dialog */
#SelectorsAndStyleDialog button {
    min-height: 16px;
    margin: 2px;
    padding: 2px;
}

#SelectorsAndStyleDialog .toggle {
    min-width: 18px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 0;
    padding-bottom: 0;
}

#SelectorsAndStyleDialog .radio.image-button {
    margin: 0;
    padding: 0px;
    border-radius: 2px 0 0 2px;
}

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

/* ink-ruler */

#InkRuler {
    /* make size relative */
    font-size: smaller;
    color: alpha(@theme_fg_color, 0.6);
}

#InkRuler.horz {
    min-height: 2em;
}

#InkRuler.vert {
    min-width: 2em;
}

.bright #InkRuler {
    /* increase contrast between background and page area */
    background-color: shade(@theme_bg_color, 0.94);
}

/* Ensure ui/themes.cpp excludes these classes on applying overridebasecolor: */

.bright #InkRuler.shadow {
    color: rgba(0,0,0,0.3);
}
.dark #InkRuler.shadow {
    color: rgba(0,0,0,0.5);
}

.bright #InkRuler.page {
    color: @theme_base_color;
}
.dark #InkRuler.page {
    color: shade(@theme_base_color, 0.666);
}

.bright #InkRuler.selection.border,
.dark   #InkRuler.selection.border {
    color: @theme_selected_bg_color;
}
.bright #InkRuler.selection.background,
.dark   #InkRuler.selection.background {
    color: transparent;
}

/* The actual canvas (Inkscape's drawing area). */
SPCanvas {
    background-color: white;
}

#TextFontFamilyAction_combobox {
    -GtkComboBox-appears-as-list: true;
}

/* Those are three buttons in canvas corners; their size dictates how large scrollbars are */
#QuickActions, #LockGuides, #CMS_Adjust {
    padding: 0;
    margin: 0;
    outline: none;
    border-radius: 0;
    border-width: 0px;
    min-width: 22px;
    min-height: 22px;
}
/* Don't let images inside those buttons inflate their sizes */
#QuickActions *, #LockGuides *, #CMS_Adjust * {
    padding: 0;
}
#QuickActions image {
    margin-top: 1px;
}

/* 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 {
    padding: 0px;
}

#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: 25px;
    padding: 0; /* remove padding to make inkspinscale the same height as spinbutton */
}
#InkSpinScale trough highlight {
    margin: 0;
}

#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: 25px;
    outline-style: none;
}

#UnicodeIconView {
    font-size: 1.2em;
}

#ObjectsTreeView.view:focus {
    outline-style: double;
    outline-width: 5px;
    outline-color: alpha (@theme_fg_color, 0.1);
    -gtk-outline-radius: 50%;
}
#ObjectsTreeView.view:hover {
    border-color: alpha (@theme_fg_color, 0.1);
    border-style: solid;
    border-width: 1px 0px;
}
#ObjectsTreeView {
    -GtkTreeView-expander-size: 12;
    -GtkTreeView-horizontal-separator: 2;
    -GtkTreeView-vertical-separator: 2;
}
#Objects .search {
  padding: 2px 4px;
  min-height: 16px;
  font-size: smaller;
}

#SimpleFilterModifier #InkSpinScale {
    padding: 2px 4px;
}

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

#start-screen-window .titlebar stack { /* banner-stack */
    padding: 0;
    /* opaque bg at bottom corners, rather than having gap, which in GTK3 glitches in transition */
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, @theme_bg_color);
}

#start-screen-window .combo {
    padding:1px 10px;

}
#start-screen-window .combo * {
    padding:2px;
}

#start-screen-window grid label {
    font-size:small;
    margin:12px;
}

#start-screen-window button.primary {
    min-width: 4em;
}

#start-screen-window * {
    outline:0;
}

button.link:hover image {
    -gtk-icon-effect: dim;
}

.marker-item.box {
    padding: 4px;
}
.marker-separator {
    padding: 0;
}

.tight-button {
    padding: 5px 3px;
}

.small-button {
    /* small button in-line with spinbuttons, made small not to inflate height of spinbutton */
    padding: 1px 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;
}

/* ColorPalette */
/* set style for small buttons; we need them reasonably small,
 * since they impact min height of color palette strip */
.color-palette-main-box button.small {
    padding: 1px;
    margin: 0;
}
.color-palette-main-box flowbox,
.color-palette-main-box scrolledwindow {
    padding: 0;
    border: 0;
    margin: 0;
    min-width: 1px;
    min-height: 1px;
}
/* remove padding/margins from FlowBoxChild widgets,
 * so previews can be adjacent to each other */
.color-palette-main-box flowboxchild {
    padding: 0;
    border: 0;
    margin: 0;
    min-width: 1px;
    min-height: 1px;
}
/*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;
}

/* slider with tighter margins */
scale.tight-slider {
    padding: 8px 4px 7px 4px;
}

scale.small-slider {
    padding-top: 7px;
    padding-bottom: 7px;
}

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

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

.tag-box {
    background-color: alpha(@theme_fg_color, 0.15);
    border-radius: 50px;
    margin: 0;
    margin-right: 1px;
}

.tag-box label {
    min-width: 2em; /* don't let it collapse */
    margin-right: 1px;
    margin-left: 8px;
}

.tag-box button {
    padding: 0;
    margin-right: 2px;
}

/* Give layer selector button label a highlight color */
#LayerSelector label
{
    padding-left: 6px;
    border-left-style: solid;
    border-left-width: 3px  ;
    /* Color is set in src/ui/widget/layer-selector.cpp */
}

#DialogNotebook #Swatches box label {
    padding-left: 5px;
    padding-right: 3px;
}

#DialogNotebook #Swatches #ColorItem.group + label {
    font-weight: bold;
}

#DialogNotebook #Swatches #ColorItem.paint-none + label {
    font-style: italic;
}

#StyleSwatch label {
    font-size: smaller;
}

#DocumentProperties #NotebookPage {
    margin-left: 4px;
    margin-right: 4px;
}

.dialog-heading {
    font-weight: bold;
}

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

.inkscape-toolbar {
    margin: 4px;
}

.inkscape-toolbar > * {
    margin-right: 2px;
}

.inkscape-toolbar > * > * {
    margin-right: 2px;
}

.inkscape-toolbar > * > *:last-child {
    margin-right: 0;
}

popover > box {
    margin: 4px 3px;
}

popover > box > * {
    margin-right: 3px;
}

popover > box > *:last-child {
    margin-right: 0;
}

/* for dialogs with "Apply" button (or equivalent) - larger hit target */
.wide-apply-button {
    min-width: 150px;
}

button.menu-btn-tight {
    padding-left: 0;
    padding-right: 0;
}

#DockedDialogNotebook {
    border: none;
}

#DialogMenuButton {
    padding: 3px;
    border: none;
    opacity: 0.5;
}

#DialogMenuButton:hover {
    opacity: 1;
}

.OpacityButton {
    border: none;
    border-radius: 0px;
    margin: 0;
    padding: 0;
}

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

.key {
    border-radius: 3px;
    background-color: alpha(@theme_fg_color, 0.15);
    padding: 2px;
}

combobox.flat-combobox button {
    border: none;
    background-color: transparent;
    background-image: image(transparent);
}

.filter-effects, .effects-params {
    min-height: 50px;
}

/* Defeat standard darker background color on views: use popoverʼs background */
popover.background.filter-effects-info textview,
popover.background.filter-effects-info textview > text {
    background: none;
}

.dark .symbolsoverlay iconview:not(:selected) {
    background-color: #f0f0f0; /* bright background color for typically black symbols */
    /* background-color: @theme_fg_color; - this doesn't work for some themes (like MonoThemeDark) */
    color:@theme_bg_color; /* symbol text labels */
}

.dark .symbolsoverlay {
    color: @theme_bg_color; /* this is for overlay widget's children */
}

/* LPE Dialog add */
#LPEScrolled {
    border:none;
}

#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 {
    margin-bottom: 5px;
}

#LPESelectorFlowBox .lpeinfo {
    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.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;
}

#LivePathEffect {
    padding-top:5px;
}

#LivePathEffect expander:focus, #LivePathEffect expander > label:focus{
    outline-width:0;
}

#LivePathEffect list{
    margin:5px 5px 0 5px;
}

#LivePathEffect list row{
    margin:0;
    padding:0;
    border-width:0;
    border-style:none;
    outline-width:0;
}
#LivePathEffect list row > box{
    margin:0;
    padding:1px;
    border-width:1px;
    border-radius:4px;
    margin-bottom:5px;
    border-style:solid;
    border-color:@borders;
    outline-width:0;
}

#LivePathEffect list row:last-child  > box{
    margin-bottom:0px;
}

#LPEEffectItem{
    border-radius:3px;
    padding:2px;
    outline:0;
}

#LPEEffectItem .minbutton {
    padding:0;
    margin:0;
    outline:0;
    border-color:@borders;
}

#LPEEffectItem expander title label {
    min-height:26px;
}

#LPEEffectItem expander, 
#LPEEffectItem expander *,
#LPEEffectItem expander:focus, 
#LPEEffectItem expander *:focus {
    outline:0;
}

.LPEDrag,.LPEDrag:active,.LPEDrag:focus,.LPEDrag:hover {
    margin:0;
    padding:0;
    border-style:none;
    opacity:0.7;
    background-color:transparent;
    background-image:none;
    outline:0;
}

.LPEDrag:hover {
    opacity:1;
    background-color:transparent;
    background-image:none;
}

#LivePathEffect list#LPEParentBox row{
    border-style:none;
    outline:0;
}

#LivePathEffect list#LPEParentBox row > button {
    padding:2px;
    margin:0;
}

#LPEContainer:drop(active) {
    box-shadow:none;
}

#LPECurrentItem *{
    color:@theme_fg_color;
}

#LPEContainer #LPEListBox{
    border-style: solid none solid none;
    border-color: @theme_base_color;
    border-width:0;
    padding:0;
}
#LPEListBox row:drop(active){
    box-shadow:none;
}
#LPEContainer:drop(active).before row:first-child > box,
#LPEListBox row:drop(active).before > box{
    border-width:6px 1px 1px 1px;
    border-color: @theme_selected_bg_color @borders @borders @borders;
    box-shadow:none;
    border-radius:6px 6px 0 0;
}

#LPEContainer:drop(active).after row:last-child > box,
#LPEListBox row:drop(active).after > box{
    border-width:1px 1px 6px 1px;
    border-color: @borders @borders @theme_selected_bg_color @borders;
    border-radius:0 0 6px 6px;
    box-shadow:none;
}

#LPEEffectItem expander title label {
    min-height:34px;
}

#LPEMenu menuitem:not(.menu-category):disabled {
    color:alpha(@theme_text_color,0.4);
}

#LPEListBox row > *:disabled * {
    color:@theme_text_color;
}


#LivePathEffect list row,
#LPEListBox row.activatable:hover {
    background-color: transparent;
}

#LivePathEffect list row .drag-icon,
#LPEListBox row.activatable .drag-icon:hover {
    background-color: @theme_base_color;
    border-width:1px;
    border-radius:0;
    margin:0;
    padding:5px;
    border-style:solid;
    border-color:@borders;
    outline-width:0;
}

#LivePathEffect list row .drag-icon * {
    outline:0;
}

#LPEActionButtons #eventbutton:nth-child(1) button{
    border-radius:3px 0 0 3px;
    border-width:1px 0 1px 1px;
}

#LPEActionButtons #eventbutton:nth-child(2) button{
    border-radius:0;
    border-width:1px 0 1px 1px;
}
#LPECurrentItem * {
    border-width:0;
    border-style:none;
}
#LPECurrentItem {
    margin-top:0;
}
#LPECurrentItem image{
    margin-right:6px;
}
#LPECurrentItem {
    margin-top:0;
}
#LPEParentBox{
    margin:10px 4px;
    padding:0;
}

/* min size for an angle slider in gradient editor */
.angle-slider {
    min-width: 80px;
}

/* Gtk::PopoverMenu and Inkscape::UI::Widget::PopoverMenu */
/* Make it look basically like GtkMenu; see comments @ original merge request */
popover.menu.menuize, /* GTK sets .menu/make_menuized_popover() sets .menuize */
popover.popover-menu { /* Inkscape::UI::Widget::PopoverMenu */
    /* Rounded corners can glitch in GTK3 with submenus, and GtkMenu was square anyway = emulate */
    border-radius: 0;
    border-color: @borders;

    padding: 0;
}
popover.popover-menu menu {
    background: none;
    border: none;
}
popover.menu.menuize modelbutton,
popover.popover-menu menuitem {
    border-radius: 0;
    outline-style: none;
}
/* Defeat defaulting to having more spacing between RadioButtons than GtkMenu */
popover.popover-menu radiobutton {
    padding: 0;
}
/* Emulate GtkMenu theming in absence of ability to change CSS node name, unlike our PopoverMenu */
popover.menu.menuize modelbutton:focus,
popover.menu.menuize modelbutton:hover {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}
/* UGH! GtkMenuSectionBox has Widget:margin = 10px. Counteract to look like popover.popover-menu */
popover.menu.menuize > stack > box {
    margin: -2px -6px;
}
/* Detect submenu headings & replicate GTK .dim-label, looks nicer than leaving normal fg colour */
popover.menu.menuize > stack > box > modelbutton:first-child > * /* Affect children not bgcolour */
{
    opacity: 0.55;
}

/* darker background for extension gallery due to fixed-color thumbnails (white background + drop shadow) */
.darker-background {
    background-image: image(alpha(#000, 0.05));
}

/* Add margins to tool toolbar: a) separators, so they don't touch buttons b) buttons, so they don't touch sides */
#tool-toolbar separator {
    margin-top: 1px;
    margin-bottom: 1px;
}
#tool-toolbar button {
    margin-left: 1px;
    margin-right: 1px;
}

/* used @ ui/themes to get correct foreground color; get_color() can be wrong */
/* Asterisks & stuff in the selectors are just to ensure sufficient priority. */
*.theme_fg_color,
*.theme_fg_color:not(:backdrop),
*.theme_fg_color:backdrop
{
    color: @theme_fg_color;
}

/* As GTK4 only lets us get the fg color, use these to stash other colors there…
   by calling util:get_color_with_class(), *BUT* see its note re this technique.
   Asterisks & stuff in the selectors are just to ensure sufficient priority. */
*.theme_bg_color,
*.theme_bg_color:not(:backdrop),
*.theme_bg_color:backdrop
{
    color: @theme_bg_color;
}
*.theme_selected_bg_color,
*.theme_selected_bg_color:not(:backdrop),
*.theme_selected_bg_color:backdrop
{
    color: @theme_selected_bg_color;
}

/* ColorSlider */
#ColorSlider {
    min-width : 96px;
    min-height:  8px;
}

/* ColorPreview */
#ColorPreview {
    min-width : 32px;
    min-height: 12px;
}

/* GradientImage */
#GradientImage {
    min-width : 54px;
    min-height: 12px;
}

/* GradientWithStops */
#GradientEdit {
    min-width : 60px;

    /* widget's height; it should take stop template's height into account
     * current value is fine-tuned to make stop handles overlap gradient image
     * just the right amount */
    min-height: 33px;
}
/* focus outline, emulates style of GTKʼs Adwaita/Default CSS themeʼs outline */
#GradientEdit {
    border: 1px dashed transparent; /* reserve space but donʼt draw til focus */
    border-radius: 3px;
    padding: 3px;
}
/* TODO: GTK4: Replace our .focus-within with its then-built-in :focus-within */
#GradientEdit.focus-within {
    border-color: alpha(@theme_fg_color, 0.3)
}

/* Canvas */
#InkscapeCanvas {
    min-width : 256px;
    min-height: 256px;
}


/* IconPreview */
button.icon-preview {
    min-width : 0;
    min-height: 0;
    padding: 5px;
}

/* GtkFrames that formerly had :shadow-type == NONE */
/* TODO: GTK4: border submode is removed */
frame.flat > border {
    border: none;
 }

/*we dont want higlight with tab order only want checked ones */
#ToolToolbar flowboxchild:selected { 
    background-color:transparent;
    background-image:image(@theme_bg_color);
}

/* Adding some margins for popup dialogs, so the content is not touching the window borders */
.popup-dialog-margins {
    margin: 0.75em;
}

/*heper info in popover menu*/
.menu_search{
    background-color:alpha(@theme_fg_color,0.1);
    margin:0 0 -8px -8px;
}

/* About screen slide show transitions >>>>>>>>>>>>>>>>>>>>>>>>> */
@keyframes fade_in_opacity {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fade_out_opacity {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
.fade-in {
    animation: 1.2s fade_in_opacity 0s both;
}
.fade-out {
    animation: 1.2s fade_out_opacity 0s both;
}
.background-transition {
    transition-property: background-color;
    transition-duration: 1.2s;
}
/* <<<<<<<<<<<<<<<<<<<<<<<< About screen slide show transitions */


