/* LateNight 2.3 // PaleMoon theme

* containers
  * colors, borders, background tiles
  * layout spacing

* colors & icons
  * font colors
  * button styles
  * button icons

* library
* menu & special widget styles


/**********************************************************************
************** container background colors & borders *****************/
#SkinContainer {
  background-color: #080808;
}

#Deck1, #DeckCompact1, #DeckMini1,
#Deck2, #DeckCompact2, #DeckMini2,
#Deck3, #DeckCompact3, #DeckMini3,
#Deck4, #DeckCompact4, #DeckMini4,
#MixerDecks,
#FxUnitControlsExpanded,
#FxUnitControlsCollapsed,
#FxSlotsExpanded,
#FxSlotsCollapsed,
#MicDuckingContainer, #MicAuxUnit, #MicAuxAddFrame,
#Sampler, #SamplerMini {
  background-color: #1e1e20;
}

/* 1st-level containers */
#Deck1, #DeckCompact1, #DeckMini1,
#Deck2, #DeckCompact2, #DeckMini2,
#Deck3, #DeckCompact3, #DeckMini3,
#Deck4, #DeckCompact4, #DeckMini4,
#MixerDecks,
#FxUnitControlsCollapsed,
#FxUnitControlsExpanded,
#FxSlotsCollapsed,
#FxSlotsExpanded,
#MicDuckingContainer, #MicAuxUnit, #MicAuxAddFrame,
#Sampler, #SamplerMini {
  border-top: 1px solid #333;
  border-left: 1px solid #282828;
  border-bottom: 1px solid #0c0c0c;
  border-right: 1px solid #181818;
  border-radius: 1px;
  border-bottom-left-radius: 2px;
  }
  #MixerDecks[highlight="1"] {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 1px;
    border-right: 1px solid #0c0c0c;
  }

/* dim 1st-level containers */
#ToolBar,
#WaveformsContainer,
#MainControls,
#HeadphoneControls,
#VuMeterDeck1_Compact,
#VuMeterDeck2_Compact,
#VuMeterDeck3_Compact,
#VuMeterDeck4_Compact,
#VuMeterMain_Compact,
#FxUnitHeaderCollapsed,
#FxUnitHeaderExpanded,
#SamplerExpandBox,
#SearchLineBox,
#LibExpandBox,
#SidebarBox,
#PreviewDeck,
#SidebarCoverSplitter,
#SidebarCoverSplitter:handle,
#LibrarySplitter::handle,
#LibraryFeatureControls,
QAbstractScrollArea::corner {
  border-top: 1px solid #212123;
  border-right: 1px solid #111;
  border-bottom: 1px solid #020202;
  border-left: 1px solid #191919;
  border-radius: 1px;
  background-color: #151517;
  }
  #ToolBar {
    border-width: 0px 0px 1px 0px;
  }
  #WaveformsContainer {
    border-width: 1px 0px;
    border-radius: 0px;
  }

  #LibSidebarContainer {
    margin-top: 1px;
  }
  #SidebarBox {
    padding: 2px 0px 0px 2px;
    }
    #SidebarBox {
      border-width: 1px 0px 0px 0px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;
    }
  #SidebarCoverSplitter,
  #SidebarCoverSplitter::handle,
  #LibrarySplitter,
  #LibrarySplitter::handle {
    border-radius: 0px;
    }
    #SidebarCoverSplitter,
    #SidebarCoverSplitter::handle {
      border-width: 0px;
    }
    /* Some tweaks to create a frameless library table */
    #LibrarySplitter {
      border-width: 0px;
      }
      #LibrarySplitter::handle {
        border-width: 1px 0px 0px 0px;
      }
    WLibrary {
      border-width: 1px 0px 0px 0px;
    }
    #PreviewDeckRightSpacer,
    #SearchTreeSpacer {
      border-right: 1px solid #222;
      background-color: transparent;
      }
      #PreviewDeckRightSpacer {
        min-width: 3px;
        max-width: 3px;
      }
      #SearchTreeSpacer {
        min-height: 3px;
        max-height: 3px;
      }
  /* Controls row in AutoDJ, Recording and other library features */
  #LibraryFeatureControls {
    border-width: 1px 0px 0px 0px;
    border-radius: 0px;
    margin-top: 1px;
  }

/* recessed regions */
#WaveformBox1,
#WaveformBox2,
#WaveformBox3,
#WaveformBox4,
#WaveformsFrame,
#OverviewBox,
#OverviewBoxMini,
#KeyText,
WCueMenuPopup #CueLabelEdit {
  border-top: 1px solid #0d0d0d;
  border-left: 1px solid #121212;
  border-bottom: 1px solid #2a2a2a;
  border-right: 1px solid #252525;
  background-color: #19191a;
  }
WTrackTableView,
WLibraryTextBrowser,
WLibrarySidebar,
WSearchLineEdit {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #1e1e1e;
  border-right: 1px solid #222;
  }
  WLibraryTextBrowser {
    margin-top: 1px;
    padding: 5px 0px 0px 8px;
    border-top: 1px solid #212123;
  }

  #WaveformsFrame,
  #OverviewBox,
  #OverviewBoxMini,
  WSearchLineEdit {
    border-radius: 1px;
  }
  #OverviewBox[highlight="1"],
  #OverviewBoxMini[highlight="1"] {
    background-color: #151515;
  }
  #KeyText {
    border-width: 1px 0px 1px 0px;
  }

  #DeckSettingsContainer,
  #DeckSettingsContainerCompact,
  #SamplerSettingsContainer,
  /* Prevents cut-off or shifted stars on macOS */
  WStarRating {
    background-color: #19191a;
    }
    #DeckSettingsContainer,
    #DeckSettingsContainerCompact,
    #SamplerSettingsContainer {
      border-top: 1px solid #080808;
      border-bottom: 1px solid #2a2a2a;
      }
      #DeckSettings,
      #SamplerSettings {
        border-top: 1px solid #1f1f1f;
        border-bottom: 1px solid #050505;
      }

/* fillers */
#FxRackFillerL,
#FxRackFillerR,
#MicAuxRackFiller {
  border-top: 1px solid #1c1c1c;
  border-left: 1px solid #191919;
  border-bottom: 1px solid #020202;
  border-right: 1px solid #111;
  border-radius: 1px;
  background-color: #151517;
  }

/* meters */
#VuMeterBox,
#VuMeterBoxMain,
#VuMeterBoxMainSingle,
#LatencyMeterBox {
  background-color: #040404;
  }
  #LatencyMeterBox[highlight="0"] {
    border: 1px solid #040404;
  }
  #LatencyMeterBox[highlight="1"] {
    border: 1px solid yellow;
  }

#WaveformsContainer {
  border-bottom: 1px solid #0c0c0c;
}

#FxParametersFocusBg {
  border: 1px solid #257B82;
  background-color: rgba(0,0,1,50);
}

#VuMainCover {
  background-color: rgba(21, 21, 21, 150);
}

#SearchLineBox {
  padding-right: 2px;
}

#LibExpandBox {
  border-right: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 0px 2px 2px 0px;
  margin-left: 4px;
}

#SidebarBox {
  border-right: 0px;
  border-top-right-radius: 0px;
}


/************ lines / grooves / splitters *********************/

#DeckRateSeparator,
#DeckRateSeparatorCompact,
#MainMixerSeparator,
#MainHeadphoneSeparator,
#FxMixerSeparatorCollapsed,
#FxSlotSeparatorH,
#SeparatorToolbar,
#SkinSettingsSeparator {
  /* needs a background color to paint the borders */
  background-color: transparent;
  }
  #DeckRateSeparator,
  #DeckRateSeparatorCompact,
  #FxMixerSeparatorCollapsed {
    min-width: 0px;
    max-width: 0px;
  }
  #SkinSettingsSeparator {
    min-height: 0px;
    max-height: 0px;
  }
  #FxMixerSeparatorCollapsed {
    margin-left: 3px;
  }
  #FxFlowIndicatorCollapsed {
    min-width: 12px;
    max-width: 12px;
  }
  #DeckRateSeparator,
  #DeckRateSeparatorCompact,
  #FxMixerSeparatorCollapsed,
  #FxSlotSeparatorH {
    border-left: 1px solid #0c0c0c;
    border-right: 1px solid #333;
  }
  #MainMixerSeparator {
    border-left: 1px solid #0c0c0c;
    border-right: 1px solid #222;
  }
  #FxSlotSeparatorH {
    border-top: 1px solid #0c0c0c;
    border-bottom: 1px solid #333;
  }

  #FxFlowIndicatorCollapsed {
    margin: 0px 0px 0px 0px;
    image: url(skins:LateNight/palemoon/style/fx_flow_horizontal.svg) no-repeat center center;
  }
  #ToolbarSeparator {
    margin: 0px 5px;
  }
  #SkinSettingsSeparator {
    margin: 1px 4px 3px 4px;
  }

/* dynamic bottom border in #DeckRow1_ */
#ExpandingBottomBorder {
  /* border shows up if we set a bg color... */
  background-color: transparent;
  border-bottom: 1px solid #0c0c0c;
}

#PreviewPlayBox {
  border-style: solid;
  border-color: #0c0c0c;
}

WTrackProperty:hover,
WTrackProperty:hover[selected="false"],
WTrackProperty:hover[selected="true"],
WTrackProperty[selected="true"],
#BpmTapContainer:hover,
#PlayPositionText:hover, #PlayPositionTextSmall:hover {
  background-color: #151517;
  }
  WTrackProperty:hover[selected="true"],
  WTrackProperty[selected="true"] {
    background-color: #181819;
  }
  #BpmTap[pressed="true"],
  WTrackProperty[selected="true"] {
    border: 1px solid #7d350d;
/*    border: 1px solid #888;*/
  }

/* Disabled for now since the hover effect is stuck as soon as the
  track menu is opened.
#TitleText[highlight="1"]:hover, #TitleTextSmall[highlight="1"]:hover,
#ArtistText[highlight="1"]:hover, #ArtistTextSmall[highlight="1"]:hover {
  background-color: #171719;
  border-radius: 1px;
}
*/


/**********************************************************************
************** container background colors & borders *****************/




/******************* Container layouts, margins etc. ******************
**********************************************************************/

#ToolbarDeckSpacer {
  min-height: 3px;
  max-height: 3px;
}

/* Since the toolbar is dim in PaleMoon, we don't need an extra margin
    in between mini decks and the toolbar. */
#MiniDecksTopSpacer {
  min-height: 0px;
  max-height: 0px;
}

#CompactDecksCenterSpacer {
  min-width: 4px;
  max-width: 4px;
}

#DeckRateSpacer {
  min-width: 0px;
  max-width: 0px;
}

#ToolBar {
  padding: 0px 2px 0px 2px;
  }
  #BatteryBox,
  #ClockWidget {
    margin-bottom: 1px;
  }
  #LatencyLabel {
    margin-top: 1px;
  }

#Deck1, #DeckCompact1, #DeckMini1,
#Deck2, #DeckCompact2, #DeckMini2,
#Deck3, #DeckCompact3, #DeckMini3,
#Deck4, #DeckCompact4, #DeckMini4,
#MixerContainer,
#VuMeterDeck1_Compact,
#VuMeterDeck2_Compact,
#VuMeterDeck3_Compact,
#VuMeterDeck4_Compact,
#VuMeterMain_Compact,
#FxUnit1, #FxUnit3,
#FxUnit2, #FxUnit4,
#FxRackFillerR,
#FxRackFillerL,
#MicAuxRack,
#SamplerRow,
#PreviewDeck {
  margin-bottom: 3px;
}

#Deck1, #DeckMini1,
#Deck3, #DeckMini3,
#MixerContainer,
#FxUnit1,
#FxUnit3,
#FxRackFillerL,
#FxRackFillerR,
#MicRack, #AuxRack {
  margin-right: 2px;
}

#Deck2, #DeckMini2,
#Deck4, #DeckMini4,
#MixerContainer,
#FxUnit2,
#FxUnit4,
#FxRackFillerL,
#FxRackFillerR,
#MicRack, #AuxRack {
  margin-left: 2px;
}
/* gap in between compact decks is managed
  by #CompactDecksCenterSpacer in order to have VU meters
  directly attached to each deck.
  A highlight connection to [LateNight],show_vumeters_compact
  can be used for the borders but screws up the margin: contents
  are rendered beyond the parent border */

#MixerContainer {
  margin-right: 1px;
  margin-left: 1px;
}

#SamplerRow {
  qproperty-layoutSpacing: 4;
}

#MicRack, #AuxRack {
  qproperty-layoutSpacing: 3;
}

#PreviewDeck {
  /* right margin is managed by #PreviewDeckRightSpacer which
    also generates the left border of the splitter handle */
}

#SkinSettingsContainer {
  margin-left: 3px;
}


