Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -1,34 +1,32 @@ 1 1 /* ========== Agnease Public Top Menu ========== */ 2 2 3 -/* Desktop alignment */ 4 -.navbar-left { 5 - float: right !important; 3 +/* Keep the public menu aligned to the right on desktop */ 4 +@media (min-width: 768px) { 5 + .navbar-nav { 6 + float: right; 6 6 } 7 7 9 + .site-nav { 10 + margin-left: auto; 11 + justify-content: flex-end; 12 + } 13 +} 14 + 8 8 /* Top-level menu items */ 9 9 10 -.agnease-menu-item, 11 -.agnease-menu-link { 12 - > a, 13 - > .dropdown-toggle { 17 +.agnease-menu-item { 18 + .dropdown-toggle { 14 14 color: @brand; 15 - font-size: 17px; 16 16 font-weight: 600; 21 + font-size: 17px; 17 17 padding-left: 16px; 18 18 padding-right: 16px; 19 - text-decoration: none; 24 + background: transparent !important; 25 + background-color: transparent !important; 26 + background-image: none !important; 27 + box-shadow: none !important; 20 20 } 21 21 22 - > a:hover, 23 - > a:focus, 24 - > a:active, 25 - &.open > a, 26 - &.active > a { 27 - color: @brand-strong; 28 - text-decoration: none; 29 - outline: none; 30 - } 31 - 32 32 .caret { 33 33 margin-left: 5px; 34 34 border-top-color: @brand; ... ... @@ -35,18 +35,67 @@ 35 35 border-bottom-color: @brand; 36 36 } 37 37 38 - > a:hover .caret, 39 - > a:focus .caret, 40 - > a:active .caret, 41 - &.open > a .caret, 42 - &.active > a .caret { 36 + &.open > .dropdown-toggle, 37 + &.active > .dropdown-toggle, 38 + .dropdown-toggle:hover, 39 + .dropdown-toggle:focus, 40 + .dropdown-toggle:active { 41 + color: @brand-strong; 42 + background: transparent !important; 43 + background-color: transparent !important; 44 + background-image: none !important; 45 + box-shadow: none !important; 46 + outline: none; 47 + } 48 + 49 + &.open > .dropdown-toggle .caret, 50 + &.active > .dropdown-toggle .caret, 51 + .dropdown-toggle:hover .caret, 52 + .dropdown-toggle:focus .caret, 53 + .dropdown-toggle:active .caret { 43 43 border-top-color: @brand-strong; 44 44 border-bottom-color: @brand-strong; 45 45 } 46 46 } 47 47 48 -/* Dropdown panel */59 +/* Remove Bootstrap/XWiki gray backgrounds from top-level nav states */ 49 49 61 +.navbar-nav > li > a, 62 +.navbar-nav > li > a:hover, 63 +.navbar-nav > li > a:focus, 64 +.navbar-nav > li > a:active, 65 +.navbar-nav > li.open > a, 66 +.navbar-nav > li.open > a:hover, 67 +.navbar-nav > li.open > a:focus, 68 +.navbar-nav > li.open > a:active, 69 +.navbar-nav > li.active > a, 70 +.navbar-nav > li.active > a:hover, 71 +.navbar-nav > li.active > a:focus, 72 +.navbar-nav > li.active > a:active, 73 +.nav .open > a, 74 +.nav .open > a:hover, 75 +.nav .open > a:focus { 76 + background: transparent !important; 77 + background-color: transparent !important; 78 + background-image: none !important; 79 + box-shadow: none !important; 80 +} 81 + 82 +/* Contact item should visually match the dropdown top-level entries */ 83 +.navbar-nav > li > a { 84 + color: @brand; 85 + font-size: 17px; 86 + font-weight: 600; 87 +} 88 + 89 +.navbar-nav > li > a:hover, 90 +.navbar-nav > li > a:focus, 91 +.navbar-nav > li > a:active { 92 + color: @brand-strong; 93 +} 94 + 95 +/* Dropdown panels */ 96 + 50 50 .agnease-dropdown { 51 51 min-width: 310px; 52 52 padding: 10px 8px; ... ... @@ -60,12 +60,16 @@ 60 60 align-items: center; 61 61 gap: 12px; 62 62 padding: 11px 14px; 110 + border-radius: 0; 63 63 color: @brand; 112 + background: transparent !important; 113 + background-color: transparent !important; 114 + background-image: none !important; 64 64 white-space: nowrap; 65 65 font-size: 16px; 66 66 font-weight: 600; 67 67 line-height: 1.3; 68 - text-decoration: none;119 + box-shadow: none !important; 69 69 70 70 i { 71 71 width: 20px; ... ... @@ -79,8 +79,12 @@ 79 79 &:focus, 80 80 &:active { 81 81 color: @brand-strong; 133 + background: transparent !important; 134 + background-color: transparent !important; 135 + background-image: none !important; 82 82 text-decoration: none; 83 83 outline: none; 138 + box-shadow: none !important; 84 84 85 85 i { 86 86 color: @brand-strong; ... ... @@ -88,8 +88,16 @@ 88 88 } 89 89 } 90 90 91 - > .active > a { 146 + > .active > a, 147 + > .active > a:hover, 148 + > .active > a:focus, 149 + > .active > a:active { 92 92 color: @brand-strong; 151 + background: transparent !important; 152 + background-color: transparent !important; 153 + background-image: none !important; 154 + text-decoration: none; 155 + box-shadow: none !important; 93 93 94 94 i { 95 95 color: @brand-strong; ... ... @@ -102,23 +102,39 @@ 102 102 } 103 103 } 104 104 105 -/* Mobile */ 168 +.agnease-products-dropdown, 169 +.agnease-resources-dropdown { 170 + min-width: 290px; 171 +} 106 106 173 +/* Remove Bootstrap/XWiki gray backgrounds from dropdown entries globally */ 174 + 175 +.dropdown-menu > li > a, 176 +.dropdown-menu > li > a:hover, 177 +.dropdown-menu > li > a:focus, 178 +.dropdown-menu > li > a:active, 179 +.dropdown-menu > .active > a, 180 +.dropdown-menu > .active > a:hover, 181 +.dropdown-menu > .active > a:focus, 182 +.dropdown-menu > .active > a:active { 183 + background: transparent !important; 184 + background-color: transparent !important; 185 + background-image: none !important; 186 + box-shadow: none !important; 187 +} 188 + 189 +/* ========== Mobile Menu ========== */ 190 + 107 107 @media (max-width: 767px) { 108 - .site-nav { 109 - margin-left: 0; 110 - justify-content: center; 111 - flex-wrap: wrap; 192 + .navbar-nav { 193 + float: none; 112 112 } 113 113 114 - .agnease-menu-item, 115 - .agnease-menu-link { 116 - > a, 117 - > .dropdown-toggle { 118 - font-size: 16px; 119 - padding-top: 9px; 120 - padding-bottom: 9px; 121 - } 196 + .navbar-nav > li > a, 197 + .agnease-menu-item .dropdown-toggle { 198 + font-size: 16px; 199 + padding-top: 9px; 200 + padding-bottom: 9px; 122 122 } 123 123 124 124 .agnease-dropdown { ... ... @@ -134,15 +134,25 @@ 134 134 padding: 8px 10px; 135 135 white-space: normal; 136 136 font-size: 15px; 216 + color: @brand; 217 + background: transparent !important; 137 137 138 138 i { 139 139 width: 18px; 140 140 flex-basis: 18px; 141 141 } 223 + 224 + &:hover, 225 + &:focus, 226 + &:active { 227 + color: @brand-strong; 228 + background: transparent !important; 229 + } 142 142 } 143 143 144 144 .divider { 145 145 margin: 5px 0; 234 + background-color: fade(@brand, 16%); 146 146 } 147 147 } 148 148 }