// out: ../Default.qss

// -----------------------------------------------------------------------------

// DEFAULT

// -----------------------------------------------------------------------------

// This is the default theme. All other themes derive from this.

// -----------------------------------------------------------------------------

// Include All

@import 'main';

// Resource Location

@img-url: 'imgs/white';

@bg:                  #484848;

@accent:              darken(@bg, 11);

@text-color:          rgb(230, 230, 230);

@text-color-disabled: fade(@text-color, 40);

@hl-bg-color:             rgb(83, 133, 166);

@hl-bg-color-disabled:    darken(desaturate(@hl-bg-color, 15), 15);

@hl-text-color:           rgb(255, 255, 255);

@hl-bg-color-secondary:   rgba(255, 255, 255, 0.10);

@hl-text-color-secondary: @text-color;

@dock-bg-color:              darken(@bg, 16);

@dock-placeholder-color:     #f55454;

@dialogButtonFrame-bg-color: darken(@bg, 4);

@tooltip-bg-color:     #292B2D;

@tooltip-border-color: #CFD1D4;

@tooltip-text-color:   #CFD2D4;

@label-title: rgb(159, 218, 255);

@label-error: rgb(255, 0, 0);

@lock-color: #C34040;

// -----------------------------------------------------------------------------

// Tabs

// -----------------------------------------------------------------------------

@tabbar-bg-color: darken(@bg, 6);

// Tabs

@tab-bg-color: @tabbar-bg-color;

@tab-text-color: mix(@tab-bg-color, @text-color, 40);

@tab-border-color: darken(@accent, 2);

@tab-bg-color-hover: lighten(@tab-bg-color, 5);

@tab-border-color-hover: @tab-bg-color-hover;

@tab-text-color-hover: @tab-text-color;

@tab-bg-color-selected: @bg;

@tab-border-color-selected: @tab-bg-color-selected;

@tab-text-color-selected: #fff;

// -----------------------------------------------------------------------------

// Topbar & Workspaces

// -----------------------------------------------------------------------------

// Topbar

@topbar-bg-color: @bg;

@topbar-border-color: @accent;

// Workspace Tabs

@rooms-tab-bg-color: @tab-bg-color;

@rooms-tab-text-color: @tab-text-color;

@rooms-tab-bg-color-hover: @tab-bg-color-hover;

@rooms-tab-bg-color-selected: @hl-bg-color;

@rooms-tab-text-color-selected: @hl-text-color;

@rooms-tab-border-color-selected: @rooms-tab-bg-color-selected;

// -----------------------------------------------------------------------------

// Menu

// -----------------------------------------------------------------------------

@menu-text-color: @text-color;

@menu-bg-color: @bg;

@menu-border-color: @accent;

@menu-separator-color: @menu-border-color;

@menu-item-bg-color-selected: @hl-bg-color;

@menu-item-text-color-selected: @hl-text-color;

@menu-checkbox-text-color-selected: @text-color;

@menu-icon-checked-bg-color: @toolbutton-bg-color-checked;

@menu-icon-checked-border-color: @toolbutton-border-color-checked;

// -----------------------------------------------------------------------------

// Scrollbars

// -----------------------------------------------------------------------------

// Container

@scrollbar-bg-color: darken(@bg, 8);

// Handle

@scrollbar-handle-border-size: 0;

@scrollbar-handle-radius: 4;

@scrollbar-handle-margin: 3;

@scrollbar-handle-bg-color: lighten(@bg, 8);

@scrollbar-handle-border-color: @scrollbar-handle-bg-color;

@scrollbar-handle-bg-color-hover: lighten(@scrollbar-handle-bg-color, 8);

@scrollbar-handle-border-color-hover: @scrollbar-handle-bg-color-hover;

@scrollbar-handle-bg-color-pressed: lighten(@scrollbar-handle-bg-color-hover, 8);

