From 07bca0cf37f77f0a536dcdcf6d50940e650bfbc9 Mon Sep 17 00:00:00 2001 From: 555vedant Date: Fri, 4 Oct 2024 00:33:45 +0530 Subject: [PATCH 1/2] enhacement:Expose uPortal css variable --- .../main/webapp/css/search/autosuggest.css | 45 ++++++++++++++----- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/uPortal-webapp/src/main/webapp/css/search/autosuggest.css b/uPortal-webapp/src/main/webapp/css/search/autosuggest.css index 52b1c5a2b48..907ebb42fda 100644 --- a/uPortal-webapp/src/main/webapp/css/search/autosuggest.css +++ b/uPortal-webapp/src/main/webapp/css/search/autosuggest.css @@ -16,40 +16,65 @@ * specific language governing permissions and limitations * under the License. */ + +/** + * Updated version of the CSS file to directly adopt uPortal CSS variables for web-components, + * reducing the need to redefine variables in each component and allowing them to inherit + * styles from the uPortal skin (as done for portlets). + * + * Defined variables in the :root scope: + * --autocomplete-header-color: The color for the autocomplete header. + * --autocomplete-background-color: The background color for focused autocomplete items. + * --autocomplete-hover-text-color: The text color when hovering over autocomplete items. + * --autocomplete-border-color: The border color for autocomplete items. + * --autocomplete-item-padding: The padding inside each autocomplete item. + * + */ + + :root { + --autocomplete-header-color: rgb(123, 34, 64); /* Header text color */ + --autocomplete-background-color: rgb(62, 70, 79); /* Background color for focused items */ + --autocomplete-hover-text-color: #fff; /* Text color when hovering over items */ + --autocomplete-border-color: #efefef; /* Border color for autocomplete items */ + --autocomplete-item-padding: 0.5em; /* Padding for autocomplete items */ +} + .ui-autocomplete.ui-menu { padding: 0; overflow: hidden; } + .ui-autocomplete li { list-style: none; - max-width: 315px; /* Fixes Autocomplete on 1st search after page render would have very wide results box off side of window */ - /*max-height: 75px;*/ /* Limiting # of chars sent tends to keep description to 2 lines in autocomplete results so don't need max-height. */ - overflow:hidden; + max-width: 315px; /* Fixes Autocomplete on 1st search after page render would have very wide results box */ + overflow: hidden; } .ui-autocomplete .ui-menu-item a { - border-bottom: 1px solid #efefef; - padding: .5em; + border-bottom: 1px solid var(--autocomplete-border-color); /* Uses the defined border color */ + padding: var(--autocomplete-item-padding); /* Uses the defined item padding */ } .ui-autocomplete .ui-menu-item a:hover { cursor: pointer; } + .ui-autocomplete a.ui-state-focus .autocomplete-header { - color: #fff; + color: var(--autocomplete-hover-text-color); /* Uses the defined hover text color */ } .ui-autocomplete a.ui-state-focus { border: 0; - background: rgb(62, 70, 79); - color: #fff; + background: var(--autocomplete-background-color); /* Uses the defined background color */ + color: var(--autocomplete-hover-text-color); /* Uses the defined hover text color */ } + .ui-autocomplete a.ui-corner-all { -webkit-border-radius: 0 0 0 0; border-radius: 0 0 0 0; } + .ui-autocomplete .autocomplete-header { font-weight: 800; - color: rgb(123, 34, 64); + color: var(--autocomplete-header-color); /* Uses the defined header color */ } - From 7b9f2623f2b3057c3ca26e8d50d3280fbc6f606d Mon Sep 17 00:00:00 2001 From: 555vedant Date: Sun, 6 Oct 2024 10:29:44 +0530 Subject: [PATCH 2/2] fixed less variables --- .../main/webapp/css/search/autosuggest.css | 51 +++++++++---------- 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/uPortal-webapp/src/main/webapp/css/search/autosuggest.css b/uPortal-webapp/src/main/webapp/css/search/autosuggest.css index 907ebb42fda..f3bcc9e0283 100644 --- a/uPortal-webapp/src/main/webapp/css/search/autosuggest.css +++ b/uPortal-webapp/src/main/webapp/css/search/autosuggest.css @@ -4,7 +4,7 @@ * for additional information regarding copyright ownership. * Apereo licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file - * except in compliance with the License. You may obtain a + * except in compliance with the License. You may obtain a * copy of the License at the following location: * * http://www.apache.org/licenses/LICENSE-2.0 @@ -17,28 +17,13 @@ * under the License. */ -/** - * Updated version of the CSS file to directly adopt uPortal CSS variables for web-components, - * reducing the need to redefine variables in each component and allowing them to inherit - * styles from the uPortal skin (as done for portlets). - * - * Defined variables in the :root scope: - * --autocomplete-header-color: The color for the autocomplete header. - * --autocomplete-background-color: The background color for focused autocomplete items. - * --autocomplete-hover-text-color: The text color when hovering over autocomplete items. - * --autocomplete-border-color: The border color for autocomplete items. - * --autocomplete-item-padding: The padding inside each autocomplete item. - * - */ - - :root { - --autocomplete-header-color: rgb(123, 34, 64); /* Header text color */ - --autocomplete-background-color: rgb(62, 70, 79); /* Background color for focused items */ - --autocomplete-hover-text-color: #fff; /* Text color when hovering over items */ - --autocomplete-border-color: #efefef; /* Border color for autocomplete items */ - --autocomplete-item-padding: 0.5em; /* Padding for autocomplete items */ +/* Define CSS variables in :root and map them to LESS variables */ +:root { + --portlet-header-text-color: @portlet-titlebar-link-color; /* CSS variable that references a LESS variable */ + --portlet-content-bg-color: #d0d0d0; /* Define background color */ } +/* UI Autocomplete Styles */ .ui-autocomplete.ui-menu { padding: 0; overflow: hidden; @@ -46,27 +31,28 @@ .ui-autocomplete li { list-style: none; - max-width: 315px; /* Fixes Autocomplete on 1st search after page render would have very wide results box */ + max-width: 315px; /* Fixes wide results box issue */ overflow: hidden; } .ui-autocomplete .ui-menu-item a { - border-bottom: 1px solid var(--autocomplete-border-color); /* Uses the defined border color */ - padding: var(--autocomplete-item-padding); /* Uses the defined item padding */ + border-bottom: 1px solid var(--portlet-header-text-color); + padding: .5em; } .ui-autocomplete .ui-menu-item a:hover { cursor: pointer; } +/* focused state styling */ .ui-autocomplete a.ui-state-focus .autocomplete-header { - color: var(--autocomplete-hover-text-color); /* Uses the defined hover text color */ + color: #fff; } .ui-autocomplete a.ui-state-focus { border: 0; - background: var(--autocomplete-background-color); /* Uses the defined background color */ - color: var(--autocomplete-hover-text-color); /* Uses the defined hover text color */ + background: rgb(62, 70, 79); + color: #fff; } .ui-autocomplete a.ui-corner-all { @@ -76,5 +62,14 @@ .ui-autocomplete .autocomplete-header { font-weight: 800; - color: var(--autocomplete-header-color); /* Uses the defined header color */ + color: rgb(123, 34, 64); +} + +/* Link Styles */ +a { + color: var(--portlet-header-text-color); /* Link color using the CSS variable */ +} + +a:hover { + color: darken(var(--portlet-header-text-color), 20%); /* Darken the CSS variable on hover */ }