/* .css file is autogenerated, edit only .scss file and commit changes with SASS processor, e.g. sassc: sassc --style compact common.scss common.css */
:root { font-face: "Helvetica Neue, Liberation Sans, DejaVu Sans, Verdana, Arial, Helvetica, Roboto, Droid Sans"; font-family: sans-serif; font-size: 13px; color: var(--text-color); --main-color: #4e93da; --secondary-color: #2e93fa; --hovered-color: #e2edf9; --window-bg: #f0f1f1; --dialog-bg: #f0f1f1; --header-color: #e4e4e4; --top-pane-color: #f3f4f5; --pane-color: #fff; --pane-color-disabled: #f0f0f0; --control-color: #fff; --control-color-active: #f7f7f7; --control-gradient: linear(0deg, #eeeeee, #dddddd); --control-gradient-active: linear(190deg, #e3e3e3, #dfdfdf); --pale-border-color: rgba(0, 0, 0, 0.3); --paler-border-color: rgba(0, 0, 0, 0.2); --palest-border-color: rgba(0, 0, 0, 0.1); --text-color: #404040; --inverse-text-color: #f0f0f0; --hovered-label-color: #46617e; --disabled-text-color: rgba(64, 64, 64, 0.5); }

Panel { gap: 6px; }

/* controls */
ButtonLike { justify-content: center; align-items: center; padding: 4px 8px; border-width: 1px; border-style: solid; border-color: var(--pale-border-color); background-image: var(--control-gradient); focus-rect-color: #bbb; transition: border-color 75ms ease; }

ButtonLike:hovered:not(checked) { border-color: var(--main-color); }

ButtonLike:hovered { color: var(--hovered-label-color); }

ButtonLike:pressed, ButtonLike:checked { border-color: var(--main-color); background-image: var(--control-gradient-active); }

ButtonLike:not(enabled) { border-color: var(--palest-border-color); background: none; background-color: var(--pane-color-disabled); color: var(--disabled-text-color); }

ButtonLike:not(enabled) > .icon { opacity: 0.4; }

ButtonLike > .label { flex: 1; padding: 0; text-align: center; text-hotkey: underline-on-alt; text-overflow: ellipsis; transition: color 75ms ease; }

ButtonLike.flat { background: none; focus-rect-color: none; }

Link > ButtonLike { padding: 3px; border: none; background: none; }

Link > ButtonLike > .label { color: var(--secondary-color); text-align: start; text-overflow: ellipsis-middle; }

Link > ButtonLike:hovered > .label { text-decoration: underline; }

Link > ButtonLike:not(enabled) { color: var(--disabled-text-color); }

Link > Label { color: var(--secondary-color); text-overflow: ellipsis-middle; }

Link:hovered > Label { text-decoration: underline; }

Link:not(enabled) > Label { color: var(--disabled-text-color); }

CheckBox, RadioButton { align-items: center; padding: 2px; }

CheckBox > .label, RadioButton > .label { flex: 1; padding: 0; text-hotkey: underline-on-alt; text-overflow: ellipsis; }

CheckBox:hovered, RadioButton:hovered { color: var(--hovered-label-color); }

CheckBox:not(enabled), RadioButton:not(enabled) { color: var(--disabled-text-color); }

CheckBox > .icon, RadioButton > .icon, MenuItem > .check, MenuItem > .radio { flex: 0; min-width: 16px; min-height: 16px; }

CheckBox:not(enabled) > .icon, RadioButton:not(enabled) > .icon, MenuItem:not(enabled) > .check, MenuItem:not(enabled) > .radio { opacity: 0.4; }

CheckBox:enabled:not(checked):hovered > .icon, RadioButton:enabled:not(checked):hovered > .icon, MenuItem:enabled:not(checked):hovered > .check, MenuItem:enabled:not(checked):hovered > .radio { border-color: var(--pale-border-color); }

CheckBox:not(checked):pressed > .icon, RadioButton:not(checked):pressed > .icon, MenuItem:not(checked):pressed > .check, MenuItem:not(checked):pressed > .radio { background-color: var(--control-color-active); border-color: var(--pale-border-color); }

CheckBox:not(checked) > .icon, MenuItem:not(checked) > .check { background-color: var(--control-color); border-width: 1px; border-style: solid; border-color: var(--paler-border-color); border-radius: 3px; }

CheckBox:checked > .icon, MenuItem:checked > .check { background: url(btn_check_on); }

CheckBox:checked > .icon:hovered, MenuItem:checked > .check:hovered { background: url(btn_check_on_focused); }

CheckBox:checked > .icon:pressed, MenuItem:checked > .check:pressed { background: url(btn_check_on_pressed); }

RadioButton > .icon, MenuItem > .radio { background-color: var(--control-color); border-width: 1px; border-style: solid; border-color: var(--paler-border-color); border-radius: 50%; }

RadioButton:checked > .icon, MenuItem:checked > .radio { border-color: var(--main-color); border-width: 5px; }

SwitchButton { background: url(switch_off); }

SwitchButton:not(enabled) { opacity: 0.4; }

SwitchButton:checked { background: url(switch_on); }

Canvas { min-width: 50px; min-height: 50px; }

/* text */
Label { padding: 2px; }

Label:not(enabled) { color: var(--disabled-text-color); }

/* layout.linear */
Resizer { min-width: 6px; min-height: 6px; padding: 1px; background-clip: content-box; }

Resizer:hovered { background-color: rgba(255, 255, 0, 0.25); }

Resizer:focused, Resizer:pressed { background-color: var(--main-color); opacity: 0.75; }

/* groupbox */
GroupBox { padding: 20px 10px 16px; --frame-top-left: none; --frame-top-right: none; --frame-bottom: none; }

GroupBox > .caption { padding: 1px; text-overflow: ellipsis; }

/* lists */
ListView { min-width: 2em; min-height: 2em; width: 10em; height: 10em; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); background-color: var(--pane-color); transition: border-color 100ms ease; }

ListView:focused { border-color: var(--secondary-color); }

ListView:not(enabled) { background-color: var(--pane-color-disabled); }

ListView > .item { padding: 2px 4px; }

ListView > .item:hovered { background-color: var(--hovered-color); }

ListView > .item:focused, ListView > .item:selected { background-color: var(--main-color); color: var(--inverse-text-color); }

/* combobox */
ComboBoxBase { align-items: center; padding: 3px 4px; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); background-image: var(--control-gradient); transition: border-color 100ms ease; }

