Merge pull request #3704 from ronso0/menubar-styles-23

Skins: style main menubar

13 files changed, 639 insertions, 429 deletions

diff --git a/res/skins/LateNight/classic/buttons/btn__lib_checkmark_grey.svg b/res/skins/LateNight/classic/buttons/btn__lib_checkmark_grey.svg
new file mode 100644
index 0000000000..2aa0d5f5c3
--- /dev/null
+++ b/res/skins/LateNight/classic/buttons/btn__lib_checkmark_grey.svg
@@ -0,0 +1,7 @@
+<svg width="10" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(0,-22)" stroke="#8c8c8c">
+    <g transform="matrix(.4151 0 0 .4151 -1.6604 19.547)" stroke="#8c8c8c">
+      <path d="m8.8184 20.364 4.8181 4.8181 9.6363-14.454" fill="none" stroke="#8c8c8c" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.8181"/>
+    </g>
+  </g>
+</svg>
diff --git a/res/skins/LateNight/classic/buttons/btn__menu_checkbox.svg b/res/skins/LateNight/classic/buttons/btn__menu_checkbox.svg
new file mode 100644
index 0000000000..36a5945223
--- /dev/null
+++ b/res/skins/LateNight/classic/buttons/btn__menu_checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1.5" y="1.5" width="17" height="17" rx="1" ry="1" stroke="#3b3b3b" stroke-linecap="square" stroke-linejoin="round" style="paint-order:markers fill stroke"/>
+</svg>
diff --git a/res/skins/LateNight/classic/buttons/btn__menu_checkbox_checked.svg b/res/skins/LateNight/classic/buttons/btn__menu_checkbox_checked.svg
new file mode 100644
index 0000000000..89ca21620f
--- /dev/null
+++ b/res/skins/LateNight/classic/buttons/btn__menu_checkbox_checked.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1.5" y="1.5" width="17" height="17" rx="1" ry="1" stroke="#3b3b3b" stroke-linecap="square" stroke-linejoin="round" style="paint-order:markers fill stroke"/>
+  <path d="m5.49272 11.5024 3.00483 3.00484 6.00973-9.01432" fill="none" stroke="#f60" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.67296"/>
+</svg>
diff --git a/res/skins/LateNight/palemoon/buttons/btn__effect_selected.svg b/res/skins/LateNight/palemoon/buttons/btn__effect_selected.svg
new file mode 100644
index 0000000000..f9232c2c0f
--- /dev/null
+++ b/res/skins/LateNight/palemoon/buttons/btn__effect_selected.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="m1.83596 0.781075 6.32812 4.21895-6.32812 4.21895v-8.4379" fill="none" stroke="#000001" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.12505"/>
+  <path d="m1.83596 0.777045 6.32812 4.21895-6.32812 4.21895v-8.4379" fill="#918273" stroke-width=".703158"/>
+</svg>
diff --git a/res/skins/LateNight/palemoon/buttons/btn__menu_checkbox.svg b/res/skins/LateNight/palemoon/buttons/btn__menu_checkbox.svg
new file mode 100644
index 0000000000..36a5945223
--- /dev/null
+++ b/res/skins/LateNight/palemoon/buttons/btn__menu_checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1.5" y="1.5" width="17" height="17" rx="1" ry="1" stroke="#3b3b3b" stroke-linecap="square" stroke-linejoin="round" style="paint-order:markers fill stroke"/>
+</svg>
diff --git a/res/skins/LateNight/palemoon/buttons/btn__menu_checkbox_checked.svg b/res/skins/LateNight/palemoon/buttons/btn__menu_checkbox_checked.svg
new file mode 100644
index 0000000000..8bcc02e20b
--- /dev/null
+++ b/res/skins/LateNight/palemoon/buttons/btn__menu_checkbox_checked.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1.5" y="1.5" width="17" height="17" rx="1" ry="1" stroke="#3b3b3b" stroke-linecap="square" stroke-linejoin="round" style="paint-order:markers fill stroke"/>
+  <path d="m5.49272 11.5024 3.00483 3.00484 6.00973-9.01432" fill="none" stroke="#4097ba" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.67296"/>
+</svg>
diff --git a/res/skins/LateNight/skin.xml b/res/skins/LateNight/skin.xml
index a668ad00cc..5bbd700c12 100644
--- a/res/skins/LateNight/skin.xml
+++ b/res/skins/LateNight/skin.xml
@@ -2,7 +2,7 @@
   LateNight, Resizable skin for Mixxx 2.3.x
   www.mixxx.org
   Copyright (C) 2010-2013 jus <s.brandt@mixxx.org>, 2014 Owen Williams <owilliams@mixxx.org>,
