style.qss

/*
  Deere , Skin for Mixxx 1.12.x
  www.mixxx.org
  Copyright (C) 2010-2015 RJ Ryan <rryan@mixxx.org>, S.Brandt <s.brandt@mixxx.org>
  This file is part of the "Deere" Skin for Mixxx
  "Deere" is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license.
  http://creativecommons.org/licenses/by-sa/3.0/

  Mixxx skin documentation:
  http://mixxx.org/wiki/doku.php/creating_skins

  List of controls:
  http://mixxx.org/wiki/doku.php/mixxxcontrols

  Qt Style Sheets documentation:
  http://doc.qt.io/qt-4.8/stylesheet-examples.html

*/

/*******************************************************************************
 ** BORDER *********************************************************************
 *******************************************************************************/
/* These definitions put a faint border around all the widgets. We have to be
   tricky with top/bottom-ness to get things right. */
#DeckControls {
  padding: 5px 7.5px 2px 7.5px;  /*
  background-color: #456789;  */
}

#QuickEffectSelectors_2Decks {
  margin-top: 2px;
}

#CrossfaderContainer {
}

#DeckTextRow {
  border-top: 0px solid #222;
  border-bottom: 0px solid #222;
  padding-left: 3px;
}
#DeckTextRowSmall {
  border: 1px solid #222;
  border-width: 0px 1px 0px 1px;
  padding: 0px;
}

#ArtistKeyBpmGutter {
  qproperty-layoutAlignment: 'AlignVCenter';
  border-top: 1px solid #222;
}

#UpperTextRow {
  /* top 0px seems required for bottom 1px to work O_o */
  border-top: 0px solid #222;
  border-bottom: 0px solid #222;
}

#DeckSmall {
  background-color: #333;
}

#DeckSmall #TitleGutter {
  padding-left: 2px;
}

#OverviewGutterSmall {
  padding: 1px 0px;
}

#DeckRows {
  border: 0px solid #222;
  border-top: none;
}

#TempoControlButtons {
  qproperty-layoutSpacing: 2;
}

#DeckRateSliderColumn {
  border: 0px solid #222;
  border-left: 2px solid #222;
}

#VisualRow {
  border-top: 1px solid #222;
  background-color: transparent;
  margin: 0px;
}

#OverviewRow {
  border-top: 1px solid #222;
  background-color: transparent;
  margin: 0;
  padding: 0 2px 0 3px;
}

#ControlsRow {
  border-top: 1px solid #222;
  padding: 3px;
  qproperty-layoutAlignment: 'AlignBottom';
}

#MixerBorder {
  background-color: #222;
}

#Deck1, #Deck3 {
  border-width: 0px 2.5px 5px 0px;
  border-style: solid;
  border-color: #222;
}

#Deck2, #Deck4 {
  border-width: 0px 0px 5px 2.5px;
  border-style: solid;
  border-color: #222;
}

#Deck3, #Deck4 {
  border-top-width: 0;
}

#Sampler {
  border-style: solid;
  border-color: #222;
  border-width: 0px 2px 0px 0px;
}

#SamplerMiddleSpacer {
  /* FIXME */
  border-style: solid;
  border-color: #222;
  border-width: 0px 2px;
}

#Spacer22 {
  background-color: #222222;
}

#Spacer33 {
  background-color: #333;
}

#TEST1 {
  background-color: #452219;
}
#TEST2 {
  background-color: #451911;
}
#TEST3 {
  background-color: #114522;
}
#TEST4 {
  background-color: #225487;
}

#AlignLeft {
  qproperty-layoutAlignment: 'AlignLeft';
}

#AlignRight {
  qproperty-layoutAlignment: 'AlignRight';
}

#AlignCenter {
  qproperty-layoutAlignment: 'AlignTop | AlignHCenter';
}

#AlignCenterCenter {
  qproperty-layoutAlignment: 'AlignVCenter | AlignHCenter';
}

#AlignTop {
  qproperty-layoutAlignment: 'AlignTop | AlignHCenter';
}

#SampleDecksContainer {
  border: 0px;
}

#SamplerRows {
}

#SamplerRow1,
#SamplerRow2,
#SamplerRow3,
#SamplerRow4,
#SamplerRow6,
#SamplerRow7,
#SamplerRow8 {
  border-color: #222;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
}

#SamplerRow5 {
  border-color: #222;
  border-style: solid;
  border-width: 1px 0px 1px 0px;
}

/*******************************************************************************
 ** END BORDER *****************************************************************
 *******************************************************************************/


/*******************************************************************************
 ** LIBRARY *********************************************************************
 *******************************************************************************/

/* sidebar, as well as root items for playlists, crates, and history */
WLibraryTextBrowser,
WTrackTableView,
WLibrarySidebar {
  color: #d2d2d2;
  border: 1px solid #1A1A1A;
  background-color: #1F1F1F;
  alternate-background-color: #1A1A1A;
/* 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: #D6D6D6;
  /* background of Color delegate in selected row */
  selection-background-color: #006596;
}
/* Override the 'missing' color in Tracks > Missing,
   it's not useful there */
#DlgMissing WTrackTableView {
  qproperty-trackMissingColor: #d2d2d2;
}

/* Prevent OS-style checkbox from being rendered underneath the custom style. */
#LibraryPlayedCheckbox::item,
#LibraryBPMButton::item {
  border: 0px;
}

/* Selected rows in Tree and Tracks table */
WTrackTableView::item:selected,
WLibrarySidebar::item:selected,
#LibraryBPMButton::item:selected,
#LibraryPlayedCheckbox::item:selected {
  color: #D6D6D6;
  background-color: #006596;
}
WLibrarySidebar::item:selected:focus {
  outline: none;
}
WLibrarySidebar::item:!selected:focus {
  outline: none;
  border: 1px solid white;
}
/* Use the native focus decoration */
/* This is for all cells including Played and Location */
WTrackTableView,
/* This is for the BPM cell */
WTrackTableView QCheckBox:focus {
  outline: 1px solid #D6D6D6;
}
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: #D6D6D6;
  /* This is the color used to paint the text of played tracks.
     BaseTrackTableModel::data() uses this to override Qt::ForegroundRole (QBrush). */
  qproperty-trackPlayedColor: #555;
}

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

WLibraryTextBrowser {
  padding-left: 5px;
}

/* Table cell in edit mode */
WLibrary QLineEdit,
WLibrary QPlainTextEdit,
WBeatSpinBox,
/* Track label inline editor */
WTrackPropertyEditor,
#LibraryBPMSpinBox {
  color: #ddd;
  background-color: #0f0f0f;
  selection-color: #000;
  selection-background-color: #ccc;
}
WLibrary QLineEdit,
WTrackPropertyEditor,
#LibraryBPMSpinBox {
  border: 1px solid #006596;
}

/* checkbox in library "Played" column */
#LibraryPlayedCheckbox::indicator:unchecked {
  image: url(skin:/../Deere/icon/ic_library_checkbox.svg);
}
#LibraryPlayedCheckbox::indicator:checked {
  image: url(skin:/../Deere/icon/ic_library_checkbox_checked.svg);
}

/* focused BPM cell in the library "BPM" column */
#LibraryBPMButton:focus
#LibraryBPMButton::indicator:focus {
  outline: none;
}
/* BPM lock icon */
#LibraryBPMButton::indicator:checked {
  image: url(skin:/../Deere/icon/ic_library_bpm_locked.svg);
}

#LibraryBPMButton::indicator:unchecked {
  image: url(skin:/../Deere/icon/ic_library_bpm_unlocked.svg);
}

#LibraryBPMSpinBox {
  padding: 0px;
  margin: 0px;
  border-left: 0px;
  }
  #LibraryBPMSpinBox::up-button,
  #LibraryBPMSpinBox::down-button {
    background-color: #006596;
    }
    #LibraryBPMSpinBox::up-button {
      image: url(skin:/../Deere/icon/ic_lib_spinbox_up_white.svg) no-repeat;
      }
    #LibraryBPMSpinBox::down-button {
      image: url(skin:/../Deere/icon/ic_lib_spinbox_down_white.svg) no-repeat;
      }

/* button in library "Preview" column */
QPushButton#LibraryPreviewButton {
  background-color: transparent;
  margin: 0px;
  padding: 0px;
  border: 1px solid transparent;
  border-radius: 2px;
}

QPushButton#LibraryPreviewButton:!checked {
  image: url(skin:/../Deere/icon/ic_library_preview_play.svg);
}

QPushButton#LibraryPreviewButton:!checked:hover {
  background-color: #1A1A1A;
  border: 1px solid #00ABFD;
}