ComboBoxBase:hovered, ComboBoxBase:pressed, ComboBoxBase:focus-within, ComboBoxBase.opened { border-color: var(--main-color); color: var(--hovered-label-color); }

ComboBoxBase:not(enabled) { border-color: var(--pale-border-color); opacity: 0.4; }

ComboBoxBase > .body { flex: 1; min-width: 40px; padding: 2px; transition: color 100ms ease; }

ComboBoxBase > .arrow { padding: 2px; }

Popup.combobox > ListView { width: auto; height: auto; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

Popup.combobox > ListView:not(enabled) { background-color: var(--inverse-text-color); }

ComboBox:pressed, ComboBox.opened, IconTextComboBox:pressed, IconTextComboBox.opened { background-image: var(--control-gradient-active); }

ComboEdit { padding: 0; gap: 0; background-color: var(--pane-color); background-image: none; cursor: auto; }

ComboEdit > TextField.body { padding: 5px; border: none; background: none; color: var(--text-color); }

ComboEdit > ButtonLike.arrow { padding: 5px; border: none; background: none; }

/* menu */
Menu { width: auto; height: auto; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); background-color: var(--top-pane-color); }

MenuBar { margin: 0; padding-left: 3px; flex-shrink: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); }

MenuItem { padding: 6px 4px; }

MenuItem:hovered { background-color: var(--hovered-color); }

MenuItem:focused, MenuItem:selected { background-color: var(--main-color); color: var(--inverse-text-color); }

MenuItem:not(enabled) { color: var(--disabled-text-color); }

MenuItem:not(enabled) > .icon { opacity: 0.4; }

MenuItem.separator { padding: 4px; }

MenuItem.separator > * { min-width: 1px; min-height: 1px; background: var(--paler-border-color); }

MenuItem > .icon { padding: 0 2px; }

MenuItem > .label { padding: 0 4px; text-hotkey: underline-on-alt; }

MenuItem > .shortcut { padding-top: 0 2px 0 8px; text-align: end; }

/* tree */
TreeItemWidget { min-width: 100px; min-height: 1em; gap: 0; }

TreeItemWidget > Panel { padding: 2px 4px; gap: 0; }

TreeItemWidget > Panel > ImageWidget { padding-right: 3px; }

TreeItemWidget:hovered > Panel { background-color: var(--hovered-color); }

TreeItemWidget:pressed > Panel, TreeItemWidget:selected > Panel { background-color: var(--main-color); color: var(--inverse-text-color); }

TreeItemWidget:default > Panel > Label { font-weight: bold; }