-  2019-2020 ronso0 <ronso0@mixxx.org>
+  2019-2021 ronso0 <ronso0@mixxx.org>
   "LateNight" is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license.
   http://creativecommons.org/licenses/by-sa/3.0/
 
@@ -30,9 +30,9 @@
 <skin>
   <manifest>
     <title>LateNight</title>
-    <author>owilliams</author>
+    <author>owilliams, ronso0</author>
     <version>2.3.0.01</version>
-    <description>A wide nighttime skin with stacked waveforms, 4 decks and 8 samplers.</description>
+    <description>A wide nighttime skin with stacked waveforms, 4 decks in 3 configurations and up to 16 samplers.</description>
     <language>en</language>
     <license>Creative Commons Attribution, Share-Alike 3.0 Unported</license>
     <attributes>
@@ -54,9 +54,9 @@
       <attribute persist="true" config_key="[Skin],show_big_spinny_coverart">0</attribute>
       <!-- ToDo: deck-independent vinyl controls? -->
       <attribute persist="true" config_key="[VinylControl],show_vinylcontrol">0</attribute>
-      <!-- Deck variant that is shown as soon as the mixer is hidden, see deck.xm
-          and /helpers/skin_helper_deck_size.xml
-          0=mini 1=compact (default) 2=full deck -->
+      <!-- Deck variant that is shown as soon as the mixer is hidden.
+          See deck.xml and /helpers/skin_helper_deck_size.xml for documentation.
+          0=mini 1=compact(default) 2=full deck -->
       <attribute persist="true" config_key="[LateNight],deck_size_without_mixer">1</attribute>
       <!-- Full deck -->
       <attribute persist="true" config_key="[Skin],show_rate_controls">1</attribute>
@@ -282,7 +282,9 @@
   </Schemes>
 
   <ObjectName>Mixxx</ObjectName>
-  <Style src="skin:style.qss"/>
+  <Style src="skin:style.qss"
+         src-linux="skin:style_linux.qss"
+         src-windows="skin:style_windows.qss"/>
   <!-- MinimumSize should not be an exact monitor resolution. There needs
   to be space for the title bar or other chrome at full screen.
   https://www.mixxx.org/wiki/doku.php/skin_guidelines#the_optimal_size_for_skins -->
diff --git a/res/skins/LateNight/skin_settings.xml b/res/skins/LateNight/skin_settings.xml
index 637aa281fa..e705c804be 100644
--- a/res/skins/LateNight/skin_settings.xml
+++ b/res/skins/LateNight/skin_settings.xml
@@ -159,7 +159,7 @@ Description:
                             <SetVariable name="Text">Hotcues</SetVariable>
                             <SetVariable name="Setting">[Skin],show_hotcues</SetVariable>
                             <SetVariable name="TooltipId">hotcue_toggle</SetVariable>
-                            <SetVariable name="Width">72f</SetVariable>
+                            <SetVariable name="Width">77f</SetVariable>
                           </Template>
 
                           <!-- From here on, we need the regular toggles to be 180px wide (expanding) -->
@@ -630,7 +630,7 @@ Description:
                         <SetVariable name="Text">Effect Units</SetVariable>
                         <SetVariable name="Setting">[EffectRack1],show</SetVariable>
                         <SetVariable name="TooltipId">show_effects</SetVariable>
-                        <SetVariable name="Width">120me</SetVariable>
+                        <SetVariable name="Width">130me</SetVariable>
                       </Template>
 
                       <WidgetGroup>
@@ -730,7 +730,7 @@ Description:
                         <SetVariable name="TooltipId">show_samplers</SetVariable>
                         <SetVariable name="Text">Samplers </SetVariable>
                         <SetVariable name="Setting">[Samplers],show_samplers</SetVariable>
-                        <SetVariable name="Width">105f</SetVariable>
+                        <SetVariable name="Width">115f</SetVariable>
                       </Template>
 
                       <WidgetGroup>
diff --git a/res/skins/LateNight/style.qss b/res/skins/LateNight/style.qss
index 44f06197b6..bf3a72deb9 100644
--- a/res/skins/LateNight/style.qss
+++ b/res/skins/LateNight/style.qss
@@ -36,6 +36,11 @@ WEffectSelector QAbstractScrollArea,
 #LibraryContainer QHeaderView,
 #LibraryContainer QHeaderView::item,
 #LibraryContainer QMenu {
+  /* On Linux all weight variants of Open Sans are identified
+  as "Open Sans".
+  On Windows however, the semi-bold variant is identified as
+  "Open Sans Semibold", thus we need to set some font weights
+  in style_windows.qss */
   font-family: "Open Sans";
   font-weight: 500; /* semi-bold */
   font-style: normal;
@@ -53,7 +58,6 @@ WOverview #PassthroughLabel,
 #VinylControls WPushButton,
 #FxAssignButtons WPushButton,
 #SamplerTitleMini,
