Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/05/30 16:24
From version 10.29
edited by Agnease
on 2026/05/19 07:24
Change comment: There is no comment for this version
To version 10.27
edited by Agnease
on 2026/05/19 07:13
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[1]
code
... ... @@ -1,42 +1,32 @@
1 1  /* ========== Agnease Public Top Menu ========== */
2 2  
3 -/* Desktop alignment */
3 +/* Keep the public menu aligned to the right on desktop */
4 4  @media (min-width: 768px) {
5 + .navbar-nav {
6 + float: right;
7 + }
8 +
5 5   .site-nav {
6 6   margin-left: auto;
7 7   justify-content: flex-end;
8 8   }
9 -
10 - .site-nav .agnease-menu-item,
11 - .site-nav .agnease-menu-link {
12 - display: inline-block;
13 - }
14 14  }
15 15  
16 16  /* Top-level menu items */
17 17  
18 -.agnease-menu-item,
19 -.agnease-menu-link {
20 - > a,
21 - > .dropdown-toggle {
17 +.agnease-menu-item {
18 + .dropdown-toggle {
22 22   color: @brand;
23 - font-size: 17px;
24 24   font-weight: 600;
21 + font-size: 17px;
25 25   padding-left: 16px;
26 26   padding-right: 16px;
27 - text-decoration: none;
24 + background: transparent !important;
25 + background-color: transparent !important;
26 + background-image: none !important;
27 + box-shadow: none !important;
28 28   }
29 29  
30 - > a:hover,
31 - > a:focus,
32 - > a:active,
33 - &.open > a,
34 - &.active > a {
35 - color: @brand-strong;
36 - text-decoration: none;
37 - outline: none;
38 - }
39 -
40 40   .caret {
41 41   margin-left: 5px;
42 42   border-top-color: @brand;
... ... @@ -43,18 +43,67 @@
43 43   border-bottom-color: @brand;
44 44   }
45 45  
46 - > a:hover .caret,
47 - > a:focus .caret,
48 - > a:active .caret,
49 - &.open > a .caret,
50 - &.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 {
51 51   border-top-color: @brand-strong;
52 52   border-bottom-color: @brand-strong;
53 53   }
54 54  }
55 55  
56 -/* Dropdown panel */
59 +/* Remove Bootstrap/XWiki gray backgrounds from top-level nav states */
57 57  
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 +
58 58  .agnease-dropdown {
59 59   min-width: 310px;
60 60   padding: 10px 8px;
... ... @@ -68,12 +68,16 @@
68 68   align-items: center;
69 69   gap: 12px;
70 70   padding: 11px 14px;
110 + border-radius: 0;
71 71   color: @brand;
112 + background: transparent !important;
113 + background-color: transparent !important;
114 + background-image: none !important;
72 72   white-space: nowrap;
73 73   font-size: 16px;
74 74   font-weight: 600;
75 75   line-height: 1.3;
76 - text-decoration: none;
119 + box-shadow: none !important;
77 77  
78 78   i {
79 79   width: 20px;
... ... @@ -87,8 +87,12 @@
87 87   &:focus,
88 88   &:active {
89 89   color: @brand-strong;
133 + background: transparent !important;
134 + background-color: transparent !important;
135 + background-image: none !important;
90 90   text-decoration: none;
91 91   outline: none;
138 + box-shadow: none !important;
92 92  
93 93   i {
94 94   color: @brand-strong;
... ... @@ -96,8 +96,16 @@
96 96   }
97 97   }
98 98  
99 - > .active > a {
146 + > .active > a,
147 + > .active > a:hover,
148 + > .active > a:focus,
149 + > .active > a:active {
100 100   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;
101 101  
102 102   i {
103 103   color: @brand-strong;
... ... @@ -110,23 +110,39 @@
110 110   }
111 111  }
112 112  
113 -/* Mobile */
168 +.agnease-products-dropdown,
169 +.agnease-resources-dropdown {
170 + min-width: 290px;
171 +}
114 114  
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 +
115 115  @media (max-width: 767px) {
116 - .site-nav {
117 - margin-left: 0;
118 - justify-content: center;
119 - flex-wrap: wrap;
192 + .navbar-nav {
193 + float: none;
120 120   }
121 121  
122 - .agnease-menu-item,
123 - .agnease-menu-link {
124 - > a,
125 - > .dropdown-toggle {
126 - font-size: 16px;
127 - padding-top: 9px;
128 - padding-bottom: 9px;
129 - }
196 + .navbar-nav > li > a,
197 + .agnease-menu-item .dropdown-toggle {
198 + font-size: 16px;
199 + padding-top: 9px;
200 + padding-bottom: 9px;
130 130   }
131 131  
132 132   .agnease-dropdown {
... ... @@ -142,15 +142,25 @@
142 142   padding: 8px 10px;
143 143   white-space: normal;
144 144   font-size: 15px;
216 + color: @brand;
217 + background: transparent !important;
145 145  
146 146   i {
147 147   width: 18px;
148 148   flex-basis: 18px;
149 149   }
223 +
224 + &:hover,
225 + &:focus,
226 + &:active {
227 + color: @brand-strong;
228 + background: transparent !important;
229 + }
150 150   }
151 151  
152 152   .divider {
153 153   margin: 5px 0;
234 + background-color: fade(@brand, 16%);
154 154   }
155 155   }
156 156  }