/************** Waveforms *****************************************************/

#WaveformsContainer {
  padding-bottom: 1px;
}

#WaveformBox1,
#WaveformBox2,
#WaveformBox3,
#WaveformBox4 {
  border-left: 0px;
  }
  #WaveformBox1,
  #WaveformBox3 {
    border-bottom: 0px;
  }
  #WaveformBox2,
  #WaveformBox4 {
    border-top: 0px;
  }
  /* Hide some borders when 4 decks are visible */
  #WaveformBox1[highlight="1"] {
    border-top: 0px;
  }
  #WaveformBox2[highlight="1"] {
    border-bottom: 0px;
  }


/************** Decks *********************************************************/

#DeckMini1,
#DeckMini2,
#DeckMini3,
#DeckMini4 {
  padding-right: 2px;
}

/* All rows in FULL deck */
#DeckRows12345,
#DeckRows234 {
  padding: 2px 0px 2px 1px;
  }
  /* All rows in compact deck */
  #DeckRows2345 {
    padding: 0px 0px 2px 1px;
  }

#SpinnyCoverContainer_Small{
  min-width: 63px;
  max-width: 63px;
  min-height: 63px;
  max-height: 63px;
  margin: 0px 1px 0px 0px;
  }
  #SpinnyCoverContainer_SmallCompact {
    min-width: 63px;
    max-width: 63px;
    min-height: 63px;
    max-height: 63px;
    margin: 0px 1px 1px 0px;
  }
#SpinnyCoverContainer_Big{
  min-width: 118px;
  max-width: 118x;
  min-height: 118px;
  max-height: 118px;
  margin: 1px 2px 0px 0px;
  }
  #SpinnyCoverContainer_BigCompact {
    min-width: 114px;
    max-width: 114px;
    min-height: 114px;
    max-height: 114px;
    margin: 0px 2px 0px 0px;
  }
#SpinnyCoverContainer_MiniDeck {
  min-width: 53px;
  max-width: 53px;
  min-height: 53px;
  max-height: 53px;
}

  /* Replacement for #DeckMiniN padding */
  #PlayCueMini {
    margin: 0px 1px 1px 0px;
  }
  #OverviewBoxMini {
    margin: 1px 0px;
  }
  #DeckMini_TitlePlayPosKeyBPM {
    margin: 1px 1px 1px 0px;
  }

#DeckRow_1_KeyVinylFx {
  padding-right: 2px;
  padding-left: 1px;
  }

#DeckRow_2_3_ArtistTitleTime {
  margin: 2px 0px 2px 0px;
  }
  #ArtistText,
  #TitleText {
    /* for some reason the padding/margin is doubled in the skin... */
    padding: 0px 2px 1px 0px;
  }
  #PlayPositionText,
  #DurationText {
    /* for some reason the padding/margin is doubled in the skin... */
    padding: 0px 1px 1px 1px;
  }
  #TitleTextSmall {
    padding: 1px 3px 1px 1px;
  }
  #ArtistTextSmall {
    margin: 0px 0px 0px 1px;
    padding: 0px 1px 0px 0px;
  }
  #PlayPositionTextSmall {
    padding: 0px 0px 2px 2px;
  }

#DeckSettingsContainer,
#DeckSettingsContainerCompact {
  border-width: 1px 0px 1px 0px;
  }
  #SamplerSettingsContainer {
    border-width: 1px 0px 1px 0px;
    border-bottom-right-radius: 1px;
  }

  #DeckSettings {
    padding: 1px 2px 1px 1px;
    border-width: 1px 0px 1px 0px;
    }
    #DeckSettingsGrid {
      padding: 0px 2px;
      qproperty-layoutSpacing: 4;
    }

#DeckRow_5_LoopCuesTransport {
  margin-top: 1px;
}
#DeckRow_5_Compact {
}


/************** RateControls ********************************************/

#RateContainer {
  padding: 4px 0px 0px 0px;
  }

  #RateText {
    padding: 0px;
    margin: 0px 2px 0px 0px;
  }

#SyncBox {
  margin: 2px 1px 1px 2px;
}

#RateControls {
  margin: 0px 1px 0px 2px;
}


/********************** Loop Controls / AutoDJ spinbox ************************/
WBeatSpinBox,
#spinBoxTransition {
  selection-color: #a7998b;
  selection-background-color: #111;
  }
  WBeatSpinBox:focus,
  #spinBoxTransition:focus,
  #LibraryBPMSpinBox:focus  {
    selection-color: #000;
    selection-background-color: #d2d2d2;
  }
WBeatSpinBox {
  margin: 1px 0px 1px 1px;
  padding: 0px -17px 2px 1px;
  border-width: 3px 19px 2px 3px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_spinbox.svg) 3 19 2 3;
}
#spinBoxTransition {
  width: 24px;
  height: 19px;
  padding: 0px -15px 0px 0px;
  margin: 0px 2px 3px 5px;
  border-width: 3px 19px 2px 3px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_spinbox_autodj.svg) 3 19 2 3;
  }
  WBeatSpinBox:focus,
  #spinBoxTransition:focus {
    border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_spinbox_focus_blue.svg) 3 19 2 3;
  }

WBeatSpinBox::up-button,
WBeatSpinBox::down-button,
#spinBoxTransition::up-button,
#spinBoxTransition::down-button {
  subcontrol-origin: content;
  position: relative;
  /* as with spinbox: border is added to size. */
  width: 18px;
  padding: 0px;
  }
  WBeatSpinBox::up-button,
  #spinBoxTransition::up-button {
    height: 11px;
    subcontrol-position: top right;
    image: url(skins:LateNight/palemoon/buttons/btn__spinbox_up.svg) no-repeat;
    }
    WBeatSpinBox::up-button {
      margin: -2px -1px 0px 0px;
      }
    #spinBoxTransition::up-button {
      margin: -2px -3px 0px 0px;
      }
  WBeatSpinBox::down-button,
  #spinBoxTransition::down-button {
    height: 11px;
    subcontrol-position: bottom right;
    image: url(skins:LateNight/palemoon/buttons/btn__spinbox_down.svg) no-repeat;
    }
    WBeatSpinBox::down-button {
      margin: 0px -1px -3px 0px;
      }
    #spinBoxTransition::down-button {
      margin: 0px -3px -1px 0px;
      }


/************** Mixer ***************************************************/

#CrossfaderContainer[highlight="1"] {
  border:  1px solid #b2421c;
}

#MixerDecks {
  padding: 2px 5px 2px 5px;
  }
  #MixerChannel_2Decks_Left {
    margin: 0px 2px;
  }
  #MixerChannel_2Decks_Right {
    margin: 0px 2px;
  }
  #VuAndSlider_4Decks {
    margin-right: 1px;
  }
  #PflBox_4Decks {
    margin: 3px 0px 0px 20px;
  }

  #CrossfaderSwitch_4Decks {
    margin: 0px 4px 3px 0px;
  }
  #Crossfader {
    padding: 0px 0px 0px 1px;
  }

  #CrossfaderButtonContainer_Deck {
    padding: 1px;
    margin: 0px 1px 1px 0px;
    }
  #CrossfaderButtonContainer_Aux {
    padding: 1px;
    margin-left: 3px;
    }

#MixerMainHeadphone {
  }
  #MainControls,
  #HeadphoneControls {
    padding: 4px;
  }
  #MainControls {
    border-radius: 0px 1px 0px 0px;
    }
    #BoothLabelBox {
      padding: 0px 0px 2px 0px;
    }
  #HeadphoneControls {
    border-radius: 0px 0px 1px 0px;
  }

/* All VU meter instances */
#VuMeterChannel_2Decks {
  margin: 0px 9px 2px 9px;
}
#VuMeterChannel_4Decks {
  margin: 6px 0px 6px 11px;
}
#VuMeterMain_2Decks {
  margin: 0px 0px 2px 0px;
}
#VuMeterMain_4Decks {
  margin: 5px 0px;
}

#VuMeterDeck1_Compact,
#VuMeterDeck3_Compact {
  padding: 0px 4px 0px 5px;
  border-left: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
#VuMeterDeck2_Compact,
#VuMeterDeck4_Compact {
  padding: 0px 5px 0px 4px;
  border-right: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
#VuMeterMain_Compact {
  margin-right: 4px;
  margin-left: 4px;
  padding: 0px 5px;
}


/************** Effects *************************************************/

#FxUnitHeaderCollapsed[highlight="0"],
#FxUnitHeaderCollapsed[highlight="1"] {
  padding: 0px;
  border-left: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  }
  #FxUnitHeaderExpanded[highlight="0"],
  #FxUnitHeaderExpanded[highlight="1"] {
    padding: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0px;
    border-bottom: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  #FxUnitHeader {
    padding: 0px 0px 1px 0px;
  }

#FxUnitControlsCollapsed {
  padding: 1px 2px 3px 2px;
  qproperty-layoutSpacing: 2;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0px;
  }
  #FxUnitControlsExpanded {
    padding: 2px 1px 2px 0px;
    border-top: 0px;
    border-left: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
  }

WEffectChainPresetButton::menu-indicator {
  image: url(skins:LateNight/palemoon/buttons/btn__fx_settings.svg) no-repeat center center;
  width: 18px;
  height: 18px;
}

#FxSlotsCollapsed {
  padding: 0px 0px 0px 0px;
  border-right: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
#FxSlotsExpanded {
  padding: 0px 0px 1px 1px;
  border-right: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background: #1e1e20 url(skins:LateNight/palemoon/style/fx_flow_vertical.svg) no-repeat center right;
  }
  #FxSlot1,
  #FxSlot2,
  #FxSlot3 {
    padding: 2px 4px 2px 2px;
  }
  #FxSlotsExpanded #FxSlot1,
  #FxSlotsExpanded #FxSlot2,
  #FxSlotsExpanded #FxSlot3 {
    padding-right: 7px;
  }

#FxParametersContainer {
  padding: 5px 0px 2px 0px;
}

#FxSlotsCollapsed #FxSlotControls {
  padding: 2px 3px 1px 3px;
}

#FxSlotsExpanded #FxSlotControls {
/* keep height of fx slot with/without effect */
  min-height: 47px;
  padding: 2px 7px 1px 3px;
}

#FxFocusButtonBox {
  margin-right: 3px;
}

WPushButton#FxSuperLinkButton,
WPushButton#FxSuperLinkInvertButton {
  border-radius: 3px;
  margin: 1px 1px 0px 0px;
}

WEffectSelector:!editable,
WEffectSelector:!editable:on {
  /* If you use margin top/bottom 0, the combo box shrinks in width (go figure) and
      names start getting cut off. Adding explicit padding improves this. */
  padding: 3px 0px 1px 5px;
  margin: 0px;
}
#fadeModeCombobox:!editable,
#fadeModeCombobox:!editable:on {
  min-height: 17px;
  max-height: 17px;
  padding: 2px 0px 0px 5px;
  margin: 4px 1px 4px 1px;
  }
  /* selected item */
  WEffectSelector::checked,
  WEffectChainPresetSelector::checked,
  #fadeModeCombobox::checked {
    /* not applied
    padding-left: 5px;  */
    padding: 0px;
    margin: 0px;
  }
  WEffectSelector::down-arrow,
  WEffectChainPresetSelector::down-arrow,
  #fadeModeCombobox::down-arrow,
  /* Arrow size is set in C++ to match the library font size */
  WSearchLineEdit::down-arrow {
    image: url(skins:LateNight/palemoon/buttons/btn__fx_selector_down.svg);
    width: 16px;
    height: 24px;
  }


/************** Sampler *************************************************/

#SamplerExpandBox {
  padding: 0px 1px 0px 1px;
}

#SamplerMini {
  padding: 0px 1px 1px 0px;
  }
  #SamplerPlayBoxMini {
    padding: 1px;
  }
  #SamplerTitleBoxMini {
    padding: 0px 0px 0px 0px;
  }
  #SamplerTitleMini {
    padding: 2px 0px 0px 0px;
  }
  #SamplerBpmMini {
    margin-left: 2px;
  }

