119 lines
2.4 KiB
CSS
119 lines
2.4 KiB
CSS
/* Multi-level menu styling */
|
|
.multi-level-menu {
|
|
border-left: 2px solid rgba(var(--color-primary), 0.3);
|
|
}
|
|
|
|
/* Common styles for all menu levels */
|
|
.navigation-item-wrapper a {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Long menu text handling */
|
|
.navigation-item-wrapper span {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Show full text on hover */
|
|
.navigation-item-wrapper a:hover span {
|
|
white-space: normal;
|
|
overflow: visible;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Enhanced tooltip effect for very long menu items */
|
|
.deepest-menu-item a:hover span {
|
|
background-color: rgba(var(--sidebar-menu), 0.95);
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
max-width: 300px;
|
|
}
|
|
|
|
/* Level-specific styles */
|
|
.second-level-menu {
|
|
font-weight: 500;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.second-level-menu .mx-3,
|
|
.second-level-menu .mx-4 {
|
|
color: rgba(255, 255, 255, 0.95);
|
|
max-width: 200px;
|
|
}
|
|
|
|
.third-level-menu {
|
|
font-style: italic;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.third-level-menu .mx-3,
|
|
.third-level-menu .mx-4 {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 0.95rem;
|
|
max-width: 180px;
|
|
}
|
|
|
|
.deepest-menu-item {
|
|
padding-left: 0.75rem;
|
|
border-left: 2px solid rgba(var(--color-primary), 0.6);
|
|
}
|
|
|
|
.deepest-menu-item .mx-3,
|
|
.deepest-menu-item .mx-4 {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 0.9rem;
|
|
max-width: 160px;
|
|
}
|
|
|
|
/* Add visual indicators for each level */
|
|
.second-level-menu a::before,
|
|
.third-level-menu a::before,
|
|
.deepest-menu-item a::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.second-level-menu a::before {
|
|
background-color: rgba(var(--color-primary), 0.8);
|
|
}
|
|
|
|
.third-level-menu a::before {
|
|
background-color: rgba(var(--color-accent), 0.8);
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
.deepest-menu-item a::before {
|
|
background-color: rgba(var(--color-secondary), 0.8);
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
/* Resonsive adjustments for different screen sizes */
|
|
@media (max-width: 1200px) {
|
|
.second-level-menu .mx-3,
|
|
.second-level-menu .mx-4,
|
|
.third-level-menu .mx-3,
|
|
.third-level-menu .mx-4,
|
|
.deepest-menu-item .mx-3,
|
|
.deepest-menu-item .mx-4 {
|
|
max-width: 140px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.navigation-item-wrapper span {
|
|
max-width: 120px;
|
|
}
|
|
} |