Changes for page Public Web Site

Last modified by Agnease on 2026/05/30 16:24

From version 6.36
edited by Agnease
on 2026/05/12 13:17
Change comment: There is no comment for this version
To version 6.52
edited by Agnease
on 2026/05/12 14:07
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[1]
code
... ... @@ -7,19 +7,47 @@
7 7  @line: #E4ECE9;
8 8  @brand-bg: #F4FCFA;
9 9  
10 +/* Top-level public menu links: Services + Contact */
11 +.navbar-nav > li > a,
12 +.navbar-nav > li.agnease-services-menu > a {
13 + color: @brand;
14 + font-size: inherit;
15 + font-weight: 400;
16 + background: transparent;
17 + background-color: transparent;
18 + box-shadow: none;
19 + text-decoration: none;
20 +}
21 +
22 +.navbar-nav > li > a:hover,
23 +.navbar-nav > li > a:focus,
24 +.navbar-nav > li.open > a,
25 +.navbar-nav > li.open > a:hover,
26 +.navbar-nav > li.open > a:focus,
27 +.navbar-nav > li.agnease-services-menu > a:hover,
28 +.navbar-nav > li.agnease-services-menu > a:focus,
29 +.navbar-nav > li.agnease-services-menu.open > a,
30 +.navbar-nav > li.agnease-services-menu.open > a:hover,
31 +.navbar-nav > li.agnease-services-menu.open > a:focus {
32 + color: @brand-strong;
33 + background: transparent;
34 + background-color: transparent;
35 + box-shadow: none;
36 + text-decoration: none;
37 +}
38 +
10 10  .agnease-services-menu {
11 11   .dropdown-toggle {
12 - font-weight: 600;
41 + font-weight: 400;
42 + font-size: inherit;
13 13   }
14 14  
15 - &.open > .dropdown-toggle,
16 - .dropdown-toggle:hover,
17 - .dropdown-toggle:focus {
18 - color: @brand;
19 - background: transparent;
45 + .caret {
46 + margin-left: 4px;
20 20   }
21 21  }
22 22  
50 +/* Dropdown panel */
23 23  .agnease-services-dropdown {
24 24   min-width: 360px;
25 25   padding: 10px;
... ... @@ -26,6 +26,7 @@
26 26   border: 1px solid @line;
27 27   border-radius: 12px;
28 28   box-shadow: 0 12px 36px rgba(0, 0, 0, .10);
57 + background: #fff;
29 29  
30 30   > li > a {
31 31   display: flex;
... ... @@ -33,23 +33,30 @@
33 33   gap: 12px;
34 34   padding: 10px 12px;
35 35   border-radius: 10px;
36 - color: @text;
37 37   white-space: normal;
66 + text-decoration: none;
67 + background: transparent;
68 + color: @brand;
38 38  
39 39   &:hover,
40 40   &:focus {
41 - color: @text;
72 + color: @brand-strong;
42 42   background: @brand-bg;
43 43   text-decoration: none;
44 44  
45 45   .menu-icon {
46 - color: #fff;
47 - background: @brand;
77 + color: @brand-strong;
78 + background: fade(@brand, 12%);
79 + border-color: fade(@brand, 24%);
48 48   }
49 49  
50 - strong {
82 + .menu-text strong {
51 51   color: @brand-strong;
52 52   }
85 +
86 + .menu-text small {
87 + color: @muted;
88 + }
53 53   }
54 54   }
55 55  
... ... @@ -62,13 +62,14 @@
62 62   width: 34px;
63 63   height: 34px;
64 64   border-radius: 50%;
65 - background: fade(@brand, 10%);
101 + background: fade(@brand, 8%);
102 + border: 1px solid fade(@brand, 18%);
66 66   color: @brand;
67 67   display: flex;
68 68   align-items: center;
69 69   justify-content: center;
70 70   flex-shrink: 0;
71 - transition: color .15s ease, background .15s ease;
108 + transition: color .15s ease, background .15s ease, border-color .15s ease;
72 72   }
73 73  
74 74   .menu-text {
... ... @@ -77,9 +77,9 @@
77 77   line-height: 1.25;
78 78  
79 79   strong {
80 - color: @text;
81 - font-size: 14px;
82 - font-weight: 700;
117 + color: @brand;
118 + font-size: inherit;
119 + font-weight: 400;
83 83   }
84 84  
85 85   small {
... ... @@ -86,20 +86,82 @@
86 86   color: @muted;
87 87   font-size: 12px;
88 88   margin-top: 2px;
126 + font-weight: 400;
89 89   }
90 90   }
91 91  }
92 92  
131 +/* Mobile dropdown: compact vertical list */
93 93  @media (max-width: 767px) {
133 + .navbar-nav > li.agnease-services-menu {
134 + position: static;
135 + }
136 +
94 94   .agnease-services-dropdown {
138 + left: 50% !important;
139 + right: auto !important;
140 + transform: translateX(-50%);
141 + width: calc(100vw - 40px);
142 + max-width: 380px;
95 95   min-width: 0;
96 - width: 100%;
97 - padding: 6px;
98 - border-radius: 0;
99 - box-shadow: none;
144 + max-height: calc(100vh - 190px);
145 + overflow-y: auto;
100 100  
147 + padding: 8px;
148 + margin-top: 6px;
149 + border-radius: 12px;
150 + border: 1px solid @line;
151 + box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
152 + background: #fff;
153 +
101 101   > li > a {
102 - padding: 10px;
155 + display: flex;
156 + align-items: center;
157 + gap: 10px;
158 + min-height: 0;
159 + padding: 9px 10px;
160 + border-radius: 9px;
161 + text-align: left;
162 + white-space: normal;
103 103   }
164 +
165 + .divider {
166 + margin: 6px 0;
167 + }
168 +
169 + .menu-icon {
170 + width: 28px;
171 + height: 28px;
172 + font-size: 13px;
173 + flex: 0 0 28px;
174 + }
175 +
176 + .menu-text {
177 + display: block;
178 + line-height: 1.25;
179 + }
180 +
181 + .menu-text strong {
182 + display: block;
183 + font-size: 14px;
184 + font-weight: 400;
185 + color: @brand;
186 + }
187 +
188 + .menu-text small {
189 + display: none;
190 + }
191 +
192 + > li > a:hover .menu-text strong,
193 + > li > a:focus .menu-text strong {
194 + color: @brand-strong;
195 + }
196 +
197 + > li > a:hover .menu-icon,
198 + > li > a:focus .menu-icon {
199 + color: @brand-strong;
200 + background: fade(@brand, 12%);
201 + border-color: fade(@brand, 24%);
202 + }
104 104   }
105 105  }
contentType
... ... @@ -1,0 +1,1 @@
1 +LESS
use
... ... @@ -1,0 +1,1 @@
1 +onDemand