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
-
... ... @@ -7,24 +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: inherit;41 + font-weight: 400; 13 13 font-size: inherit; 14 14 } 15 15 16 - &.open > .dropdown-toggle, 17 - .dropdown-toggle:hover, 18 - .dropdown-toggle:focus { 19 - color: @brand; 20 - background: transparent; 21 - } 22 - 23 23 .caret { 24 24 margin-left: 4px; 25 25 } 26 26 } 27 27 50 +/* Dropdown panel */ 28 28 .agnease-services-dropdown { 29 29 min-width: 360px; 30 30 padding: 10px; ... ... @@ -31,6 +31,7 @@ 31 31 border: 1px solid @line; 32 32 border-radius: 12px; 33 33 box-shadow: 0 12px 36px rgba(0, 0, 0, .10); 57 + background: #fff; 34 34 35 35 > li > a { 36 36 display: flex; ... ... @@ -38,8 +38,10 @@ 38 38 gap: 12px; 39 39 padding: 10px 12px; 40 40 border-radius: 10px; 41 - color: @text; 42 42 white-space: normal; 66 + text-decoration: none; 67 + background: transparent; 68 + color: @brand; 43 43 44 44 &:hover, 45 45 &:focus { ... ... @@ -49,15 +49,15 @@ 49 49 50 50 .menu-icon { 51 51 color: @brand-strong; 52 - background: fade(@brand, 1 4%);53 - border-color: fade(@brand, 2 8%);78 + background: fade(@brand, 12%); 79 + border-color: fade(@brand, 24%); 54 54 } 55 55 56 - strong { 82 + .menu-text strong { 57 57 color: @brand-strong; 58 58 } 59 59 60 - small { 86 + .menu-text small { 61 61 color: @muted; 62 62 } 63 63 } ... ... @@ -88,9 +88,9 @@ 88 88 line-height: 1.25; 89 89 90 90 strong { 91 - color: @ text;92 - font-size: 14px;93 - font-weight: 600;117 + color: @brand; 118 + font-size: inherit; 119 + font-weight: 400; 94 94 } 95 95 96 96 small { ... ... @@ -102,116 +102,77 @@ 102 102 } 103 103 } 104 104 131 +/* Mobile dropdown: compact vertical list */ 105 105 @media (max-width: 767px) { 106 - .agnease-services-dropdown { 107 - min-width: 0; 108 - width: 100%; 109 - padding: 6px; 110 - border-radius: 0; 111 - box-shadow: none; 112 - 113 - > li > a { 114 - padding: 10px; 115 - } 116 - } 117 -} 118 -/* Keep the top-level Services menu visually clean when hovered/open/focused */ 119 -.navbar-nav > li.agnease-services-menu > a, 120 -.navbar-nav > li.agnease-services-menu > a:hover, 121 -.navbar-nav > li.agnease-services-menu > a:focus, 122 -.navbar-nav > li.agnease-services-menu.open > a, 123 -.navbar-nav > li.agnease-services-menu.open > a:hover, 124 -.navbar-nav > li.agnease-services-menu.open > a:focus { 125 - background: transparent; 126 - background-color: transparent; 127 - color: @brand-strong; 128 - box-shadow: none; 129 -} 130 - 131 -/* ========== Mobile Services Menu ========== */ 132 - 133 -@media (max-width: 767px) { 134 134 .navbar-nav > li.agnease-services-menu { 135 135 position: static; 136 136 } 137 137 138 - .navbar-nav > li.agnease-services-menu > a, 139 - .navbar-nav > li.agnease-services-menu > a:hover, 140 - .navbar-nav > li.agnease-services-menu > a:focus, 141 - .navbar-nav > li.agnease-services-menu.open > a, 142 - .navbar-nav > li.agnease-services-menu.open > a:hover, 143 - .navbar-nav > li.agnease-services-menu.open > a:focus { 144 - background: transparent; 145 - background-color: transparent; 146 - box-shadow: none; 147 - } 148 - 149 - .navbar-nav > li.agnease-services-menu.open > .agnease-services-dropdown { 150 - display: grid; 151 - } 152 - 153 153 .agnease-services-dropdown { 154 154 left: 50% !important; 155 155 right: auto !important; 156 156 transform: translateX(-50%); 157 - width: calc(100vw - 32px);158 - max-width: 460px;141 + width: calc(100vw - 40px); 142 + max-width: 380px; 159 159 min-width: 0; 160 160 max-height: calc(100vh - 190px); 161 161 overflow-y: auto; 162 162 163 - grid-template-columns: repeat(2, minmax(0, 1fr)); 164 - grid-gap: 8px; 165 - 166 - padding: 10px; 167 - margin-top: 8px; 168 - border-radius: 14px; 147 + padding: 8px; 148 + margin-top: 6px; 149 + border-radius: 12px; 169 169 border: 1px solid @line; 170 - box-shadow: 0 1 4px 36px rgba(0, 0, 0, .14);151 + box-shadow: 0 12px 32px rgba(0, 0, 0, .12); 171 171 background: #fff; 172 - } 173 173 174 - .agnease-services-dropdown > li { 175 - display: block; 176 - } 154 + > li > a { 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; 163 + } 177 177 178 - .agnease-services-dropdown > li:first-child, 179 - .agnease-services-dropdown > li.divider { 180 - grid-column: 1 / -1; 181 - } 165 + .divider { 166 + margin: 6px 0; 167 + } 182 182 183 - .agnease-services-dropdown > li.divider { 184 - margin: 4px 0; 185 - } 169 + .menu-icon { 170 + width: 28px; 171 + height: 28px; 172 + font-size: 13px; 173 + flex: 0 0 28px; 174 + } 186 186 187 - .agnease-services-dropdown > li > a { 188 - min-height: 92px; 189 - padding: 12px 10px; 190 - border-radius: 12px; 191 - flex-direction: column; 192 - align-items: center; 193 - justify-content: center; 194 - gap: 8px; 195 - text-align: center; 196 - } 176 + .menu-text { 177 + display: block; 178 + line-height: 1.25; 179 + } 197 197 198 - .agnease-services-dropdown .menu-icon { 199 - width: 34px; 200 - height: 34px; 201 - font-size: 15px; 202 - } 181 + .menu-text strong { 182 + display: block; 183 + font-size: 14px; 184 + font-weight: 400; 185 + color: @brand; 186 + } 203 203 204 - .agnease-services-dropdown .menu-text { 205 - align-items: center; 206 - line-height: 1.2; 207 - } 188 + .menu-text small { 189 + display: none; 190 + } 208 208 209 - .agnease-services-dropdown.menu-text strong{210 - fon t-size: 13px;211 - font-weight: 600;212 - } 192 + > li > a:hover .menu-text strong, 193 + > li > a:focus .menu-text strong { 194 + color: @brand-strong; 195 + } 213 213 214 - .agnease-services-dropdown .menu-text small { 215 - display: none; 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 + } 216 216 } 217 217 }