#Sampler {
  padding: 0px 0px 0px 1px;
  }
  #SamplerTitleRow {
    border-width: 0px 1px 0px 0px;
    padding-right: 2px;
    }
    #SamplerTitleBox {
      }
      #SamplerTitle {
        padding: 3px 3px 1px 4px;
      }
    #SamplerTitleBpmSeparator {
      min-width: 0px;
      max-width: 0px;
      border-right: 1px solid #292929;
      border-left: 1px solid #0c0c0c;
      background: transparent;
    }

  #SamplerRows23 {
    }
    #SamplerPlayRow {
    }
    #SamplerPlayBox {
      padding: 1px 2px 1px 0px;
    }

    #Sampler #OverviewBox {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    #SamplerSettingsContainer {
      }
      #SamplerSettings {
        border-width: 1px 0px 1px 0px;
        padding: 0px 0px 2px 0px;
      }

    #SamplerButtons {
      }
      #SamplerHotcues {
        padding: 1px 0px 2px 0px;
      }

    #SamplerGainPflVu_Container {
      border-top: 1px solid #0c0c0c;
      border-right: 1px solid #292929;
      border-left: 1px solid #0c0c0c;
      border-top-right-radius: 1px;
      }
      #SamplerGainPflVu {
        border-top: 1px solid #2c2c2c;
        border-right: 1px solid #0c0c0c;
        border-left: 1px solid #292929;
        padding-bottom: 2px;
        }
        #SamplerGain {
          padding: 0px 0px 0px 1px;
          border-width: 1px 0px 0px 0px;
        }
        #SamplerPfl {
          padding: 0px 5px 0px 6px;
        }
        #SamplerVU {
          padding: 2px 3px 0px 1px;
          border-width: 1px 1px 0px 0px;
        }

    #SamplerRateControls {
      padding: 1px 1px 1px 0px;
      }
      #SamplerPitchSlider {
        padding: 0px 0px 1px 0px;
      }


/************** MicAux **************************************************/

#MicDuckingContainer {
  }
  #MicDuckingModeBox {
    padding: 2px 2px 0px 2px;
  }
  #MicDuckingStrengthBox {
    padding: 1px 0px 4px 0px;
  }

#MicAuxMainControls {
  border-radius: 2px;
  padding: 0px 1px 0px 2px;
  border-bottom-left-radius: 1px;
  border-top-right-radius: 1px;
  }
  #MicAuxLabel {
    padding: 3px 0px 3px 1px;
  }

  #AuxPlayBox,
  #MicTalkBox {
    padding: 0px 0px 2px 0px;
  }

  #MicAuxAddBox {
    margin: 1px 0px 1px 1px;
  }

  #MicAuxVUMeter {
    padding: 4px 1px 1px 0px;
    margin-left: 2px;
  }

#MicAuxSubControls {
  border-width: 0px;
  padding: 0px 2px 3px 3px;
  }
  #MicAuxFxButtons {
    padding: 2px 0px;
  }

#MicAuxAddFrame {
  padding: 2px 4px 4px 4px;
}


/************** PreviewDeck ***************************************************/

#PreviewDeck {
  padding: 2px 1px;
  }

  #PreviewDeckTextBox {
    }
    #PreviewLabel { /* Placeholder when no track is loaded */
      padding-left: 2px;
    }
    #PreviewTitle {
      margin: 0px 2px 0px 0px;
    }
    #PreviewBPM {
      padding-left: 2px;
    }
    #PreviewEjectBox {
      padding-bottom: 2px;
    }

  #PreviewDeck #OverviewBox {
    margin: 1px 2px 0px 2px;
  }


/************** SkinSettings **************************************************/

#SkinSettings {
  padding: 3px;
  border-top: 1px solid #585858;
  border-bottom: 1px solid #585858;
  border-left: 1px solid #585858;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

#DeckSizeSettings {
  margin: 2px 0px 0px 0px;
  }
  #DeckSizeToggles {
    padding: 0px 0px 0px 0px;
    }
    #SkinSettingsNumToggle {
      margin-left: 1px;
    }

#SkinSettingsCategory {
  padding: 2px 5px 7px 3px;
  }
  #SkinSettingsSubMenu {
    padding: 0px 0px 0px 13px;
  }
  #CategoryLabel {
    padding: 3px 0px 2px 0px;
  }
  #SkinSettingsLabelButton {
    padding: 0px 0px 0px 3px;
  }

  #SamplerLoadSaveBox {
    padding-left: 18px;
  }

#SubmenuCover,
#DeckSizeCover[highlight="0"] {
  background-color: rgba(15, 15, 15, 180);
}
#DeckSizeCover[highlight="1"] {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 rgba(15, 15, 15, 220),
    stop: 0.70 rgba(15, 15, 15, 220),
    stop: 0.71 transparent,
    stop: 1 transparent);
}
#SkinSettingsMixerToggle {
  background-color: rgba(15, 15, 15, 255);
}

/* Cover for the beatgrid edit buttons in the waveform container
   and the CurPos button in the deck settings near the overview.
   Hue has to match the bg color of the buttons want to we cover */
#BeatEditCover {
  background-color: rgba(21, 21, 23, 180);
}
#BeatEditCoverDecks {
  background-color: rgba(25, 25, 26, 180);
}
/*********************************************************************
******************* Container layouts, margins etc. *****************/





/************** font colors **************************************************/

WLabel#FxUnitLabel,
WLabel#MicAuxLabel,
WLabel#MicAuxLabelUnconfigured,
WEffectSelector,
WEffectChainPresetSelector,
#fadeModeCombobox {
  font-weight: 500;
}

/* Ivory */
#Deck1 #TitleText,
  #Deck1 #ArtistText,
  #Deck1 #BpmText,
  #Deck1 #KeyText,
  #DeckCompact1 #TitleText,
  #DeckCompact1 #ArtistText,
  #DeckCompact1 #BpmText,
  #DeckCompact1 #KeyText,
  #DeckMini1 #TitleTextSmall,
  #DeckMini1 #ArtistTextSmall,
  #DeckMini1 #BpmTextSmall,
  #DeckMini1 #KeyTextSmall,
#Deck2 #TitleText,
  #Deck2 #ArtistText,
  #Deck2 #BpmText,
  #Deck2 #KeyText,
  #DeckCompact2 #TitleText,
  #DeckCompact2 #ArtistText,
  #DeckCompact2 #BpmText,
  #DeckCompact2 #KeyText,
  #DeckMini2 #TitleTextSmall,
  #DeckMini2 #ArtistTextSmall,
  #DeckMini2 #BpmTextSmall,
  #DeckMini2 #KeyTextSmall,
#MicAuxLabel,
#SamplerTitle, #SamplerTitleMini,
#MainMenu QMenu,
#MainMenu QMenu::item,
#MainMenu QMenu QCheckBox,
WSearchLineEdit,
WTime,
#PreviewDeckTextBox, #PreviewTitle, #PreviewBPM,
WTrackTableView,
#LibraryBPMButton::item,
#LibraryPlayedCheckbox::item,
WLibraryTextBrowser,
WLibrarySidebar,
#LibraryFeatureControls QLabel,
#LibraryFeatureControls QPushButton,
#LibraryFeatureControls QRadioButton,
/* Tooltip and menus */
QToolTip,
WLibrarySidebar QMenu,
WTrackTableViewHeader QMenu,
WTrackTableViewHeader QMenu QCheckBox,
WLibraryTextBrowser QMenu,
WTrackMenu,
WTrackMenu QMenu,
WTrackMenu QMenu QCheckBox,
WTrackMenu WStarRating,
WEffectChainPresetButton QMenu,
WEffectChainPresetButton QMenu QCheckBox,
QLineEdit QMenu,
QPlainTextEdit QMenu,
WCueMenuPopup,
WCueMenuPopup QLabel,
#CueLabelEdit,
WCoverArtMenu {
  color: #c2b3a5;
}
/* Override the 'missing' color in Tracks > Missing,
   it's not useful there */
#DlgMissing WTrackTableView {
  qproperty-trackMissingColor: #c2b3a5;
}

  /* dim ivory / light brown */
  #Deck1 WStarRating, #DeckCompact1 WStarRating,
  #Deck2 WStarRating, #DeckCompact2 WStarRating,
  #SkinSettingsLabelButton, #CategoryLabel,
  #SkinSettingsButton,
  #SkinSettingsNumToggle,
  #SkinSettingsNumToggleHeader[displayValue="1"],
  #SkinSettingsMixerToggle,
  #SkinSettingsText {
    color: #988f86;
  }
  #SkinSettingsNumToggleHeader[displayValue="0"] {
    color: #756e6c;
  }
WEffectSelector:!editable,
WEffectSelector:!editable:on,
WEffectChainPresetSelector:!editable,
WEffectChainPresetSelector:!editable:on,
#fadeModeCombobox:!editable,
#fadeModeCombobox:!editable:on {
  color: #918273;
  }
  WEffectSelector:!editable,
  WEffectSelector:!editable:on,
  #fadeModeCombobox:!editable,
  #fadeModeCombobox:!editable:on {
    /* use slightly larger labels than in Classic */
    font-size: 14px;
  }
  /* dim² ivory */
  #SamplerBpm, #SamplerBpmMini,
  WTrackTableViewHeader {
    color: #766b65;
  }

  WBeatSpinBox,
  #spinBoxTransition {
    color: #a7998b;
  }

/* pale blue */
#Deck3 #TitleText,
  #Deck3 #ArtistText,
  #Deck3 #BpmText,
  #Deck3 #KeyText,
  #DeckCompact3 #TitleText,
  #DeckCompact3 #ArtistText,
  #DeckCompact3 #BpmText,
  #DeckCompact3 #KeyText,
  #DeckMini3 #TitleTextSmall,
  #DeckMini3 #ArtistTextSmall,
  #DeckMini3 #BpmTextSmall,
  #DeckMini3 #KeyTextSmall,
#Deck4 #TitleText,
  #Deck4 #ArtistText,
  #Deck4 #BpmText,
  #Deck4 #KeyText,
  #DeckCompact4 #TitleText,
  #DeckCompact4 #ArtistText,
  #DeckCompact4 #BpmText,
  #DeckCompact4 #KeyText,
  #DeckMini4 #TitleTextSmall,
  #DeckMini4 #ArtistTextSmall,
  #DeckMini4 #BpmTextSmall,
  #DeckMini4 #KeyTextSmall {
  color: #85bdbb;
  }
  #Deck3 WStarRating, #DeckCompact3 WStarRating,
  #Deck4 WStarRating, #DeckCompact4 WStarRating {
    color: #559b99;
  }

/* Grey for FxUnit labels */
#FxUnitLabel,
#MicAuxLabelUnconfigured {
  color: #686666;
  }

/* When the Fx unit is currently focused = accessible from the controller
  indicate that with a bright colored bar and colorize the unit label */
#FxUnit1 #FxUnitLabel[highlight="1"],
#FxUnit2 #FxUnitLabel[highlight="1"] {
  color: #518f00;
  }
  #FxUnit1 #FxUnitControllerInputIndicator[highlight="1"],
  #FxUnit2 #FxUnitControllerInputIndicator[highlight="1"] {
    background-color: #518f00;
  }
#FxUnit3 #FxUnitLabel[highlight="1"],
#FxUnit4 #FxUnitLabel[highlight="1"] {
  color: #028392;
  }
  #FxUnit3 #FxUnitControllerInputIndicator[highlight="1"],
  #FxUnit4 #FxUnitControllerInputIndicator[highlight="1"] {
    background-color: #028392;
  }

#MainMenu,
#MainMenu::item {
  color: #888;
}

/* Grey. default for all deck labels */
#MainMenu,
#MainMenu QMenu,
#MainMenu QMenu QCheckBox,
#PlayPositionText, #PlayPositionTextSmall,
#DurationText,
#RateText, #RateRangePrefix, #RateRangeText,
#MixerMainHeadphone #FxAssignButtons WPushButton[displayValue="0"],
#PreviewLabel,
WSearchLineEdit QAbstractScrollArea,
WEffectSelector QAbstractScrollArea,
WEffectChainPresetSelector QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea,
#GuiToggleButton[displayValue="0"],
#RecDuration[highlight="0"],
#BroadcastButton[displayValue="0"],
#SkinSettingsToggle[displayValue="0"],
#LibraryFeatureControls QLabel {
  color: #777;
}

/* Darker grey for knob labels & inactive decks/units */
#KnobLabel,
#FxKnobLabel,
#FxButtonLabel,
WPushButton#VinylStatus[displayValue="0"],
#VinylCueButton[displayValue="0"],
#VinylModeButton,
#PassthroughButton[displayValue="0"],
#FxAssignButtons WPushButton[displayValue="0"] {
  color: #666;
  }

/* Even darker grey for knob labels in main/headphone mixer */
#MixerMainHeadphone #KnobLabel,
#MixerMainHeadphone #FxAssignButtons WPushButton[displayValue="0"] {
  color: #555;
}

#LatencyLabel {
  color: #444;
}

