LateNight: style main menu bar

10 files changed, 305 insertions, 8 deletions

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__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..78637e4cbb 100644
--- a/res/skins/LateNight/skin.xml
+++ b/res/skins/LateNight/skin.xml
@@ -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/style.qss b/res/skins/LateNight/style.qss
index 1420cae170..377ac805da 100644
--- a/res/skins/LateNight/style.qss
+++ b/res/skins/LateNight/style.qss
@@ -53,7 +53,6 @@ WOverview #PassthroughLabel,
 #VinylControls WPushButton,
 #FxAssignButtons WPushButton,
 #SamplerTitleMini,
-/* ToolBar */
 #GuiToggleButton,
 #RecFeedback, #RecDuration,
 #BroadcastButton,
@@ -74,7 +73,6 @@ WOverview #PassthroughLabel {
 #MicAuxLabel, #MicAuxLabelUnconfigured,
 #VinylControls WPushButton,
 #FxAssignButtons WPushButton,
-/* ToolBar */
 #GuiToggleButton,
 #RecFeedback, #RecDuration,
 #BroadcastButton,
@@ -100,6 +98,74 @@ QLabel#labelRecStatistics {
   font-weight: normal;
 }
 
+/* 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;
+  }
+
 
 
 /************** font sizes / alignment ****************************************/
diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
index b8d4790856..2a7e867b55 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 {
@@ -1112,6 +1116,9 @@ WBeatSpinBox, #spinBoxTransition,
   color: #666;
 }
 
+#MainMenu::item,
+#MainMenu QMenu::item,
+#MainMenu QMenu QCheckBox,
 #VinylButton[displayValue="0"],
 #VinylModeButton,
 #PassthroughButton[displayValue="0"],
@@ -2346,6 +2353,11 @@ WTrackMenu QMenu {
   border: 1px solid #888;
   border-radius: 2px;
 }
+#MainMenu QMenu {
+  padding: 0.08em;
+  border: 1px solid #888;
+  border-radius: 2px;
+}
 
 #SkinContainer {
   background-color: #0f0f0f;
@@ -2385,6 +2397,12 @@ WEffectSelector, #fadeModeCombobox {
   background-color: #161616;
 }
   /* 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,
   WEffectSelector::item:selected,
   #fadeModeCombobox::item:selected,
   WBeatSpinBox QMenu::item:selected,
@@ -2484,6 +2502,7 @@ WEffectSelector,
       outline: none;
       border: 0px solid transparent;
     }
+  #MainMenu QMenu:separator,
   WBeatSpinBox QMenu::separator,
   #LibraryContainer QMenu::separator,
   WCueMenuPopup QMenu::separator,
@@ -2556,7 +2575,17 @@ WEffectSelector,
   WCueMenuPopup QMenu::indicator:checked {
     image: url(skin:/classic/buttons/btn__lib_checkmark_orange.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);
+    }
   /* disabled menu item and checkbox */
+  #MainMenu::item:!enabled,
+  #MainMenu QMenu::item:!enabled,
   #LibraryContainer QMenu QCheckBox:!enabled,
   #LibraryContainer QMenu::item:!enabled,
   WTrackMenu QCheckBox:!enabled,
@@ -2594,6 +2623,7 @@ WEffectSelector,
     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 {
diff --git a/res/skins/LateNight/style_linux.qss b/res/skins/LateNight/style_linux.qss
new file mode 100644
index 0000000000..40bb651cea
--- /dev/null
+++ b/res/skins/LateNight/style_linux.qss
@@ -0,0 +1,19 @@
+
+#MainMenu::item {
+}
+#MainMenu QMenu::item {
+  padding: 0.1em 0.3em 0.2em 0.3em;
+  margin: 0em 0em 0em 1.4em;
+  }
+  /* Checkbox preceeding menu items */
+  #MainMenu QMenu::indicator {
+    /*width: 1em;*/
+    /*height: 1em;*/
+    margin: 0em -0.1em 0em -1.5em;
+    padding: 0.2em 0em 0.2em 0em;
+  }
+  #MainMenu QMenu::indicator,
+  #MainMenu QMenu::indicator:selected,
+  #MainMenu QMenu::indicator:checked,
+  #MainMenu QMenu::indicator:checked:selected {
+  }
diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
index 71ae27b7b9..dc30fb57bc 100644
--- a/res/skins/LateNight/style_palemoon.qss
+++ b/res/skins/LateNight/style_palemoon.qss
@@ -85,6 +85,9 @@ QAbstractScrollArea::corner {
   border-radius: 1px;
   background-color: #151517;
   }
