add support for platform-dependent skin styles + fix WEffectSelector styling

res/skins/Deere/skin.xml

@@ -65,7 +65,7 @@
   </manifest>
 
   <ObjectName>Mixxx</ObjectName>
-  <Style src="skin:style.qss"/>
+  <Style src="skin:style.qss" src-mac="skin:style-mac.qss"/>
 
   <Size>1024me,550me</Size>
   <Layout>horizontal</Layout>

res/skins/Deere/style-mac.qss

@@ -0,0 +1,12 @@
+/* hack to hide the checkmark, otherwise text gets cut off
+on the right on Retina screens. This can only be done for macOS
+because it cuts off text on the left on KDE */
+WEffectSelector QAbstractItemView {
+  margin: 0 0 0 -24px;
+}
+
+/* hide the checkmark just in case the above shows a
+partial checkmark on some untested screen */
+WEffectSelector::indicator {
+    border: 0;
+}

res/skins/Deere/style.qss

@@ -979,11 +979,21 @@ WEffectSelector {
   }
 
   WEffectSelector QAbstractItemView {
-    color: #c1cabe;
     background-color: #201f1f;
-    selection-background-color: #184880;
-    /* hack around text getting cut off with scaled checkbox on macOS with Retina screens */
-    margin: 0px 0px 0px -30px;
+  }
+
+  WEffectSelector::item:!selected {
+    background-color: #201f1f;
+  }
+
+  WEffectSelector::item:selected {
+    background-color: #08080;
+  }
+
+  /* currently loaded effect */
+  WEffectSelector::checked {
+    color: #4495F4;
+    font-weight: bold;
   }
 
 #EffectKnob {

res/skins/LateNight/skin.xml

@@ -79,7 +79,7 @@
   </manifest>
 
   <ObjectName>Mixxx</ObjectName>
-  <Style src="skin:style.qss"/>
+  <Style src="skin:style.qss" src-mac="skin:style-mac.qss"/>
 
   <!-- MinimumSize should not be an exact monitor resolution. There needs
   to be space for the title bar or other chrome at full screen -->

res/skins/LateNight/style-mac.qss

@@ -0,0 +1,13 @@
+/* hack to hide the checkmark, otherwise text gets cut off
+on the right on Retina screens. This can only be done for macOS
+because it cuts off text on the left on KDE */
+WEffectSelector QAbstractItemView {
+  margin: 0 0 0 -26px;
+}
+
+/* hide the checkmark just in case the above shows a
+partial checkmark on some untested screen */
+WEffectSelector::indicator {
+    border: 0;
+}
+

res/skins/LateNight/style.qss

@@ -1205,8 +1205,6 @@ WEffectSelector {
     border: 1px solid #666;
     border-radius: 2px;
     padding: 0px;
-    /* hack around text getting cut off with scaled checkbox on macOS with Retina screens */
-    margin: 0px 0px 0px -24px;
   }
   /* selected item */
   WEffectSelector::checked {

res/skins/Shade/skin.xml

@@ -211,7 +211,7 @@
 	-->
 
 	<ObjectName>Mixxx</ObjectName>
-	<Style src="skin:style.qss"/>
+	<Style src="skin:style.qss" src-mac="skin:style-mac.qss"/>
 	<Size>1008e,500e</Size>
 	<Layout>vertical</Layout>
     <LaunchImageStyle>

res/skins/Shade/style-mac.qss

@@ -0,0 +1,10 @@
+/* hack around text getting cut off with scaled checkbox on Macs with Retina screens */
+WEffectSelector QAbstractItemView {
+	margin: 0px 0px 0px -26px;
+}
+
+/* just in case there is a partial checkmark shown on some untested screen, hide
+the checkmark */
+WEffectSelector::indicator {
+    border: 0;
+}

res/skins/Shade/style.qss

@@ -54,27 +54,20 @@ WEffectSelector::down-arrow {
 }
 
 WEffectSelector QAbstractItemView {
+	color: #060613;
+	background-color: #aab2b7;
 	border: 2px solid #060613;
 	selection-background-color: lightgray;
-	font: 13px;
-	/* hack around text getting cut off with scaled checkbox on macOS with Retina screens */
-	margin: 0px 0px 0px -4px; /* no matter if padding or margin, the left border is gone */
 }
 
-WEffectSelector:item
+WEffectSelector::item:selected
 {
-	border: 0px;         /* puts tick mark behind item text */
-	padding-left: 14px;  /* move text right to make room for tick mark */
-	font: 13px;
-	height: 17px; 
+	background-color: lightgray;
 }
 
-WEffectSelector:item:selected
+WEffectSelector::checked
 {
-	border: 0px;
-	font: 13px;
-	background-color: #aab2b7;
-	height: 20px;
+	color: #EC4522;
 }
 
 #EffectSelectorGroup[highlight="1"]{ 

res/skins/Tango/skin.xml

@@ -119,7 +119,7 @@
   </manifest>
 
   <ObjectName>Mixxx</ObjectName>
-  <Style src="skin:style.qss"/>
+  <Style src="skin:style.qss" src-mac="skin:style-mac.qss"/>
   <MinimumSize>1008,500</MinimumSize>
   <SizePolicy>me,me</SizePolicy>
   <Layout>vertical</Layout>

res/skins/Tango/style-mac.qss

@@ -0,0 +1,3 @@
+WEffectSelector QAbstractItemView {
+  padding: 0px 0px 0px -20px;
+}

res/skins/Tango/style.qss

@@ -1525,8 +1525,6 @@ decks, samplers, mic, aux, fx */
       border: 1px solid #333;
       border-radius: 2px;
       margin: 0px;
-      /* Move list to the left to hide tick mark and prevent cut-off text. */
-      padding: 0px 0px 0px -20px;
     }
     /* items */
     WEffectSelector::item:!selected {

src/skin/legacyskinparser.cpp

@@ -1873,6 +1873,26 @@ QString LegacySkinParser::getStyleFromNode(const QDomNode& node) {
                                            fileBytes.length());
         }
 
+        QString platformSpecificAttribute;
+#if defined(Q_OS_MAC)
+        platformSpecificAttribute = "src-mac";
+#elif defined(__WINDOWS__)
+        platformSpecificAttribute = "src-windows";
+#else
+        platformSpecificAttribute = "src-linux";
+#endif
+
+        if (styleElement.hasAttribute(platformSpecificAttribute)) {
+            QString platformSpecificSrc = styleElement.attribute(platformSpecificAttribute);
+            QFile platformSpecificFile(platformSpecificSrc);
+            if (platformSpecificFile.open(QIODevice::ReadOnly)) {
+                QByteArray fileBytes = platformSpecificFile.readAll();
+
+                style += QString::fromLocal8Bit(fileBytes.constData(),
+                                                fileBytes.length());
+            }
+        }
+
 // This section can be enabled on demand. It is useful to tweak
 // pixel sized values for different scalings. But we should know if this is
 // actually used when migrating to Qt5