-/* ToolBar */
 #GuiToggleButton,
 #RecFeedback, #RecDuration,
 #BroadcastButton,
@@ -74,7 +78,6 @@ WOverview #PassthroughLabel {
 #MicAuxLabel, #MicAuxLabelUnconfigured,
 #VinylControls WPushButton,
 #FxAssignButtons WPushButton,
-/* ToolBar */
 #GuiToggleButton,
 #RecFeedback, #RecDuration,
 #BroadcastButton,
@@ -100,7 +103,201 @@ QLabel#labelRecStatistics {
   font-weight: normal;
 }
 
+#LibraryContainer QMenu::indicator {
+  margin-right: 10px;
+}
+
+/* WMainMenuBar #MainMenu is difficult to style, at least when
+  it should look identical on Windows AND Linux.
+  Paddings and margins affect the item labels and checkboxes entirely
+  different so we need style_linux.qss and style_windows.qss to take
+  care of it individually.
+  Luckily we don't need to care about macOS here -Woohoo!- because
+  there the memnu bar is always styled natively. */
+#MainMenu {
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+}
+#MainMenu::item {
+  /* No big deal, just try to make it look like native menus */
+  padding: 0.1em 0.5em 0.1em 0.5em;
+  margin: 0em;
+}
+#MainMenu QMenu::item {
+  /*  Xfce/Gnome:
+        padding(-left) is applied to entire item (text + opt. icon)
+        = icon may overlap text
+        = item labels are always aligned, with or without checkbox/icon
+      Fedora/Arch/Windows:
+        padding(-left) is applied to text only
+        = does NOT align items with and without checkboxes */
+  /* The style below SHOULD yield identical results on all target OS,
+    yet it looks slightly different, items are shifted by a few pixels.. go figure */
+  /*padding: 0.1em 0.3em 0.2em 0.3em;*/
+  /*margin: 0em 0em 0em 1.5em;*/
+  }
+  /* Checkbox preceeding menu items (Options, ) */
+  #MainMenu QMenu::indicator {
+    width: 1em;
+    height: 1em;
+    /* The indicator is by default aligned with the text
+      = overlaps first few characters.
+      > margin-left needs to be negative to push it left.
+      margin-right = space QMenu::item text <> shortcut wtf... */
+    /* padding = icon border <> fixed-size image
+      = expands the 'background' area
+      = padding-top/bottom:
+       * adjust to cover the row height so the indicator looks like
+         part of the text item
+       * clipped by item height
+      = padding- left: adjust to equalize the painted bg surrounding the image. */
+  }
+  #MainMenu QMenu::indicator,
+  #MainMenu QMenu::indicator:selected,
+  #MainMenu QMenu::indicator:checked,
+  #MainMenu QMenu::indicator:checked:selected {
+    /* checkbox is a SVG with optional checkmark.
+      In all other menus border(css) and checkmark(SVG) are separate
+      which allows to combine them in a flexible way for many states
+      (like indeterminate, checked:selected, checked:!enabled)
+
+      Here we need to work around certain 'rendering issues' on
+      multiple target OS, and we only need
+      * checked
+      * unchecked
+      * checked:selected
+      * unchecked:selected
+      so we can use graphics only, which in return gives somewhat
+      identical appearance on both Wind'ohs and Linux  */
+  }
+  #MainMenu QMenu::separator {
+    height: 0px;
+    margin: 0.25em;
+  }
+  #MainMenu QMenu::right-arrow {
+    width: 0.7em;
+    height: 0.7em;
+  }
+
+
+
+
+
+  WEffectSelector QAbstractScrollArea {
+    /* This would set the maximum width only. The minimum seems to be
+      defined by the widget itself. */
+    /* TODO(ronso0)
+      Unfortunately, text elide (center) is calculated from the widget's
+      width, not from the width set here... */
+    min-width: 160px;
+  }
+  #fadeModeCombobox QAbstractScrollArea {
+    min-width: 185px;
+  }
+  WEffectSelector::indicator:checked,
+  #fadeModeCombobox::indicator:checked {
+    margin: 2px;
+  }
+  WEffectSelector::down-arrow,
+  #fadeModeCombobox::down-arrow {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  WEffectSelector::checked, /* selected item */
+  WEffectSelector::indicator, /* checkbox, tick mark */
+  WEffectSelector::drop-down,
+  WEffectSelector::indicator:unchecked,
+  #fadeModeCombobox::checked, /* selected mode */
+  #fadeModeCombobox::indicator, /* checkbox, tick mark */
+  #fadeModeCombobox::drop-down,
+  #fadeModeCombobox::indicator:unchecked,
+  /* Don't use #LibraryContainer QMenu::item, that would catch
+    ALL menus incl.WTrackMenu in the table, search menu,
+    sidebar menu, table header menu, cover art menu.
+    And for some reason the item properties set here can not be
+    overwritten with WSearchLineEdit QMenu::item below. */
+  WLibrarySidebar QMenu::item,
+  WTrackMenu::item,
+  WTrackMenu QMenu::item,
+  WTrackMenu QMenu QCheckBox,
+  WBeatSpinBox QMenu::item,
+  WCueMenuPopup QMenu::item,
+  WCoverArtMenu::item {
+    padding: 0px;
+    margin: 0px;
+    image: none;
+    outline: none;
+    border: 0px solid transparent;
+    }
+
+  WLibrarySidebar QMenu::separator,
+  WTrackMenu::separator,
+  WTrackMenu QMenu::separator,
+  QLineEdit QMenu::separator,
+  QTextBrowser QMenu::separator {
+    height: 0px;
+    margin: 4px;
+  }
 