WPushButton#VinylStatus[displayValue="1"], /* enabled (green bg) */
WPushButton#VinylStatus[displayValue="2"], /* end of record (blinking yellow bg) */
WPushButton#VinylStatus[displayValue="3"], /* needle skip detected (pink bg) */
#VinylCueButton[displayValue="1"],
#VinylCueButton[displayValue="2"],
#PassthroughButton[displayValue="1"],
#FxAssignButtons WPushButton[displayValue="1"],
#GuiToggleButton[displayValue="1"],
#GuiToggleButton[displayValue="2"],
#BroadcastButton[displayValue="1"], /* connecting */
#BroadcastButton[displayValue="2"], /* broadcasting */
#BroadcastButton[displayValue="3"], /* failure */
#BroadcastButton[displayValue="4"], /* warning */
#RecDuration[highlight="1"],  /* initializing */
#RecDuration[highlight="2"],  /* recording */
#SkinSettingsToggle[displayValue="1"],
QPushButton#pushButtonAutoDJ:checked,
QPushButton#pushButtonRepeatPlaylist:checked,
QPushButton#pushButtonAnalyze:checked,
QPushButton#pushButtonRecording:checked {
  color: #000;
}

#LibraryFeatureControls QPushButton:!enabled {
  color: #444443;
}

#SkinSettingsButton,
#SkinSettingsNumToggle,
#SkinSettingsText,
#SkinSettingsMixerToggle {
  color: #d2d2d2;
  }
  #SkinSettingsNumToggle[value="1"],
  #SkinSettingsNumToggleHeader[displayValue="1"] {
    text-decoration: underline;
  }

/************** font colors **************************************************/
/************** font settings *************************************************/




/************** Button styles *************************************************
*************** Button borders ************************************************/

/* crop shadow on the left border for all buttons in Fx assign and vinyl control grid
  (except leftmost button in each grid > overwritten in the block below) */
#VinylModeButton,
#VinylCueButton[displayValue="0"],
#PassthroughButton[displayValue="0"],
#SyncLeader[value="0"],
#FxAssignButtons WPushButton[displayValue="0"] {
  outline: none;
  border-width: 2px 2px 2px 1px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_grid.svg) 2 2 2 1;
  }
  /* Active */
  #VinylCueButton[displayValue="1"],
  #VinylCueButton[displayValue="2"],
  #PassthroughButton[displayValue="1"],
  #SyncLeader[value="1"],
  #SyncLeader[value="2"],
  #FxAssignButtons WPushButton[displayValue="1"] {
    outline: none;
    border-width: 2px 2px 2px 1px;
    border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_grid_active.svg) 2 2 2 1;
  }

#GuiToggleButton[displayValue="0"],
#RecFeedback[displayValue="0"],
#BroadcastButton[displayValue="0"],
#SkinSettingsToggle[displayValue="0"],
#KeyMatchReset[displayValue="0"],
WPushButton#VinylStatus[displayValue="0"],
#SyncDeck[displayValue="0"],
WPushButton#FxAssignButton1[displayValue="0"],
WEffectSelector:!editable,
#fadeModeCombobox:!editable,
#LibraryFeatureControls QPushButton:enabled,
#CueDeleteButton,
#CueSavedLoopButton {
  outline: none;
  border-width: 2px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library.svg) 2 2 2 2;
  }
  /*
  WPushButton#BpmTap[displayValue="1"], */
  WPushButton#VinylStatus[displayValue="1"],
  WPushButton#VinylStatus[displayValue="2"],
  WPushButton#VinylStatus[displayValue="3"],
  #SyncDeck[displayValue="1"],
  WPushButton#FxAssignButton1[displayValue="1"],
  #KeyMatchReset[pressed="true"],
  #GuiToggleButton[displayValue="1"],
  #RecFeedback[displayValue="1"],
  #RecFeedback[displayValue="2"],
  #RecFeedback[displayValue="3"],
  #BroadcastButton[displayValue="1"],
  #BroadcastButton[displayValue="2"],
  #BroadcastButton[displayValue="3"],
  #BroadcastButton[displayValue="4"],
  #SkinSettingsToggle[displayValue="1"],
  #LibraryFeatureControls QPushButton:pressed
  QPushButton#pushButtonAutoDJ:checked,
  QPushButton#pushButtonRepeatPlaylist:checked,
  QPushButton#pushButtonAnalyze:checked,
  QPushButton#pushButtonRecording:checked,
  WEffectSelector:!editable:on,
  #fadeModeCombobox:!editable:on,
  #CueDeleteButton[pressed="true"],
  #CueSavedLoopButton[pressed="true"],
  #CueSavedLoopButton:checked {
    border-width: 2px;
    border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library_active.svg) 2 2 2 2;
  }

  #LibraryFeatureControls QPushButton:!enabled {
    outline: none;
    border-width: 2px;
    border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library_disabled.svg) 2 2 2 2;
  }

#KeyUp {
  border-width: 1px 2px 0px 2px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library.svg) 1 2 12 2;
  }
  #KeyUp[pressed="true"] {
    border-width: 1px 2px 0px 2px;
    border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library_active.svg) 1 2 12 2;
  }
#KeyDown {
  border-width: 0px 2px 1px 2px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library.svg) 12 2 1 2;
  }
  #KeyDown[pressed="true"] {
    border-width: 0px 2px 1px 2px;
    border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library_active.svg) 12 2 1 2;
  }

#BeatgridControls WPushButton, WPushButton#BeatgridControlsToggle,
#DeckRow_5_LoopCuesTransport WPushButton,
#RateControls WPushButton,
WPushButton#PlayDeck,
WPushButton#PreviewIndicator,
WPushButton#PlayIndicator,
WPushButton#CueDeck,
#PlayCueMini WPushButton,
WPushButton#LoopActivate,
WPushButton#RateControls WPushButton,
WPushButton#SyncSampler,
#MixerContainer WPushButton,
#FxUnitContainer WPushButton,
#Sampler WPushButton,
#SamplerMini WPushButton,
#MicAuxRack WPushButton,
WPushButton#PlayPreview {
  /* Limit background-color area to button area designed in SVG backpath. */
  margin: 1px;
  /* just to be sure the colored background doesn't overlap the rounded SVG border */
  border-radius: 2px;
}

WPushButton#FxExpand,
WPushButton#SamplerExpand,
#FxAssignButtons WPushButton,
#VinylControls WPushButton,
#KeyControls WPushButton,
WPushButton#SyncDeck,
WPushButton#SyncLeader,
#SamplerSettings WPushButton,
#SamplerSettingsMini WPushButton,
WPushButton#CrossfaderButton,
#LibExpand,
#ToolBar WPushButton {
  margin: 0px;
  border-radius: 0px;
}



/************** button background colors **************************************/

/* top-level buttons in transport, fx, micaux and others */
#DeckRow_5_LoopCuesTransport WPushButton[displayValue="0"],
#PlayCueMini WPushButton[displayValue="0"],
WPushButton#PlayIndicator[displayValue="0"],
WPushButton#CueDeck[displayValue="0"],
#SamplerPlayBox WPushButton#PreviewIndicator,
WPushButton#LoopActivate[displayValue="0"],
#KeyControls WPushButton[displayValue="0"],
#EQKillButtonBox WPushButton[displayValue="0"],
WPushButton#QuickEffectButton[displayValue="0"],
WPushButton#FxToggleButton[displayValue="0"],
#MicAuxUnit WPushButton[displayValue="0"],
#MicDuckingContainer WPushButton[displayValue="0"],
WBeatSpinBox,
WBeatSpinBox::up-button,
WBeatSpinBox::down-button {
  background-color: #121213;
  }
  /* dim buttons in top-level containers */
  #LoopControls WPushButton[displayValue="0"],
  WPushButton#LoopAnchor[displayValue="1"],
  #BeatjumpControls WPushButton[displayValue="0"],
  WPushButton#SyncDeck[value="0"],
  WPushButton#SyncLeader[value="0"],
  WBeatSpinBox::up-button,
  WBeatSpinBox::down-button,
  WPushButton#LoopActivate[displayValue="0"], /* in compact deck */
  WTrackTableViewHeader,
  WTrackTableViewHeader::section {
    background-color: #171719;
  }
  /* make Fx parameter buttons brighter so they stand out in 'fx focus' mode
    (parameters row of focused effect is marked = dark bg, colored border) */
  WPushButton#FxParameterButton[displayValue="0"] {
    background-color: #2a2a2c;
  }

  /* even buttons in 2nd level containers */
  #FxAssignButtons WPushButton[displayValue="0"],
  #VinylControls WPushButton[displayValue="0"],
  #KeyControls WPushButton[displayValue="0"],
  WPushButton#VinylModeButton[displayValue="1"],
  WPushButton#VinylModeButton[displayValue="2"],
  WPushButton#HotcueButton[displayValue="0"],
  WPushButton#SpecialCueButton[displayValue="0"],
  #RateControls WPushButton[displayValue="0"],
  WPushButton#PflButton[displayValue="0"],
  WPushButton#MixModeButton[displayValue="0"],
  WPushButton#MixModeButton[displayValue="1"],
  WEffectSelector,
  WEffectChainPresetSelector,
  #fadeModeCombobox,
  #SamplerContainer WPushButton#SyncSampler[displayValue="0"],
  #SamplerContainer WPushButton#PflButton[displayValue="0"],
  #MicAuxUnit WPushButton#PflButton[displayValue="0"],
  WPushButton#MicAuxAdd {
    background-color: #1e1e20;
  }
  /* bright buttons in dimmed containers
  #BeatgridControls WPushButton[displayValue="0"], */
  #CueDeleteButton,
  #CueSavedLoopButton,
  #SplitCue[displayValue="0"],
  #PlayPreview[displayValue="0"],
  /* library controls */
  #spinBoxTransition::up-button,
  #spinBoxTransition::down-button,
  QPushButton#pushButtonAutoDJ:enabled:!checked,
  #LibraryFeatureControls QPushButton:enabled {
    background-color: #222;
  }
  /* dark buttons in toolbar */
  #ToolBar WPushButton[displayValue="0"],
  #MixerMainHeadphone #FxAssignButtons WPushButton[displayValue="0"] {
    background-color: #151517;
  }

/* Orange for 'active' status */
WPushButton#PlayDeck[displayValue="1"],
WPushButton#PlayDeckMini[displayValue="1"],
WPushButton#PlaySampler[displayValue="1"],
WPushButton#PlayPreview[displayValue="1"],
WPushButton#PlayIndicator[displayValue="1"],
#LibraryPreviewButton:checked,
#CueDeck[displayValue="1"],
WPushButton#Reverse[pressed="true"],
#LoopActivate[value="1"],
#Reloop[value="1"],
#SyncSampler[displayValue="1"],
#SyncDeck[value="1"],
#SyncLeader[value="2"],
#MicTalk[value="1"], #AuxPlay[value="1"],
#MicDucking[value="1"],
#MicDucking[value="2"],
#PassthroughButton[displayValue="1"],
#BroadcastButton[displayValue="4"], /* warning */
QPushButton#pushButtonAutoDJ:checked,
QPushButton#pushButtonAnalyze:checked {
  background-color: #b24c12;
  }
  /* Orange border for Play buttons when previewing from
    Cue or Hotcue */
  WPushButton#PreviewIndicator[value="1"] {
    border: 3px solid #b24c12;
    /* work around round borders being painted outside the actual border area */
    border-radius: 0px;
  }
/* dim orange for momentary controls */
#KeyControls WPushButton[pressed="true"],
#SyncLeader[value="1"],
WPushButton#LoopIn[pressed="true"],
WPushButton#LoopOut[pressed="true"],
WPushButton#LoopAnchor[pressed="true"],
#BeatjumpControls WPushButton[value="1"],
#RateControls WPushButton[value="1"],
#BeatgridControls WPushButton[pressed="true"]/*,
#CueDeleteButton[pressed="true"],
#CueSavedLoopButton[pressed="true"],
#CueSavedLoopButton:checked*/ {
  background-color: #7d350d;
  }

/* Red */
#EQKillButtonBox WPushButton[displayValue="1"],
QPushButton#pushButtonRecording:checked,
#RecFeedback[displayValue="2"] {
  background-color: #a80000;
}

/* Green for Fx toggles, QuickEffect + Fx12 */
#FxUnit1 #FxToggleButton[displayValue="1"],
#FxUnit2 #FxToggleButton[displayValue="1"],
WPushButton#VinylStatus[displayValue="1"], /* enabled, OK */
#BroadcastButton[displayValue="2"] {
  background-color: #438225;
  }
  /* Dim green for assign buttons Fx12 */
  WPushButton#QuickEffectButton[displayValue="1"],
  #FxAssignButton1[displayValue="1"],
  #FxAssignButton2[displayValue="1"] {
    background-color: #236b00;
  }
/* Blue for Fx buttons 3/4 */
#FxUnit3 #FxToggleButton[displayValue="1"],
#FxUnit4 #FxToggleButton[displayValue="1"]
WBeatSpinBox::up-button:pressed,
WBeatSpinBox::down-button:pressed,
#spinBoxTransition::up-button:pressed,
#spinBoxTransition::down-button:pressed {
  background-color: #257b82;
  }
  /* Dim blue for assign buttons Fx34 */
  #FxAssignButton3[displayValue="1"],
  #FxAssignButton4[displayValue="1"] {
    background-color: #146674;
  }

