LateNight: style main menubar

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 -->

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>

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 ****************************************/
 
@@ -503,19 +700,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;