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
-
... ... @@ -1,6 +1,16 @@ 1 1 /* ========== Agnease Public Top Menu ========== */ 2 2 3 -.agnease-menu-item { 3 +@brand: #00937D; 4 +@brand-strong: #007B6A; 5 +@text: #2D3A34; 6 +@muted: #5B6B64; 7 +@line: #E4ECE9; 8 +@brand-bg: #F4FCFA; 9 + 10 +/* Top-level menu items */ 11 + 12 +.agnease-services-menu, 13 +.agnease-products-menu { 4 4 .dropdown-toggle { 5 5 font-weight: inherit; 6 6 font-size: inherit; ... ... @@ -8,8 +8,6 @@ 8 8 9 9 .caret { 10 10 margin-left: 4px; 11 - border-top-color: @brand; 12 - border-bottom-color: @brand; 13 13 } 14 14 15 15 &.open > .dropdown-toggle, ... ... @@ -20,13 +20,6 @@ 20 20 background-color: transparent; 21 21 box-shadow: none; 22 22 } 23 - 24 - &.open > .dropdown-toggle .caret, 25 - .dropdown-toggle:hover .caret, 26 - .dropdown-toggle:focus .caret { 27 - border-top-color: @brand-strong; 28 - border-bottom-color: @brand-strong; 29 - } 30 30 } 31 31 32 32 /* Keep Agnease public top-level menu visually clean when hovered/open/focused */ ... ... @@ -51,139 +51,106 @@ 51 51 52 52 /* Dropdown panels */ 53 53 54 -.agnease-dropdown { 55 - min-width: 270px; 56 - padding: 8px; 57 - border: 1px solid fade(@brand, 18%); 55 +.agnease-services-dropdown, 56 +.agnease-resources-dropdown, 57 +.agnease-products-dropdown { 58 + min-width: 360px; 59 + padding: 10px; 60 + border: 1px solid @line; 58 58 border-radius: 12px; 59 - background: #fff; 60 - box-shadow: 0 12px 32px fade(@brand-strong, 12%); 62 + box-shadow: 0 12px 36px rgba(0, 0, 0, .10); 61 61 62 62 > li > a { 63 63 display: flex; 64 - align-items: center; 65 - gap: 10px; 66 - padding: 9px 11px; 67 - border-radius: 9px; 68 - color: @brand; 69 - background: transparent; 70 - white-space: nowrap; 71 - font-size: 14px; 72 - font-weight: 700; 73 - line-height: 1.25; 66 + align-items: flex-start; 67 + gap: 12px; 68 + padding: 10px 12px; 69 + border-radius: 10px; 70 + color: @text; 71 + white-space: normal; 74 74 75 - i { 76 - width: 18px; 77 - flex: 0 0 18px; 78 - color: @brand; 79 - text-align: center; 80 - font-size: 14px; 81 - } 82 - 83 83 &:hover, 84 - &:focus, 85 - &:active { 74 + &:focus { 86 86 color: @brand-strong; 87 - background: fade(@brand, 8%);76 + background: @brand-bg; 88 88 text-decoration: none; 89 - outline: none; 90 90 91 - i { 79 + .menu-icon { 92 92 color: @brand-strong; 81 + background: fade(@brand, 14%); 82 + border-color: fade(@brand, 28%); 93 93 } 94 - } 95 - } 96 96 97 - > .active > a, 98 - > .active > a:hover, 99 - > .active > a:focus { 100 - color: @brand-strong; 101 - background: fade(@brand, 10%); 102 - text-decoration: none; 85 + strong { 86 + color: @brand-strong; 87 + } 103 103 104 - i { 105 - color: @brand-strong; 89 + small { 90 + color: @muted; 91 + } 106 106 } 107 107 } 108 108 109 109 .divider { 110 - margin: 7px 0;111 - background-color: fade(@brand, 16%);96 + margin: 8px 0; 97 + background-color: @line; 112 112 } 113 -} 114 114 115 -.agnease-products-dropdown, 116 -.agnease-resources-dropdown { 117 - min-width: 260px; 100 + .menu-icon { 101 + width: 34px; 102 + height: 34px; 103 + border-radius: 50%; 104 + background: fade(@brand, 8%); 105 + border: 1px solid fade(@brand, 18%); 106 + color: @brand; 107 + display: flex; 108 + align-items: center; 109 + justify-content: center; 110 + flex-shrink: 0; 111 + transition: color .15s ease, background .15s ease, border-color .15s ease; 112 + } 113 + 114 + .menu-text { 115 + display: flex; 116 + flex-direction: column; 117 + line-height: 1.25; 118 + 119 + strong { 120 + color: @brand; 121 + font-size: 14px; 122 + font-weight: 600; 123 + } 124 + 125 + small { 126 + color: @muted; 127 + font-size: 12px; 128 + margin-top: 2px; 129 + font-weight: 400; 130 + } 131 + } 118 118 } 119 119 120 -/* Remove gray Bootstrapdropdownitemstates*/121 - .dropdown-menu > li > a:hover,122 -.dropdown -menu> li > a:focus{123 - background-image:none;134 +/* Products dropdown can be slightly narrower for now */ 135 + 136 +.agnease-products-dropdown { 137 + min-width: 340px; 124 124 } 125 125 126 -/* ==========MobileMenu ==========*/140 +/* Mobile */ 127 127 128 128 @media (max-width: 767px) { 129 - .navbar-nav > li.agnease-menu-item > a, 130 - .navbar-nav > li > a { 131 - padding-top: 8px; 132 - padding-bottom: 8px; 133 - } 134 - 135 - .agnease-dropdown { 143 + .agnease-services-dropdown, 144 + .agnease-products-dropdown { 136 136 min-width: 0; 137 137 width: 100%; 138 - padding: 4px 8px 8px 18px; 139 - border: 0; 147 + padding: 6px; 140 140 border-radius: 0; 149 + border-left: 0; 150 + border-right: 0; 141 141 box-shadow: none; 142 - background: #fff; 143 143 144 144 > li > a { 145 - padding: 8px 10px; 146 - white-space: normal; 147 - font-size: 14px; 148 - border-radius: 8px; 149 - color: @brand; 150 - 151 - i { 152 - width: 16px; 153 - flex-basis: 16px; 154 - } 155 - 156 - &:hover, 157 - &:focus, 158 - &:active { 159 - color: @brand-strong; 160 - background: fade(@brand, 8%); 161 - } 154 + padding: 10px; 162 162 } 163 - 164 - .divider { 165 - margin: 5px 0; 166 - background-color: fade(@brand, 16%); 167 - } 168 168 } 169 169 } 170 -/* Remove gray background from opened top-level public menu items */ 171 - 172 -.site-nav .dropdown.open > a, 173 -.site-nav .dropdown.open > a:hover, 174 -.site-nav .dropdown.open > a:focus, 175 -.site-nav .agnease-menu-item.open > a, 176 -.site-nav .agnease-menu-item.open > a:hover, 177 -.site-nav .agnease-menu-item.open > a:focus, 178 -.navbar-nav > li.dropdown.open > a, 179 -.navbar-nav > li.dropdown.open > a:hover, 180 -.navbar-nav > li.dropdown.open > a:focus, 181 -.navbar-nav > li.agnease-menu-item.open > a, 182 -.navbar-nav > li.agnease-menu-item.open > a:hover, 183 -.navbar-nav > li.agnease-menu-item.open > a:focus { 184 - color: @brand-strong; 185 - background: transparent !important; 186 - background-color: transparent !important; 187 - background-image: none !important; 188 - box-shadow: none !important; 189 -}