_AdBanner.scss (3488B)
1 .ad-banner-wrapper { 2 --banner-padding: var(--space-large); 3 --billboard-width: 970px; 4 --billboard-container-width: calc( var(--billboard-width) + ( var(--banner-padding) * 2 )); 5 --billboard-height: 250px; 6 --leaderboard-width: 728px; 7 --leaderboard-container-width: calc(var(--leaderboard-width) + ( var(--banner-padding) * 2 )); 8 --leaderboard-height: 90px; 9 10 position: relative; 11 display: flex; 12 justify-content: space-around; 13 grid-column: 1/-1; 14 // allow the ad banner to take up full width 15 // of screen rather than card-grid width 16 width: 100%; 17 inset-inline-start: 50%; 18 transform: translate3d(-50%, 0, 0); 19 margin-block-start: var(--space-medium); 20 margin-block-end: var(--space-xlarge); 21 22 // in a 4-column layout, the promo card fills remaining space 23 @media (min-width: $break-point-sections-variant) { 24 &.promo-card { 25 justify-content: space-between; 26 } 27 } 28 29 // Adding min-width if .billboard/.leaderboard exist within 30 // .ad-banner-inner to keep the banners from shrinking on smaller screens 31 &:has(.ad-banner-inner.billboard) { 32 min-width: var(--billboard-container-width); 33 34 @media (width <= 1015px) { 35 min-width: auto; 36 } 37 } 38 39 &:has(.ad-banner-inner.leaderboard) { 40 min-width: var(--leaderboard-container-width); 41 42 @media (width <= 758px) { 43 min-width: auto; 44 } 45 } 46 47 .ad-banner-inner { 48 @include newtab-card-style; 49 50 position: relative; 51 box-shadow: var(--box-shadow-card); 52 border-radius: var(--border-radius-large); 53 54 &:hover { 55 box-shadow: var(--box-shadow-card-hover); 56 } 57 58 .ad-banner-link { 59 text-decoration: none; 60 padding-block-start: var(--banner-padding); 61 padding-inline: var(--banner-padding); 62 display: inline-block; 63 64 &:focus { 65 outline: var(--focus-outline); 66 border-radius: var(--border-radius-large); 67 } 68 69 &:hover + .ad-banner-hover-background, 70 &:focus + .ad-banner-hover-background { 71 opacity: 1; 72 } 73 } 74 75 .ad-banner-hover-background { 76 opacity: 0; 77 position: absolute; 78 inset-block-start: 0; 79 pointer-events: none; 80 height: 100%; 81 82 &:hover, &:focus-within { 83 opacity: 1; 84 } 85 86 .ads-context-menu-wrapper { 87 pointer-events: auto; 88 } 89 } 90 91 &.leaderboard { 92 max-width: var(--leaderboard-container-width); 93 94 .ad-banner-content { 95 height: var(--leaderboard-height); 96 width: var(--leaderboard-width); 97 } 98 99 .ad-banner-hover-background { 100 width: var(--leaderboard-container-width); 101 } 102 103 .ad-banner-sponsored { 104 width: var(--leaderboard-width); 105 } 106 107 @media (width <= 758px) { 108 display: none; 109 } 110 } 111 112 &.billboard { 113 width: var(--billboard-container-width); 114 115 .ad-banner-content { 116 height: var(--billboard-height); 117 width: var(--billboard-width); 118 } 119 120 .ad-banner-hover-background { 121 width: var(--billboard-container-width); 122 } 123 124 .ad-banner-sponsored { 125 width: var(--billboard-width); 126 } 127 128 @media (width <= 1015px) { 129 display: none; 130 } 131 } 132 133 .ad-banner-sponsored { 134 height: 32px; 135 display: flex; 136 align-items: center; 137 138 span { 139 font-size: var(--font-size-small); 140 color: var(--newtab-contextual-text-secondary-color); 141 } 142 } 143 } 144 145 &.active { 146 .ad-banner-hover-background { 147 opacity: 1; 148 } 149 150 z-index: 1; 151 } 152 }