From 28c7466d1bcdee9a2e91a4968f2ae06ec6f9a96c Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 3 Sep 2024 12:18:35 +0100
Subject: [PATCH] fix: Fix Layout CSS priority - MEED-7399 - Meeds-io/MIPs#156
 (#823)

Prior to this change, the Vuetify CSS classes are loaded after Core and
thus, it has more priority than Layout style. To fix this, an additional
CSS parent selector '.VuetifyApp' has been added to ensure to apply the
Layout CSS overrides.
---
 .../skin/less/core/layout/pagelayout.less     | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less b/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less
index 4d55ab275..820e3d92f 100644
--- a/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less
+++ b/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less
@@ -58,38 +58,40 @@
   }
 }
 
-.application-body .application-background-color, .application-body .application-layout-style {
-  /* Override Vuetify predefined background for some elements to simplify development with Meeds branding */
-  &.v-card,
-  .v-card,
-  .theme--light.v-card,
-  &.v-sheet,
-  .v-sheet,
-  .theme--light.v-sheet,
-  &.v-toolbar,
-  .v-toolbar,
-  .v-toolbar.theme--light,
-  .v-toolbar.theme--light.v-sheet,
-  &.v-list,
-  .v-list,
-  .v-list.theme--light,
-  &.v-tabs-bar,
-  .v-tabs-bar,
-  &.v-tabs.theme--light > .v-tabs-bar,
-  .v-tabs.theme--light > .v-tabs-bar,
-  &.v-tabs-items,
-  .v-tabs-items,
-  .v-tabs-item.theme--light,
-  .v-data-table,
-  .v-data-table.theme--light {
-    background-color: transparent; /* NEVER make this !important to allow defining specific colors when needed using CSS helpers */
-  }
-  .v-menu__content {
-    background-color: @baseBackground;
-    color: @btnColor !important;
-    font-size: @btnFontSize !important;
-    font-weight: normal !important;
-    font-style: normal !important;
+.VuetifyApp {
+  .application-body .application-background-color, .application-body .application-layout-style {
+    /* Override Vuetify predefined background for some elements to simplify development with Meeds branding */
+    &.v-card,
+    .v-card,
+    .theme--light.v-card,
+    &.v-sheet,
+    .v-sheet,
+    .theme--light.v-sheet,
+    &.v-toolbar,
+    .v-toolbar,
+    .v-toolbar.theme--light,
+    .v-toolbar.theme--light.v-sheet,
+    &.v-list,
+    .v-list,
+    .v-list.theme--light,
+    &.v-tabs-bar,
+    .v-tabs-bar,
+    &.v-tabs.theme--light > .v-tabs-bar,
+    .v-tabs.theme--light > .v-tabs-bar,
+    &.v-tabs-items,
+    .v-tabs-items,
+    .v-tabs-item.theme--light,
+    .v-data-table,
+    .v-data-table.theme--light {
+      background-color: transparent; /* NEVER make this !important to allow defining specific colors when needed using CSS helpers */
+    }
+    .v-menu__content {
+      background-color: @baseBackground;
+      color: @btnColor !important;
+      font-size: @btnFontSize !important;
+      font-weight: normal !important;
+      font-style: normal !important;
+    }
   }
 }