mirror of
https://github.com/Dolibarr/dolibarr.git
synced 2026-02-13 11:15:21 +01:00
5672008258
* Fix responsive menu dropdown * Change comment from French to English Updated comment to English for better clarity. --------- Co-authored-by: Laurent Destailleur <eldy@destailleur.fr>
133 lines
2.6 KiB
CSS
133 lines
2.6 KiB
CSS
|
|
.nav-item.--cart {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
nav a, nav [role=link] {
|
|
--color : hsl(202, 13.67%, 41.54%);
|
|
}
|
|
|
|
nav a:is([aria-current], :hover, :active, :focus), [role=link]:is([aria-current], :hover, :active, :focus) {
|
|
/* --color: hsl(289, 90%, 32%); */
|
|
--color: var(--primary-hover);
|
|
}
|
|
|
|
nav a:focus, nav [role=link]:focus {
|
|
--background-color: var(--primary-focus);
|
|
}
|
|
|
|
.top-nav-icon{
|
|
max-height: 24px;
|
|
}
|
|
|
|
.top-nav-icon.menu-icon-dropdown{
|
|
margin-top: 2px; /* small visual fix */
|
|
}
|
|
|
|
a:hover .top-nav-icon{
|
|
filter: hue-rotate(50deg) brightness(30%);
|
|
}
|
|
|
|
/* Used to pull primary menu on left */
|
|
.primary-top-nav .logout {
|
|
margin-left: auto;
|
|
}
|
|
|
|
nav details.dropdown>summary+ul {
|
|
width: auto;
|
|
}
|
|
nav details.dropdown>summary+ul li{
|
|
padding: 0.3em;
|
|
}
|
|
nav details.dropdown>summary+ul li a {
|
|
padding: calc(var(--nav-element-spacing-vertical)/2) calc(var(--nav-element-spacing-horizontal)/2);
|
|
margin: 0;
|
|
}
|
|
nav details.dropdown[open]>summary+ul {
|
|
width: auto;
|
|
}
|
|
nav details.dropdown[open]>summary {
|
|
--form-element-active-background-color: var(--primary-focus);
|
|
}
|
|
|
|
|
|
body > nav {
|
|
--nav-link-spacing-vertical: 1rem;
|
|
-webkit-backdrop-filter: saturate(180%) blur(10px);
|
|
z-index: 99;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
backdrop-filter: blur(60px) ;
|
|
background-color: var(--nav-background-color);
|
|
box-shadow: 0px 1px 0 var(--nav-border-color);
|
|
}
|
|
|
|
nav.primary-top-nav ul:first-of-type {
|
|
clear: both;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.primary-top-nav{
|
|
--border-radius: 0;
|
|
}
|
|
|
|
ul.brand {
|
|
max-width: 80px;
|
|
}
|
|
nav.primary-top-nav ul:first-of-type {
|
|
margin-left: unset !important;
|
|
}
|
|
|
|
ul.menu-entries li {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
nav .menu-entries-alt {
|
|
display: none;
|
|
}
|
|
|
|
.menu-entries-alt details.dropdown[open]>summary {
|
|
--form-element-active-background-color: var(--primary-focus);
|
|
}
|
|
.menu-entries-alt details.dropdown.main-nav-dropdown>summary {
|
|
border-radius: 100%;
|
|
aspect-ratio: 1/1;
|
|
text-align: center;
|
|
|
|
height: calc(var(--line-height) - var(--nav-link-spacing-vertical) *2);
|
|
margin-top: calc(var(--nav-link-spacing-vertical) / 2);
|
|
padding: calc(var(--nav-link-spacing-vertical) / 2);
|
|
}
|
|
.menu-entries-alt details.dropdown.main-nav-dropdown>summary:after {
|
|
content: none;
|
|
}
|
|
|
|
nav li:has(details.dropdown) {
|
|
padding: 0;
|
|
}
|
|
|
|
nav details.dropdown>summary:not([role]) {
|
|
border: none;
|
|
}
|
|
|
|
/* Responsive for tabs and smartphone */
|
|
@media (max-width: 900px) {
|
|
.nav-link .user-account-name {
|
|
display: none;
|
|
}
|
|
|
|
nav .brand li.brand {
|
|
padding-left: 0px;
|
|
}
|
|
nav .menu-entries li {
|
|
display: none;
|
|
}
|
|
nav .menu-entries-alt {
|
|
display: block;
|
|
}
|
|
}
|