@scrollbar-handle-border-color-pressed: @scrollbar-handle-bg-color-pressed;

// -----------------------------------------------------------------------------

// Palette Window

// -----------------------------------------------------------------------------

// All views (except list)

@palette-SelectedBorderColor: rgb(255, 255, 255);

@palette-NumpadShortcutBgColor: rgba(0, 0, 0, 0.3);

@palette-NumpadShortcutBorderColor: rgb(141, 141, 141);

// List view

@palette-SeparatorColor: @accent;

@palette-SelectedCellColor: @hl-bg-color;

@palette-CurrentCellColor: fade(@hl-bg-color, 50);

@palette-ListNumpadShortcutBorderColor: rgb(175, 175, 175);

// StyleChooserPage Chips

@palette-CommonChipBoxColor:    black;

@palette-PinnedChipBoxColor:    rgb(160, 160, 160);

@palette-SolidChipBoxColor:     rgb(228, 16, 0);

@palette-SelectedChipBoxColor:  white;

@palette-SelectedChipBox2Color: rgb(199, 202, 50);

// -----------------------------------------------------------------------------

// Button

// -----------------------------------------------------------------------------

@button-bg-color: lighten(@bg, 11);

@button-border-color: @bg;

@button-border-width: 1;

@button-text-color: lighten(@text-color, 5);

@button-bg-color-hover: lighten(@button-bg-color, 5);

@button-border-color-hover: @button-border-color;

@button-text-color-hover: @button-text-color;

@button-bg-color-pressed: darken(@button-bg-color, 22);

@button-border-color-pressed: darken(@button-bg-color-pressed, 2);

@button-text-color-pressed: @button-text-color;

@button-bg-color-checked: darken(@button-bg-color-pressed, 0);

@button-border-color-checked: darken(@button-bg-color-checked, 2);

@button-text-color-checked: @button-text-color;

@button-bg-color-checked-hover: lighten(@button-bg-color-checked, 8);

@button-border-color-checked-hover: darken(@button-bg-color-checked-hover, 5);

@button-bg-color-checked-hover-pressed: darken(@button-bg-color-checked-hover, 5);

@button-bg-color-focus: @hl-bg-color;

@button-border-color-focus: @button-dialog-border-color;

@button-text-color-focus: lighten(@button-text-color, 10);

@button-bg-color-focus-hover: lighten(@button-bg-color-focus, 8);

@button-bg-color-disabled: lighten(@bg, 5);

@button-border-color-disabled: @button-border-color;

@button-text-color-disabled: @text-color-disabled;

// For QDialogs

@button-dialog-border-color: @dialogButtonFrame-bg-color;

// Scrollable Buttons

@scrollable-button-bg-color: @button-bg-color;

@scrollable-button-bg-color-hover: @button-bg-color-hover;

@scrollable-button-bg-color-pressed: @button-bg-color-pressed;

@scrollable-button-border-color: @button-border-color;

// -----------------------------------------------------------------------------

// Tool Buttons

// -----------------------------------------------------------------------------

// Main

@toolbutton-border-size: 1;

@toolbutton-bg-color: transparent;

@toolbutton-border-color: @toolbutton-bg-color;

@toolbutton-text-color: @button-text-color;

@toolbutton-bg-color-hover: @button-bg-color-hover;

@toolbutton-border-color-hover: @toolbutton-bg-color-hover;

@toolbutton-text-color-hover: @button-text-color-hover;

@toolbutton-bg-color-pressed: @button-bg-color-pressed;

@toolbutton-border-color-pressed: @button-border-color-pressed;

@toolbutton-text-color-pressed: @button-text-color-pressed;

@toolbutton-bg-color-checked: @hl-bg-color;

@toolbutton-border-color-checked: @toolbutton-bg-color-checked;

@toolbutton-text-color-checked: @hl-text-color;

@toolbutton-bg-color-checked-hover: lighten(@toolbutton-bg-color-checked, 8);