+  WLibrarySidebar QMenu::item,
+  WLibrary QHeaderView QMenu::item,
+  WTrackMenu::item,
+  WTrackMenu QMenu::item {
+  /* padding-right reserves space for the submenu expand arrow
+    padding-left should be bigger than the menu icon width +
+    icon margin-left/-right */
+    padding: 5px 12px 5px 26px;
+  }
+  /* This catches context menus of
+    - property cells in the tracks table
+    - WCueMenuPopup cue label editor
+    - WBeatSpinBox
+    - AutoDJ transition QSpinBox*/
+  QLineEdit QMenu::item,
+  WCoverArtMenu::item,
+  /* for the sake of completeness: html root view of Crates, Rec etc. */
+  QTextBrowser QMenu::item {
+    padding: 5px 12px 5px 12px;
+  }
+  /* Icons in those menus (copy, paste, cut, delete) */
+  #LibraryContainer QMenu::icon,
+  QLineEdit QMenu::icon,
+  /* - checkbox in Crate name context menu
+        "[ ] Auto DJ Track Source"
+     - QHeaderView QMenu::indicator */
+  #LibraryContainer QMenu::indicator {
+    /* Linux: margin-right pushes the entire icon to the right !?? */
+    margin: 0px 4px 0px 5px;
+    }
+  /* items in Crate sub menu */
+  #LibraryContainer QMenu QCheckBox,
+  WTrackMenu QMenu QCheckBox {
+    padding: 3px 10px 3px 5px;
+    }
+
+  #MainMenu QMenu::right-arrow,
+  #LibraryContainer QMenu::right-arrow,
+  WTrackMenu::right-arrow,
+  WTrackMenu QMenu::right-arrow,
+  #LibraryContainer QTableView::indicator {
+    width: 10px;
+    height: 10px;
+    }
+  #LibraryContainer QMenu QCheckBox::indicator,
+  #LibraryContainer QMenu::indicator,
+  WTrackMenu QMenu QCheckBox::indicator,
+  WTrackMenu QMenu::indicator,
+  WCueMenuPopup QMenu::indicator {
+    width: 13px;
+    height: 13px;
+    border: 1px solid #333;
+    border-radius: 1px;
+    background-color: #000;
+    /* remove OS focus indicator */
+    outline: none;
+    }
 
 /************** font sizes / alignment ****************************************/
 
@@ -507,19 +704,14 @@ WEffectSelector {
 
   WEffectSelector QAbstractScrollArea,
   #fadeModeCombobox QAbstractScrollArea {
-    width: 142px;
-    /* padding-left: 6px; */
-    /* On Linux, this is not applied but font color from
-      WEffectSelector is inherited.
-      On Windows, it must be defined here */
     border: 1px solid #444;
     border-radius: 2px;
     padding: 0px;
     margin: 0px;
   }
   /* selected item */
-  WEffectSelector::checked,
-  #fadeModeCombobox::checked {
+  WEffectSelector:checked,
+  #fadeModeCombobox:checked {
     /* not applied
     padding-left: 5px;	*/
     padding: 0px;
diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
index b35c8d1f2a..b1f779715a 100644
--- a/res/skins/LateNight/style_classic.qss
+++ b/res/skins/LateNight/style_classic.qss
@@ -15,7 +15,11 @@
 
 /**********************************************************************
 ************** Colors & borders of GUI containers ********************/
-
+#MainMenu,
+#MainMenu::item,
+#MainMenu QMenu,
+#MainMenu QMenu::item,
+#MainMenu QMenu QCheckBox,
 #ToolBar,
 #WaveformsContainer,
 #Deck1, #DeckCompact1, #DeckMini1,
@@ -196,7 +200,7 @@ WSearchLineEdit,
   qproperty-layoutSpacing: 2;
 }
 #ToolBar {
