diff --git a/solara/lib/core/dashboard/brand/BrandDetailView.js b/solara/lib/core/dashboard/brand/BrandDetailView.js index 9fc3233..0921d1a 100644 --- a/solara/lib/core/dashboard/brand/BrandDetailView.js +++ b/solara/lib/core/dashboard/brand/BrandDetailView.js @@ -247,6 +247,7 @@ class BrandDetailView { sectionElements.forEach(sectionElement => { const newItem = document.createElement('li'); + newItem.classList.add('index-item'); newItem.innerHTML = `<a href="#${sectionElement.id}">${sectionElement.dataset.name}</a>`; indexElement.appendChild(newItem); }); diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html index 782cd9c..ce7b721 100644 --- a/solara/lib/core/dashboard/brand/brand.html +++ b/solara/lib/core/dashboard/brand/brand.html @@ -58,7 +58,7 @@ } .index { - margin-left: 20px; + margin: 40px; } .index a { color: #0066cc; @@ -67,6 +67,19 @@ .index a:hover { text-decoration: underline; } + .index-item { + list-style: none; /* Remove default list styling */ + padding: 10px; /* Add some padding */ + margin: 5px 0; /* Space between items */ + background-color: white; /* Background color for contrast */ + border-radius: 5px; /* Rounded corners */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect */ + transition: box-shadow 0.3s; /* Smooth transition for shadow */ + } + + .index-item:hover { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */ + } .sections { max-width: 1000px; margin: 0 auto;