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