-  padding: 1px 2px 0px 2px;
+  padding: 0px 2px 0px 2px;
   }
   #ToolBarSeparator {}
   #BatteryBox {
@@ -1045,7 +1049,6 @@ WCueMenuPopup QLabel,
 #CueLabelEdit,
 WCoverArtMenu,
 WTrackMenu,
-WTrackMenu QCheckBox,
 WTrackMenu QMenu,
 WTrackMenu QMenu QCheckBox,
 #LatencyLabel, WTime {
@@ -1091,8 +1094,12 @@ WTrackMenu QMenu QCheckBox,
 
 /* Grey */
 #PreviewLabel,
-WEffectSelector, WEffectSelector QAbstractScrollArea,
-#fadeModeCombobox, #fadeModeCombobox QAbstractScrollArea,
+WEffectSelector:!editable,
+WEffectSelector:!editable:on,
+WEffectSelector QAbstractScrollArea,
+#fadeModeCombobox:!editable,
+#fadeModeCombobox:!editable:on,
+#fadeModeCombobox QAbstractScrollArea,
 WBeatSpinBox, #spinBoxTransition,
 #LibraryFeatureControls QLabel,
 #LibraryFeatureControls QRadioButton {
@@ -1109,6 +1116,9 @@ WBeatSpinBox, #spinBoxTransition,
   color: #666;
 }
 
+#MainMenu::item,
+#MainMenu QMenu::item,
+#MainMenu QMenu QCheckBox,
 #VinylButton[displayValue="0"],
 #VinylModeButton,
 #PassthroughButton[displayValue="0"],
@@ -2021,28 +2031,6 @@ WTrackTableView {
   outline: none;
 }
 
-/* This is the only way to select the 'Played' checkbox.
-  Note that this also selects the BPM lock. */
-#LibraryContainer QTableView::indicator {
-/* This results in 10x10px + 1px border = 12x12px
-  Omitting this definitions makes the checkbox grow to
-  12x12px + 1px border = 14x14px */
-  width: 10px;
-  height: 10px;
-  /* border is added to size defined above */
-  border: 1px solid transparent;
-  margin: 0px;
-  padding: 0px;
-  }
-  #LibraryContainer QTableView::indicator:checked {
-    image: url(skin:/classic/buttons/btn__lib_checkmark_orange.svg);
-    border: 1px solid #ff6600;
-    }
-  #LibraryContainer QTableView::indicator:unchecked {
-    image: none;
-    border: 1px solid rgba(151,151,151,128);
-    }
-
 /* Table cell in edit mode */
 WLibrary QLineEdit,
 #LibraryBPMSpinBox {
@@ -2293,7 +2281,7 @@ WLibrary QRadioButton::indicator:unchecked {
 #LibraryContainer QTreeView::branch:closed:has-children:has-siblings:!selected {
 /*  Suppresses that selected sidebar items branch indicator shows wrong color when out of focus ; lp:880588 */
   border-image: none;
-    image: url(skin:/classic/style/library_branch_closed_grey.png);
+  image: url(skin:/classic/style/library_branch_closed_grey.png);
   }
   /* closed, selected */
   #LibraryContainer QTreeView::branch:closed:has-children:!has-siblings:selected,
