_Highlights.scss (1586B)
1 /* stylelint-disable max-nesting-depth */ 2 3 .ds-highlights { 4 .section { 5 .section-list { 6 grid-gap: var(--gridRowGap); 7 grid-template-columns: repeat(1, 1fr); 8 9 @media (min-width: $break-point-medium) { 10 grid-template-columns: repeat(2, 1fr); 11 } 12 13 @media (min-width: $break-point-large) { 14 grid-template-columns: repeat(4, 1fr); 15 } 16 17 .card-outer { 18 $line-height: 20px; 19 20 height: 175px; 21 22 .card-host-name { 23 font-size: var(--font-size-small); 24 line-height: $line-height; 25 padding-block-end: 0; 26 margin-block-end: var(--space-xxsmall); 27 text-transform: unset; 28 } 29 30 .card-title { 31 font-size: var(--font-size-small); 32 font-weight: var(--heading-font-weight); 33 line-height: $line-height; 34 max-height: $line-height; 35 } 36 37 a { 38 text-decoration: none; 39 } 40 41 // Override note: The colors set here are intentionally static 42 // due to transparency issues over images. 43 .context-menu-button { 44 background-color: var(--newtab-button-static-background); 45 46 &:hover { 47 background-color: var(--newtab-button-static-hover-background); 48 49 &:active { 50 background-color: var(--newtab-button-static-active-background); 51 } 52 } 53 54 &:focus-visible { 55 background-color: var(--newtab-button-static-focus-background); 56 } 57 } 58 } 59 } 60 } 61 62 .hide-for-narrow { 63 display: block; 64 } 65 }