WPushButton#FxSuperLinkButton[value="0"],
WPushButton#FxSuperLinkInvertButton[displayValue="0"] {
  background-color: #333;
  }
  #FxSuperLinkInvertButton[displayValue="1"] {
    background-color: #9C0900;
    }

/* Green for Fx1 / Fx2 */
#FxUnit1 #FxSuperLinkButton[value="1"],
#FxUnit2 #FxSuperLinkButton[value="1"] {
  background-color: #236b00;
  }
#FxUnit1 #FxSuperLinkButton[value="2"],
#FxUnit2 #FxSuperLinkButton[value="2"] {
/* a simple way to achieve a partitioning in thirds  */
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #236b00,
    stop: 0.33 #236b00,
    stop: 0.34 #333,
    stop: 1 #333);
  }
#FxUnit1 #FxSuperLinkButton[value="3"],
#FxUnit2 #FxSuperLinkButton[value="3"] {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #333,
    stop: 0.66 #333,
    stop: 0.67 #236b00,
    stop: 1 #236b00);
  }
#FxUnit1 #FxSuperLinkButton[value="4"],
#FxUnit2 #FxSuperLinkButton[value="4"] {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #236b00,
    stop: 0.330000 #236b00,
    stop: 0.340000 #333,
    stop: 0.660000 #333,
    stop: 0.670000 #236b00,
    stop: 1 #236b00);
  }

/* Blue for Fx3 / Fx4 */
#FxUnit3 #FxSuperLinkButton[value="1"],
#FxUnit4 #FxSuperLinkButton[value="1"] {
  background-color: #146674;
  }
#FxUnit3 #FxSuperLinkButton[value="2"],
#FxUnit4 #FxSuperLinkButton[value="2"] {  /*
  a simple way to achieve a partitioning in thirds  */
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #146674,
    stop: 0.33 #146674,
    stop: 0.34 #333,
    stop: 1 #333);
  }
#FxUnit3 #FxSuperLinkButton[value="3"],
#FxUnit4 #FxSuperLinkButton[value="3"] {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #333,
    stop: 0.66 #333,
    stop: 0.67 #146674,
    stop: 1 #146674);
  }
#FxUnit3 #FxSuperLinkButton[value="4"],
#FxUnit4 #FxSuperLinkButton[value="4"] {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #146674,
    stop: 0.330000 #146674,
    stop: 0.340000 #333,
    stop: 0.660000 #333,
    stop: 0.670000 #146674,
    stop: 1 #146674);
  }

/* Yellow */
#RecFeedback[displayValue="1"],     /* initialize recording */
#BroadcastButton[displayValue="1"], /* connecting */
WPushButton#VinylStatus[displayValue="2"] {  /* blinks when the needle reaches the end of the record */
  background-color: #d09300;
}

#SpecialCueButton[value="1"] {
  background-color: #395579;
}

/* pink for error / failure / warning */
#BroadcastButton[displayValue="3"],
#RecFeedback[displayValue="3"],
WPushButton#VinylStatus[displayValue="3"] { /* needle skip detected */
  background-color: #f856e7;
}

/* Grey for GUI toggles */
#GuiToggleButton[displayValue="1"],
#SkinSettingsToggle[displayValue="1"] {
  background-color: #777;
}

/* Grey */
#VinylCueButton[displayValue="1"],
#VinylCueButton[displayValue="2"],
#PflButton[value="1"],
#FxParameterButton[displayValue="1"],
QPushButton#pushButtonRepeatPlaylist:checked {
  background-color: #666;
}

/* Darker grey */
#SplitCue[value="1"] {
  background-color: #555;
}

/* Special flat/invisible buttons */
#BeatgridControlsToggle,
WPushButton#PlayDeck[displayValue="0"],
WPushButton#PlayDeckMini[displayValue="0"],
WPushButton#PlaySampler[displayValue="0"],
#DeckRow_5_LoopCuesTransport WPushButton#PreviewIndicator,
#PlayCueMini WPushButton#PreviewIndicator,
WPushButton#FxFocusButton[displayValue="0"],
#SamplerSettings WPushButton[displayValue="0"],
#SamplerSettingsMini WPushButton[displayValue="0"],
WPushButton#FxExpand[displayValue="0"],
WPushButton#SamplerExpand[displayValue="0"],
WPushButton#CrossfaderButton[displayValue="0"],
WPushButton#CrossfaderButton[displayValue="1"],
WPushButton#RecButton[displayValue="0"],
WPushButton#RecButton[displayValue="1"],
#RecDot,
/* transparent buttons, 0-4 (max button state we have currently) */
/* currently used for VINYL overlay */
WPushButton#Blank[value="0"],
WPushButton#Blank[value="1"],
WPushButton#Blank[value="2"],
WPushButton#Blank[value="3"],
WPushButton#Blank[value="4"] {
  background-color: transparent;
}



/************** Button icons **************************************************/
WPushButton#PlayDeck[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__play_deck.svg) no-repeat center center;
  }
  WPushButton#PlayDeck[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__play_deck_active.svg) no-repeat center center;
  }

#PlayDeckMini[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__play_deck_mini.svg) no-repeat center center;
  }
  #PlayDeckMini[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__pause_deck_mini.svg) no-repeat center center;
  }
#PlaySampler[value="0"],
#PlayPreview[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__play_sampler.svg) no-repeat center center;
  }
  #PlaySampler[value="1"],
  #PlayPreview[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__pause_sampler.svg) no-repeat center center;
  }

#CueDeck[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__cue_deck.svg) no-repeat center center;
  }
  #CueDeck[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__cue_deck_active.svg) no-repeat center center;
  }

#Reverse {
  image: url(skins:LateNight/palemoon/buttons/btn__reverse.svg) no-repeat center center;
  }
  #Reverse[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__reverse_active.svg) no-repeat center center;
  }

#Hotcue1 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__1.svg) no-repeat center center;
  }
  #Hotcue1 WPushButton[displayValue="1"],
  #Hotcue1 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__1_active.svg) no-repeat center center;
  }
  #Hotcue1 WPushButton[displayValue="1"][dark="true"],
  #Hotcue1 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__1_active_dark.svg) no-repeat center center;
  }
  #Hotcue1 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue1 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue1 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue1 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__1_loop.svg) no-repeat center center;
  }

#Hotcue2 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__2.svg) no-repeat center center;
  }
  #Hotcue2 WPushButton[displayValue="1"],
  #Hotcue2 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__2_active.svg) no-repeat center center;
  }
  #Hotcue2 WPushButton[displayValue="1"][dark="true"],
  #Hotcue2 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__2_active_dark.svg) no-repeat center center;
  }
  #Hotcue2 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue2 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue2 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue2 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__2_loop.svg) no-repeat center center;
  }

#Hotcue3 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__3.svg) no-repeat center center;
  }
  #Hotcue3 WPushButton[displayValue="1"],
  #Hotcue3 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__3_active.svg) no-repeat center center;
  }
  #Hotcue3 WPushButton[displayValue="1"][dark="true"],
  #Hotcue3 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__3_active_dark.svg) no-repeat center center;
  }
  #Hotcue3 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue3 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue3 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue3 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__3_loop.svg) no-repeat center center;
  }

#Hotcue4 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__4.svg) no-repeat center center;
  }
  #Hotcue4 WPushButton[displayValue="1"],
  #Hotcue4 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__4_active.svg) no-repeat center center;
  }
  #Hotcue4 WPushButton[displayValue="1"][dark="true"],
  #Hotcue4 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__4_active_dark.svg) no-repeat center center;
  }
  #Hotcue4 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue4 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue4 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue4 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__4_loop.svg) no-repeat center center;
  }

#Hotcue5 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__5.svg) no-repeat center center;
  }
  #Hotcue5 WPushButton[displayValue="1"],
  #Hotcue5 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__5_active.svg) no-repeat center center;
  }
  #Hotcue5 WPushButton[displayValue="1"][dark="true"],
  #Hotcue5 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__5_active_dark.svg) no-repeat center center;
  }
  #Hotcue5 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue5 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue5 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue5 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__5_loop.svg) no-repeat center center;
  }

#Hotcue6 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__6.svg) no-repeat center center;
  }
  #Hotcue6 WPushButton[displayValue="1"],
  #Hotcue6 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__6_active.svg) no-repeat center center;
  }
  #Hotcue6 WPushButton[displayValue="1"][dark="true"],
  #Hotcue6 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__6_active_dark.svg) no-repeat center center;
  }
  #Hotcue6 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue6 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue6 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue6 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__6_loop.svg) no-repeat center center;
  }

#Hotcue7 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__7.svg) no-repeat center center;
  }
  #Hotcue7 WPushButton[displayValue="1"],
  #Hotcue7 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__7_active.svg) no-repeat center center;
  }
  #Hotcue7 WPushButton[displayValue="1"][dark="true"],
  #Hotcue7 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__7_active_dark.svg) no-repeat center center;
  }
  #Hotcue7 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue7 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue7 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue7 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__7_loop.svg) no-repeat center center;
  }

#Hotcue8 WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__8.svg) no-repeat center center;
  }
  #Hotcue8 WPushButton[displayValue="1"],
  #Hotcue8 WPushButton[displayValue="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__8_active.svg) no-repeat center center;
  }
  #Hotcue8 WPushButton[displayValue="1"][dark="true"],
  #Hotcue8 WPushButton[displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__8_active_dark.svg) no-repeat center center;
  }
  #Hotcue8 WPushButton[type="loop"][displayValue="1"][dark="false"],
  #Hotcue8 WPushButton[type="loop"][displayValue="2"][dark="false"],
  #Hotcue8 WPushButton[type="loop"][displayValue="1"][dark="true"],
  #Hotcue8 WPushButton[type="loop"][displayValue="2"][dark="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__8_loop.svg) no-repeat center center;
  }

#SpecialCueButton_intro_start WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__intro_start.svg) no-repeat center center;
  }
  #SpecialCueButton_intro_start WPushButton[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__intro_start_active.svg) no-repeat center center;
  }
#SpecialCueButton_intro_end WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__intro_end.svg) no-repeat center center;
  }
  #SpecialCueButton_intro_end WPushButton[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__intro_end_active.svg) no-repeat center center;
  }
#SpecialCueButton_outro_start WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__outro_start.svg) no-repeat center center;
  }
  #SpecialCueButton_outro_start WPushButton[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__outro_start_active.svg) no-repeat center center;
  }
#SpecialCueButton_outro_end WPushButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__outro_end.svg) no-repeat center center;
  }
  #SpecialCueButton_outro_end WPushButton[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__outro_end_active.svg) no-repeat center center;
  }

#LoopActivate[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__loop.svg) no-repeat center center;
  }
  #LoopActivate[displayValue="1"], #LoopActivate[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__loop_active.svg) no-repeat center center;
  }
#Reloop[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__reloop.svg) no-repeat center center;
  }
  #Reloop[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__reloop_active.svg) no-repeat center center;
  }

#LoopIn {
  image: url(skins:LateNight/palemoon/buttons/btn__loop_in.svg) no-repeat center center;
  }
  #LoopIn[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__loop_in_active.svg) no-repeat center center;
  }
#LoopOut {
  image: url(skins:LateNight/palemoon/buttons/btn__loop_out.svg) no-repeat center center;
  }
  #LoopOut[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__loop_out_active.svg) no-repeat center center;
  }
#LoopAnchor[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__loop_anchor_start.svg) no-repeat center center;
  }
  #LoopAnchor[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__loop_anchor_end.svg) no-repeat center center;
  }

#JumpForward {
  image: url(skins:LateNight/palemoon/buttons/btn__beatjump_right.svg) no-repeat center center;
  }
  #JumpForward[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__beatjump_right_active.svg) no-repeat center center;
  }
#JumpBack {
  image: url(skins:LateNight/palemoon/buttons/btn__beatjump_left.svg) no-repeat center center;
  }
  #JumpBack[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__beatjump_left_active.svg) no-repeat center center;
  }

/* Key buttons */
#KeyMatchReset {
  image: url(skins:LateNight/palemoon/buttons/btn__key_match.svg) no-repeat center center;
  }
  #KeyMatchReset[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__key_match_active.svg) no-repeat center center;
  }

#KeyUp {
  image: url(skins:LateNight/palemoon/buttons/btn__key_up.svg) no-repeat center center;
  }
  #KeyUp[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__key_up_active.svg) no-repeat center center;
  }

#KeyDown {
  image: url(skins:LateNight/palemoon/buttons/btn__key_down.svg) no-repeat center center;
  }
  #KeyDown[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__key_down_active.svg) no-repeat center center;
  }

/* Rate buttons */
#SyncDeck[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__sync_deck.svg) no-repeat center center;
  }
  #SyncDeck[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__sync_deck_active.svg) no-repeat center center;
  }