QPushButton#LibraryPreviewButton:checked {
  image: url(skin:/../Deere/icon/ic_library_preview_pause.svg);
  background-color: #0f0f0f;
  border: 1px solid #006596;
}

QPushButton#LibraryPreviewButton:checked:hover {
  border: 1px solid #00ABFD;
}

/* library header row */
WTrackTableViewHeader {
  /* Don't set a font size to pick up the system font size. */
  color: #d2d2d2;
  background-color: #1A1A1A;
  border-bottom: 1px solid #141414;
}

WTrackTableViewHeader::section {
  height: 1.1em;
  font-weight: bold;
  padding: 0.1em -1em 0.1em 0.1em;
  background-color: #1A1A1A;
  border-top: none;
  border-left: none;
  border-bottom: 1px solid #141414;
  border-right: 1px solid #141414;
}

WTrackTableViewHeader::up-arrow,
WTrackTableViewHeader::down-arrow {
  background-color: rgba(26,26,26,220);
  padding: 0px;
}
WTrackTableViewHeader::up-arrow {
  image: url(skin:/../Deere/image/style_sort_up.svg);
}

WTrackTableViewHeader::down-arrow {
  image: url(skin:/../Deere/image/style_sort_down.svg);
}

/* library search bar */
WSearchLineEdit {
  margin: 0px 2px 0px 0px;
  padding: 2px;
  border: 1px solid #4B4B4B;
  background-color: #1e1e1e;
  color: #d2d2d2;
  }
  WSearchLineEdit:focus {
    border: 1px solid #FF6600;
    color: #D6D6D6;
    selection-color: #222222;
    selection-background-color: #d2d2d2;
  }
  /* Clear button: see /skins/default.qss */

/* library preview deck */
#PreviewDeck {
  background-color: #333333;
  margin: 0px 0px 4px 0px;
}

#PreviewDeckTextRow WLabel {
  padding: 2px;
  color: #d2d2d2;
  font-size: 12px/14px;
  text-transform: none;
}

#PreviewDeckVisualRow {
  qproperty-layoutSpacing: 2;
  border-top: 1px solid #1A1A1A;
}

#PreviewDeckEjectButton[value="0"]:!hover {
  background: none;
  border: none;
}

#PreviewDeckVUContainer {
  border: 1px solid #333;
  border-left: 0px;
  padding: 0px;
  margin: 0px;
  qproperty-layoutSpacing: 0;
}

WLibrarySidebar {
  outline: none;
/* Spacing between treeview and preview deck/search bar */
  margin: 0px;
}

#LibraryCoverArtSplitter {
  margin-top: 4px;
}

/* triangle for closed/opened branches in treeview */
WLibrarySidebar::branch:has-children:!has-siblings:closed,
WLibrarySidebar::branch:closed:has-children:has-siblings {
  border-image: none; image: url(skin:/../Deere/image/style_branch_closed.svg);
}

WLibrarySidebar::branch:open:has-children:!has-siblings,
WLibrarySidebar::branch:open:has-children:has-siblings {
  border-image: none; image: url(skin:/../Deere/image/style_branch_open.svg);
}

/* space left of selected child item */
WLibrarySidebar::branch:!has-children:!has-siblings:closed: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: #1F1F1F;
}

/* QSplitter between WLibrarySidebar and WTrackTableView */
#LibrarySplitter::handle {
  image: url(skin:/../Deere/image/style_handle_horizontal_unchecked.svg);
  background: none;
}

#LibrarySplitter::handle:pressed {
  image: url(skin:/../Deere/image/style_handle_horizontal_checked.svg);
  background: none;
}

#LibrarySplitter::handle:horizontal {
  width: 6px;
}

#LibrarySplitter::handle:vertical {
  height: 6px;
}

/* vertical splitters */
#LibraryCoverArtSplitter::handle,
#LibraryVerticalSplitter::handle,
#WaveformSplitter::handle {
  image: url(skin:/../Deere/image/style_handle_vertical_unchecked.svg);
  background-color: #222;
}

#LibraryCoverArtSplitter::handle:pressed,
#LibraryVerticalSplitter::handle:pressed,
#WaveformSplitter::handle:pressed {
  image: url(skin:/../Deere/image/style_handle_vertical_checked.svg);
  background-color: #222;
}

#LibraryCoverArtSplitter::handle:horizontal,
#LibraryVerticalSplitter::handle:horizontal,
#WaveformSplitter::handle:horizontal {
  width: 6px;
}

#LibraryCoverArtSplitter::handle:vertical,
#LibraryVerticalSplitter::handle:vertical,
#WaveformSplitter::handle::vertical {
  height: 6px;
}

/* library cover art widget */
#LibraryCoverArt {
  padding: 8px 4px 4px 4px;
  background-color: #1F1F1F;
  border: 1px solid #1A1A1A;
}

/* Extra declaration for QRadionButton otherwise it shows up with wrong colors in Linux with Gnome */
#LibraryFeatureControls QLabel, #LibraryFeatureControls QRadioButton {
  /* same as QTreeview */
  color: #d2d2d2;
  margin: 9px 5px 6px 0px;
  font-size: 12px;
}

#LibraryFeatureControls QRadioButton::indicator {
  margin: 0px 0px 0px 2px;
  width: 18px;
  height: 18px;
}

#LibraryFeatureControls QRadioButton::indicator:checked {
  image: url(skin:/../Deere/icon/ic_radio_button_on_18px.svg);
}

#LibraryFeatureControls QRadioButton::indicator:unchecked {
  image: url(skin:/../Deere/icon/ic_radio_button_off_18px.svg);
}
/* buttons in library (in hierarchical order of appearance)
   Style them just as the other regular buttons */
#LibraryFeatureControls QPushButton {
  margin: 9px 3px 6px 3px;
  padding: 3px 4px;
  color: #D2D2D2;
  background-color: #4B4B4B;
  border: 1px solid #4B4B4B;
  border-radius: 2px;
  outline: none;
  }
  #DlgAutoDJ > #LibraryFeatureControls QPushButton {
    padding: 0px 1px;
    width: 34px;
    height: 20px;
    }
    QPushButton#pushButtonAutoDJ {
      width: 42px;
    }


#LibraryFeatureControls QPushButton:!enabled {
  /* buttons in "disabled" (not click-able) state. They are nearly invisible
     by default QT palette, so style accordingly */
  color: #808080; /* Default #A3A3A3 -90L HSL*/
  background-color: rgba(95, 95, 95, 127);
                    /* 50% #5F5F5F = RGBA#5F5F5F7F */
  border: 1px solid rgba(95, 95, 95, 127);
  border-radius: 2px;
  outline: none;
}

#LibraryFeatureControls QPushButton:hover {
  color: #D2D2D2;
  background-color: #5F5F5F;
  border: 1px solid #5F5F5F;
  outline: none;
}

#LibraryFeatureControls QPushButton:focus,
#fadeModeCombobox:focus,
#spinBoxTransition:focus {
  outline: none;
}


QPushButton#pushButtonAutoDJ:checked,
QPushButton#pushButtonRepeatPlaylist:checked,
QPushButton#pushButtonAnalyze:checked,
QPushButton#pushButtonRecording:checked {
  /* checkbuttons in active state */
  color: #FDFDFD;
  background-color: #006596;
  border: 1px solid #006596;
  outline: none;
}

QPushButton#pushButtonAutoDJ:checked:hover,
QPushButton#pushButtonRepeatPlaylist:checked:hover,
QPushButton#pushButtonAnalyze:checked:hover,
QPushButton#pushButtonRecording:checked:hover {
  /* checkbuttons hovered over in "active" state */
  margin: 9px 3px 6px 3px;
  color: #FDFDFD;
  background-color: #0080BE;
  border: 1px solid #0080BE;
  outline: none;
}

#LibraryFeatureControls QPushButton:pressed {
  /* pushbuttons in "down" state */
  margin: 9px 3px 6px 3px;
  color: #FDFDFD;
  background-color: #006596;
  border: 1px solid #006596;
  outline: none;
}


/* AutoDJ button icons */
QPushButton#pushButtonAutoDJ {
  image: url(skin:/../Deere/icon/ic_autodj_enable.svg) no-repeat center center;
}
QPushButton#pushButtonFadeNow:!enabled {
  image: url(skin:/../Deere/icon/ic_autodj_fade_disabled.svg) no-repeat center center;
  }
  QPushButton#pushButtonFadeNow:enabled {
    image: url(skin:/../Deere/icon/ic_autodj_fade.svg) no-repeat center center;
  }