@toolbutton-border-color-checked-hover: @toolbutton-bg-color-checked-hover;

@toolbutton-bg-color-disabled: fade(@hl-bg-color, 40);

@toolbutton-border-color-disabled: @toolbutton-bg-color-disabled;

// Lock

@toolbutton-lock-bg-color-checked: @lock-color;

@toolbutton-lock-border-color-checked: @toolbutton-lock-bg-color-checked;

@toolbutton-lock-bg-color-checked-hover: lighten(@toolbutton-lock-bg-color-checked, 15);

@toolbutton-lock-border-color-checked-hover: @toolbutton-lock-bg-color-checked-hover;

// -----------------------------------------------------------------------------

// ComboBox

// -----------------------------------------------------------------------------

@combobox-dropdown-border-size: 0;

@combobox-dropdown-border-radius: 1;

@combobox-dropdown-border-color: @button-bg-color;

@combobox-dropdown-border-color-hover: @button-bg-color-hover;

// For :editable ComboBox with LineEdit

@combobox-dropdown-bg-color-hover-editable: @button-bg-color-hover;

@combobox-dropdown-bg-color-disabled-editable: @button-bg-color-disabled;

// -----------------------------------------------------------------------------

// Textfield

// -----------------------------------------------------------------------------

@input-bg-color: darken(@bg, 10);

@input-border-color: darken(@input-bg-color, 1);

@input-border-radius: 2;

@input-text-color: @text-color;

@input-bg-color-focus: @input-bg-color;

@input-border-color-focus: @hl-bg-color;

@input-text-color-focus: @input-text-color;

@input-bg-color-disabled: mix(@input-bg-color, @bg, 50);

@input-border-color-disabled: mix(@input-border-color, @bg, 50);

@input-text-color-disabled: @text-color-disabled;

// Text Selection

@input-selection-text-color: @hl-text-color;

@input-selection-bg-color: @hl-bg-color;

// -----------------------------------------------------------------------------

// CheckBox

// -----------------------------------------------------------------------------

@checkbox-size: 9;

@checkbox-bg-color: @input-bg-color;

@checkbox-border-color: @input-border-color;

@checkbox-border-radius: 2;

@checkbox-bg-color-hover: @checkbox-bg-color;

@checkbox-border-color-hover: lighten(@bg, 50);

@checkbox-text-color-hover: lighten(@text-color, 25);

@checkbox-bg-color-checked: @hl-bg-color;

@checkbox-border-color-checked: @checkbox-bg-color-checked;

@checkbox-bg-color-checked-hover: @checkbox-bg-color-checked;

@checkbox-border-color-checked-hover: @checkbox-border-color-hover;

@checkbox-bg-color-disabled: @input-bg-color-disabled;

@checkbox-border-color-disabled: @checkbox-bg-color-disabled;

@checkbox-bg-color-checked-disabled: lighten(@bg, 10);

@checkbox-border-color-checked-disabled: @checkbox-bg-color-checked-disabled;

@checkbox-img: 'checkmark.svg';

@checkbox-img-disabled: 'checkmark_disabled.svg';

@checkbox-partially-img: 'checkpartially.svg';

@checkbox-partially-img-disabled: 'checkpartially_disabled.svg';

// For RadioButton

@radiobutton-img-unchecked: 'radiobutton_unchecked.svg';

@radiobutton-img-unchecked-hover: 'radiobutton_unchecked_hover.svg';

@radiobutton-img-unchecked-disabled: 'radiobutton_unchecked_disabled.svg';

@radiobutton-img-checked: 'radiobutton_checked.svg';

@radiobutton-img-checked-disabled: 'radiobutton_checked_disabled.svg';

// -----------------------------------------------------------------------------

// Slider

// -----------------------------------------------------------------------------

// Single

@slider-groove-img: 'slider-groove.svg';

@slider-groove-img-disabled: 'slider-groove_disabled.svg';

