Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (2 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -617,7 +617,6 @@ 617 617 order: 0; 618 618 position: static; 619 619 width: 100%; 620 - margin-bottom: 24px; 621 621 } 622 622 623 623 .resource-content {
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -1,156 +1,156 @@ 1 1 /* ========== Agnease Public Top Menu ========== */ 2 2 3 - @brand:#00937D;4 -@ brand-strong:#007B6A;5 - @text:#2D3A34;6 - @muted:#5B6B64;7 - @line:#E4ECE9;8 - @brand-bg:#F4FCFA;3 +/* Desktop alignment */ 4 +@media (min-width: 768px) { 5 + .site-nav { 6 + margin-left: auto; 7 + justify-content: flex-end; 8 + } 9 9 10 + .site-nav .agnease-menu-item, 11 + .site-nav .agnease-menu-link { 12 + display: inline-block; 13 + } 14 +} 15 + 10 10 /* Top-level menu items */ 11 11 12 -.agnease-services-menu, 13 -.agnease-products-menu { 14 - .dropdown-toggle { 15 - font-weight: inherit; 16 - font-size: inherit; 18 +.agnease-menu-item, 19 +.agnease-menu-link { 20 + > a, 21 + > .dropdown-toggle { 22 + color: @brand; 23 + font-size: 17px; 24 + font-weight: 600; 25 + padding-left: 16px; 26 + padding-right: 16px; 27 + text-decoration: none; 17 17 } 18 18 30 + > a:hover, 31 + > a:focus, 32 + > a:active, 33 + &.open > a, 34 + &.active > a { 35 + color: @brand-strong; 36 + text-decoration: none; 37 + outline: none; 38 + } 39 + 19 19 .caret { 20 - margin-left: 4px; 41 + margin-left: 5px; 42 + border-top-color: @brand; 43 + border-bottom-color: @brand; 21 21 } 22 22 23 - &.open>.dropdown-toggle,24 - .dropdown-toggle:hover,25 - .dropdown-toggle:focus{26 - color:@brand-strong;27 - background:transparent;28 - b ackground-color:transparent;29 - bo x-shadow: none;46 + > a:hover .caret, 47 + > a:focus .caret, 48 + > a:active .caret, 49 + &.open > a .caret, 50 + &.active > a .caret { 51 + border-top-color: @brand-strong; 52 + border-bottom-color: @brand-strong; 30 30 } 31 31 } 32 32 33 -/* Keep Agnease public top-level menu visually cleanwhenhovered/open/focused*/56 +/* Dropdown panel */ 34 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; 51 -} 52 - 53 -/* Dropdown panels */ 54 - 55 -.agnease-services-dropdown, 56 -.agnease-products-dropdown { 57 - min-width: 360px; 58 - padding: 10px; 59 - border: 1px solid @line; 58 +.agnease-dropdown { 59 + min-width: 310px; 60 + padding: 10px 8px; 61 + border: 1px solid fade(@brand, 18%); 60 60 border-radius: 12px; 61 - box-shadow: 0 12px 36px rgba(0, 0, 0, .10); 63 + background: #fff; 64 + box-shadow: 0 12px 32px fade(@brand-strong, 12%); 62 62 63 63 > li > a { 64 64 display: flex; 65 - align-items: flex-start;68 + align-items: center; 66 66 gap: 12px; 67 - padding: 10px 12px; 68 - border-radius: 10px; 69 - color: @text; 70 - white-space: normal; 70 + padding: 11px 14px; 71 + color: @brand; 72 + white-space: nowrap; 73 + font-size: 16px; 74 + font-weight: 600; 75 + line-height: 1.3; 76 + text-decoration: none; 71 71 78 + i { 79 + width: 20px; 80 + flex: 0 0 20px; 81 + color: @brand; 82 + text-align: center; 83 + font-size: 15px; 84 + } 85 + 72 72 &:hover, 73 - &:focus { 87 + &:focus, 88 + &:active { 74 74 color: @brand-strong; 75 - background: @brand-bg; 76 76 text-decoration: none; 91 + outline: none; 77 77 78 - .menu-icon{93 + i { 79 79 color: @brand-strong; 80 - background: fade(@brand, 14%); 81 - border-color: fade(@brand, 28%); 82 82 } 96 + } 97 + } 83 83 84 - strong { 85 - color: @brand-strong; 86 - } 99 + > .active > a { 100 + color: @brand-strong; 87 87 88 - small { 89 - color: @muted; 90 - } 102 + i { 103 + color: @brand-strong; 91 91 } 92 92 } 93 93 94 94 .divider { 95 95 margin: 8px 0; 96 - background-color: @ line;109 + background-color: fade(@brand, 16%); 97 97 } 111 +} 98 98 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; 113 +/* Mobile */ 114 + 115 +@media (max-width: 767px) { 116 + .site-nav { 117 + margin-left: 0; 108 108 justify-content: center; 109 - flex-shrink: 0; 110 - transition: color .15s ease, background .15s ease, border-color .15s ease; 119 + flex-wrap: wrap; 111 111 } 112 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 + .agnease-menu-item, 123 + .agnease-menu-link { 124 + > a, 125 + > .dropdown-toggle { 126 + font-size: 16px; 127 + padding-top: 9px; 128 + padding-bottom: 9px; 122 122 } 123 - 124 - small { 125 - color: @muted; 126 - font-size: 12px; 127 - margin-top: 2px; 128 - font-weight: 400; 129 - } 130 130 } 131 -} 132 132 133 -/* Products dropdown can be slightly narrower for now */ 134 - 135 -.agnease-products-dropdown { 136 - min-width: 340px; 137 -} 138 - 139 -/* Mobile */ 140 - 141 -@media (max-width: 767px) { 142 - .agnease-services-dropdown, 143 - .agnease-products-dropdown { 132 + .agnease-dropdown { 144 144 min-width: 0; 145 145 width: 100%; 146 - padding: 6px; 135 + padding: 4px 8px 8px 18px; 136 + border: 0; 147 147 border-radius: 0; 148 - border-left: 0; 149 - border-right: 0; 150 150 box-shadow: none; 139 + background: transparent; 151 151 152 152 > li > a { 153 - padding: 10px; 142 + padding: 8px 10px; 143 + white-space: normal; 144 + font-size: 15px; 145 + 146 + i { 147 + width: 18px; 148 + flex-basis: 18px; 149 + } 154 154 } 151 + 152 + .divider { 153 + margin: 5px 0; 154 + } 155 155 } 156 156 }