QPushButton#pushButtonSkipNext:!enabled {
  image: url(skin:/../Deere/icon/ic_autodj_skip_disabled.svg) no-repeat center center;
  }
  QPushButton#pushButtonSkipNext:enabled {
    image: url(skin:/../Deere/icon/ic_autodj_skip.svg) no-repeat center center;
  }
QPushButton#pushButtonShuffle {
  image: url(skin:/../Deere/icon/ic_autodj_shuffle.svg) no-repeat center center;
}
QPushButton#pushButtonAddRandomTrack {
  image: url(skin:/../Deere/icon/ic_autodj_addrandom.svg) no-repeat center center;
}
QPushButton#pushButtonRepeatPlaylist {
  image: url(skin:/../Deere/icon/ic_autodj_repeat_playlist.svg) no-repeat center center;
}
/* AutoDJ button icons */

/* Recording info */
#labelRecPrefix,
#labelRecFilename,
#labelRecStatistics {
  text-transform: none;
  padding: 3px 0px 0px 0px;
  margin: 0px;
}
#labelRecPrefix {
  margin-left: 3px;
}
#labelRecFilename {
  font-weight: bold;
}
#labelRecPrefix,
#labelRecStatistics {
  font-weight: normal;
}

/* Scroll bars */
#LibraryContainer QScrollBar:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar:horizontal,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar:horizontal,
WSearchLineEdit QAbstractScrollArea QScrollBar:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar:horizontal {
  border-top: 1px solid #141414;
  min-width: 12px;
  height: 15px;
  background-color: #222222;
  padding: 3px;
}
#LibraryContainer QScrollBar:vertical,
WEffectSelector QAbstractScrollArea QScrollBar:vertical,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar:vertical,
WSearchLineEdit QAbstractScrollArea QScrollBar:vertical,
#fadeModeCombobox QAbstractScrollArea QScrollBar:vertical {
  border-left: 1px solid #141414;
  min-height: 12px;
  width: 15px;
  background-color: #222222;
  padding: 3px;
}
/* "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,
WSearchLineEdit QAbstractScrollArea QScrollBar::add-page,
WSearchLineEdit QAbstractScrollArea QScrollBar::sub-page,
#fadeModeCombobox QAbstractScrollArea QScrollBar::add-page,
#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-page {
  background: none;
}
#LibraryContainer QScrollBar::handle:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar::handle:horizontal,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::handle:horizontal,
WSearchLineEdit QAbstractScrollArea QScrollBar::handle:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:horizontal {
  min-width: 25px;
  background-color: #5F5F5F;
  border-radius: 3px;
  border: none;
}
#LibraryContainer QScrollBar::handle:vertical,
WEffectSelector QAbstractScrollArea QScrollBar::handle:vertical,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::handle:vertical,
WSearchLineEdit QAbstractScrollArea QScrollBar::handle:vertical,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:vertical {
  min-height: 25px;
  background-color: #5F5F5F;
  border-radius: 3px;
  border: none;
}
#LibraryContainer QScrollBar::handle:horizontal:hover,
#LibraryContainer QScrollBar::handle:vertical:hover,
WEffectSelector QAbstractScrollArea QScrollBar::handle:horizontal:hover,
WEffectSelector QAbstractScrollArea QScrollBar::handle:vertical:hover,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::handle:horizontal:hover,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::handle:vertical:hover,
WSearchLineEdit QAbstractScrollArea QScrollBar::handle:horizontal:hover,
WSearchLineEdit QAbstractScrollArea QScrollBar::handle:vertical:hover,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:horizontal:hover,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:vertical:hover {
  background-color: #B3B3B3;
}

/* Turn off buttons */
#LibraryContainer QScrollBar::add-line:horizontal,
#LibraryContainer QScrollBar::add-line:vertical,
#LibraryContainer QScrollBar::sub-line:horizontal,
#LibraryContainer QScrollBar::sub-line:vertical,
WEffectSelector QAbstractScrollArea QScrollBar::add-line:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar::add-line:vertical,
WEffectSelector QAbstractScrollArea QScrollBar::sub-line:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar::sub-line:vertical,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::add-line:horizontal,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::add-line:vertical,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::sub-line:horizontal,
WEffectChainPresetSelector QAbstractScrollArea QScrollBar::sub-line:vertical,
WSearchLineEdit QAbstractScrollArea QScrollBar::add-line:horizontal,
WSearchLineEdit QAbstractScrollArea QScrollBar::add-line:vertical,
WSearchLineEdit QAbstractScrollArea QScrollBar::sub-line:horizontal,
WSearchLineEdit QAbstractScrollArea QScrollBar::sub-line:vertical,
#fadeModeCombobox QAbstractScrollArea QScrollBar::add-line:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar::add-line:vertical,
#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-line:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-line:vertical {
  width: 0px;
  height: 0px;
  border: none;
}
/* Corner in between two scrollbars */
#LibraryContainer QAbstractScrollArea::corner,
WEffectSelector QAbstractScrollArea::corner,
WEffectChainPresetSelector QAbstractScrollArea::corner,
WSearchLineEdit QAbstractScrollArea::corner,
#fadeModeCombobox QAbstractScrollArea::corner {
  border-top: 1px solid #141414;
  border-left: 1px solid #141414;
}

/*******************************************************************************
 ** END LIBRARY *****************************************************************
 *******************************************************************************/

/*******************************************************************************
 ** SKIN SETTINGS **************************************************************
 *******************************************************************************/

#SkinSettings {
  background-color: rgba(17.3%, 17.3%, 17.3%, 100%);
  margin-left: 4px;
}

#SkinSettingsTop {
  margin: 7px 4px 6px 6px;
  border-bottom: 1px solid #A9A9A9;
}

#SkinSettingsTop > #h1 {
  font: 16px/18px;
  text-align: left;
  text-transform: uppercase;
  background: none;
}

#SkinSettings > #h2,
#SkinSettingsCategoryButton {
  font: bold 14px/16px;
  text-align: left;
  color: #d2d2d2;
  background-color: none;
  margin: 0 0.2em .1em 0;
  border: 1px solid #A9A9A9;
  /* revert global WPushButton border style */
  border-width: 0px 0px 1px 0px;
  border-radius: 0px;
}

#SkinSettings > #h3 {
  font: 12px/14px;
  background-color: none;
  text-align: left;
  margin: .1em 0.5em .5em 0.5em;
}

#SkinSettings > #h3 WPushButton,
#SkinSettingsButton:hover {
  font: 12px/14px;
  background-color: none;
  text-transform: none;
  border: none;
}

#SkinSettings > #h3 WPushButton:hover,
#SkinSettingsButton:hover,
#SkinSettingsCategoryButton:hover {
  background-color: #222222;
}

/*******************************************************************************
 ** END SKIN SETTINGS **********************************************************
 *******************************************************************************/

#Mixxx {
  background-color: black;
}

#WaveformSplitter {
  background-color: #222;
}

#Mixxx, WWidget,
QToolTip,
WLabel, #LibraryFeatureControls QLabel,
WNumber, WNumberPos,
WPushButton,
WKey,
WTime,
WTrackProperty,
WTrackPropertyEditor,
WRecordingDuration,
QSpinBox,
WBeatSpinBox,
WOverview #PassthroughLabel,
/* all context menus */
#MainMenu, #MainMenu QMenu,
WLibrarySidebar,
WLibrarySidebar QMenu,
WTrackTableViewHeader,
WTrackTableViewHeader QMenu,
WTrackTableViewHeader::section,
WLibraryTextBrowser,
WLibraryTextBrowser QMenu,
QLineEdit QMenu,
QPlainTextEdit QMenu,
WCueMenuPopup,
WCueMenuPopup QLabel,
WCueMenuPopup QLineEdit,
WCoverArtMenu,
WTrackMenu,
WTrackMenu QMenu,
WTrackMenu QMenu QCheckBox,
WOverview /* Hotcue labels in the overview */,
WEffectName,
WEffectSelector,
WEffectSelector QAbstractScrollArea,
WEffectChainPresetSelector,
WEffectChainPresetSelector QAbstractScrollArea,
WSearchLineEdit,
WSearchLineEdit QAbstractScrollArea,
#fadeModeCombobox,
#fadeModeCombobox QAbstractScrollArea,
#LibraryFeatureControls QPushButton,
#LibraryFeatureControls QLabel,
#LibraryFeatureControls QRadioButton {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: normal;
}

WLabel, #LibraryFeatureControls QLabel,
WPushButton, #LibraryFeatureControls QPushButton {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