@slider-handle-margin: -2 -1;

@slider-handle-width: 10;

@slider-handle-img: 'slider-handle.svg';

@slider-handle-img-disabled: 'slider-handle_disabled.svg';

@slider-v-handle-margin: -1 -2;

@slider-v-handle-img: 'slider-v-handle.svg';

@slider-v-handle-img-disabled: 'slider-v-handle_disabled.svg';

// This one is used only for #ViewerFpsSlider

@slider-handle-bg-color: lighten(@bg, 35);

@slider-handle-border-color: @slider-handle-bg-color;

// DoublePairField, IntPairField

@slider-groove-color: darken(@bg, 11);

@slider-left-handle: @slider-handle-img;

@slider-right-handle: @slider-handle-img;

@slider-left-handle-disabled: @slider-handle-img-disabled;

@slider-right-handle-disabled: @slider-handle-img-disabled;

// -----------------------------------------------------------------------------

// Custom Panel Widgets

// -----------------------------------------------------------------------------

@customPanel-Scroller-border-color: darken(@text-color, 35);

@customPanel-Scroller-bg-color: darken(@bg, 8);

// -----------------------------------------------------------------------------

// Titlebars

// -----------------------------------------------------------------------------

@title-bg-color: @tabbar-bg-color;

@title-text-color: lighten(@bg, 30);

@title-text-color-active: #fff;

@title-active-border-pixmap: 'none';

@title-border-width: 1px;

@title-border-color: @accent;

// Title pane icon colors

@title-button-rollover-color: @button-bg-color-hover;

@title-button-pressed-color: @hl-bg-color;

@title-button-freeze-color: @lock-color;

@title-button-preview-color: #1baf7e;

@title-close-over-color: @lock-color;

// -----------------------------------------------------------------------------

// File Browser / Trees

// -----------------------------------------------------------------------------

// Filebrowser window color

@filebrowser-bg-color: @bg;

// Trees

@tree-bg-color: darken(@bg, 10);

@tree-bg-color-alt: lighten(@tree-bg-color, 3);

@prefs-tree-bg-color: darken(@bg, 8);

// All Panes

@browser-folder-text-color: @label-title;

@browser-folder-text-color-selected: @hl-text-color;

@browser-selected-item-bg-color: @hl-bg-color;

// Left Pane

@browser-listview-bg-color: @tree-bg-color;

@browser-listview-bg-color-alt: @browser-listview-bg-color;

// Right Pane: Order Column

@browser-itemview-col-color: darken(@bg, 5);

@browser-itemview-col-color-sorted: @browser-itemview-col-color;

@browser-itemview-col-text-color: @text-color;

@browser-itemview-col-border-color: @accent;

@browser-itemview-col-relief-color: @browser-itemview-col-color;

// Right Pane: BG

@browser-itemview-bg-color: darken(@bg, 5);

@browser-itemview-bg-color-alt: lighten(@browser-itemview-bg-color, 3);

// -----------------------------------------------------------------------------

// Viewer Window

// -----------------------------------------------------------------------------

// FlipSlider

@flipmarker-img: 'flipmarker.svg';

@flipslider-img: 'flipslider.svg';

@flipslider-base-color: darken(@bg, 10);

@flipslider-notstarted-color: rgba(205, 101, 101, 0.78);

@flipslider-started-color: rgb(26, 188, 63);

@flipslider-finished-color: @flipslider-base-color;

// Ruler

@viewer-ruler-bg-color: @bg;

@viewer-ruler-scale-color: fade(@text-color, 70);

@viewer-ruler-ToolOptionValues-color: darken(@bg, 50);

@viewer-ruler-border-color: fade(@accent, 70);

@viewer-ruler-handle-color: lighten(saturate(@hl-bg-color, 35), 15);

@viewer-ruler-handle-drag-color: yellow;

// -----------------------------------------------------------------------------

// Progress Bar

