Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/05/30 16:24
From version 8.18
edited by Agnease
on 2026/05/19 03:36
Change comment: There is no comment for this version
To version 8.16
edited by Agnease
on 2026/05/19 03:34
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[1]
code
... ... @@ -157,88 +157,81 @@
157 157   }
158 158  }
159 159  
160 -/* ========== Compact Public Menu on Mobile ========== */
160 +/* ========== Mobile Navigation Optimization ========== */
161 161  
162 162  @media (max-width: 767px) {
163 - /* Prevent any menu element from creating horizontal scroll */
164 - html,
165 - body {
166 - overflow-x: hidden;
167 - }
168 -
169 - .navbar,
170 - .navbar-collapse,
171 - .navbar-nav,
172 - .navbar-nav > li,
173 - .navbar-nav .dropdown-menu {
174 - max-width: 100%;
175 - }
176 -
177 - /* Make the main menu vertical inside the burger menu */
178 178   .navbar-nav {
179 - float: none !important;
180 - width: 100%;
181 181   margin: 0;
182 182   }
183 183  
184 - .navbar-nav > li {
185 - float: none !important;
186 - display: block;
187 - width: 100%;
167 + .navbar-collapse {
168 + border-top: 1px solid @line;
169 + box-shadow: none;
188 188   }
189 189  
190 190   .navbar-nav > li > a {
191 - display: block;
192 - width: 100%;
193 - padding: 11px 16px;
194 - font-size: 14px;
173 + padding: 14px 18px;
195 195   font-weight: 600;
196 - line-height: 1.3;
197 - white-space: normal;
175 + color: @text;
198 198   }
199 199  
200 - .navbar-nav > li > a .caret {
201 - float: right;
202 - margin-top: 7px;
178 + .navbar-nav > li > a:hover,
179 + .navbar-nav > li > a:focus {
180 + background: @brand-bg;
181 + color: @brand-strong;
203 203   }
204 204  
205 - /* Dropdowns become compact nested sections */
184 + .navbar-nav .open > a,
185 + .navbar-nav .open > a:hover,
186 + .navbar-nav .open > a:focus {
187 + background: @brand-bg;
188 + color: @brand-strong;
189 + }
190 +
206 206   .navbar-nav .dropdown-menu {
207 - position: static !important;
208 - float: none !important;
209 - width: 100% !important;
210 - min-width: 0 !important;
211 - max-width: 100% !important;
192 + position: static;
193 + float: none;
194 + width: 100%;
212 212   margin: 0;
213 - padding: 4px 0 8px;
196 + padding: 6px 0 12px;
214 214   border: 0;
215 215   border-radius: 0;
216 216   box-shadow: none;
217 - background: @brand-bg;
200 + background: #fff;
218 218   }
219 219  
220 - .navbar-nav .dropdown-menu > li {
221 - width: 100%;
203 + .navbar-nav .dropdown-menu .divider {
204 + margin: 6px 18px;
205 + background-color: @line;
222 222   }
223 223  
224 224   .navbar-nav .dropdown-menu > li > a {
225 - display: block;
226 - width: 100%;
227 - padding: 8px 16px 8px 28px;
209 + display: flex;
210 + align-items: flex-start;
211 + gap: 12px;
212 + padding: 10px 18px 10px 28px;
228 228   white-space: normal;
229 - overflow-wrap: anywhere;
230 230   color: @text;
231 231   }
232 232  
233 233   .navbar-nav .dropdown-menu > li > a:hover,
234 234   .navbar-nav .dropdown-menu > li > a:focus {
235 - background: @brand-soft;
219 + background: @brand-bg;
236 236   color: @brand-strong;
237 237   }
238 238  
239 - /* Compact the rich dropdown layout on mobile */
240 240   .navbar-nav .dropdown-menu .menu-icon {
241 - display: none;
224 + flex: 0 0 28px;
225 + width: 28px;
226 + height: 28px;
227 + margin-top: 2px;
228 + border-radius: 9px;
229 + background: @brand-soft;
230 + color: @brand-strong;
231 + display: flex;
232 + align-items: center;
233 + justify-content: center;
234 + font-size: 14px;
242 242   }
243 243  
244 244   .navbar-nav .dropdown-menu .menu-text {
... ... @@ -248,26 +248,26 @@
248 248  
249 249   .navbar-nav .dropdown-menu .menu-text strong {
250 250   display: block;
251 - font-size: 13px;
244 + font-size: 14px;
252 252   line-height: 1.25;
253 - font-weight: 600;
254 254   color: @text;
255 255   }
256 256  
257 - /* Hide descriptions on mobile to avoid a very tall / wide menu */
258 258   .navbar-nav .dropdown-menu .menu-text small {
259 - display: none;
250 + display: block;
251 + margin-top: 2px;
252 + font-size: 12px;
253 + line-height: 1.35;
254 + color: @muted;
260 260   }
261 261  
262 - .navbar-nav .dropdown-menu .divider {
263 - margin: 4px 16px;
264 - background-color: @line;
257 + .navbar-nav .dropdown-menu > li > a:hover .menu-text strong,
258 + .navbar-nav .dropdown-menu > li > a:focus .menu-text strong {
259 + color: @brand-strong;
265 265   }
266 266  
267 - .navbar-nav .open > a,
268 - .navbar-nav .open > a:hover,
269 - .navbar-nav .open > a:focus {
270 - background: @brand-bg;
271 - color: @brand-strong;
262 + .navbar-nav .caret {
263 + float: right;
264 + margin-top: 8px;
272 272   }
273 273  }