/* cue points labels in the overview */
WOverview {
  text-transform: none;
}

/* Passthrough label on overview waveform */
WOverview #PassthroughLabel {
  font-size: 16px;
  font-weight: bold;
  color: #73b3f7;
}

/* Start spacing for Deck overview row (small waveform, option grid) */
#OptionGrid, #ButtonGrid {
  background-color: #333333;
  /*padding: 1px;*/
  qproperty-layoutSpacing: 2;
}

#OptionGridRow1, #OptionGridRow2 {
  qproperty-layoutSpacing: 2;
}

#OverviewRow {
  qproperty-layoutSpacing: 2;
}
/* End spacing for Deck overview row */

#Waveforms {
  background-color: #333;
}

#WaveformZoomContainer {
  background-color: #333333;
  padding: 1px;
  qproperty-layoutSpacing: 2;
}

/* Start spacing for Deck inner column (tempo slider, rate change) */
#DeckRateSliderColumn {
  background-color: #333333;
  padding: 4px;
  qproperty-layoutSpacing: 2;
}

#RateTempButtons {
  qproperty-layoutSpacing: 2;
}
/* End spacing for Deck inner column (tempo slider, rate change) */


/* Start spacing for Deck controls row (transport, beatgrid, looping, hotcue, vinylcontrol) */

#PlayCueContainer,
#HotcueGrid,
#VinylControlsGrid {
  padding: 1px;
  qproperty-layoutSpacing: 2;
}

#HotcueGrid WWidgetGroup,
#VinylControlsGrid WWidgetGroup,
#DeckControlsGrid WWidgetGroup {
  qproperty-layoutSpacing: 2;
}

#DeckControlsGrid {
  qproperty-layoutSpacing: 2;
  padding: 0px;
}

WBeatSpinBox,
#spinBoxTransition {
  color: #c1cabe;
  background-color: #1f1e1e;
  border: 1px solid #444342;
  border-radius: 3px;
  font: 15px;
  }
  WBeatSpinBox {
    padding: 2px;
  }
  #spinBoxTransition {
    padding: 0px 2px 0px 2px;
    margin: 3px 0px 0px 2px;
  }
  WBeatSpinBox:hover,
  #spinBoxTransition:hover,
  WBeatSpinBox:focus,
  #spinBoxTransition:focus {
    border: 1px ridge #015d8d;
  }
  WBeatSpinBox::down-button,
  #spinBoxTransition::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at the top right corner */
    padding-right: 4px;
    padding-top: -3px;
    border: 0;
  }
  WBeatSpinBox::down-arrow,
  #spinBoxTransition::down-arrow {
    width: 9px;
    height: 7px;
    image: url(skin:/../Deere/icon/ic_chevron_down_selector.svg);
  }
  WBeatSpinBox::down-arrow:hover,
  #spinBoxTransition::down-arrow:hover {
    image: url(skin:/../Deere/icon/ic_chevron_down_selector_hover.svg);
  }
  WBeatSpinBox::up-button,
  #spinBoxTransition::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */
    padding-right: 4px;
    padding-bottom: -3px;
    border: 0;
  }
  WBeatSpinBox::up-arrow,
  #spinBoxTransition::up-arrow {
    width: 9px;
    height: 7px;
    image: url(skin:/../Deere/icon/ic_chevron_up_selector.svg);
  }
  WBeatSpinBox::up-arrow:hover,
  #spinBoxTransition::up-arrow:hover {
    image: url(skin:/../Deere/icon/ic_chevron_up_selector_hover.svg);
  }

/* End spacing for Deck controls row */

/* Start spacing for toolbar */
#ToolBar {
  padding: 0px 4px 0px 4px;
  qproperty-layoutSpacing: 5;
  border-width: 0px 0px 3px 0px;
  border-style: solid;
  border-color: #222;
}

#ToolBarLeft {
  qproperty-layoutSpacing: 0;
}

#ToolBarRight {
  qproperty-layoutSpacing: 6;
}

#NotificationsContainer {
  qproperty-layoutSpacing: 4;
}

#MainControls, #HeadphoneControls {
    qproperty-layoutSpacing: 10;
    margin-bottom: 1px;
    margin-top: 1px;
}

/* End spacing for toolbar */

#Time {
  font: bold 13px;
}

#KnobLabelH, #HeadSplit {
  font: bold 11px;
}

/* All widget groups that are children of #DeckRows should AlignTop. */
#DeckRows > WWidgetGroup {
  qproperty-layoutAlignment: 'AlignTop | AlignHCenter';
}

#ArtistGutter, #TitleGutter {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  }
  #TitleGutter {
    padding: 2px 2px 1px 2px;
  }
  #ArtistGutter {
    padding: 1px 2px 2px 2px;
  }
#TitleGutterSmall {
  padding: 0px;
}

#TrackColorWrapper {
  margin-right: 2px;
}

#ArtistKeyBpmGutterSmall {
  border-top: 1px solid #222;
}

#BPMGutter, #PositionGutter {
  qproperty-layoutAlignment: 'AlignRight | AlignTop';
  qproperty-layoutSpacing: 4;
  padding: 2px;
}
#PositionGutter {
  margin-right: 4px;
}
#PositionGutterSmall {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  padding: 0px 6px 2px 3px;
}

/* Start editable widgets in decks */
/* emphasize editable widgets on hover */
#BpmKeyEditTriggerRow:hover,
#PositionGutter:hover,
#PlayPositionTextSmall:hover,
#StarratingGutter:hover,
WTrackProperty:hover {
  background-color: rgba(255, 102, 0, 128);
  }
  #BpmKeyEditRowCollapsed:hover,
  WTrackProperty[selected="true"] {
    border: 1px solid #FF6600;
  }

#BpmKeyEditTriggerRow[value="1"] {
  qproperty-layoutAlignment: 'AlignCenter';
  /* emphasize active widget */
  border: 1px solid #666666;
  border-left: 0px;
}

#BpmKeyEditRowExpanded {
  /* emphasize active widget */
  border: 1px solid #FF6600;
  border-right: 0px;
  color: #D6D6D6;
  qproperty-layoutSpacing: 2;
}

#BpmKeyEditTrigger {
  background-color: none;
  border: none;
  border-radius: 0px;
}
#BpmKeyEditTrigger[value="1"] {
  border: 1px solid #FF6600;
  border-left: 0px;
}

#BpmKeyEditRowControls {
  /* Make room between buttons */
  background-color: #333333;
  padding-left: 1px;
  padding-right: 1px;
  margin-right: 2px;
  qproperty-layoutSpacing: 2;
}

#BeatEditCover {
  background-color: rgba(51, 51, 51, 120);
}

/* This defines the width of the key/cents display per selected notation. */
#KeyLabelExpander[highlight="0"],  /* Invalid */
#KeyLabelExpander[highlight="1"],  /* Custom */
#KeyLabelExpander[highlight="2"],  /* OpenKey */
#KeyLabelExpander[highlight="3"] { /* Lancelot */
  /* Widest key is 12A + cents */
  min-width: 97px;
  max-width: 97px;
}
#KeyLabelExpander[highlight="4"] { /*Traditional */
  /* The widest key is "D#m/Ebm" + cents */
  min-width: 138px;
  max-width: 138px;
}
#KeyLabelExpander[highlight="5"],  /* OpenKeyAndTraditional */
#KeyLabelExpander[highlight="6"] { /* LancelotAndTraditional */
  /* The widest key is "7m (D#m/Ebm)" + cents */
  min-width: 175px;
  max-width: 175px;
}

#HotcueShiftButtons {
  qproperty-layoutSpacing: 2;
}

#BpmKeyEditTriggerLabel {
  padding-right: 1px;
}

#BpmKeyInfoShowHide[highlight="0"] {
  image: url(skin:/../Deere/icon/ic_chevron_left_24x48px.svg) center center;
}
#BpmKeyInfoShowHide[highlight="1"] {
  image: url(skin:/../Deere/icon/ic_chevron_right_24x48px.svg) center center;
}
/* End editable widgets in decks */

#DeckTextRow #ArtistGutter WLabel,
#DeckTextRow #BPMGutter WLabel,
#DeckTextRow #PositionGutter WLabel,
#PlayPositionTextSmall,
#ArtistTextSmall,
#BpmKeyTextSmall {
  font-weight: bold;
  font-size: 15px;
  text-transform: none;
}

#BpmKeyTextSmall,
#PlayPositionTextSmall {
  qproperty-alignment: 'AlignRight | AlignVCenter';
}

#PlayPositionTextSmall {
  padding: 0px 1px;
  border: 1px solid transparent;
}