+  #ToolBar {
+    border-width: 0px 0px 1px 0px;
+  }
   #WaveformsContainer {
     border-width: 1px 0px;
     border-radius: 0px;
@@ -380,7 +383,7 @@ WSearchLineEdit {
 }
 
 #ToolBar {
-  padding: 1px 2px 0px 2px;
+  padding: 0px 2px 0px 2px;
   }
   #BatteryBox,
   #ClockWidget {
@@ -1327,6 +1330,9 @@ WEffectSelector,
   }
 
 /* Grey. default for all deck labels */
+#MainMenu,
+#MainMenu QMenu,
+#MainMenu QMenu QCheckBox,
 #PlayPositionText, #PlayPositionTextSmall,
 #DurationText, #RateText,
 #MixerMasterHeadphone #FxAssignButtons WPushButton[displayValue="0"],
@@ -2812,6 +2818,11 @@ WTrackMenu QMenu {
   border: 1px solid #333;
   border-radius: 1px;
 }
+#MainMenu QMenu {
+  padding: 0.08em;
+  border: 1px solid #333;
+  border-radius: 1px;
+}
 
 #SkinContainer {
   background-color: #080808;
@@ -2825,6 +2836,11 @@ WSearchLineEdit,
   background-color: #0f0f0f;
 }
 
+#MainMenu,
+#MainMenu::item,
+#MainMenu QMenu,
+#MainMenu QMenu::item,
+#MainMenu QMenu QCheckBox,
 QToolTip,
 WBeatSpinBox QMenu,
   WCueMenuPopup,
@@ -2850,6 +2866,12 @@ WEffectSelector::item,
   background-color: #151517;
 }
   /* hovered items */
+  #MainMenu::item:selected,
+  #MainMenu QMenu::item:selected,
+  #MainMenu QMenu::item:focus,
+  #MainMenu QMenu::item:hover,
+  #MainMenu QMenu::indicator:checked:selected,
+  #MainMenu QMenu::indicator:unchecked:selected,
   WEffectSelector::item:selected,
   #fadeModeCombobox::item:selected,
   WBeatSpinBox QMenu::item:selected,
@@ -2892,6 +2914,8 @@ WEffectSelector::item,
     color: #fff;
     }
   /* disabled items */
+  #MainMenu QMenu::item:disabled,
+  #MainMenu QMenu QCheckBox:disabled,
   WEffectSelector::item:disabled,
   #fadeModeCombobox::item:disabled,
   WBeatSpinBox QMenu::item:disabled,
@@ -2967,11 +2991,13 @@ WEffectSelector,
       outline: none;
       border: 0px solid transparent;
     }
-  WBeatSpinBox QMenu::separator,
+  #MainMenu QMenu:separator,
   #LibraryContainer QMenu::separator,
   WCueMenuPopup QMenu::separator,
   WTrackMenu::separator,
   WTrackMenu QMenu::separator,
+  WCueMenuPopup QMenu::separator,
+  WBeatSpinBox QMenu::separator,
   #SkinSettingsSeparator {
     border-top: 1px solid #000;
     border-bottom: 1px solid #222;
@@ -2983,7 +3009,11 @@ WEffectSelector,
     WTrackMenu QMenu::separator {
         height: 0px;
         margin: 4px;
-      }
+    }
+    #MainMenu QMenu::separator {
+        height: 0px;
+        margin: 0.25em;
+    }
   WBeatSpinBox QMenu::item,
   #LibraryContainer QMenu::item,
   WCueMenuPopup QMenu::item,
@@ -3015,6 +3045,16 @@ WEffectSelector,
   WTrackMenu QMenu QCheckBox {
     padding: 3px 10px 3px 5px;
     }
+
+  #MainMenu QMenu::indicator:checked,
+  #MainMenu QMenu::indicator:checked:selected {
+    image: url(skin:/palemoon/buttons/btn__menu_checkbox_checked.svg);
+    }
+    #MainMenu QMenu::indicator:unchecked,
+    #MainMenu QMenu::indicator:unchecked:selected {
+      image: url(skin:/palemoon/buttons/btn__menu_checkbox.svg);
+    }
+
   #LibraryContainer QMenu QCheckBox::indicator,
   #LibraryContainer QMenu::indicator,
   WCueMenuPopup QMenu::indicator,
