update screenshots

 - adding some hover and focus for the QuickAccess.vue
 - fixing 'f' shortcut by opening the menu
 - adding new theme variable for menu hovered so that we can still retain its #eff0f1 hover colour

Author: chippison

core/Plugin/ThemeStyles.php

@@ -60,6 +60,7 @@ class ThemeStyles
         'colorWidgetBackground' => 'theme-color-widget-background',
         'colorWidgetBorder' => 'theme-color-widget-border',
         'filterOnIllustration' => 'theme-filter-on-illustration',
+        'colorMenuContrastBackgroundHover' => 'theme-color-menu-contrast-backgroundHover',
     ];
 
     /**
@@ -175,13 +176,18 @@ class ThemeStyles
     /**
      * @var string|array<string>
      */
-    public $colorMenuContrastTextSelected;
+    public $colorMenuContrastTextSelected = ['#1976D2', '#ccc'];
 
     /**
      * @var string|array<string>
      */
     public $colorMenuContrastTextActive = ['#3450A3', '#fff'];
 
+    /**
+     * @var string|array<string>
+     */
+    public $colorMenuContrastBackgroundHover = ['#eff0f1', '#151819'];
+
     /**
      * @var string|array<string>
      */
@@ -277,7 +283,6 @@ public function __construct(string $themeMode)
         $this->themeMode = $themeMode;
         $this->colorFocusRingAlternative = $this->colorBrand;
         $this->colorMenuContrastText = $this->colorText;
-        $this->colorMenuContrastTextSelected = $this->colorMenuContrastText;
         $this->colorMenuContrastBackground = $this->colorBackgroundContrast;
         $this->colorWidgetExportedBackgroundBase = $this->colorBackgroundContrast;
         $this->colorWidgetTitleText = $this->colorText;

plugins/AIAgents/tests/UI/expected-ui-screenshots/AIAgents_menu.png

@@ -1,3 +1,4 @@
+@_layout-pageWrap-margin: 18px;
 
 .card-content > .row:last-child {
   margin-bottom: 0;
@@ -125,7 +126,7 @@ nav {
 
 #root {
   .pageWrap {
-    width: calc(~'100% - 18px');  // 100% - pageWrap margin
+    width: calc(~'100% - @{_layout-pageWrap-margin}');
     height: fit-content;
     padding-left: 9px;
     padding-right: 9px;
@@ -183,14 +184,6 @@ nav {
       }
     }
 
-    .quickAccessPlaceholder {
-      width: 0;
-      visibility: hidden;
-      display: inline-block;
-      position: relative;
-      margin-right: -1px;
-    }
-
     .piwikTopControl {
       display: inline-block;
       float: none;
@@ -267,7 +260,7 @@ nav {
     }
 
     .pageWrap {
-      width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
+      width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
     }
   }
 
@@ -317,11 +310,11 @@ nav {
           }
           &:focus-visible {
             color: @theme-color-text-lighter;
-            background-color: @theme-color-background-base;
+            background-color: @theme-color-menu-contrast-backgroundHover;
             outline: 1px solid @theme-color-link;
           }
           &:hover {
-            background-color: @theme-color-background-base;
+            background-color: @theme-color-menu-contrast-backgroundHover;
           }
           .menu-icon {
             align-self: flex-start;
@@ -384,22 +377,21 @@ nav {
               .font-default(13px, 16px);
               padding: 10px 22px 10px 36px;
               min-height: 36px;
-              width: 98%;
               border-radius: 8px;
               text-decoration: none;
               transition: background-color 200ms linear;
               &:hover, &.active {
                 text-decoration: none;
                 color: @theme-color-menu-contrast-textActive;
-                background-color: @theme-color-background-base;
+                background-color: @theme-color-menu-contrast-backgroundHover;
               }
             }
 
             &.active {
               > .menuDropdown,
               > .item {
                 color: @theme-color-menu-contrast-textSelected;
-                background-color: @theme-color-background-base;
+                background-color: @theme-color-menu-contrast-backgroundHover;
                 text-decoration: none;
                 border-radius: 8px;
               }
@@ -597,7 +589,7 @@ nav {
 
   #root{
     .layoutWithSidebar--hasSidebar .page > .pageWrap {
-      width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
+      width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
     }
   }
   #content.home,

plugins/CoreHome/stylesheets/layout.less

@@ -1,7 +1,7 @@
 {% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser, renderQuickAccess) %}
     <div id="secondNavBar" class="{{ cssClass }} z-depth-1">
         {% if renderQuickAccess|default(false) %}
-            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
+            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl"></div>
         {% endif %}
         <ul class="navbar {% if collapsible %}collapsible collapsible-accordion{% endif %} hide-on-med-and-down" aria-label="{{ 'CoreHome_MainNavigation'|translate|e('html_attr') }}" role="menu">
             {% for level1,level2 in menu %}