#TitleTextSmall,
#ArtistTextSmall {
  padding: 0px 1px 0px 1px;
}

#DeckTextRow #TitleGutter WLabel,
#TitleTextSmall,
#EffectRackExpanded #EffectUnitNameContainer WLabel {
  font-weight: bold;
  font-size: 17px;
  text-transform: none;
  text-align: left;
}

#BpmKeyTextSmall {
  border: 1px solid #222;
  border-width: 0px 0px 0px 1px;
  padding: 0px 2px 0px 2px;
}

#SamplerTopRowInner WLabel {
  font-weight: bold;
  font-size: 15px;
  text-transform: none;
  text-align: left;
}

#EffectUnitLabel,
#EffectRackCollapsed #EffectUnitNameContainer WLabel {
  font-weight: bold;
  font-size: 15px;
  text-transform: none;
  text-align: center;
}

#EffectUnitNameRow {
  border-bottom: 1px solid #222;
  background-color: transparent;
  margin: 0px;
}

#EffectUnit1, #EffectUnit2, #EffectUnit3, #EffectUnit4 {
  qproperty-layoutAlignment: 'AlignTop';
}

#EffectUnitToggle {
  padding: 0px 0px 0px 27px;
  font: bold 14px/20px;
  border: 0px;
}

#EffectUnitToggle[value="0"] {
  image: url(skin:/../Deere/icon/ic_unfold_more_48px.svg) no-repeat top right;
}

#EffectUnitToggle[value="1"] {
  image: url(skin:/../Deere/icon/ic_unfold_less_48px.svg) no-repeat top right;
}

WEffectChainPresetButton {
  padding: 0px;
  border:  none;
  border-radius: 2px;
  image: url(skin:/../Deere/icon/ic_settings_22px.svg) no-repeat center center;
}
WEffectChainPresetButton::menu-indicator {
  subcontrol-position: center center;
  subcontrol-origin: margin;
  padding: 0px;
  border: 0px;
  outline: none;
  image: url(skin:/../Deere/icon/ic_settings_22px.svg) no-repeat center center;
}

#EffectUnitFiller {
  border: 1px solid #222;
  border-width: 1px 0px 0px 0px;
}

#EffectButtonControls {
  qproperty-layoutSpacing: 5;
}

#EffectHighlightable[highlight="0"] {
  border: 0px;
  padding: 3px 4px 3px 4px;
}

#EffectHighlightable[highlight="1"] {
  border: 2px solid #0081bd;
  padding: 1px 2px 1px 2px;
}

#EffectChainGroupControlButton {
  font: 10px;
}

#EffectUnitNameContainer {
  padding: 2px;
  qproperty-layoutAlignment: 'AlignLeft | AlignVCenter';
}

#EffectMetaKnobControls > WPushButton {
  qproperty-alignment: 'AlignHCenter';
}

#EffectUnitControls {
  border: 1px solid #222222;
  border-width: 0px 0px 0px 1px;
  qproperty-layoutSpacing: 2;
  padding: 0px 0px 1px 0px;
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  background-color: #333; /*
  background-color: #664971;  */
}

#EffectUnitHead {
  padding: 0px 0px 3px 0px;
}

#EffectButtonContainer {
  qproperty-layoutSpacing: 2;
}

#EffectMetaKnob, WEffectName {
  font-size: 12px;
  background-color: none;
  border: none;
}

#EffectEnableButton {
  image: url(skin:/../Deere/icon/ic_power_48px.svg) no-repeat center center;
}

#EffectKnob {
}

#EffectButtonParameter {
  margin-top: 3px;
}

#KnobLabel {
  background-color: none;
  border: none;
  qproperty-alignment: 'AlignHCenter';
  font: 10px;
}

#EffectUnitNameRow {
}

#EffectUnitMainKnobsContainer {
    qproperty-layoutSpacing: 7;
}

#EffectKnobLabel {
  background-color: none;
  border: none;
  qproperty-alignment: 'AlignHCenter | AlignTop';
  font: 10px;
  margin-top: -2px;
}

#EffectButton {
  font: 10px;
  margin-right: 1px;
}

#EffectButtonLabel {
  background-color: none;
  border: none;
  qproperty-alignment: 'AlignHCenter';
  font: 10px;
  margin-top: 1px;
}

#Crossfader {
  margin-top: 3px;
}

#Crossfader[highlight="0"] {
  border-image: none;
}

#Crossfader[highlight="1"] {
  border-image: url(skin:/../Deere/slider-crossfader-AutoDJ.svg) 0 0 0 0 stretch stretch;
}

#MainControls {
  qproperty-layoutSpacing: 2;
}

#DeckControls {
  qproperty-layoutSpacing: 0;
}

#MainDecks, #MainDeckContainer {
  background-color: #333333;
}

#LeftGutter, #RightGutter {
  background-color: #222222;
}

#Deck1, #Deck2, #Deck3, #Deck4 {
  background-color: #333333;
}

WWidget, WLabel {
  /* All labels should default to a grey that is readable on black. */
  color: #D2D2D2;
  font-size: 12px;
}

/* Track text, etc. should be in the deck color. */
#Deck1 WLabel, #Deck2 WLabel, #Deck3 WLabel, #Deck4 WLabel {
  color: #D2D2D2;
}

WNumberRate {
  font-size: 13px;
}
#RateDisplay1, #RateDisplay2, #RateDisplay3, #RateDisplay4 {
  qproperty-layoutAlignment: 'AlignHCenter';
}

#Mixer {
  qproperty-layoutAlignment: 'AlignTop';
  background-color: #333;
  margin: 0px 2.5px 5px 2.5px;
  padding: 0px 0px 3px 0px;
}

#DeckMixer {
  background-color: #333333;
}

#CircleButton, #QuickEffectKillButton {
  border: 3px solid #333333;
  border-radius: 2px;
}

#EQKillButton,
#QuickEffectKillButton {
  border-radius: 2px;
  border: 0px;
  margin: 1px;
}

#EQKillButton[value="1"] {
  background-color: #bb0000;
  }
  #EQKillButton[value="1"]:hover {
    background-color: #e30000;
  }

#SmallCircleButton {
  border: 2px solid #333333;
  border-radius: 1px;
}

#MixerStrip_4Decks {
  padding: 0px 5px;
  qproperty-layoutAlignment: 'AlignHCenter';  /*
  background-color: #911661; */
}

#ButtonContainer {
  qproperty-layoutAlignment: 'AlignCenter';
  padding: 3px 0px 3px 0px;
}

#MixerButtonContainerRight {
  qproperty-layoutAlignment: 'AlignLeft';
  padding: 0px 0px 0px 9px; /*
  background-color: #456313;  */
}

#MixerButtonContainerLeft {
  qproperty-layoutAlignment: 'AlignRight';
  padding: 0px 9px 0px 0px;
}

#4DecksMixerMonoMeterLeft {
  padding: 0px 3px 0px 4px;
}
#4DecksMixerMonoMeterRight {
  padding: 0px 4px 0px 3px;
}

#channel_VuMeter_Group {
  qproperty-layoutSpacing: 2;
  qproperty-layoutAlignment: 'AlignHCenter';
  /* background-color: #828315; */
}

#main_VuMeter_Group {
  qproperty-layoutSpacing: 2;
  qproperty-layoutAlignment: 'AlignHCenter';
  padding-left: 5px;
  padding-right: 5px;
  /* background-color: #828315; */
}

#MainVu {
  qproperty-layoutAlignment: 'AlignCenter';
  /* background-color: #582831; */
}

#vumeter_v, #vumeter_h {
  qproperty-layoutSpacing: 2;
}

WVuMeter, #PeakIndicator {
  background-color: #222222;
}

/* Starrating for tracks loaded in decks */
WStarRating {
  margin            : 5px 5px 0px 0px;
  border            : 0px solid #ffffff;
  padding           : 2px;
  color             : #d2d2d2;
  background-color  : none;
}

#SampleDecksContainer {
  background-color: #333333;
}

#MicrophonesContainer {
}

#MicAuxRack {
  background-color: #222;
  margin-bottom: 4px;
  qproperty-layoutSpacing: 3;
}

#MicAuxLabelContainer,
#DuckingLabelContainer {
  qproperty-layoutAlignment: 'AlignHCenter';
}

#MicAuxContainer, #MicDuckingContainer {
  margin: 0px;
  background-color: #333;
}

#MicAuxContainer {
  padding: 4px 3px;
}
#MicDuckingContainer {
  padding: 4px;
}

#MicAuxContainer {
  qproperty-layoutSpacing: 3;
}

