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,6 +1,16 @@ 1 1 /* ========== Agnease Public Top Menu ========== */ 2 2 3 -.agnease-menu-item { 3 +@brand: #00937D; 4 +@brand-strong: #007B6A; 5 +@text: #2D3A34; 6 +@muted: #5B6B64; 7 +@line: #E4ECE9; 8 +@brand-bg: #F4FCFA; 9 + 10 +/* Top-level menu items */ 11 + 12 +.agnease-services-menu, 13 +.agnease-products-menu { 4 4 .dropdown-toggle { 5 5 font-weight: inherit; 6 6 font-size: inherit; ... ... @@ -20,12 +20,20 @@ 20 20 } 21 21 } 22 22 23 -.navbar-nav > li.agnease-menu-item > a, 24 -.navbar-nav > li.agnease-menu-item > a:hover, 25 -.navbar-nav > li.agnease-menu-item > a:focus, 26 -.navbar-nav > li.agnease-menu-item.open > a, 27 -.navbar-nav > li.agnease-menu-item.open > a:hover, 28 -.navbar-nav > li.agnease-menu-item.open > a:focus { 33 +/* Keep Agnease public top-level menu visually clean when hovered/open/focused */ 34 + 35 +.navbar-nav > li.agnease-services-menu > a, 36 +.navbar-nav > li.agnease-products-menu > a, 37 +.navbar-nav > li.agnease-services-menu > a:hover, 38 +.navbar-nav > li.agnease-products-menu > a:hover, 39 +.navbar-nav > li.agnease-services-menu > a:focus, 40 +.navbar-nav > li.agnease-products-menu > a:focus, 41 +.navbar-nav > li.agnease-services-menu.open > a, 42 +.navbar-nav > li.agnease-products-menu.open > a, 43 +.navbar-nav > li.agnease-services-menu.open > a:hover, 44 +.navbar-nav > li.agnease-products-menu.open > a:hover, 45 +.navbar-nav > li.agnease-services-menu.open > a:focus, 46 +.navbar-nav > li.agnease-products-menu.open > a:focus { 29 29 background: transparent; 30 30 background-color: transparent; 31 31 color: @brand-strong; ... ... @@ -32,33 +32,26 @@ 32 32 box-shadow: none; 33 33 } 34 34 35 -.agnease-dropdown { 36 - min-width: 270px; 37 - padding: 8px; 53 +/* Dropdown panels */ 54 + 55 +.agnease-services-dropdown, 56 +.agnease-resources-dropdown, 57 +.agnease-products-dropdown { 58 + min-width: 360px; 59 + padding: 10px; 38 38 border: 1px solid @line; 39 39 border-radius: 12px; 40 - box-shadow: 0 12px 3 2px rgba(0, 0, 0, .10);62 + box-shadow: 0 12px 36px rgba(0, 0, 0, .10); 41 41 42 42 > li > a { 43 43 display: flex; 44 - align-items: center;45 - gap: 1 0px;46 - padding: 9px 11px;47 - border-radius: 9px;66 + align-items: flex-start; 67 + gap: 12px; 68 + padding: 10px 12px; 69 + border-radius: 10px; 48 48 color: @text; 49 - white-space: nowrap; 50 - font-size: 14px; 51 - font-weight: 600; 52 - line-height: 1.25; 71 + white-space: normal; 53 53 54 - i { 55 - width: 18px; 56 - flex: 0 0 18px; 57 - color: @brand; 58 - text-align: center; 59 - font-size: 14px; 60 - } 61 - 62 62 &:hover, 63 63 &:focus { 64 64 color: @brand-strong; ... ... @@ -65,58 +65,208 @@ 65 65 background: @brand-bg; 66 66 text-decoration: none; 67 67 68 - i { 79 + .menu-icon { 69 69 color: @brand-strong; 81 + background: fade(@brand, 14%); 82 + border-color: fade(@brand, 28%); 70 70 } 84 + 85 + strong { 86 + color: @brand-strong; 87 + } 88 + 89 + small { 90 + color: @muted; 91 + } 71 71 } 72 72 } 73 73 74 74 .divider { 75 - margin: 7px 0;96 + margin: 8px 0; 76 76 background-color: @line; 77 77 } 99 + 100 + .menu-icon { 101 + width: 34px; 102 + height: 34px; 103 + border-radius: 50%; 104 + background: fade(@brand, 8%); 105 + border: 1px solid fade(@brand, 18%); 106 + color: @brand; 107 + display: flex; 108 + align-items: center; 109 + justify-content: center; 110 + flex-shrink: 0; 111 + transition: color .15s ease, background .15s ease, border-color .15s ease; 112 + } 113 + 114 + .menu-text { 115 + display: flex; 116 + flex-direction: column; 117 + line-height: 1.25; 118 + 119 + strong { 120 + color: @brand; 121 + font-size: 14px; 122 + font-weight: 600; 123 + } 124 + 125 + small { 126 + color: @muted; 127 + font-size: 12px; 128 + margin-top: 2px; 129 + font-weight: 400; 130 + } 131 + } 78 78 } 79 79 134 +/* Products dropdown can be slightly narrower for now */ 135 + 80 80 .agnease-products-dropdown { 81 - min-width: 260px;137 + min-width: 340px; 82 82 } 83 83 84 -.agnease-resources-dropdown { 85 - min-width: 260px; 140 +/* Mobile */ 141 + 142 +@media (max-width: 767px) { 143 + .agnease-services-dropdown, 144 + .agnease-resources-dropdown, 145 + .agnease-products-dropdown { 146 + min-width: 0; 147 + width: 100%; 148 + padding: 6px; 149 + border-radius: 0; 150 + border-left: 0; 151 + border-right: 0; 152 + box-shadow: none; 153 + 154 + > li > a { 155 + padding: 10px; 156 + } 157 + } 86 86 } 87 87 88 -/* ========== MobileMenu ========== */160 +/* ========== Compact Public Menu on Mobile ========== */ 89 89 90 90 @media (max-width: 767px) { 91 - .navbar-nav> li.agnease-menu-item>a,92 - .navbar-nav >li > a {93 - padding-top:8px;94 - padding-bottom:8px;163 + /* Prevent any menu element from creating horizontal scroll */ 164 + html, 165 + body { 166 + overflow-x: hidden; 95 95 } 168 + 169 + .agnease-services-dropdown, 170 + .agnease-products-dropdown, 171 + .agnease-resources-dropdown { 172 + width: 100% !important; 173 + min-width: 0 !important; 174 + max-width: 100% !important; 175 + left: auto !important; 176 + right: auto !important; 177 + } 96 96 97 - .agnease-dropdown { 98 - min-width: 0; 179 + .navbar, 180 + .navbar-collapse, 181 + .navbar-nav, 182 + .navbar-nav > li, 183 + .navbar-nav .dropdown-menu { 184 + max-width: 100%; 185 + } 186 + 187 + /* Make the main menu vertical inside the burger menu */ 188 + .navbar-nav { 189 + float: none !important; 99 99 width: 100%; 100 - padding: 4px 8px 8px 18px; 191 + margin: 0; 192 + } 193 + 194 + .navbar-nav > li { 195 + float: none !important; 196 + display: block; 197 + width: 100%; 198 + } 199 + 200 + .navbar-nav > li > a { 201 + display: block; 202 + width: 100%; 203 + padding: 11px 16px; 204 + font-size: 14px; 205 + font-weight: 600; 206 + line-height: 1.3; 207 + white-space: normal; 208 + } 209 + 210 + .navbar-nav > li > a .caret { 211 + float: right; 212 + margin-top: 7px; 213 + } 214 + 215 + /* Dropdowns become compact nested sections */ 216 + .navbar-nav .dropdown-menu { 217 + position: static !important; 218 + float: none !important; 219 + width: 100% !important; 220 + min-width: 0 !important; 221 + max-width: 100% !important; 222 + margin: 0; 223 + padding: 4px 0 8px; 101 101 border: 0; 102 102 border-radius: 0; 103 103 box-shadow: none; 104 - background: transparent; 227 + background: @brand-bg; 228 + } 105 105 106 - > li > a { 107 - padding: 8px 10px; 108 - white-space: normal; 109 - font-size: 14px; 110 - border-radius: 8px; 230 + .navbar-nav .dropdown-menu > li { 231 + width: 100%; 232 + } 111 111 112 - i { 113 - width: 16px; 114 - flex-basis: 16px; 115 - } 116 - } 234 + .navbar-nav .dropdown-menu > li > a { 235 + display: block; 236 + width: 100%; 237 + padding: 8px 16px 8px 28px; 238 + white-space: normal; 239 + overflow-wrap: anywhere; 240 + color: @text; 241 + } 117 117 118 - .divider { 119 - margin: 5px 0; 120 - } 243 + .navbar-nav .dropdown-menu > li > a:hover, 244 + .navbar-nav .dropdown-menu > li > a:focus { 245 + background: @brand-soft; 246 + color: @brand-strong; 121 121 } 248 + 249 + /* Compact the rich dropdown layout on mobile */ 250 + .navbar-nav .dropdown-menu .menu-icon { 251 + display: none; 252 + } 253 + 254 + .navbar-nav .dropdown-menu .menu-text { 255 + display: block; 256 + min-width: 0; 257 + } 258 + 259 + .navbar-nav .dropdown-menu .menu-text strong { 260 + display: block; 261 + font-size: 13px; 262 + line-height: 1.25; 263 + font-weight: 600; 264 + color: @text; 265 + } 266 + 267 + /* Hide descriptions on mobile to avoid a very tall / wide menu */ 268 + .navbar-nav .dropdown-menu .menu-text small { 269 + display: none; 270 + } 271 + 272 + .navbar-nav .dropdown-menu .divider { 273 + margin: 4px 16px; 274 + background-color: @line; 275 + } 276 + 277 + .navbar-nav .open > a, 278 + .navbar-nav .open > a:hover, 279 + .navbar-nav .open > a:focus { 280 + background: @brand-bg; 281 + color: @brand-strong; 282 + } 122 122 }