/* grid */
StringGridWidget { min-width: 100px; min-height: 60px; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); background-color: var(--pane-color); font-face: "Menlo,Consolas,DejaVuSansMono,Lucida Sans Typewriter,Courier New,Lucida Console"; transition: border-color 100ms ease; --selection: rgba(64, 64, 255, 0.5); --selection-row: rgba(160, 176, 255, 0.2); --cell-bg-fixed: rgba(224, 224, 224, 0.2); --cell-bg-header: rgba(144, 144, 144, 0.2); --cell-bg-header-selected: rgba(255, 192, 64, 0.5); --cell-border: rgba(192, 192, 192, 0.2); --cell-border-header: rgba(32, 32, 32, 0.2); }

StringGridWidget:focused { border-color: var(--secondary-color); }

StringGridWidget:not(enabled) { background-color: var(--pane-color-disabled); }

/* scroll */
ScrollArea { min-width: 200px; min-height: 150px; }

/* scrollbar */
ScrollBar, ElemScrollBar { background-color: rgba(0, 0, 0, 0.05); --button-up: url(scrollbar_btn_up); --button-down: url(scrollbar_btn_down); --button-left: url(scrollbar_btn_left); --button-right: url(scrollbar_btn_right); --indicator-vertical: none; --indicator-horizontal: none; }

ScrollBar:not(enabled), ElemScrollBar:not(enabled) { opacity: 0.4; }

ScrollIndicator { padding: 3px; background-color: #c2c2c2; }

PageScrollButton:pressed { background-color: rgba(64, 64, 128, 0.1); }

PageScrollButton:hovered { background-color: rgba(64, 64, 128, 0.05); }

AbstractSlider:not(enabled) { opacity: 0.4; }

SliderHandle { padding: 5px; border: 1px solid transparent; background-color: var(--main-color); background-clip: padding-box; }

SliderHandle:pressed { opacity: 0.7; }

AbstractSlider > .range-before, AbstractSlider > .range-after { border-color: transparent; background-color: #888; background-clip: padding-box; }

AbstractSlider.horizontal > .range-before, AbstractSlider.horizontal > .range-after { border-top-width: 4px; border-bottom-width: 4px; }

AbstractSlider.vertical > .range-before, AbstractSlider.vertical > .range-after { border-left-width: 4px; border-right-width: 4px; }

Slider > .range-before { background-color: var(--main-color); }

RangeSlider > .range-between { border-color: transparent; background-color: var(--main-color); background-clip: padding-box; }

RangeSlider.horizontal > .range-between { border-top-width: 4px; border-bottom-width: 4px; }

RangeSlider.vertical > .range-between { border-left-width: 4px; border-right-width: 4px; }

/* tabs */
Tabs { gap: 0; }

TabBar { padding-left: 3px; padding-right: 3px; }

TabBar > .more { opacity: 0.6; transition: opacity 100ms ease; }

TabBar > .more:hovered { opacity: 1; }

TabContent { justify-self: stretch; padding: 6px; background-color: var(--top-pane-color); }

TabItem { padding: 6px 1px 0 0; gap: 0; border: 0 solid transparent; }

TabItem:selected { border-color: var(--main-color); }

TabItem > .label { align-self: end; padding: 0 3px 3px; text-hotkey: underline-on-alt; transition: color 100ms ease; }

TabItem > ButtonLike.close { padding: 0; border: none; background: none; }

TabItem:hovered, TabItem:selected, TabItem:focused { color: var(--main-color); }

Tabs.top > TabBar > TabItem { border-bottom-width: 2px; }

Tabs.bottom > TabBar > TabItem { border-top-width: 2px; }

/* editors */
TextField { padding: 4px; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); background-color: var(--pane-color); transition: border-color 100ms ease; }

TextField:focused { border-color: var(--secondary-color); }

TextField:read-only { background-color: var(--pane-color-disabled); }

TextArea { min-width: 100px; min-height: 60px; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); background-color: var(--pane-color); transition: border-color 100ms ease; --search-highlight-current: rgba(160, 192, 255, 0.8); --search-highlight-other: rgba(240, 208, 128, 0.6); }

TextArea:focused { border-color: var(--secondary-color); }

TextArea:read-only { background-color: var(--pane-color-disabled); }

LogWidget { font-family: monospace; font-size: 10px; }

EditorSearchPane { padding: 4px; background-color: var(--pane-color); box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.25); }

EditorSearchPane.find-only { row-gap: 0; }

EditorSearchPane ButtonLike { padding: 2px 4px; font-size: 12px; }