// -----------------------------------------------------------------------------

@progressbar-bg-color: darken(@bg, 10);

@progressbar-border-color: @accent;

@progressbar-chunk-bg-color: rgb(21, 161, 54);

@progressbar-chunk-border-color: @accent;

// -----------------------------------------------------------------------------

// XSheet

// -----------------------------------------------------------------------------

// XSheet Context Menus

@xsheet-menu-preview-color:                 #E6E678;

@xsheet-menu-lock-color:                    #F5F5F5;

@xsheet-menu-camstand-color:                #FFA480;

@xsheet-menu-text-color:                    #000;

// XSheet Notes

@xsheet-notes-text-color:                   #000;

// XSheet Spreadsheet Viewer

@xsheet-text-color:                         @text-color;

@xsheet-error-text-color:                   rgb(255, 123, 123);

@xsheet-selected-text-color:                @text-color;

@xsheet-currentFrame-text-color:            @text-color;

@xsheet-bg-color:                           darken(@bg, 3);

@xsheet-empty-bg-color:                     @bg;

@xsheet-LightLine-color:                    rgba(0, 0, 0, 0.2);

@xsheet-MarkerLine-color:                   rgba(255, 255, 255, 0.15);

@xsheet-SecMarkerLine-color:                rgba(255, 255, 255, 0.25);

@xsheet-SelectedMarkerLine-color:           @xsheet-MarkerLine-color;

@xsheet-VerticalLine-color:                 rgba(0, 0, 0, 0.3);

@xsheet-VerticalLineHead-color:             darken(@bg, 13);

@xsheet-PreviewFrameText-color:             @label-title;

@xsheet-CurrentRowBG-color:                 fade(@hl-bg-color, 70);

@xsheet-OnionSkinAreaBG-color:              darken(@bg, 6);

@xsheet-EmptyColumnHead-color:              @bg;

@xsheet-ColumnHeadPastelizer-color:         rgba(0, 0, 0, 0);

@xsheet-SelectedColumnHead-color:           fade(tint(@cellHighlightTintColor, 80), 30);

@xsheet-PlayRange-Color:                    @bg;

@xsheet-LightBG-color:                      lighten(@bg, 65.8824);

@xsheet-DarkBG-color:                       lighten(@bg, 60.0000);

@xsheet-DarkLine-color:                     lighten(@bg, 30.5882);

@xsheet-ColumnIconLine-color:               @accent;

@xsheet-CellArea-bg-color-focus:            rgb(0, 0, 0);

@xsheet-CellFocus-color:                    #000;

@xsheet-FoldedColumnBG-color:               lighten(@bg, 10);

@xsheet-FoldedColumnLine-color:             darken(@bg, 5);

@xsheet-CurrentTimeIndicator-color:         rgb(255, 0, 0);

// Level Type Colors Adjustment

@columnBorderDesaturation:                  0;

@columnBorderDarkness:                      10;

@cellHighlightLightness:                    -20;

@cellHighlightDesaturation:                 8;

@cellHighlightTintColor:                    @hl-bg-color;

@cellHighlightTintAmount:                   77;

@xsheet-EmptyCell-color:                    @xsheet-OnionSkinAreaBG-color;

@xsheet-NotEmptyColumn-color:               darken(@bg, 3);

@xsheet-SelectedEmptyCell-color:            fade(mix(lighten(@xsheet-EmptyCell-color, 20), @cellHighlightTintColor, 80), 50);

@xsheet-LevelColumn-color:                  #4C6E4C;

@xsheet-VectorColumn-color:                 #7B7B4C;

@xsheet-ChildColumn-color:                  #6b4e69;

@xsheet-FullColorColumn-color:              #657A96;

@xsheet-FxColumn-color:                     #5e5645;

@xsheet-ReferenceColumn-color:              lighten(@bg, 5);

@xsheet-PaletteColumn-color:                #42756e;