#SyncLeader[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__sync_leader.svg) no-repeat center center;
  }
  #SyncLeader[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__sync_leader_implicit.svg) no-repeat center center;
  }
  #SyncLeader[value="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__sync_leader_explicit.svg) no-repeat center center;
  }

  #SyncSampler {
    image: url(skins:LateNight/palemoon/buttons/btn__sync_sampler.svg) no-repeat center center;
    }
    #SyncSampler[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__sync_sampler_active.svg) no-repeat center center;
    }

  #RatePermUp {
    image: url(skins:LateNight/palemoon/buttons/btn__plus.svg) no-repeat center center;}
  #RatePermUp[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__plus_active.svg) no-repeat center center;
    }

  #RatePermDown {
    image: url(skins:LateNight/palemoon/buttons/btn__minus.svg) no-repeat center center;}
  #RatePermDown[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__minus_active.svg) no-repeat center center;
    }

  #RateTempUp {
    image: url(skins:LateNight/palemoon/buttons/btn__arrow_right_up.svg) no-repeat center center;}
  #RateTempUp[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__arrow_right_up_active.svg) no-repeat center center;
    }
  #RateTempDown {
    image: url(skins:LateNight/palemoon/buttons/btn__arrow_left_down.svg) no-repeat center center;}
  #RateTempDown[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__arrow_left_down_active.svg) no-repeat center center;
    }

  #RateTempUpRev {
    image: url(skins:LateNight/palemoon/buttons/btn__arrow_right_down.svg) no-repeat center center;}
  #RateTempUpRev[pressed="true"] {
    image: url(skins:LateNight/palemoon/buttons/btn__arrow_right_down_active.svg) no-repeat center center;
    }

  #RateTempDownRev {
    image: url(skins:LateNight/palemoon/buttons/btn__arrow_left_up.svg) no-repeat center center;
    }
    #RateTempDownRev[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__arrow_left_up_active.svg) no-repeat center center;
    }

/* Mixer buttons */
#PflButton[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__pfl.svg) no-repeat center center;
  }
  #PflButton[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__pfl_active.svg) no-repeat center center;
  }

#QuickEffectButton[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__star.svg) no-repeat center center;
}

/* EQ Kill button icons H / M / L */
#EQKillButton_High[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__eq_kill_high.svg) no-repeat center center;
}
#EQKillButton_Mid[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__eq_kill_mid.svg) no-repeat center center;
}
#EQKillButton_Low[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__eq_kill_low.svg) no-repeat center center;
}

/* EQ Kill / QuickEffect dots */
#EQKillDot[displayValue="0"],
#QuickEffectDot[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__eq_kill_dot_off.svg) no-repeat center center;
  }
  #EQKillDot[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__eq_kill_dot_active_red.svg) no-repeat center center;
  }
  #QuickEffectDot[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__eq_kill_dot_active_green.svg) no-repeat center center;
  }

#RateCenter[highlight="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__rate_center_off.svg) no-repeat center center;
  }
  #RateCenter[highlight="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__rate_center_cyan.svg) no-repeat center center;
  }

#SplitCue[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__split.svg) no-repeat center center;
  }
  #SplitCue[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__split_active.svg) no-repeat center center;
  }

#FxExpand[value="0"],
#SamplerExpand[value="0"],
#LibExpand[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__expand_dim.svg) no-repeat center center;
  }
  #FxExpand[value="1"],
  #SamplerExpand[value="1"],
  #LibExpand[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__collapse_dim.svg) no-repeat center center;
  }

#MixModeButton[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__fx_mixmode_d-w.svg) no-repeat center center;
  }
  #MixModeButton[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__fx_mixmode_d+w.svg) no-repeat center center;
  }

#FxToggleButton[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__fx_toggle.svg) no-repeat center center;
  }
  #FxToggleButton[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__fx_toggle_active.svg) no-repeat center center;
  }

#FxFocusButton[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__fx_focus.svg) no-repeat center center;
  }
  #FxFocusButton[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__fx_focus_active.svg) no-repeat center center;
  }

/* deck controls for decks 1-4 and samplers */
#CurposButton12[displayValue="0"], #CurposButton34[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__beat_curpos.svg) no-repeat center center;
  }
  #CurposButton12[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__beat_curpos_active_12.svg) no-repeat center center;
  }
  #CurposButton34[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__beat_curpos_active_34.svg) no-repeat center center;
  }

  #EjectButton12[displayValue="0"], #EjectButton34[displayValue="0"] {
    image: url(skins:LateNight/palemoon/buttons/btn__eject.svg) no-repeat center center;
    }
    #EjectButton12[value="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__eject_active_12.svg) no-repeat center center;
    }
    #EjectButton34[value="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__eject_active_34.svg) no-repeat center center;
    }

  #RepeatButton12[displayValue="0"], #RepeatButton34[displayValue="0"] {
    image: url(skins:LateNight/palemoon/buttons/btn__repeat.svg) no-repeat center center;
    }
    #RepeatButton12[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__repeat_active_12.svg) no-repeat center center;
    }
    #RepeatButton34[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__repeat_active_34.svg) no-repeat center center;
    }

  #QuantizeButton12[displayValue="0"], #QuantizeButton34[displayValue="0"] {
    image: url(skins:LateNight/palemoon/buttons/btn__quantize.svg) no-repeat center center;
    }
    #QuantizeButton12[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__quantize_active_12.svg) no-repeat center center;
    }
    #QuantizeButton34[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__quantize_active_34.svg) no-repeat center center;
    }

  #SlipmodeButton12[displayValue="0"], #SlipmodeButton34[displayValue="0"] {
    image: url(skins:LateNight/palemoon/buttons/btn__slip.svg) no-repeat center center;
    }
    #SlipmodeButton12[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__slip_active_12.svg) no-repeat center center;
    }
    #SlipmodeButton34[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__slip_active_34.svg) no-repeat center center;
    }

  #KeylockButton12[displayValue="0"], #KeylockButton34[displayValue="0"] {
    image: url(skins:LateNight/palemoon/buttons/btn__keylock.svg) no-repeat center center;
    }
    #KeylockButton12[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__keylock_active_12.svg) no-repeat center center;
    }
    #KeylockButton34[displayValue="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__keylock_active_34.svg) no-repeat center center;
    }

#BeatgridControlsToggle[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__beatgrid_controls_expand.svg) no-repeat center center;
  }
  #BeatgridControlsToggle[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__beatgrid_controls_collapse.svg) no-repeat center center;
  }

  #BpmLockToggle[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__bpm_locked.svg);
    }
    #BpmLockToggle[value="0"] {
      image: url(skins:LateNight/palemoon/buttons/btn__bpm_unlocked.svg);
    }

  #Undo[value="0"] {
    image: url(skins:LateNight/palemoon/buttons/btn__undo.svg) no-repeat center center;
    }
    #Undo[value="1"] {
      image: url(skins:LateNight/palemoon/buttons/btn__undo_active.svg) no-repeat center center;
    }

  #BeatCurposLarge[displayValue="0"] {
    image: url(skins:LateNight/palemoon/buttons/btn__beat_curpos_large.svg) no-repeat center center;
    }
    #BeatCurposLarge[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__beat_curpos_large_active.svg) no-repeat center center;
    }

  #BeatsEarlier {
    image: url(skins:LateNight/palemoon/buttons/btn__beats_earlier.svg) no-repeat center center;
    }
    #BeatsEarlier[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__beats_earlier_active.svg) no-repeat center center;
    }

  #BeatsLater {
    image: url(skins:LateNight/palemoon/buttons/btn__beats_later.svg) no-repeat center center;
    }
    #BeatsLater[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__beats_later_active.svg) no-repeat center center;
    }

  #BeatsSlower {
    image: url(skins:LateNight/palemoon/buttons/btn__beats_slower.svg) no-repeat center center;
    }
    #BeatsSlower[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__beats_slower_active.svg) no-repeat center center;
    }

  #BeatsFaster {
    image: url(skins:LateNight/palemoon/buttons/btn__beats_faster.svg) no-repeat center center;
    }
    #BeatsFaster[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__beats_faster_active.svg) no-repeat center center;
    }
  #HotcuesEarlier {
    image: url(skins:LateNight/palemoon/buttons/btn__beats_hotcues_earlier.svg) no-repeat center center;
    }
    #HotcuesEarlier[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__beats_hotcues_earlier_active.svg) no-repeat center center;
    }
  #HotcuesLater {
    image: url(skins:LateNight/palemoon/buttons/btn__beats_hotcues_later.svg) no-repeat center center;
    }
    #HotcuesLater[pressed="true"] {
      image: url(skins:LateNight/palemoon/buttons/btn__beats_hotcues_later_active.svg) no-repeat center center;
    }

#MicTalk[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__mic_talk.svg) no-repeat center center;
  }
  #MicTalk[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__mic_talk_active.svg) no-repeat center center;
  }

#AuxPlay[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__aux_play.svg) no-repeat center center;
  }
  #AuxPlay[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__aux_play_active.svg) no-repeat center center;
  }

#MicAuxAdd {
  image: url(skins:LateNight/palemoon/buttons/btn__plus_flat.svg) no-repeat center center;
}

#MicDucking[value="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__mic_duck_off.svg) no-repeat center center;
  }
  #MicDucking[value="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__mic_duck_auto.svg) no-repeat center center;
  }
  #MicDucking[value="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__mic_duck_manual.svg) no-repeat center center;
  }

#RecDot[highlight="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__rec_dot.svg) no-repeat center center;
  }
  #RecDot[highlight="1"], #RecDot[highlight="2"] {
    image: url(skins:LateNight/palemoon/buttons/btn__rec_dot_active.svg) no-repeat center center;
  }

#BroadcastButton[displayValue="0"] {
  /* for some reason the alignment isn't rescpected, so the icons
    have to be sized like available area (button size - margin) */
  image: url(skins:LateNight/palemoon/buttons/btn__broadcast_off.svg) no-repeat left top;
  }
  #BroadcastButton[displayValue="1"],
  #BroadcastButton[displayValue="2"],
  #BroadcastButton[displayValue="3"],
  #BroadcastButton[displayValue="4"] {
    image: url(skins:LateNight/palemoon/buttons/btn__broadcast_on.svg) no-repeat left top;
  }

#SkinSettingsToggle[displayValue="0"] {
  image: url(skins:LateNight/palemoon/buttons/btn__settings_off.svg) no-repeat left top;
  }
  #SkinSettingsToggle[displayValue="1"] {
    image: url(skins:LateNight/palemoon/buttons/btn__settings_on.svg) no-repeat left top;
  }

#ToolbarLogo {
  image: url(skins:LateNight/palemoon/style/mixxx_logo_small.svg) no-repeat center center;
}

/* Search bar Clear button */
WSearchLineEdit QToolButton:!focus {
  image: url(skins:LateNight/palemoon/buttons/btn__lib_clear_search.svg);
  }
  WSearchLineEdit QToolButton:focus {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_clear_search_focus.svg);
  }

/* AutoDJ button icons */
QPushButton#pushButtonAutoDJ:!checked {
  image: url(skins:LateNight/palemoon/buttons/btn__autodj_enable_off.svg) no-repeat center center;
  }
  QPushButton#pushButtonAutoDJ:checked {
    image: url(skins:LateNight/palemoon/buttons/btn__autodj_enable_on.svg) no-repeat center center;
  }

QPushButton#pushButtonFadeNow:!enabled {
  image: url(skins:LateNight/palemoon/buttons/btn__autodj_fade_disabled.svg) no-repeat center center;
  }
  QPushButton#pushButtonFadeNow:enabled {
    image: url(skins:LateNight/palemoon/buttons/btn__autodj_fade.svg) no-repeat center center;
  }

QPushButton#pushButtonSkipNext:!enabled {
  image: url(skins:LateNight/palemoon/buttons/btn__autodj_skip_disabled.svg) no-repeat center center;
  }
  QPushButton#pushButtonSkipNext:enabled {
    image: url(skins:LateNight/palemoon/buttons/btn__autodj_skip.svg) no-repeat center center;
  }

QPushButton#pushButtonShuffle:enabled {
  image: url(skins:LateNight/palemoon/buttons/btn__autodj_shuffle.svg) no-repeat center center;
}

QPushButton#pushButtonAddRandomTrack:enabled {
  image: url(skins:LateNight/palemoon/buttons/btn__autodj_addrandom.svg) no-repeat center center;
}

QPushButton#pushButtonRepeatPlaylist:!checked {
  image: url(skins:LateNight/palemoon/buttons/btn__autodj_repeat_playlist_off.svg) no-repeat center center;
  }
  QPushButton#pushButtonRepeatPlaylist:checked {
    image: url(skins:LateNight/palemoon/buttons/btn__autodj_repeat_playlist_on.svg) no-repeat center center;
  }
