CaWittMN08/custom_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style changes so that icons are visible.

Browse Source
This commit is contained in:
rocketdebris 2025-12-02 15:07:02 -05:00
parent 8256af1ffd
commit 60747a8766
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/SideBar.vue
View File

@ -156,7 +156,8 @@ const handleCategoryClick = (category) => {
</template>
<style lang="css">
.sidebar-button.active {
.sidebar-button.active,
.sidebar-button.active:hover{
background-color: var(--primary-color);
color: white;
border-left: 3px solid var(--primary-600);
@ -166,8 +167,8 @@ const handleCategoryClick = (category) => {
.sidebar-button:hover {
background-color: var(--surface-hover);
color: var(--primary-color);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transform: translateX(2px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
transform: translateX(1px);
}
.button-icon {
@ -177,11 +178,17 @@ const handleCategoryClick = (category) => {
margin-left: 10px;
margin-right: 10px;
opacity: 0.9;
color: black;
}
.sidebar-button.active .button-icon,
.sidebar-button.active:hover .button-icon{
opacity: 1;
color: white;
}
.sidebar-button:hover .button-icon {
opacity: 1;
color: black;
}
.create-item {
@ -282,10 +289,15 @@ const handleCategoryClick = (category) => {
}
.toggle-icon {
color: black;
width: 16px;
height: 16px;
}
.toggle-icon:hover {
color: white;
}
.collapsed .button-text {
display: none;
}