EditorSearchPane > Button.close { padding: 0; align-self: center; background: none; }

/* srcedit */
SourceEdit { font-face: "Menlo,Consolas,DejaVuSansMono,DejaVu Sans Mono,Liberation Mono,Lucida Sans Typewriter,Courier New,Lucida Console"; font-family: monospace; --left-pane-number-text-edited: #cc2; --left-pane-number-text-saved: #2c2; --left-pane-icon-breakpoint: #f21818; --left-pane-icon-bookmark: #1818f2; --left-pane-icon-error: rgba(242, 24, 24, 0.5); }

SourceEdit:focused { border-width: 1px; border-style: solid; border-color: var(--secondary-color); }

SourceEdit:read-only { background-color: var(--pane-color-disabled); }

/* statusline */
StatusLine { padding: 1px; flex-shrink: 0; background-color: var(--top-pane-color); }

StatusLine > Label { flex: 1; }

/* toolbars */
ToolBarHost { padding: 6px; gap: 8px; }

ToolBar { padding-left: 6px; gap: 4px; border-color: var(--paler-border-color); border-style: solid; border-left-width: 2px; }

ToolBarSeparator { margin-top: 3px; margin-bottom: 3px; border-color: var(--paler-border-color); border-style: solid; border-left-width: 1px; }

ToolBar ButtonLike, ToolBar ComboBox { background: none; }

ToolBar ButtonLike:not(hovered):not(pressed), ToolBar ComboBox:not(hovered):not(pressed) { border-color: transparent; }

ToolBar ButtonLike:not(enabled), ToolBar ComboBox:not(enabled) { border-color: transparent; opacity: 0.4; }

ToolBarButton { padding: 4px; focus-rect-color: none; }

/* docks */
DockHost { padding: 2px; background-color: var(--top-pane-color); }

DockHostBody { margin: 3px; padding: 0; }

/* charts */
SimpleBarChart { padding: 2px; --background: #fff; --axis: #c0c0c0; --segment-tag: #c0c0c0; }

/* progressbar */
ProgressBar { min-width: 50px; min-height: 16px; max-height: 16px; padding: 2px; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); --gauge: #4080ff; --indeterminate: #80c080; --gauge-animation: url(progress_bar_gauge_animation.tiled); --indeterminate-animation: url(progress_bar_gauge_animation.tiled); }

/* winframe */
WindowFrame { background-color: var(--window-bg); }

WindowFrame > .caption { align-items: center; padding: 3px; background-color: var(--header-color); }

WindowFrame > .caption > Label { padding: 2px; font-size: 0.9em; text-overflow: ellipsis; text-transform: uppercase; }

WindowFrame > .caption > Button { margin-left: auto; padding: 2px; }

WindowFrame > .body { justify-self: stretch; padding: 3px; }

/* dialog, filedialog, inputbox, messagebox, settingsdialog */
WindowFrame.dialog-frame { padding: 0; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); }

FileDialog { min-height: 400px; padding: 4px; --dir-name: #000080; }

FileDialog .content { gap: 1px; }

FileDialog .right-panel { justify-self: stretch; }

FileDialog .right-panel > .grid { justify-self: stretch; }

FilePathPanelButtons { padding-left: 3px; padding-right: 6px; }

FilePathPanelItem { align-items: center; gap: 0; }

FilePathPanelItem > .label { padding: 2px 3px; }

FilePathPanelItem > .label:hovered { background-color: var(--hovered-color); }

FilePathPanelItem > .button { padding: 0 1px; }

FilePathPanelItem > .button:hovered { background-color: var(--hovered-color); }

FileNameField TextField { justify-self: stretch; }

InputBox, MessageBox { padding: 10px; }

InputBox > Label, MessageBox > Label { padding: 10px; }

SettingsDialog { padding: 4px; }

SettingsDialog > .content { padding: 6px; gap: 3px; }

SettingsDialog > .content > .tree { width: 150px; min-width: 50px; padding: 4px; border-width: 1px; border-style: solid; border-color: var(--paler-border-color); background-color: var(--pane-color); font-size: 16px; }

SettingsPage { justify-self: stretch; min-width: 100px; padding: 6px; }

SettingsPage .error { border-color: red; }

SettingsPage > Label { padding: 4px 4px 12px; font-size: 1.6em; }

SettingsList { align-content: center; }

/* Tooltips */
Label#tooltip { padding: 3px; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4); background-color: #222; color: #eee; }

Popup#tooltip-popup { padding: 10px 2px 1px; }
