_DSEmptyState.scss (1988B)
1 .section-empty-state { 2 border: 1px solid var(--border-color); 3 border-radius: var(--border-radius-small); 4 display: flex; 5 height: $card-height-compact; 6 width: 100%; 7 8 @media (min-width: $break-point-sections-variant) { 9 width: 936px; 10 } 11 12 .empty-state-message { 13 color: var(--newtab-text-secondary-color); 14 font-size: var(--font-size-small); 15 text-align: center; 16 margin: auto; 17 max-width: 936px; 18 } 19 20 .try-again-button { 21 margin-block-start: var(--space-medium); 22 padding: var(--space-small) var(--space-xxlarge); 23 border-radius: var(--border-radius-small); 24 border: 0; 25 background: var(--newtab-button-secondary-color); 26 color: var(--newtab-text-primary-color); 27 cursor: pointer; 28 position: relative; 29 transition: background 0.2s ease, color 0.2s ease; 30 31 &:not(.waiting) { 32 &:focus { 33 @include ds-fade-in; 34 35 @include dark-theme-only { 36 @include ds-fade-in($blue-40-40); 37 } 38 } 39 40 &:hover { 41 @include ds-fade-in(var(--newtab-element-secondary-color)); 42 } 43 } 44 45 &::after { 46 content: ''; 47 height: 20px; 48 width: 20px; 49 animation: spinner 1s linear infinite; 50 opacity: 0; 51 position: absolute; 52 inset-block-start: 50%; 53 inset-inline-start: 50%; 54 margin: calc(var(--space-small) * -1) 0 0 calc(var(--space-small) * -1); 55 mask-image: url('chrome://newtab/content/data/content/assets/spinner.svg'); 56 mask-size: 20px; 57 background: var(--newtab-text-secondary-color); 58 } 59 60 &.waiting { 61 cursor: initial; 62 background: var(--newtab-element-secondary-color); 63 color: transparent; 64 transition: background 0.2s ease; 65 66 &::after { 67 transition: opacity 0.2s ease; 68 opacity: 1; 69 } 70 } 71 } 72 73 h2 { 74 font-size: inherit; 75 font-weight: var(--heading-font-weight); 76 margin: 0; 77 } 78 79 p { 80 margin: 0; 81 } 82 } 83 84 @keyframes spinner { 85 to { transform: rotate(360deg); } 86 }