#MicDuckingControls {
  qproperty-layoutSpacing: 1;
}

#MicAuxLabel, #DuckingLabel {
  font-weight: bold;
}

#MicAuxButtons {
  qproperty-layoutSpacing: 3;
}

#OrientationButtonAux {
}

#LibraryContainer {
  qproperty-layoutAlignment: 'AlignLeft | AlignVCenter';
  background-color: #222222;
  padding-top: 2px;
}

#LibrarySplitter {
  background-color: #222222;
}

#EffectRackContainer {
  background-color: #333333;
}

#EffectUnitsRow {
  border: 1px solid #222222;
  border-width: 0px 0px 5px 0px;
}

#EffectUnitNoParameters { /*
  padding-left: 5px;  */
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
}

#EffectUnitEffectsNoParameters {
  qproperty-layoutSpacing: 20;
  padding: 0px 4px;
}

#EffectUnitEffects {
  padding: 2px;
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  qproperty-layoutSpacing: 2;
}

#EffectUnitParameters {
  padding: 0 2px;
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  qproperty-layoutSpacing: 2;
}

#EffectUnit {
  font-size: 15px;
}

/* Track label inline editor in decks and samplers */
WTrackPropertyEditor {
  font-size: 15px;
}

#SampleDecksContainer {
}

#SamplerTopRowOuter {
  padding: 2px;
}

#SamplerTopRowInner {
  qproperty-layoutSpacing: 2;
}

#SamplerExpansion {
  padding: 2px;
  qproperty-layoutSpacing: 2;
}

#SampleDecksExpanded, #SampleDecksCollapsed {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
}

#OverviewRow, #VisualRow, #ButtonRow {
  /*qproperty-layoutContentsMargins: rect(0 1 0 1);*/
}

WWidgetGroup {
  /*border: 1px solid rgb(128, 128, 128);*/
  /*margin: 0px;
  padding: 0px;
  qproperty-layoutSpacing: 0;
  qproperty-layoutContentsMargins: rect(0 0 0 0);*/
  /*qproperty-layoutAlignment: 'AlignCenter';*/
}

/*******************************************************************************
 ** Buttons  *******************************************************************
 *******************************************************************************/

WPushButton,
WEffectChainPresetButton,
#BpmLockToggle[value="1"] {
    color: #D2D2D2;
    background-color: #4B4B4B;
    border: 1px solid #4B4B4B;
    border-radius: 2px;
    outline: none;
}

WPushButton:hover,
#PlayToggle:hover,
WEffectChainPresetButton:hover,
#BpmLockToggle[value="1"]:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 1px solid #5F5F5F;
}

/*"Pressed" state*/
WPushButton[value="1"],
WPushButton[value="2"],
#PlayToggle[value="1"] {
    color: #FDFDFD;
    background-color: #006596;
    border: 1px solid #006596;
}
WPushButton#SyncLeader[value="1"] {
    background-color: #4B4B4B;
    border: 1px solid #0092d9;
}
WPushButton#SyncLeader[value="0"] {
  image: url(skin:/../Deere/icon/ic_sync_leader_off.svg) no-repeat center center;
}
WPushButton#SyncLeader[value="1"],
WPushButton#SyncLeader[value="2"] {
  image: url(skin:/../Deere/icon/ic_sync_leader_on.svg) no-repeat center center;
}

WPushButton[value="1"]:hover,
WPushButton[value="2"]:hover,
#PlayToggle[value="1"]:hover {
    color: #FDFDFD;
    background-color: #0080BE;
    border: 1px solid #0080BE;
}

#HotcueButton {
  border: none;
}

#HotcueButton[light="true"] {
    color: #1f1e1e;
}
#HotcueButton[light="true"][type="loop"] {
  image: url(skin:/../Deere/icon/ic_hotcue_loop_dark_48px.svg) no-repeat center center;
}
#HotcueButton[dark="true"][type="loop"] {
  image: url(skin:/../Deere/icon/ic_hotcue_loop_light_48px.svg) no-repeat center center;
}

#PlayToggle {
  background-color: none;
  border: 1px solid transparent;
}

WPushButton#PlayToggle[value="0"] {
  image: url(skin:/../Deere/icon/ic_play_48px.svg) no-repeat center center;
  background-color: transparent;
}

WPushButton#PlayToggle[value="1"] {
  image: url(skin:/../Deere/icon/ic_pause_48px.svg) no-repeat center center;
}
WPushButton#PreviewIndicator {
  background-color: transparent;
}
/* Blue border for Play buttons when previewing from
  Cue or Hotcue */
WPushButton#PreviewIndicator[value="1"] {
  border: 2px solid #0080BE;
}
WPushButton#PreviewIndicator[value="0"] {
  border: none;
}

#ToolbarButton[value="1"] {
    color: #D2D2D2;
    background-color: #5a5a5a;
    border: 3px solid #006596;
    border-radius: 3px;
}

#SkinSectionToggleButton[value="1"]:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 3px solid #0080BE;
    border-radius: 3px;
}

/* The effect unit mix mode button toggles between
two different modes that are not "on" or "off", so
do not highlight either state. */
#EffectUnitMixModeButton {
  margin: 1px 4px;
  border-radius: 2px;
  border: 0px;
}

#EffectUnitMixModeButton[value="0"]:hover,
#EffectUnitMixModeButton[value="1"]:hover {
    background-color: #5F5F5F;
}

#EffectUnitMixModeButton[value="1"] {
    background-color: #4B4B4B;
}


/* Special case "orientation" controls
  0 -- left
  1 -- center / off
  2 -- right
*/
/* Default xfader positions:
  left decks = left xfader
  right decks = right xfader
  auxiliary = center */
#OrientationButtonDeck1[value="0"],
#OrientationButtonDeck3[value="0"],
#OrientationButtonDeck2[value="2"],
#OrientationButtonDeck4[value="2"],
#OrientationButtonAux[value="1"],
#OrientationButtonSampler[value="1"] {
    color: #D2D2D2;
    background-color: #4B4B4B;
    border: 1px solid #4B4B4B;
    border-radius: 2px;
    outline: none;
}

#OrientationButtonDeck1[value="0"]:hover,
#OrientationButtonDeck3[value="0"]:hover,
#OrientationButtonDeck2[value="2"]:hover,
#OrientationButtonDeck4[value="2"]:hover,
#OrientationButtonAux[value="1"]:hover,
#OrientationButtonSampler[value="1"]:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 0px solid #5F5F5F;
}

/* Highlight xfader special positions != default */
#OrientationButtonDeck1[value="1"],
#OrientationButtonDeck1[value="2"],
#OrientationButtonDeck3[value="1"],
#OrientationButtonDeck3[value="2"],
#OrientationButtonDeck2[value="0"],
#OrientationButtonDeck2[value="1"],
#OrientationButtonDeck4[value="0"],
#OrientationButtonDeck4[value="1"],
#OrientationButtonAux[value="0"],
#OrientationButtonAux[value="2"],
#OrientationButtonSampler[value="0"],
#OrientationButtonSampler[value="2"] {
    color: #FDFDFD;
    background-color: #006596;
    border: 0px solid #006596;
    border-radius: 2px;
    outline: none;
}

#OrientationButtonDeck1[value="1"]:hover,
#OrientationButtonDeck1[value="2"]:hover,
#OrientationButtonDeck3[value="1"]:hover,
#OrientationButtonDeck3[value="2"]:hover,
#OrientationButtonDeck2[value="0"]:hover,
#OrientationButtonDeck2[value="1"]:hover,
#OrientationButtonDeck4[value="0"]:hover,
#OrientationButtonDeck4[value="1"]:hover,
#OrientationButtonAux[value="0"]:hover,
#OrientationButtonAux[value="2"]:hover,
#OrientationButtonSampler[value="0"]:hover,
#OrientationButtonSampler[value="2"]:hover {
    color: #FDFDFD;
    background-color: #0080BE;
    border: 0px solid #0080BE;
}

/* Special case SamplerPlayButtonRepeating controls
  When sampler is playing, displays same play icon as normal, but
  background is purple instead of blue.
*/

#SamplerPlayButtonRepeating[value="1"] {
    color: #711ada;
    background-color: #711ada;
    border: 0px solid #711ada;
}

#SamplerPlayButtonRepeating[value="1"]:hover {
    color: #8b32ff;
    background-color: #8b32ff;
    border: 0px solid #8b32ff;
}

