I'm currently working on developing an application using the Vuetify framework. I've encountered an issue while trying to modify the CSS properties of v-list-item.
The main problem arises when an item is active, as everything seems to work fine except for the fact that the v-list-item-title text is not displaying properly. However, by adjusting the opacity to 1 as shown below:
.theme--dark.v-list-item--active:hover::before,
.theme--dark.v-list-item--active::before {
opacity: 1;
border-left: 3px solid #00ffff;
}
the text becomes visible but at the cost of losing the background color and left border. So, I am seeking assistance in resolving this issue to achieve the desired outcome.
To better illustrate the problem, I have created a sample here: https://codepen.io/domarpdev/pen/ZELyEzP
Your help on this matter would be greatly appreciated. Thank you.