@xsheet-MeshColumn-color:                   #594d75;

@xsheet-MetaColumn-color:                   #8c8c8c;

@xsheet-SoundTextColumn-color:              #a7a7a7;

@xsheet-SoundColumn-color:                  #578a8a;

@xsheet-SoundColumnHL-color:                #34FE5E;

@xsheet-SoundColumnTrack-color:             rgba(0,0,0,0.8);

@xsheet-SoundPreviewTool-color:             darken(@xsheet-SoundColumnTrack-color, 20);

@xsheet-ActiveCamera-color:                 #4073a3;

@xsheet-OtherCamera-color:                  #5e9aa3;

@xsheet-Table-color:                        #62628c;

@xsheet-Peg-color:                          #9f6e3c;

// Orientation: XSheet

@xsheet-ColumnNameBg-color:                 rgba(0, 0, 0, 0);

@xsheet-DragBarHighlight-color:             rgba(255, 255, 255, 0.15);

@xsheet-PreviewButtonBgOn-color:            rgba(200, 200, 100, 1);

@xsheet-CamstandButtonBgOn-color:           rgba(235, 144, 107, 1);

@xsheet-LockButtonBgOn-color:               rgba(255, 255, 255, 0.6);

@xsheet-ConfigButtonBg-color:               rgba(255, 255, 255, 0);

// Orientation: Timeline

@timeline-FrameRangeMarkerLine-color:       lighten(@bg, 15);

@timeline-IconLine-color:                   @xsheet-VerticalLine-color;

// -----------------------------------------------------------------------------

// Schematic Viewer

// -----------------------------------------------------------------------------

// Node Viewer

@schematic-viewer-bg-color:  darken(@bg, 5);

@schematic-label-text-color: #a0e680;

// Help Button

@schematic-help-button-bg-color:       transparent;

@schematic-help-button-bg-color-hover: @button-bg-color-hover;

// Node Type Colors Adjustment

@nodeLightness:  0;

@nodeSaturation: 0;

@schematic-TableColor:             #62628c;

@schematic-ActiveCameraColor:      @xsheet-ActiveCamera-color;

@schematic-OtherCameraColor:       @xsheet-OtherCamera-color;

@schematic-GroupColor:             #3b6e9c;

@schematic-PegColor:               #9f6e3c;

@schematic-SplineColor:            #6a9d1c;

@schematic-ActiveOutputcolor:      @xsheet-ActiveCamera-color;

@schematic-OtherOutputcolor:       @xsheet-OtherCamera-color;

@schematic-XsheetColor:            #62628c;

@schematic-PassThroughColor:       #858585;

@schematic-NormalFxColor:          #5b90a3;

@schematic-MacroFxColor:           #815c79;

@schematic-ImageAdjustFxColor:     #656287;

@schematic-LayerBlendingFxColor:   #57958f;

@schematic-MatteFxColor:           #ae7171;

// Node Selected Color

@schematic-SelectedBorderColor: rgb(255, 255, 255);

// All Node Link Colors

@schematic-LinkColor:           rgb(223, 223, 223);

@schematic-SelectedLinkColor:   cyan;

// Motion Path Link Colors

@schematic-MotionPathLinkColor:         #94ee1e;

@schematic-MotionPathSelectedLinkColor: yellow;

// For Column Based Schematic Nodes: Use the Xsheet viewer colors by default

@schematic-text-color:         @xsheet-text-color;

@schematic-VerticalLine-color: @xsheet-VerticalLine-color;

@schematic-PreviewButtonBgOn-color:   @xsheet-PreviewButtonBgOn-color;

@schematic-PreviewButtonBgOff-color:  @xsheet-ReferenceColumn-color;

@schematic-CamstandButtonBgOn-color:  @xsheet-CamstandButtonBgOn-color;

@schematic-CamstandButtonBgOff-color: @xsheet-ReferenceColumn-color;