@@ -2329,20 +2317,25 @@ WLibrary QRadioButton::indicator:unchecked {
 
 /************** common styles for WEffectSelector ******************************
 *************** QSpinBox, QMenu, QToolTip *************************************/
+QToolTip,
+#LibraryContainer QMenu,
+WTrackMenu,
+WTrackMenu QMenu,
 WEffectSelector QAbstractScrollArea,
 #fadeModeCombobox QAbstractScrollArea,
-QToolTip,
 WBeatSpinBox QMenu,
-#LibraryContainer QMenu,
 WCueMenuPopup,
 WCueMenuPopup QMenu,
-WCoverArtMenu,
-WTrackMenu,
-WTrackMenu QMenu {
+WCoverArtMenu {
   padding: 3px;
   border: 1px solid #888;
   border-radius: 2px;
 }
+#MainMenu QMenu {
+  padding: 0.08em;
+  border: 1px solid #888;
+  border-radius: 2px;
+}
 
 #SkinContainer {
   background-color: #0f0f0f;
@@ -2351,24 +2344,23 @@ WTrackMenu QMenu {
 #CrossfaderButtonContainer_Aux,
 WPushButton#CrossfaderButton[value="0"],
 QToolTip,
+WBeatSpinBox,
 WBeatSpinBox QMenu,
-  WCueMenuPopup,
-  #LibraryContainer QMenu,
-  WCueMenuPopup QMenu,
-  WCoverArtMenu,
-  WTrackMenu,
-  WTrackMenu QMenu,
 WBeatSpinBox QMenu::item,
-  #LibraryContainer QMenu::item,
-  WCueMenuPopup QMenu::item,
-  WCueMenuPopup QLabel,
-  WCoverArtMenu::item,
-  WTrackMenu::item,
-  WTrackMenu QMenu::item,
+#LibraryContainer QMenu,
+#LibraryContainer QMenu::item,
 #LibraryContainer QMenu QCheckBox,
-WTrackMenu QCheckBox,
+WTrackMenu,
+WTrackMenu::item,
+WTrackMenu QMenu,
+WTrackMenu QMenu::item,
 WTrackMenu QMenu QCheckBox,
-WBeatSpinBox,
+WCueMenuPopup,
+WCueMenuPopup QMenu,
+WCueMenuPopup QMenu::item,
+WCueMenuPopup QLabel,
+WCoverArtMenu,
+WCoverArtMenu::item,
 #spinBoxTransition,
 #SkinSettings,
 WSearchLineEdit,
@@ -2382,23 +2374,27 @@ WEffectSelector, #fadeModeCombobox {
   background-color: #161616;
 }
   /* hovered items */
-  WEffectSelector::item:selected,
-  #fadeModeCombobox::item:selected,
-  WBeatSpinBox QMenu::item:selected,
+  #MainMenu::item:selected,
+  #MainMenu QMenu::item:selected,
+  #MainMenu QMenu::item:focus,
+  #MainMenu QMenu::item:hover,
+  #MainMenu QMenu::indicator:checked:selected,
+  /* ::indicator:unchecked won't work. use 'unchecked' */
+  #MainMenu QMenu::indicator:unchecked:selected,
   #LibraryContainer QMenu::item:selected,
-  WCueMenuPopup QMenu::item:selected,
-  WCoverArtMenu::item:selected,
-  WTrackMenu::item:selected,
-  WTrackMenu QMenu::item:selected,
   #LibraryContainer QMenu QCheckBox:selected,
   #LibraryContainer QMenu QCheckBox:focus,  /* selected by keyboard */
   #LibraryContainer QMenu QCheckBox:hover, /* mouse hover */
-  WTrackMenu QCheckBox:selected,
-  WTrackMenu QCheckBox:focus,
-  WTrackMenu QCheckBox:hover,
+  WTrackMenu::item:selected,
+  WTrackMenu QMenu::item:selected,
   WTrackMenu QMenu QCheckBox:selected,
   WTrackMenu QMenu QCheckBox:focus,
   WTrackMenu QMenu QCheckBox:hover,
+  WEffectSelector::item:selected,
+  #fadeModeCombobox::item:selected,
+  WBeatSpinBox QMenu::item:selected,
+  WCueMenuPopup QMenu::item:selected,
+  WCoverArtMenu::item:selected,
   #SkinSettingsButton[hover="true"],
   #SkinSettingsNumToggle[hover="true"],
   #SkinSettingsNumToggleHeader[hover="true"],
@@ -2422,13 +2418,15 @@ WEffectSelector,
   /* The 3D frame on the combo box becomes flat when you give it a border
   border-radius: 3px; */
   }
-  WEffectSelector {
+  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: 0px 0px 2px 5px;
     margin: 0px;
   }
-  #fadeModeCombobox {
+  #fadeModeCombobox:!editable,
+  #fadeModeCombobox:!editable:on {
     height: 19px;
     padding: 0px 0px 1px 5px;
     margin: 0px 1px 2px 1px;
@@ -2436,166 +2434,84 @@ WEffectSelector,
   WEffectSelector::down-arrow,
   #fadeModeCombobox::down-arrow {
     image: url(skin:/classic/buttons/btn__fx_selector_down.svg);
-    border: 0;
-    padding: 0;
-    margin: 0;
     }
     WEffectSelector::down-arrow:hover,
     #fadeModeCombobox::down-arrow:hover {
       image: url(skin:/classic/buttons/btn__fx_selector_down_pressed.svg);
     }
 
