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,35 +102,77 @@ 102 102 } 103 103 } 104 104 131 +/* Mobile dropdown: compact vertical list */ 105 105 @media (max-width: 767px) { 133 + .navbar-nav > li.agnease-services-menu { 134 + position: static; 135 + } 136 + 106 106 .agnease-services-dropdown { 138 + left: 50% !important; 139 + right: auto !important; 140 + transform: translateX(-50%); 141 + width: calc(100vw - 40px); 142 + max-width: 380px; 107 107 min-width: 0; 108 - width: 100%; 109 - padding: 6px; 110 - border-radius: 0; 111 - box-shadow: none; 144 + max-height: calc(100vh - 190px); 145 + overflow-y: auto; 112 112 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 + 113 113 > li > a { 114 - 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; 115 115 } 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 + } 116 116 } 117 117 } 118 -/* Keep the top-level Services menu visually clean when hovered/open/focused */ 119 -.navbar-nav > li.agnease-services-menu > a { 120 - background: transparent; 121 - background-color: transparent; 122 - color: inherit; 123 - box-shadow: none; 124 -} 125 - 126 -.navbar-nav > li.agnease-services-menu > a:hover, 127 -.navbar-nav > li.agnease-services-menu > a:focus, 128 -.navbar-nav > li.agnease-services-menu.open > a, 129 -.navbar-nav > li.agnease-services-menu.open > a:hover, 130 -.navbar-nav > li.agnease-services-menu.open > a:focus { 131 - background: transparent; 132 - background-color: transparent; 133 - color: @brand; 134 - box-shadow: none; 135 -} 136 -} - contentType
-
... ... @@ -1,0 +1,1 @@ 1 +LESS