// -----------------------------------------------------------------------------

// Keyframes

// -----------------------------------------------------------------------------

@keyframe-off-color:              rgba(0, 0, 0, 0);

@keyframe-off-color-hover:        @toolbutton-bg-color-hover;

@keyframe-off-border-color:       @keyframe-off-color;

@keyframe-off-border-color-hover: @keyframe-off-color-hover;

@keyframe-total-color:              #be7323;

@keyframe-total-color-hover:        lighten(@keyframe-total-color, 10);

@keyframe-total-border-color:       @keyframe-total-color;

@keyframe-total-border-color-hover: @keyframe-total-color-hover;

@keyframe-partial-color:              @keyframe-total-color;

@keyframe-partial-color-hover:        @keyframe-total-color-hover;

@keyframe-partial-border-color:       @keyframe-partial-color;

@keyframe-partial-border-color-hover: @keyframe-partial-color-hover;

// FX Settings Panel Only

@keyframe-highlight-color:        rgba(255, 255, 255, 0.3);

@keyframe-highlight-border-color: @keyframe-highlight-color;

@keyframe-inbetween-color:        #80795b;

@keyframe-inbetween-border-color: @keyframe-inbetween-color;

@keyframe-modified-color:         rgb(190, 176, 98);

@keyframe-modified-border-color:  @keyframe-modified-color;

// -----------------------------------------------------------------------------

// Function Editor

// -----------------------------------------------------------------------------

// Function Treeview

@function-treeview-text-color: @text-color;

// Function Curve Panel

@function-panel-bg-color: darken(@bg, 5);

@function-panel-ValueLine-color: lighten(@function-panel-bg-color, 4);

@function-panel-FrameLine-color: lighten(@function-panel-bg-color, 8);

@function-panel-OtherCurves-color: lighten(@function-panel-bg-color, 30);

@function-panel-RulerBG-color: darken(@function-panel-bg-color, 3);

@function-panel-Text-color: @text-color;

@function-panel-Sub-color: @function-panel-bg-color;

@function-panel-Selected-color: #FFA500;

// Function Spreadsheet Viewer

@function-LightLightBG-color:            @xsheet-OnionSkinAreaBG-color;

@function-SelectedSceneRangeEmpty-color: @xsheet-SelectedEmptyCell-color;

@function-ColumnHeaderBorder-color:      darken(@bg, 13);

@function-ColumnHeaderBG-color: @xsheet-NotEmptyColumn-color;

// Keyframe Colors

@function-KeyFrame-color:          darken(desaturate(spin(@keyframe-total-color, 0.0000), 0.7570), 8.4314);

@function-KeyFrameBorder-color:    lighten(@function-KeyFrame-color, 20);

@function-SelectedKeyFrame-color:  mix(shade(@function-KeyFrame-color, -40), @cellHighlightTintColor, 60);

@function-IgnoredKeyFrame-color: rgb(172,42,57);

@function-SelectedIgnoredKeyFrame-color: mix(shade(@function-IgnoredKeyFrame-color, -40), @cellHighlightTintColor, 60);

@function-Inbetween-color:         darken(desaturate(spin(@keyframe-inbetween-color, 0.4423), 4.8071), 7.2549);

@function-InbetweenBorder-color:   lighten(@keyframe-inbetween-color, 20);

@function-SelectedInbetween-color: mix(shade(@function-Inbetween-color, @cellHighlightLightness), @cellHighlightTintColor, @cellHighlightTintAmount);

@function-IgnoredInbetween-color: rgb(138,105,94);

@function-SelectedIgnoredInbetween-color: mix(shade(@function-IgnoredInbetween-color, @cellHighlightLightness), @cellHighlightTintColor, @cellHighlightTintAmount);

// Expression Field

@function-ExpressionFieldBG-color:     lighten(@bg, 61.9608);

@function-ExpressionFieldBorder-color: darken(@bg, 8.2353);