-  WEffectSelector QAbstractScrollArea {
-    min-width: 160px;
-  }
-  #fadeModeCombobox QAbstractScrollArea {
-    min-width: 185px;
-  }
-  WEffectSelector::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;
-    image: url(skin:/classic/buttons/btn__lib_checkmark_orange.svg);
-  }
-  WEffectSelector::checked, /* selected item */
-  WEffectSelector::indicator, /* checkbox, tick mark */
-  WEffectSelector::drop-down,
-  WEffectSelector::indicator:!checked,
-  #fadeModeCombobox::checked, /* selected mode */
-  #fadeModeCombobox::indicator, /* checkbox, tick mark */
-  #fadeModeCombobox::drop-down,
-  #fadeModeCombobox::indicator:!checked,
-  WBeatSpinBox QMenu::item,
-  #LibraryContainer QMenu::item,
-  WCueMenuPopup QMenu::item,
-  WCoverArtMenu::item,
-  WTrackMenu::item,
-  WTrackMenu QMenu::item,
-  #LibraryContainer QMenu QCheckBox,
-  WTrackMenu QCheckBox,
-  WTrackMenu QMenu QCheckBox {
-      padding: 0px;
-      margin: 0px;
-      image: none;
-      outline: none;
-      border: 0px solid transparent;
-    }
-  WBeatSpinBox QMenu::separator,
-  #LibraryContainer QMenu::separator,
-  WCueMenuPopup QMenu::separator,
-  WTrackMenu::separator,
-  WTrackMenu QMenu::separator,
-  #SkinSettingsSeparator {
-    border-top: 1px solid #000;
-    border-bottom: 1px solid #222;
-    }
-    WBeatSpinBox QMenu::separator,
-    #LibraryContainer QMenu::separator,
-    WCueMenuPopup QMenu::separator,
-    WTrackMenu::separator,
-    WTrackMenu QMenu::separator {
-        height: 0px;
-        margin: 4px;
-      }
-  WBeatSpinBox QMenu::item,
-  #LibraryContainer QMenu::item,
-  WCueMenuPopup QMenu::item,
-  WCoverArtMenu::item,
-  WTrackMenu::item,
-  WTrackMenu QMenu::item {
-  /* Right padding creates a margin to the menu expand arrow.
-    Left padding should be bigger than menu icon width + menu icon
-    left/right margin */
-    padding: 5px 12px 5px 26px;
-  }
-  /* Icons in QLineEdit menus:
-   beatsize spinbox, searchbox, editable track properties */
-  WBeatSpinBox QMenu::icon,
-  #LibraryContainer QMenu::icon,
-  WCueMenuPopup QMenu::icon,
-  WTrackMenu::icon,
-  WTrackMenu QMenu::icon,
-  /* checkbox in Crate name context menu:
-    "[ ] Auto DJ Track Source"  */
-  #LibraryContainer QMenu::indicator,
-  WTrackMenu::indicator,
-  WTrackMenu QMenu::indicator {
-    margin: 0px 4px 0px 5px;
-    }
-  /* items in Crate sub menu */
-  #LibraryContainer QMenu QCheckBox,
-  WTrackMenu QCheckBox,
-  WTrackMenu QMenu QCheckBox {
-    padding: 3px 10px 3px 5px;
-    }
-  #LibraryContainer QMenu QCheckBox::indicator,
-  #LibraryContainer QMenu::indicator,
-  WCueMenuPopup QMenu::indicator,
-  WTrackMenu QCheckBox::indicator,
-  WTrackMenu::indicator,
-  WTrackMenu QMenu QCheckBox::indicator,
-  WTrackMenu QMenu::indicator {
-    width: 13px;
-    height: 13px;
-    border: 1px solid #333;
-    border-radius: 1px;
-    background-color: #000;
-    /* remove OS focus indicator */
-    outline: none;
-    }
   #LibraryContainer QMenu QCheckBox::indicator:checked,
   #LibraryContainer QMenu::indicator:checked,
-  WTrackMenu QCheckBox::indicator:checked,
-  WTrackMenu::indicator:checked,
+  #LibraryContainer QMenu::indicator:checked:selected,
+  #LibraryContainer QHeaderView QMenu::indicator:checked,
+  #LibraryContainer QTableView::indicator:checked,
   WTrackMenu QMenu QCheckBox::indicator:checked,
   WTrackMenu QMenu::indicator:checked,
-  WCueMenuPopup QMenu::indicator:checked {
+  WCueMenuPopup QMenu::indicator:checked,
+  WEffectSelector::indicator:checked,
+  #fadeModeCombobox::indicator:checked {
     image: url(skin:/classic/buttons/btn__lib_checkmark_orange.svg);
     }
+  #LibraryContainer QMenu QCheckBox::indicator:!enabled:checked,
+  #LibraryContainer QMenu QCheckBox::indicator:indeterminate,
+  WTrackMenu QMenu QCheckBox::indicator:!enabled:checked,
+  WTrackMenu QMenu QCheckBox::indicator:indeterminate {
+    image: url(skin:/classic/buttons/btn__lib_checkmark_grey.svg);
+  }
+
+  #MainMenu QMenu::indicator:checked,
+  #MainMenu QMenu::indicator:checked:selected {
+    image: url(skin:/classic/buttons/btn__menu_checkbox_checked.svg);
+    }
+    #MainMenu QMenu::indicator:unchecked,
+    #MainMenu QMenu::indicator:unchecked:selected {
+      image: url(skin:/classic/buttons/btn__menu_checkbox.svg);
+    }
+  /* explicitly remove icon from unchecked items */
+  #LibraryContainer QMenu::indicator:unchecked,
+  #LibraryContainer QMenu::indicator:unchecked:selected,
+  #LibraryContainer QTableView::indicator:unchecked,
+  #LibraryContainer QTableView::indicator:unchecked:selected,
+  WEffectSelector::indicator:unchecked,
+  WEffectSelector::indicator:unchecked:selected,
+  #fadeModeCombobox::indicator:unchecked,
+  #fadeModeCombobox::indicator:unchecked:selected {
+    image: none;
+  }
+
   /* disabled menu item and checkbox */