/* AutoDJ button icons */

/* widgets in cue popup menu */
WCueMenuPopup #CueDeleteButton,
WCueMenuPopup #CueSavedLoopButton {
  width: 24px;
  height: 42px;
}
WCueMenuPopup #CueDeleteButton {
  /* Note: we can't use qproperty-icon here because it's evauated only once
     and therefore won't style the checked state */
  image: url(skins:LateNight/palemoon/buttons/btn__delete.svg);
}
  WCueMenuPopup #CueDeleteButton:pressed {
    background-color: #b24c12;
    outline: none;
    image: url(skins:LateNight/palemoon/buttons/btn__delete_active.svg);
  }

WCueMenuPopup #CueSavedLoopButton {
  image: url(skins:LateNight/palemoon/buttons/btn__loop.svg);
}
WCueMenuPopup #CueSavedLoopButton:pressed,
WCueMenuPopup #CueSavedLoopButton:checked {
  background-color: #b24c12;
  outline: none;
  image: url(skins:LateNight/palemoon/buttons/btn__loop_active.svg);
}

WCueMenuPopup #CueLabelEdit {
  /*border: 1px solid #c2b3a5;*/
  border-radius: 0px;
  background-color: #000;
  selection-color: #000;
  selection-background-color: #ccc;
  padding: 2px;
}

/* Color picker in WCueMenuPopup and WTrackMenu (library and decks) */
WColorPicker QPushButton {
}
WColorPicker QPushButton[checked="false"] {
  outline: none;
  border-width: 2px 2px 2px 2px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_colorpicker.svg) 2 2 2 2;
  margin: 0px;
  padding: 0px;
}
WColorPicker QPushButton[checked="true"] {
  outline: none;
  border-width: 2px 2px 2px 2px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_colorpicker_active.svg) 2 2 2 2;
  margin: 0px;
  padding: 0px;
  /* This property behaves really strange:
  * set to 20px it's 2px too tall
  * set to 18px it's 2px too small
  qproperty-iconSize: 20px;*/
}

/************** Button icons **************************************************/
/************** Button styles *************************************************/



/************** Library *********************************************/

WTrackTableView,
WLibraryTextBrowser,
WLibrarySidebar,
#SkinSettings,
WSearchLineEdit,
WTrackPropertyEditor,
WLibrary QLineEdit,
WLibrary QPlainTextEdit,
#spinBoxTransition,
#LibraryBPMSpinBox {
  background-color: #0f0f0f;
}

WTrackTableView,
WLibraryTextBrowser,
WLibrarySidebar {
  alternate-background-color: #0a0a0a;
/* In selected library rows this sets the color of
  * shapes in star rating delegate
  * focus border of Cover Art and Color delegates
   > See src/library/coverartdelegate.cpp: "option.palette.highlightedText().color();" */
  selection-color: #fff;
  /* background of Color delegate in selected row */
  selection-background-color: #2c454f;
}
WLibrarySidebar {
  outline: none;
}
/* Selected rows in Tree and Tracks table */
WLibrarySidebar::item:selected,
WTrackTableView::item:selected,
#LibraryBPMButton::item:selected,
#LibraryPlayedCheckbox::item:selected {
  color: #fff;
  background-color: #2c454f;
}
WLibrarySidebar::item:selected:focus {
  outline: none;
}
WLibrarySidebar::item:!selected:focus {
  outline: none;
  border: 1px solid white;
}

WTrackTableView:focus,
WLibrarySidebar:focus,
WLibraryTextBrowser:focus {
  border: 1px solid #257b82;
}

WLibrarySidebar {
  show-decoration-selected: 0;
}

/* Use the native focus decoration */
/* This is for all cells including Played and Location */
WTrackTableView,
/* This is for the BPM and play count cells */
WTrackTableView QCheckBox:focus {
  outline: 1px solid #fff;
}
WTrackTableView {
  /* This uses a custom qproperty to set the focus border
     for Color and Cover Art cells, 1px solid, sharp corners.
     See src/library/tableitemdelegate.cpp */
  qproperty-focusBorderColor: #fff;
  /* This is the color used to paint the text of played tracks.
     BaseTrackTableModel::data() uses this to override Qt::ForegroundRole (QBrush). */
  qproperty-trackPlayedColor: #555;
  /* This is the color used to paint the text of missing tracks. */
  qproperty-trackMissingColor: #f856e7; /* pink */
}

/* Table cell in edit mode */
WLibrary QLineEdit,
WLibrary QPlainTextEdit,
#LibraryBPMSpinBox,
/* Track label inline editor in decks and samplers */
WTrackPropertyEditor {
  color: #ddd;
  selection-color: #000;
  selection-background-color: #ccc;
  border: 1px solid #257b82;
  border-radius: 0px;
  }

/* Entire BPM cell */
/* Lock icon at the left */
#LibraryBPMButton::indicator:checked {
  image: url(skins:LateNight/palemoon/buttons/btn__lib_bpm_locked_blue.svg);
  }
#LibraryBPMButton::indicator:unchecked {
  image: url(skins:LateNight/palemoon/buttons/btn__lib_bpm_unlocked_grey.svg);
  }
/* BPM value */
#LibraryBPMButton::item {}
/* BPM spinbox in edit mode */
#LibraryBPMSpinBox {
  border-width: 1px 2px 1px 0px;
  }
  /* When activated, the left border of the spinbox shows an
    artefact of the inactive BPM value. A small margin eliminates that.*/
  #LibraryBPMSpinBox::up-button,
  #LibraryBPMSpinBox::down-button {
    margin-right: 2px;
    }
    #LibraryBPMSpinBox::up-button {
      image: url(skins:LateNight/palemoon/buttons/btn__lib_spinbox_up.svg) no-repeat center center;
      }
    #LibraryBPMSpinBox::down-button {
      image: url(skins:LateNight/palemoon/buttons/btn__lib_spinbox_down.svg) no-repeat center center;
      }

#LibraryPlayedCheckbox::indicator:unchecked {
  image: url(skins:LateNight/palemoon/buttons/btn__lib_checkbox.svg);
}

/* Button in library "Preview" column */
#LibraryPreviewButton {
  margin: 0px;
  padding: 0px;
  border-radius: 2px;
  border: 1px solid transparent;
  }
  #LibraryPreviewButton:!checked {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_preview_play.svg);
    }
  #LibraryPreviewButton:checked {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_preview_pause.svg);
    }


/*********** table header styles *********************************/

WTrackTableViewHeader {
  border-bottom-right-radius: 1px solid #000;
  outline: none;
}

WTrackTableViewHeader::section {
/* Setting an image causes QHeaderView to reserve space for the sort indicator,
   i.e. column titles are truncated, even where no indicators are shown.
   The arrow width and padding are set in style.qss (0.8em + .15em),
   so let's set a negative padding-right to shift the text. This will push the
   reserved space out of the visible region, but the actual arrow will still be visible.
   Now the arrow overlaps the column title again like in Qt5 (bug), so the arrow images
   could use a background-color to cover the text, or a gradient to fade it out gently. */
  padding: 2px -0.95em 0px 3px;
  outline: none;
  border-width: 1px 2px 1px 1px;
  border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library_header.svg) 1 2 1 1;
}

WTrackTableViewHeader::up-arrow,
WTrackTableViewHeader::down-arrow {
  outline: none;
  /* horizontal gradient to fade out the text */
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 transparent,
    stop: 0.2 #171719,
    stop: 1 #171719);
  }
  WTrackTableViewHeader::up-arrow {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_sort_up.svg);
  }
  WTrackTableViewHeader::down-arrow {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_sort_down.svg);
  }





/*********** scrollbars *********************************/
#LibraryContainer QScrollBar,
WEffectSelector QAbstractScrollArea QScrollBar,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar,
WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar,
WSearchLineEdit QAbstractScrollArea QScrollBar {
  border: 0px solid #585858;
  background: #000;
  border-radius: 2px;
  padding: 1px;
  color: #999;
  }
  #LibraryContainer QScrollBar:horizontal,
  WEffectSelector QAbstractScrollArea QScrollBar:horizontal,
  WEffectChainPresetSelector QAbstractScrollArea QScrollBar:horizontal,
  WEffectChainPresetSelector QAbstractScrollArea QScrollBar:horizontal,
  WSearchLineEdit QAbstractScrollArea QScrollBar:horizontal {
    min-width: 12px;
    height: 15px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: #000;
  }
  #LibraryContainer QScrollBar:vertical,
  WEffectSelector QAbstractScrollArea QScrollBar:vertical,
  WEffectChainPresetSelector QAbstractScrollArea QScrollBar:vertical,
  WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar:vertical,
  WSearchLineEdit QAbstractScrollArea QScrollBar:vertical {
    min-height: 12px;
    width: 15px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    color: #b3b3b3;
    background-color: #000;
  }
  #LibraryContainer QScrollBar:vertical {
    border-top: 1px solid #212123;
  }
  /* catch scroll bar of focused treeview like this:
  WLibrarySidebar:focus QScrollBar:vertical {
  }*/
  #LibraryContainer QScrollBar::handle:horizontal,
  WEffectSelector QAbstractScrollArea QScrollBar::handle:horizontal,
  WEffectChainPresetSelector QAbstractScrollArea QScrollBar::handle:horizontal,
  WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar::handle:horizontal,
  WSearchLineEdit QAbstractScrollArea QScrollBar::handle:horizontal {
    background-color: #333338;
    min-width: 25px;
  }
  #LibraryContainer QScrollBar::handle:vertical,
  WEffectSelector QAbstractScrollArea QScrollBar::handle:vertical,
  WEffectChainPresetSelector QAbstractScrollArea QScrollBar::handle:vertical,
  WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar::handle:vertical,
  WSearchLineEdit QAbstractScrollArea QScrollBar::handle:vertical {
    background-color: #333338;
    min-height: 25px;
  }

/* "add-page" and "sub-page" are the gutter of the scrollbar */
#LibraryContainer QScrollBar::add-page,
#LibraryContainer QScrollBar::sub-page,
WEffectSelector QAbstractScrollArea QScrollBar::add-page,
WEffectSelector QAbstractScrollArea QScrollBar::sub-page,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::add-page,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::sub-page,
WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar::add-page,
WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar::sub-page,
WSearchLineEdit QAbstractScrollArea QScrollBar::add-page,
WSearchLineEdit QAbstractScrollArea QScrollBar::sub-page {
  min-width: 15px;
  min-height: 15px;
  background-color: #000;
  border-radius: 2px;
}
/* Turn off buttons */
#LibraryContainer QScrollBar::add-line,
#LibraryContainer QScrollBar::sub-line,
WEffectSelector QAbstractScrollArea QScrollBar::add-line,
WEffectSelector QAbstractScrollArea QScrollBar::sub-line,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::add-line,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::sub-line,
WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar::add-line,
WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar::sub-line,
WSearchLineEdit QAbstractScrollArea QScrollBar::add-line,
WSearchLineEdit QAbstractScrollArea QScrollBar::sub-line {
  width: 0px;
  height: 0px;
  border: 0px;
}

/* Corner in between two scrollbars */
#LibraryContainer QAbstractScrollArea::corner,
WEffectSelector QAbstractScrollArea QScrollBar::corner,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::corner,
WEffectChainPresetButton QMenu QAbstractScrollArea QScrollBar::corner,
WSearchLineEdit QAbstractScrollArea QScrollBar::corner {
  border: 0px;
  border: 0px;
  background-color: #1e1e1e;
}
/*********** scrollbars *********************************/


/*********** library search bar *********************************/
WSearchLineEdit {
  padding: 2px;
  selection-color: #000;
  selection-background-color: #ccc;
  }
  WSearchLineEdit:focus {
    padding: 1px;
    border: 2px solid #257b82;
    border-radius: 0px;
  }
  WSearchLineEdit:disabled {
    background-color: #161617;
    /* hide '---' placeholder text */
    color: #161617;
  }

/************ splitters ***********************/
/* HorizontalSplitter (the splitter itself is horizontal)
  splits
  - Waveforms / Decks/FX/etc
  - Library sidebar / Lib Coverart */
#WaveformSplitter,
#SidebarCoverSplitter {
  padding: 0px;
  margin: 0px;
  }
  #WaveformSplitter::handle,
  #SidebarCoverSplitter::handle {
      image: url(skins:LateNight/palemoon/style/splitter_handle_horizontal.svg);
      height: 9px;
    }
    #WaveformSplitter::handle:pressed,
    #SidebarCoverSplitter::handle:pressed {
    /* doesn't catch hover state:
    #HorizontalSplitter::handle:hover,
    #HorizontalSplitter::handle[hover="true"] */
      image: url(skins:LateNight/palemoon/style/splitter_handle_horizontal_pressed.svg);
    }