@@ -3082,8 +3122,25 @@ WEffectSelector,
   WTrackMenu QMenu::right-arrow {
     width: 10px;
     height: 10px;
+    }
+
+  #MainMenu::item:!enabled,
+  #MainMenu QMenu::item:!enabled {
+    color: #494949;
+    }
+
+
+  #MainMenu QMenu::right-arrow {
+    width: 0.7em;
+    height: 0.7em;
+  }
+  #MainMenu QMenu::right-arrow,
+  #LibraryContainer QMenu::right-arrow,
+  WTrackMenu::right-arrow,
+  WTrackMenu QMenu::right-arrow {
     image: url(skin:/palemoon/style/menu_arrow_ivory.svg);
     }
+  #MainMenu QMenu::right-arrow:selected,
   #LibraryContainer QMenu::right-arrow:selected,
   WTrackMenu::right-arrow:selected,
   WTrackMenu QMenu::right-arrow:selected {
diff --git a/res/skins/LateNight/style_windows.qss b/res/skins/LateNight/style_windows.qss
new file mode 100644
index 0000000000..ada27566fb
--- /dev/null
+++ b/res/skins/LateNight/style_windows.qss
@@ -0,0 +1,109 @@
+

+#MainMenu::item {

+}

+#MainMenu QMenu::item {

+  padding: 0.1em 0.3em 0.2em 0.3em;

+  margin: 0em 0em 0em 1.2em;

+  }

+  /* Checkbox preceeding menu items */

+  #MainMenu QMenu::indicator {

+    /*width: 1em;*/

+    /*height: 1em;*/

+    margin: 0em 0em 0em -1.3em;

+    padding: 0.3em 0em 0.3em 0.3em;

+  }

+  #MainMenu QMenu::indicator,

+  #MainMenu QMenu::indicator:selected,

+  #MainMenu QMenu::indicator:checked,

+  #MainMenu QMenu::indicator:checked:selected {

+  }

+

+/* On Windows the semi-bold variant of Open Sans is

+identified separately as "Open Sans Semibold", so we

+need to define the fonts individually. */

+#MainMenu,

+#MainMenu QMenu {

+  font-family: "Open Sans";

+}

+#Mixxx,

+WWidget,

+QToolTip,

+WLabel, QLabel,

+WNumber, WNumberPos,

+WPushButton,

+WKey,

+WTime,

+WTrackText,

+WTrackProperty,

+WRecordingDuration,

+QSpinBox,

+WBeatSpinBox,

+WOverview #PassthroughLabel,

+WBeatSpinBox QMenu,

+WCueMenuPopup,

+WCueMenuPopup QMenu,

+WCueMenuPopup QLabel,

+WCoverArtMenu,

+WTrackMenu,

+WTrackMenu QMenu,

+WOverview /* Hotcue labels in the overview */,

+QComboBox,

+WEffect,

+WEffectSelector,

+WEffectSelector QAbstractScrollArea,

+#fadeModeCombobox,

+#fadeModeCombobox QAbstractScrollArea,

+#LibraryContainer QPushButton,

+#LibraryContainer QLabel,

+#LibraryContainer QRadioButton,

+#LibraryContainer QHeaderView,

+#LibraryContainer QHeaderView::item,

+#LibraryContainer QMenu {

+  font-family: "Open Sans Semibold";

+  font-weight: 500; /* semi-bold, just to be sure */

+}

+

+/* Bold */

+#KnobLabel,

+/* Passthrough label on overview waveform */

+WOverview #PassthroughLabel,

+#EQKillButton,

+#FxUnitLabel,

+#MicAuxLabel, #MicAuxLabelUnconfigured,

+#LatencyLabel,

+#VinylControls WPushButton,

+#FxAssignButtons WPushButton,

+#SamplerTitleMini,

+/* ToolBar */

+#GuiToggleButton,

+#RecFeedback, #RecDuration,

+#BroadcastButton,

+/* SKin settings & Library */

+#SkinSettingsToggle,

+#SkinSettingsNumToggle[value="1"],

+#LibraryFeatureControls QPushButton,

+QLabel#labelRecFilename, /* needs QLabel to override previous QLabel font definition*/

+WEffectSelector,

+#fadeModeCombobox,

+WOverview #PassthroughLabel {

+  font-family: "Open Sans";

+  font-weight: bold;

+}

+/* regular font weight */

+#SkinSettingsButton,

+#SkinSettingsNumToggle,

+#SkinSettingsMixerToggle,

+#SkinSettingsText,

+QToolTip,

+#LibraryContainer QMenu,

+WCueMenuPopup,

+WCueMenuPopup QMenu,

+WCoverArtMenu,

+WTrackMenu,

+WTrackMenu QMenu,

+WBeatSpinBox QMenu,

+QLabel#labelRecPrefix,

+QLabel#labelRecStatistics {

+  font-family: "Open Sans";

+  font-weight: normal;

+}