Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/05/30 16:24
From version 10.28
edited by Agnease
on 2026/05/19 07:18
Change comment: There is no comment for this version
To version 10.24
edited by Agnease
on 2026/05/19 06:24
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[1]
code
... ... @@ -1,116 +1,39 @@
1 1  /* ========== Agnease Public Top Menu ========== */
2 2  
3 -/* Keep the public menu aligned to the right on desktop */
4 -@media (min-width: 768px) {
5 - .navbar-nav {
6 - float: right;
7 - margin-left: auto;
3 +.agnease-menu-item {
4 + .dropdown-toggle {
5 + font-weight: inherit;
6 + font-size: inherit;
8 8   }
9 9  
10 - .site-nav {
11 - margin-left: auto;
12 - justify-content: flex-end;
13 - }
14 -}
15 -
16 -/* Top-level menu items */
17 -
18 -.agnease-menu-item,
19 -.agnease-menu-link {
20 - > a,
21 - > .dropdown-toggle {
22 - color: @brand;
23 - font-size: 17px;
24 - font-weight: 600;
25 - padding-left: 16px;
26 - padding-right: 16px;
27 - background: transparent !important;
28 - background-color: transparent !important;
29 - background-image: none !important;
30 - box-shadow: none !important;
31 - }
32 -
33 - > a:hover,
34 - > a:focus,
35 - > a:active,
36 - &.open > a,
37 - &.open > a:hover,
38 - &.open > a:focus,
39 - &.open > a:active,
40 - &.active > a,
41 - &.active > a:hover,
42 - &.active > a:focus,
43 - &.active > a:active {
44 - color: @brand-strong;
45 - background: transparent !important;
46 - background-color: transparent !important;
47 - background-image: none !important;
48 - box-shadow: none !important;
49 - outline: none;
50 - text-decoration: none;
51 - }
52 -
53 53   .caret {
54 - margin-left: 5px;
10 + margin-left: 4px;
55 55   border-top-color: @brand;
56 56   border-bottom-color: @brand;
57 57   }
58 58  
59 - > a:hover .caret,
60 - > a:focus .caret,
61 - > a:active .caret,
62 - &.open > a .caret,
63 - &.active > a .caret {
15 + &.open > .dropdown-toggle,
16 + .dropdown-toggle:hover,
17 + .dropdown-toggle:focus {
18 + color: @brand-strong;
19 + background: transparent;
20 + background-color: transparent;
21 + box-shadow: none;
22 + }
23 +
24 + &.open > .dropdown-toggle .caret,
25 + .dropdown-toggle:hover .caret,
26 + .dropdown-toggle:focus .caret {
64 64   border-top-color: @brand-strong;
65 65   border-bottom-color: @brand-strong;
66 66   }
67 67  }
68 68  
69 -/* Strong Bootstrap/XWiki overrides for top-level menu backgrounds */
32 +/* Dropdown panels */
70 70  
71 -.navbar-nav > li,
72 -.navbar-nav > li:hover,
73 -.navbar-nav > li:focus,
74 -.navbar-nav > li:active,
75 -.navbar-nav > li.open,
76 -.navbar-nav > li.open:hover,
77 -.navbar-nav > li.open:focus,
78 -.navbar-nav > li.open:active,
79 -.navbar-nav > li.active,
80 -.navbar-nav > li.active:hover,
81 -.navbar-nav > li.active:focus,
82 -.navbar-nav > li.active:active {
83 - background: transparent !important;
84 - background-color: transparent !important;
85 - background-image: none !important;
86 -}
87 -
88 -.navbar-nav > li > a,
89 -.navbar-nav > li > a:hover,
90 -.navbar-nav > li > a:focus,
91 -.navbar-nav > li > a:active,
92 -.navbar-nav > li.open > a,
93 -.navbar-nav > li.open > a:hover,
94 -.navbar-nav > li.open > a:focus,
95 -.navbar-nav > li.open > a:active,
96 -.navbar-nav > li.active > a,
97 -.navbar-nav > li.active > a:hover,
98 -.navbar-nav > li.active > a:focus,
99 -.navbar-nav > li.active > a:active,
100 -.nav .open > a,
101 -.nav .open > a:hover,
102 -.nav .open > a:focus {
103 - background: transparent !important;
104 - background-color: transparent !important;
105 - background-image: none !important;
106 - box-shadow: none !important;
107 -}
108 -
109 -/* Dropdown panel */
110 -
111 111  .agnease-dropdown {
112 - min-width: 310px;
113 - padding: 10px 8px;
35 + min-width: 270px;
36 + padding: 8px;
114 114   border: 1px solid fade(@brand, 18%);
115 115   border-radius: 12px;
116 116   background: #fff;
... ... @@ -119,24 +119,22 @@
119 119   > li > a {
120 120   display: flex;
121 121   align-items: center;
122 - gap: 12px;
123 - padding: 11px 14px;
45 + gap: 10px;
46 + padding: 9px 11px;
47 + border-radius: 9px;
124 124   color: @brand;
125 - background: transparent !important;
126 - background-color: transparent !important;
127 - background-image: none !important;
49 + background: transparent;
128 128   white-space: nowrap;
129 - font-size: 16px;
130 - font-weight: 600;
131 - line-height: 1.3;
132 - box-shadow: none !important;
51 + font-size: 14px;
52 + font-weight: 700;
53 + line-height: 1.25;
133 133  
134 134   i {
135 - width: 20px;
136 - flex: 0 0 20px;
56 + width: 18px;
57 + flex: 0 0 18px;
137 137   color: @brand;
138 138   text-align: center;
139 - font-size: 15px;
60 + font-size: 14px;
140 140   }
141 141  
142 142   &:hover,
... ... @@ -143,12 +143,9 @@
143 143   &:focus,
144 144   &:active {
145 145   color: @brand-strong;
146 - background: transparent !important;
147 - background-color: transparent !important;
148 - background-image: none !important;
67 + background: fade(@brand, 8%);
149 149   text-decoration: none;
150 150   outline: none;
151 - box-shadow: none !important;
152 152  
153 153   i {
154 154   color: @brand-strong;
... ... @@ -158,14 +158,10 @@
158 158  
159 159   > .active > a,
160 160   > .active > a:hover,
161 - > .active > a:focus,
162 - > .active > a:active {
79 + > .active > a:focus {
163 163   color: @brand-strong;
164 - background: transparent !important;
165 - background-color: transparent !important;
166 - background-image: none !important;
81 + background: fade(@brand, 10%);
167 167   text-decoration: none;
168 - box-shadow: none !important;
169 169  
170 170   i {
171 171   color: @brand-strong;
... ... @@ -173,49 +173,29 @@
173 173   }
174 174  
175 175   .divider {
176 - margin: 8px 0;
90 + margin: 7px 0;
177 177   background-color: fade(@brand, 16%);
178 178   }
179 179  }
180 180  
181 -/* Strong Bootstrap/XWiki overrides for submenu gray hover backgrounds */
95 +.agnease-products-dropdown,
96 +.agnease-resources-dropdown {
97 + min-width: 260px;
98 +}
182 182  
183 -.dropdown-menu > li > a,
100 +/* Remove gray Bootstrap dropdown item states */
184 184  .dropdown-menu > li > a:hover,
185 -.dropdown-menu > li > a:focus,
186 -.dropdown-menu > li > a:active,
187 -.dropdown-menu > .active > a,
188 -.dropdown-menu > .active > a:hover,
189 -.dropdown-menu > .active > a:focus,
190 -.dropdown-menu > .active > a:active,
191 -.agnease-dropdown > li > a,
192 -.agnease-dropdown > li > a:hover,
193 -.agnease-dropdown > li > a:focus,
194 -.agnease-dropdown > li > a:active {
195 - background: transparent !important;
196 - background-color: transparent !important;
197 - background-image: none !important;
198 - box-shadow: none !important;
102 +.dropdown-menu > li > a:focus {
103 + background-image: none;
199 199  }
200 200  
201 -/* Mobile */
106 +/* ========== Mobile Menu ========== */
202 202  
203 203  @media (max-width: 767px) {
204 - .navbar-nav {
205 - float: none;
206 - margin-left: 0;
109 + .navbar-nav li.agnease-menu-item a {
110 + font-size: 14px;
207 207   }
208 208  
209 - .agnease-menu-item,
210 - .agnease-menu-link {
211 - > a,
212 - > .dropdown-toggle {
213 - font-size: 16px;
214 - padding-top: 9px;
215 - padding-bottom: 9px;
216 - }
217 - }
218 -
219 219   .agnease-dropdown {
220 220   min-width: 0;
221 221   width: 100%;
... ... @@ -223,18 +223,18 @@
223 223   border: 0;
224 224   border-radius: 0;
225 225   box-shadow: none;
226 - background: transparent;
120 + background: #fff;
227 227  
228 228   > li > a {
229 229   padding: 8px 10px;
230 230   white-space: normal;
231 - font-size: 15px;
125 + font-size: 14px;
126 + border-radius: 8px;
232 232   color: @brand;
233 - background: transparent !important;
234 234  
235 235   i {
236 - width: 18px;
237 - flex-basis: 18px;
130 + width: 16px;
131 + flex-basis: 16px;
238 238   }
239 239  
240 240   &:hover,
... ... @@ -241,7 +241,7 @@
241 241   &:focus,
242 242   &:active {
243 243   color: @brand-strong;
244 - background: transparent !important;
138 + background: fade(@brand, 8%);
245 245   }
246 246   }
247 247