[#46627] - [5.4] Error color in field styles with the COMBO type (Update awesomplete.scss)
- Pending
- Medium
- Build: 5.4-dev
- # 46627
- Diff
- korenevskiy:patch-2
User tests: Successful: Unsuccessful:
Steps to reproduce the issue
- Enable dark theme in the admin panel
- In any extension's XML file, add the field
<field name="myeditbox" type="combo" label="FieldCombo">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</field>- Open the extension's options
- Enter the text "Opt" in the new field "FieldCombo"
Expected result
The tooltip for selection should be dark since the text on it is white, which means the background should be dark.
Actual result
The tooltip has a white background with white text
System information (as much as possible)
Joomla 6.0 Stable
Additional comments
After Change
Of course, for a light theme, I would make the color of the stamp lighter, and for a dark theme, the color of the stamp would make it darker. But I decided to use global variable colors without using theme selection conditions.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change |
| Labels |
Added:
NPM Resource Changed
PR-5.4-dev
|
||
The search suggestions in the front end will also need to be checked as that also uses awesomeplete
| Title |
|
||||||
The search suggestions in the front end will also need to be checked as that also uses awesomeplete
these styles are not included in the module search.
The search module uses
/media/vendor/awesomplete/css/awesomplete.css
And the Combo field uses a completely different style.
/media/templates/administrator/atum/css/vendor/awesomplete/awesomplete.css
the file
/templates/administrator/atum/scss/vendor/awesomplete/awesomplete.scss
contains text
@import "../../../../../../../../media/vendor/awesomplete/css/awesomplete";
which means that the styles used are the same.
But I made the change as you advised me to make it to the file
/templates/administrator/atum/scss/vendor/awesomplete/awesomplete.scss
instead of making a change to
/media/vendor/awesomplete/css/awesomplete.css
Therefore, PR is not used in the search module.
I checked the working styles of the module with the global amendments.
/media/vendor/awesomplete/css/awesomplete.css
The module style is displayed well and acceptably.
With one exception, the background of the stamp is missing.
In the example screenshots above, the background that is displayed in blue on the Opt labels is not displayed.
I still changed the style so that it could be acceptably displayed both in the Combo box and in the search module, and changed the background color of the mark.
This is what the smart search module looks like.
For my last corrections, I really missed the global variables with color. But still, one color came across, which you can see above in the screenshots.
Answers are required:
- Will we make changes to the global styles (with the search module) or only the combo field of the admin panel
- Do I need to add global variables to work with color, or will we accept the color shown by me?
PS background-color: var(--warning-bg-subtle); the color for the mark of the latest screenshots (not added to the PR)
here we need the advice of the author of Cassiopeia
| Title |
|
||||||
Hi @korenevskiy , thank you for your improvement for the dark mode. I have some suggestions:
- your code is not written as scss, but as css. That should be improved
- I think it is not a good idea to import the awesomplete css and to overwrite it almost completely in the same file. If we want to improve the css of awesomplete to work also in dark mode, we should remove the import and write our own css
- Atum uses Bootstrap which already has definitions for dark mode. For example for the
<mark>element. We should stick to the colors used by Atum
Some screenshots
that is how other highlighted (on hover) fields look like:
we are overwriting colors 3 times:
@drmenzelit The search module also uses the "awesomplete" library, which is loaded into Cassiopeya in Prodact site, but style variables are simplified to a minimum.
Let's find common light and dark mode variables for Cassipeiya and Atom. I tried, it's very difficult.
I chose the names of the variables that are most suitable in all 4 modes.
Cassiopeia has no dark mode, so I don't see the problem.
@korenevskiy Why are you creating a PR for the 5.4-dev branch with a title like "[J6]"?