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,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: @t ext;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