/* Special case link_type button for effect parameters
  0 -- not linked / default (off)
  1 -- linked (on)
  2 -- split linked left (on)
  3 -- split linked right (on)
  4 -- split linked left/right (on)

  We define only those values (2-4) that are not covered by the existing
  standard button definitions.
  Note: EQ Gain effects cannot be used in split mode (= can be 0 or 1 only)
*/
#EffectSlotParameterLinkButtonsContainer {
    margin: 1px 4px;
    qproperty-layoutSpacing: 1;
    border-radius: 2px;
    background-color: #282828;
}

#EffectSlotParameterLinkTypeButton[value="2"] {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #006596,
                                      stop: 0.33 #006596,
                                      stop: 0.34 #4B4B4B,
                                      stop: 0.66 #4B4B4B,
                                      stop: 0.67 #4B4B4B,
                                      stop: 1 #4B4B4B);

    border: 0px solid #006596;
}

#EffectSlotParameterLinkTypeButton[value="2"]:hover {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #0080BE,
                                      stop: 0.33 #0080BE,
                                      stop: 0.34 #5F5F5F,
                                      stop: 0.66 #5F5F5F,
                                      stop: 0.67 #5F5F5F,
                                      stop: 1 #5F5F5F);
    border: 0px solid #0080BE;
}

#EffectSlotParameterLinkTypeButton[value="3"] {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #4B4B4B,
                                      stop: 0.33 #4B4B4B,
                                      stop: 0.34 #4B4B4B,
                                      stop: 0.66 #4B4B4B,
                                      stop: 0.67 #006596,
                                      stop: 1 #006596);
    border: 0px solid #006596;
}


#EffectSlotParameterLinkTypeButton[value="3"]:hover {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #5F5F5F,
                                      stop: 0.33 #5F5F5F,
                                      stop: 0.34 #5F5F5F,
                                      stop: 0.66 #5F5F5F,
                                      stop: 0.67 #0080BE,
                                      stop: 1 #0080BE);
    border: 0px solid #0080BE;
}

#EffectSlotParameterLinkTypeButton[value="4"] {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #006596,
                                      stop: 0.330000 #006596,
                                      stop: 0.340000 #4B4B4B,
                                      stop: 0.660000 #4B4B4B,
                                      stop: 0.670000 #006596,
                                      stop: 1 #006596);
    border: 0px solid #006596;
}


#EffectSlotParameterLinkTypeButton[value="4"]:hover {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #0080BE,
                                      stop: 0.330000 #0080BE,
                                      stop: 0.340000 #5F5F5F,
                                      stop: 0.660000 #5F5F5F,
                                      stop: 0.670000 #0080BE,
                                      stop: 1 #0080BE);
    border: 0px solid #0080BE;
}

#EffectSlotParameterLinkInversionButton[value="1"] {
    background-color: #b90505;
    border: 1px solid #b90505;
}

#EffectSlotParameterLinkInversionButton[value="1"]:hover {
    background-color: #e80808;
    border: 1px solid #FF0808;
}

/* Special case "hide/show" button
   The button unfolds/folds widgets. We display different icons per state, but
   do not want an active or active:hover color like with the other buttons.
*/
#ShowHideToggle {
  qproperty-layoutAlignment: 'AlignTop';
  padding-top: 3px;
}

#SampleDeckToggle[value="1"], #LibraryToggle[value="1"], #EffectRackToggle[value="1"] {
    color: #D2D2D2;
    background-color: #4B4B4B;
    border: 1px solid #4B4B4B;
    border-radius: 2px;
    outline: none;
}

#SampleDeckToggle[value="1"]:hover, #LibraryToggle[value="1"]:hover, #EffectRackToggle[value="1"]:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 0px solid #5F5F5F;
}

#WaveformZoomDownButton[value="0"]:!hover,
#WaveformZoomSetDefaultButton[value="0"]:!hover,
#WaveformZoomUpButton[value="0"]:!hover {
  background: none;
  border: none;
}

#BeatJumpValue, #LoopMoveValue, #HotcueButton, #DeckCue, #DeckSync, #BeatsyncButton {
  font: bold 12px;
}

/*******************************************************************************
 ** End Buttons  ***************************************************************
 *******************************************************************************/


/* common styles for WEffectSelector, QMenu, QToolTip */
WEffectSelector QAbstractScrollArea {
  min-width: 160px;
}
WEffectChainPresetSelector QAbstractScrollArea {
  min-width: 140px;
}
#fadeModeCombobox QAbstractScrollArea {
  min-width: 185px;
}
QToolTip,
#MainMenu,
#MainMenu::item,
#MainMenu QMenu,
#MainMenu QMenu::item,
#MainMenu QMenu QCheckBox,
#ToolBar,
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::item:!selected,
WEffectSelector QAbstractScrollArea,
WEffectChainPresetSelector::item:!selected,
WEffectChainPresetSelector QAbstractScrollArea,
WSearchLineEdit::item:!selected,
WSearchLineEdit QAbstractScrollArea,
#fadeModeCombobox::item:!selected,
#fadeModeCombobox QAbstractScrollArea {
  color: #c1cabe;
  background-color: #201f1f;
}
QToolTip,
WLibrarySidebar QMenu,
WTrackTableViewHeader QMenu,
WLibraryTextBrowser QMenu,
WTrackMenu,
WTrackMenu QMenu,
QLineEdit QMenu,
QPlainTextEdit QMenu,
WCueMenuPopup,
WCoverArtMenu,
WEffectSelector QAbstractScrollArea,
WEffectChainPresetSelector QAbstractScrollArea,
WSearchLineEdit QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea {
  border-width: 1px;
  border-style: solid;
  border-color: #aaa;
  border-radius: 1px;
}
  /* hovered items */
  #MainMenu::item:selected,
  #MainMenu QMenu::item:selected,
  #MainMenu QMenu::item:focus,
  #MainMenu QMenu::item:hover,
  #MainMenu QMenu::indicator:checked:selected,
  #MainMenu QMenu::indicator:unchecked:selected,
  WLibrarySidebar QMenu::item:selected,
  WLibrarySidebar QMenu::indicator:unchecked: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,
  WEffectSelector::indicator:unchecked:selected,
  WEffectChainPresetSelector::item:selected,
  WEffectChainPresetSelector::indicator:unchecked:selected,
  WSearchLineEdit::item:selected,
  WSearchLineEdit::indicator:unchecked:selected,
  #fadeModeCombobox::item:selected,
  #fadeModeCombobox::indicator:unchecked:selected {
    background-color: #565353;
    color: #fff;
    /* remove OS focus indicator */
    outline: none;
    }
    /* required on Windows since the QAbstractItemViews don't inherit styles from
       the respective QComboBoxes */
    WEffectSelector QAbstractItemView,
    WEffectChainPresetSelector QAbstractItemView,
    WSearchLineEdit QAbstractItemView {
      selection-color: #fff;
      selection-background-color: #565353;
      border: 0px;
      outline: none;
    }
    /* Remove 3D border from unchecked effects checkmark space */
    WEffectSelector::item:selected,
    WEffectChainPresetSelector::item:selected,
    WSearchLineEdit::item:selected,
    #fadeModeCombobox::item:selected {
      border: 0px;
    }

/* It is difficult to achieve identical styles WMainMenuBar #MainMenu
  on Windows AND Linux because item and checkbox properties are rendered
  slightly different.
  For details see
    * default-menu-styles-linux.qss
    * default-menu-styles-windows.qss
  Common styles are set here.
  Luckily we don't need to care about macOS here -Woohoo!- because
  there the menu bar is always styled natively. */
#MainMenu {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
  #MainMenu QMenu::indicator:checked,
  #MainMenu QMenu::indicator:checked:selected {
    image: url(skin:/../Deere/icon/ic_mainmenu_checkbox_checked.svg);
  }
  #MainMenu QMenu::indicator:unchecked,
  #MainMenu QMenu::indicator:unchecked:selected {
    image: url(skin:/../Deere/icon/ic_mainmenu_checkbox.svg);
  }

#MainMenu QMenu {
  padding: 0.08em;
  border: 1px solid #888;
  border-radius: 2px;
  }
  #MainMenu QMenu::right-arrow,
  WTrackMenu::right-arrow,
  WTrackMenu QMenu::right-arrow {
    width: 0.7em;
    height: 0.7em;
    image: url(skin:/../Deere/icon/ic_chevron_right_48px.svg);
  }


WEffectSelector:!editable,
WEffectChainPresetSelector:!editable,
#fadeModeCombobox:!editable {
  color: #c1cabe;
  /* The 3D frame on the combo box becomes flat when you give it a border */
  border: 1px solid #444342;
  border-radius: 3px;
  }
  WEffectSelector:!editable,
  #fadeModeCombobox:!editable {
    font: 15px;
  }
  WEffectChainPresetSelector:!editable {
    font: 13px;
  }
