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