-  #LibraryContainer QMenu QCheckBox:!enabled,
+  #MainMenu::item:!enabled,
+  #MainMenu QMenu::item:!enabled,
   #LibraryContainer QMenu::item:!enabled,
-  WTrackMenu QCheckBox:!enabled,
+  #LibraryContainer QMenu QCheckBox:!enabled,
+  #LibraryContainer QMenu QCheckBox::indicator:!enabled,
   WTrackMenu::item:!enabled,
   WTrackMenu QMenu QCheckBox:!enabled,
   WTrackMenu QMenu::item:!enabled,
+  WTrackMenu QMenu QCheckBox::indicator:!enabled,
+  WBeatSpinBox QMenu::item:!enabled,
   WCueMenuPopup QMenu::item:!enabled,
-  WCoverArtMenu::item:!enabled,
-  #LibraryContainer QMenu QCheckBox::indicator:!enabled,
-  WTrackMenu QCheckBox::indicator:!enabled,
-  WTrackMenu QMenu QCheckBox::indicator:!enabled {
+  WCoverArtMenu::item:!enabled {
     color: #494949;
     }
   #LibraryContainer QMenu QCheckBox::indicator:!enabled:!checked,
-  #LibraryContainer QMenu::indicator:!enabled:!checked,
-  WTrackMenu QCheckBox::indicator:!enabled:!checked,
-  WTrackMenu::indicator:!enabled:!checked,
+  #LibraryContainer QMenu QCheckBox::indicator:indeterminate,
   WTrackMenu QMenu QCheckBox::indicator:!enabled:!checked,
   WTrackMenu QMenu::indicator:!enabled:!checked,
-  WCueMenuPopup QMenu::indicator:!enabled:!checked {
+  WCueMenuPopup QMenu::indicator:!enabled:!checked,
+  WTrackMenu QMenu QCheckBox::indicator:!enabled:checked,
+  WTrackMenu QMenu QCheckBox::indicator:indeterminate {
     border: 1px solid #222;
     background-color: #222;
     }
-  #LibraryContainer QMenu QCheckBox::indicator:!enabled:checked,
-  WTrackMenu QCheckBox::indicator:!enabled:checked,
-  WTrackMenu QMenu QCheckBox::indicator:!enabled:checked {
-    image: url(skin:/classic/buttons/btn__lib_checkmark_grey.svg);
-    border: 1px solid #222;
-    background-color: #222;
+  #LibraryContainer QHeaderView QMenu::indicator {
+    margin-left: 4px;
     }
-  #LibraryContainer QMenu QCheckBox::indicator:indeterminate,
-  #LibraryContainer QCheckBox::indicator:indeterminate:!enabled,
-  WTrackMenu QCheckBox::indicator:indeterminate,
-  WTrackMenu QMenu QCheckBox::indicator:indeterminate {
-    image: url(skin:/classic/buttons/btn__lib_checkmark_grey.svg);
-  }
 
+  #MainMenu QMenu::right-arrow,
   #LibraryContainer QMenu::right-arrow,
   WTrackMenu::right-arrow,
   WTrackMenu QMenu::right-arrow {
-    width: 10px;
-    height: 10px;
     image: url(skin:/classic/style/menu_arrow_yellow.svg);
     }
   #LibraryContainer QMenu::right-arrow:selected,
@@ -2604,15 +2520,19 @@ WEffectSelector,
     image: url(skin:/classic/style/menu_arrow_white.svg);
   }
 
-  #LibraryContainer QHeaderView QMenu::indicator {
-    width: 10px;
-    height: 10px;
-    margin-left: 2px;
-    border: none;
-    background: none;
+/* This is the only way to select the 'Played' checkbox.
+  Note that this also selects the BPM lock. */
+#LibraryContainer QTableView::indicator {
+  /* border is added to size defined in style.qss */
+  border: 1px solid transparent;
+  margin: 0px;
+  padding: 0px;
+  }
+  #LibraryContainer QTableView::indicator:checked {
+    border: 1px solid #ff6600;
     }
-    #LibraryC