WEffectSelector:!editable,
WEffectSelector:!editable:on,
WEffectChainPresetSelector:!editable,
WEffectChainPresetSelector:!editable:on {
  /* Fixes the white bars on the top/bottom of the popup on Mac OS X */
  margin: 0px;
  /* 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: 0px 6px;
  background-color: #404040;
}
#fadeModeCombobox {
  /* 1px is added in each dimension. 20+1+1 = 22 = button height */
  height: 20px;
  padding: 0px 6px;
  margin: 9px 3px 6px 3px;
}

  WEffectSelector:!editable:hover,
  WEffectChainPresetSelector:!editable:hover,
  #fadeModeCombobox:!editable:hover {
    border: 1px ridge #015d8d;
  }
  WEffectSelector::drop-down,
  WEffectChainPresetSelector::drop-down,
  WSearchLineEdit::drop-down,
  WEffectChainPresetSelector::drop-down,
  #fadeModeCombobox::drop-down {
    /* This causes the Qt theme's widget style to magically not apply. Go figure. */
    border: 0;
  }
  WEffectSelector::down-arrow,
  #fadeModeCombobox::down-arrow {
    width: 20px;
    height: 20px;
  }
  WEffectChainPresetSelector::down-arrow {
    width: 16px;
    height: 16px;
  }
  WEffectSelector::down-arrow,
  WSearchLineEdit::down-arrow,
  WEffectChainPresetSelector::down-arrow,
  #fadeModeCombobox::down-arrow {
    image: url(skin:/../Deere/icon/ic_chevron_down_48px.svg);
  }
  /* currently loaded effect */
  WEffectSelector::checked,
  WEffectChainPresetSelector::checked,
  #fadeModeCombobox::checked {
    color: #4495F4;
    font-weight: bold;
  }
  WEffectSelector::indicator:checked,
  WEffectChainPresetSelector::indicator:checked,
  #fadeModeCombobox::indicator:checked {
    /* checkbox container is 28 x 22px;
      use margin + border to create a square checkbox sized like kill buttons */
    margin: 2px 0px 2px 5px;
  }

  /* QuickEffect selector of left-hand decks and in 4-decks mixer
    has it's down arrow on the left side, below the QuickEffect toggle */
  WEffectChainPresetSelector#QuickEffectSelectorLeft {
    padding: 0px -2px 0px -1px;
    margin: 0px;
    text-align: left;
    }
    WEffectChainPresetSelector#QuickEffectSelectorLeft::drop-down {
      subcontrol-origin: margin;
      subcontrol-position: left center;
    }
  WEffectChainPresetSelector#QuickEffectSelectorRight {
    padding: 0px -1px 0px -2px;
    margin: 0px;
    text-align: right;
    }
    WEffectChainPresetSelector#QuickEffectSelectorRight::drop-down {
      subcontrol-origin: margin;
      subcontrol-position: right center;
    }

WEffectSelector::checked, /* selected item */
WEffectSelector::indicator, /* checkbox, tick mark */
WEffectSelector::drop-down,
WEffectSelector::indicator:unchecked,
WEffectChainPresetSelector::checked,
WEffectChainPresetSelector::indicator,
WEffectChainPresetSelector::drop-down,
WEffectChainPresetSelector::indicator:unchecked,
WSearchLineEdit::checked,
WSearchLineEdit::indicator,
WSearchLineEdit::drop-down,
WSearchLineEdit::indicator:unchecked,
#fadeModeCombobox::checked,
#fadeModeCombobox::indicator,
#fadeModeCombobox::drop-down,
#fadeModeCombobox::indicator:unchecked {
  padding: 0px;
  margin: 0px;
  image: none;
  outline: none;
  border: 0px solid transparent;
}

#MainMenu QMenu::separator,
WLibrarySidebar QMenu::separator,
WTrackTableViewHeader QMenu::separator,
WTrackMenu::separator,
WTrackMenu QMenu::separator,
WLibraryTextBrowser QMenu::separator,
QLineEdit QMenu::separator,
QPlainTextEdit QMenu::separator {
  border-top: 1px solid #999;
}

WLibrarySidebar QMenu::indicator,
WTrackTableViewHeader QMenu QCheckBox::indicator,
WTrackMenu QMenu QCheckBox::indicator {
  border: 1px solid #555;
  border-radius: 1px;
  background-color: #0f0f0f;
  /* remove OS focus indicator */
  outline: none;
}
WSearchRelatedTracksMenu #SearchSelectedAction::indicator {
  border: 0px;
  background-color: transparent;
}

WLibrarySidebar QMenu::indicator:selected,
WTrackTableViewHeader QMenu QCheckBox::indicator:selected,
WTrackMenu QMenu QCheckBox::indicator:selected {
  border: 1px solid #999;
}
/* 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: #555;
}
WTrackMenu QMenu QCheckBox::indicator:disabled {
  border: 1px solid #222;
  background-color: #333;
}
WLibrarySidebar QMenu::indicator:checked,
WTrackTableViewHeader QMenu QCheckBox::indicator:checked,
WTrackMenu QMenu QCheckBox::indicator:checked {
  image: url(skin:/../Deere/icon/ic_library_checkmark_orange.svg);
}
WTrackTableViewHeader QMenu::indicator:checked,
WEffectSelector::indicator:checked,
WEffectChainPresetSelector::indicator:checked,
#fadeModeCombobox::indicator:checked {
  image: url(skin:/../Deere/icon/ic_library_checkmark_blue.svg);
}

/* disabled menu item and checkbox */
WTrackMenu QMenu QCheckBox::indicator:disabled:unchecked,
WTrackMenu QMenu QCheckBox::indicator:disabled:checked,
WTrackMenu QMenu QCheckBox::indicator:indeterminate {
  background-color: #222;
}
WTrackMenu QMenu QCheckBox::indicator:disabled:checked {
  image: url(skin:/../Deere/icon/ic_library_checkmark_grey.svg);
}
WTrackMenu QMenu QCheckBox::indicator:indeterminate {
  image: url(skin:/../Deere/icon/ic_library_checkmark_indeterminate_orange.svg);
}
WTrackMenu QMenu QCheckBox::indicator:disabled:indeterminate {
  image: url(skin:/../Deere/icon/ic_library_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::indicator:unchecked,
WTrackTableViewHeader QMenu::indicator:unchecked:selected,
WEffectSelector::indicator:unchecked,
WEffectSelector::indicator:unchecked:selected,
WEffectChainPresetSelector::indicator:unchecked,
WEffectChainPresetSelector::indicator:unchecked:selected,
#fadeModeCombobox::indicator:unchecked,
#fadeModeCombobox::indicator:unchecked:selected {
  image: none;
}
/* common styles for WEffectSelector, QMenu, QToolTip */

/* widgets in cue popup menu */
#CueLabelEdit {
  padding: 2px;
  border: 1px solid #4B4B4B;
  background-color: #0f0f0f;
  color: #d2d2d2;
  selection-color: #222222;
  selection-background-color: #d2d2d2;
}

#CueDeleteButton {
/* tall button, about the same height as cue number + label edit box */
  width: 28px;
  height: 46px;
  /* make the icon slightly larger than default 16px */
  qproperty-iconSize: 20px;
  qproperty-icon: url(skin:/../Deere/icon/ic_delete.svg);
  background-color: #3B3B3B;
  border-radius: 2px;
  outline: none;
}

#CueSavedLoopButton {
/* tall button, about the same height as cue number + label edit box */
  width: 28px;
  height: 46px;
  /* make the icon slightly larger than default 16px */
  qproperty-iconSize: 20px;
  qproperty-icon: url(skin:/../Deere/icon/ic_loop_48px.svg);
  background-color: #3B3B3B;
  border-radius: 2px;
  outline: none;
}

#CueDeleteButton:hover, #CueSavedLoopButton:hover {
  background-color: #4B4B4B;
}

#CueSavedLoopButton:checked {
  background-color: #006596;
}

WRateRange {
    font-size: 10px;
}

#RateDisplayTopPrefix {
    qproperty-alignment: 'AlignLeft | AlignTop';
}
#RateDisplayTopRate {
    qproperty-alignment: 'AlignRight | AlignTop';
}

#RateDisplayBottomPrefix {
    qproperty-alignment: 'AlignLeft | AlignBottom';
}
#RateDisplayBottomRate {
    qproperty-alignment: 'AlignRight | AlignBottom';
}