/* VerticalSplitter (the splitter itself is vertical)
  splits
  * Library sidebar / Tracks table */
#LibrarySplitter {
  padding: 0px;
  margin: 0px;
  }
  #LibrarySplitter::handle {
    image: url(skins:LateNight/palemoon/style/splitter_handle_vertical.svg);
    padding: 0px;
    margin: 1px 0px 0px 0px;
    /* 'height' works although it's actually the width of the handle */
    height: 6px;
  }
  #LibrarySplitter::handle:pressed {
    image: url(skins:LateNight/palemoon/style/splitter_handle_vertical_pressed.svg);
  }
/************ splitters ***********************/

#LibraryFeatureControls QRadioButton {
  /* bottom margin! */
  margin: 6px 3px 4px 3px;
  }
  #LibraryFeatureControls QRadioButton::indicator:checked {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_radio_button_on_blue.svg) center center;
  }
  #LibraryFeatureControls QRadioButton::indicator:unchecked {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_radio_button_off.svg) center center;
  }

/* Library feature pushbuttons
  Don't use 'WLibrary QPushButton' here, as this would apply padding
  to the Preview & BPM lock buttons as well.
  Define the buttons fore every Library feature instead. */
#LibraryFeatureControls QPushButton {
  margin: 0px 6px 3px 0px;
  }
/* add margin to compensate for frameless library table */
#LibraryFeatureControls QPushButton,
/* #fadeModeCombobox set below */
#spinBoxTransition {
  margin-top: 4px;
}
QLabel#labelProgress, /* Analysis progress */
QLabel#labelSelectionInfo /* AutoDJ track selection info */ {
  margin: 4px 5px 5px 1px;
}

WLibrarySidebar {
  show-decoration-selected: 0;
}
/* triangle for closed/opened branches in treeview */
/* closed */
WLibrarySidebar::branch:closed:has-children:!has-siblings:!selected,
WLibrarySidebar::branch:closed:has-children:has-siblings:!selected {
/* Suppresses that selected sidebar items branch indicator shows wrong color when
    out of focus ; #6040 */
  border-image: none;
  image: url(skins:LateNight/palemoon/style/library_branch_closed.svg);
  }
  /* closed, selected */
  WLibrarySidebar::branch:closed:has-children:!has-siblings:selected,
  WLibrarySidebar::branch:closed:has-children:has-siblings:selected {
    border-image: none;
    image: url(skins:LateNight/palemoon/style/library_branch_closed_selected.svg);
    background-color: #2c454f;
  }
/* open */
WLibrarySidebar::branch:open:has-children:!has-siblings,
WLibrarySidebar::branch:open:has-children:has-siblings {
  border-image: none;
  image: url(skins:LateNight/palemoon/style/library_branch_open.svg);
  }
  /* open, selected */
  WLibrarySidebar::branch:open:has-children:!has-siblings:selected,
  WLibrarySidebar::branch:open:has-children:has-siblings:selected {
    border-image: none;
    image: url(skins:LateNight/palemoon/style/library_branch_open_selected.svg);
    background-color: #2c454f;
    }
  /* space left of selected child item */
  WLibrarySidebar::branch:closed:!has-children:!has-siblings:selected,
  WLibrarySidebar::branch:closed:!has-children:has-siblings:selected,
  WLibrarySidebar::branch:open:!has-children:!has-siblings:selected,
  WLibrarySidebar::branch:open:!has-children:has-siblings:selected {
    border-image: none;
    background-color: #0f0f0f;
  }
/************** Library *******************************************************/



/************** common styles for WEffectSelector ******************************
*************** QSpinBox, QMenu, QToolTip *************************************/
QToolTip,
#MainMenu QMenu,
WLibrarySidebar QMenu,
WTrackTableViewHeader QMenu,
WLibraryTextBrowser QMenu,
WTrackMenu,
WTrackMenu QMenu,
QLineEdit QMenu,
QPlainTextEdit QMenu,
WCueMenuPopup,
WCoverArtMenu,
WEffectSelector QAbstractScrollArea,
WEffectChainPresetButton QMenu,
WEffectChainPresetSelector QAbstractScrollArea,
WSearchLineEdit QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea {
  border: 1px solid #333;
  border-radius: 1px;
}

QToolTip,
#MainMenu,
#MainMenu::item,
#MainMenu QMenu,
#MainMenu QMenu::item,
#MainMenu QMenu QCheckBox,
WLibrarySidebar QMenu,
WLibrarySidebar QMenu::item,
WTrackTableViewHeader QMenu,
WTrackTableViewHeader QMenu QCheckBox,
WLibraryTextBrowser QMenu,
WLibraryTextBrowser QMenu::item,
WTrackMenu,
WTrackMenu::item,
WTrackMenu QMenu,
WTrackMenu QMenu::item,
WTrackMenu QMenu QCheckBox,
WTrackMenu WStarRating,
QLineEdit QMenu,
QLineEdit QMenu::item,
QPlainTextEdit QMenu,
QPlainTextEdit QMenu::item,
WCoverArtMenu,
WCoverArtMenu::item,
WCueMenuPopup,
WCueMenuPopup QLabel,
WEffectSelector QAbstractScrollArea,
WEffectSelector::item,
WEffectChainPresetSelector QAbstractScrollArea,
WEffectChainPresetSelector::item,
WEffectChainPresetButton QMenu,
WEffectChainPresetButton::item,
WEffectChainPresetButton QMenu QCheckBox,
#fadeModeCombobox QAbstractScrollArea,
#fadeModeCombobox::item,
WSearchLineEdit QAbstractScrollArea,
WSearchLineEdit::item {
  background-color: #151517;
}
/* hovered items */
#MainMenu::item:selected,
#MainMenu QMenu::item:selected,
#MainMenu QMenu::item:focus,
#MainMenu QMenu::item:hover,
#MainMenu QMenu::indicator:checked:selected,
/* ::indicator:!checked won't work. use 'unchecked' */
#MainMenu QMenu::indicator:unchecked:selected,
WLibrarySidebar QMenu::item:selected,
WTrackTableViewHeader QMenu QCheckBox:selected,
WTrackTableViewHeader QMenu QCheckBox:focus,
WTrackTableViewHeader QMenu QCheckBox:hover,
WLibraryTextBrowser QMenu::item:selected,
WTrackMenu::item:selected,
WTrackMenu QMenu::item:selected,
WTrackMenu QMenu QCheckBox:selected,
WTrackMenu QMenu QCheckBox:focus,
WTrackMenu QMenu QCheckBox:hover,
QLineEdit QMenu::item:selected,
QPlainTextEdit QMenu::item:selected,
WCoverArtMenu::item:selected,
WEffectSelector::item:selected,
WEffectChainPresetSelector::item:selected,
WEffectChainPresetButton QMenu::item:selected,
WEffectChainPresetButton QMenu QCheckBox:selected,
WEffectChainPresetButton QMenu QCheckBox:focus,
WEffectChainPresetButton QMenu QCheckBox:hover,
#fadeModeCombobox::item:selected,
WSearchLineEdit::item:selected,
#SkinSettingsButton[hover="true"],
#SkinSettingsNumToggle[hover="true"],
#SkinSettingsNumToggleHeader[hover="true"],
#SkinSettingsMixerToggle[hover="true"],
#SkinSettingsLabelButton[hover="true"] {
  background-color: #2c454f;
  border-radius: 1px;
  color: #fff;
  /* remove OS focus indicator */
  outline: none;
  }
  WEffectSelector QAbstractItemView,
  WEffectChainPresetSelector QAbstractItemView,
  WSearchLineEdit QAbstractItemView {
    selection-color: #fff;
    selection-background-color: #2c454f;
    border-radius: 1px;
    border: 0px;
    outline: none;
  }
  /* checked item */
  WEffectSelector::item:checked,
  WEffectChainPresetSelector::item:checked,
  WSearchLineEdit::item:checked,
  #fadeModeCombobox::item:checked {
    color: #fff;
  }
  /* hover over checked item */
  WEffectSelector::item:checked:selected,
  WEffectChainPresetSelector::item:checked:selected,
  WSearchLineEdit::item:checked:selected,
  #fadeModeCombobox::item:checked:selected {
    background-color: #2f2f2f;
    color: #fff;
  }
  /* remove OS focus indicator from some buttons */
  WCueMenuPopup QPushButton:focus {
    outline: none;
  }
/* disabled menu items and checkboxes */
#MainMenu::item:disabled,
#MainMenu QMenu::item:disabled,
WLibrarySidebar QMenu::item:disabled,
WLibraryTextBrowser QMenu::item:disabled,
WTrackMenu::item:disabled,
WTrackMenu QMenu::item:disabled,
WTrackMenu QMenu QCheckBox:disabled,
QLineEdit QMenu::item:disabled,
QPlainTextEdit QMenu::item:disabled {
  color: #494949;
}

  #MainMenu QMenu::separator,
  WLibrarySidebar QMenu::separator,
  WTrackTableViewHeader QMenu::separator,
  WTrackMenu::separator,
  WTrackMenu QMenu::separator,
  WLibraryTextBrowser QMenu::separator,
  QLineEdit QMenu::separator,
  QPlainTextEdit QMenu::separator,
  WEffectChainPresetButton QMenu::separator,
  #SkinSettingsSeparator {
    border-top: 1px solid #000;
    border-bottom: 1px solid #333;
  }

  #MainMenu QMenu::right-arrow,
  WTrackMenu::right-arrow,
  WTrackMenu QMenu::right-arrow,
  WEffectChainPresetButton QMenu::right-arrow {
    image: url(skins:LateNight/palemoon/style/menu_arrow_ivory.svg);
    }
  #MainMenu QMenu::right-arrow:selected,
  WTrackMenu::right-arrow:selected,
  WTrackMenu QMenu::right-arrow:selected,
  WEffectChainPresetButton QMenu::right-arrow:selected {
    image: url(skins:LateNight/palemoon/style/menu_arrow_white.svg);
  }

  #MainMenu QMenu::indicator:checked,
  #MainMenu QMenu::indicator:checked:selected {
    image: url(skins:LateNight/palemoon/buttons/btn__menu_checkbox_checked.svg);
    }
    #MainMenu QMenu::indicator:unchecked,
    #MainMenu QMenu::indicator:unchecked:selected {
      image: url(skins:LateNight/palemoon/buttons/btn__menu_checkbox.svg);
    }

  WLibrarySidebar QMenu::indicator:checked,
  WTrackTableViewHeader QMenu QCheckBox::indicator:checked,
  #LibraryPlayedCheckbox::indicator:checked,
  WTrackMenu QMenu QCheckBox::indicator:checked,
  WEffectChainPresetButton QMenu QCheckBox::indicator:checked {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_checkmark_blue.svg);
  }
  WEffectSelector::indicator:checked,
  WEffectChainPresetSelector::indicator:checked,
  #fadeModeCombobox::indicator:checked {
    image: url(skins:LateNight/palemoon/buttons/btn__effect_selected.svg);
    margin-left: 6px;
  }
  WTrackMenu QMenu QCheckBox::indicator:disabled:checked {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_checkmark_grey.svg);
  }
  WTrackMenu QMenu QCheckBox::indicator:indeterminate {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_checkmark_indeterminate_blue.svg);
  }
  WTrackMenu QMenu QCheckBox::indicator:disabled:indeterminate {
    image: url(skins:LateNight/palemoon/buttons/btn__lib_checkmark_indeterminate_grey.svg);
  }
  WTrackMenu QMenu QCheckBox::indicator:disabled:checked,
  WTrackMenu QMenu QCheckBox::indicator:disabled:unchecked {
    border: 1px solid #222;
  }

/* explicitly remove icons from unchecked items otherwise
  selected, unchecked items would have a checkmark */
WLibrarySidebar QMenu::indicator:unchecked,
WLibrarySidebar QMenu::indicator:unchecked:selected,
WTrackTableViewHeader QMenu QCheckBox::indicator:unchecked,
WTrackTableViewHeader QMenu QCheckBox::indicator:unchecked:selected,
WEffectSelector::indicator:unchecked,
WEffectSelector::indicator:unchecked:selected,
WEffectChainPresetSelector::indicator:unchecked,
WEffectChainPresetSelector::indicator:unchecked:selected,
WEffectChainPresetButton QMenu QCheckBox::indicator:unchecked,
WEffectChainPresetButton QMenu QCheckBox::indicator:unchecked:selected,
#fadeModeCombobox::indicator:unchecked,
#fadeModeCombobox::indicator:unchecked:selected,
WSearchLineEdit::indicator:unchecked,
WSearchLineEdit::indicator:unchecked:selected {
  image: none;
}
/************** common styles for WEffectSelector ******************************
*************** QSpinBox, QMenu, QToolTip *************************************/
