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,23 +20,22 @@ 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 -/* Keep public top-level dropdown items cleanand greenwhen hovered/open/focused */33 +/* Keep Agnease public top-level menu visually clean when hovered/open/focused */ 33 33 34 -.navbar-nav > li.agnease-menu-item > a, 35 -.navbar-nav > li.agnease-menu-item > a:hover, 36 -.navbar-nav > li.agnease-menu-item > a:focus, 37 -.navbar-nav > li.agnease-menu-item.open > a, 38 -.navbar-nav > li.agnease-menu-item.open > a:hover, 39 -.navbar-nav > li.agnease-menu-item.open > a:focus { 35 +.navbar-nav > li.agnease-services-menu > a, 36 +.navbar-nav > li.agnease-products-menu > a, 37 +.navbar-nav > li.agnease-services-menu > a:hover, 38 +.navbar-nav > li.agnease-products-menu > a:hover, 39 +.navbar-nav > li.agnease-services-menu > a:focus, 40 +.navbar-nav > li.agnease-products-menu > a:focus, 41 +.navbar-nav > li.agnease-services-menu.open > a, 42 +.navbar-nav > li.agnease-products-menu.open > a, 43 +.navbar-nav > li.agnease-services-menu.open > a:hover, 44 +.navbar-nav > li.agnease-products-menu.open > a:hover, 45 +.navbar-nav > li.agnease-services-menu.open > a:focus, 46 +.navbar-nav > li.agnease-products-menu.open > a:focus { 40 40 background: transparent; 41 41 background-color: transparent; 42 42 color: @brand-strong; ... ... @@ -43,134 +43,108 @@ 43 43 box-shadow: none; 44 44 } 45 45 46 -/* Override Bootstrap/XWiki gray open states */ 47 -.nav .open > a, 48 -.nav .open > a:hover, 49 -.nav .open > a:focus, 50 -.navbar-nav > .open > a, 51 -.navbar-nav > .open > a:hover, 52 -.navbar-nav > .open > a:focus { 53 - background: transparent; 54 - background-color: transparent; 55 - color: @brand-strong; 56 - box-shadow: none; 57 -} 58 - 59 59 /* Dropdown panels */ 60 60 61 -.agnease-dropdown { 62 - min-width: 270px; 63 - padding: 8px; 64 - 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; 65 65 border-radius: 12px; 66 - background: #fff; 67 - box-shadow: 0 12px 32px fade(@brand-strong, 12%); 62 + box-shadow: 0 12px 36px rgba(0, 0, 0, .10); 68 68 69 69 > li > a { 70 70 display: flex; 71 - align-items: center; 72 - gap: 10px; 73 - padding: 9px 11px; 74 - border-radius: 9px; 75 - color: @brand; 76 - background: transparent; 77 - white-space: nowrap; 78 - font-size: 14px; 79 - font-weight: 700; 80 - 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; 81 81 82 - i { 83 - width: 18px; 84 - flex: 0 0 18px; 85 - color: @brand; 86 - text-align: center; 87 - font-size: 14px; 88 - } 89 - 90 90 &:hover, 91 - &:focus, 92 - &:active { 74 + &:focus { 93 93 color: @brand-strong; 94 - background: fade(@brand, 8%);76 + background: @brand-bg; 95 95 text-decoration: none; 96 - outline: none; 97 97 98 - i { 79 + .menu-icon { 99 99 color: @brand-strong; 81 + background: fade(@brand, 14%); 82 + border-color: fade(@brand, 28%); 100 100 } 101 - } 102 - } 103 103 104 - > .active > a, 105 - > .active > a:hover, 106 - > .active > a:focus { 107 - color: @brand-strong; 108 - background: fade(@brand, 10%); 109 - text-decoration: none; 85 + strong { 86 + color: @brand-strong; 87 + } 110 110 111 - i { 112 - color: @brand-strong; 89 + small { 90 + color: @muted; 91 + } 113 113 } 114 114 } 115 115 116 116 .divider { 117 - margin: 7px 0;118 - background-color: fade(@brand, 16%);96 + margin: 8px 0; 97 + background-color: @line; 119 119 } 120 -} 121 121 122 -.agnease-products-dropdown, 123 -.agnease-resources-dropdown { 124 - 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 + } 125 125 } 126 126 127 -/* Remove gray Bootstrapdropdownitemstates*/128 - .dropdown-menu > li > a:hover,129 -.dropdown -menu> li > a:focus{130 - background-image:none;134 +/* Products dropdown can be slightly narrower for now */ 135 + 136 +.agnease-products-dropdown { 137 + min-width: 340px; 131 131 } 132 132 133 -/* ==========MobileMenu ==========*/140 +/* Mobile */ 134 134 135 135 @media (max-width: 767px) { 136 - .navbar-nav > li.agnease-menu-item > a, 137 - .navbar-nav > li > a { 138 - padding-top: 8px; 139 - padding-bottom: 8px; 140 - } 141 - 142 - .agnease-dropdown { 143 + .agnease-services-dropdown, 144 + .agnease-products-dropdown { 143 143 min-width: 0; 144 144 width: 100%; 145 - padding: 4px 8px 8px 18px; 146 - border: 0; 147 + padding: 6px; 147 147 border-radius: 0; 149 + border-left: 0; 150 + border-right: 0; 148 148 box-shadow: none; 149 - background: #fff; 150 150 151 151 > li > a { 152 - padding: 8px 10px; 153 - white-space: normal; 154 - font-size: 14px; 155 - border-radius: 8px; 156 - color: @brand; 157 - 158 - i { 159 - width: 16px; 160 - flex-basis: 16px; 161 - } 162 - 163 - &:hover, 164 - &:focus, 165 - &:active { 166 - color: @brand-strong; 167 - background: fade(@brand, 8%); 168 - } 154 + padding: 10px; 169 169 } 170 - 171 - .divider { 172 - margin: 5px 0; 173 - background-color: fade(@brand, 16%); 174 - } 175 175 } 176 176 }