activity-stream.scss (6663B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @import './normalize'; 6 @import './variables'; 7 @import './theme'; 8 @import './icons'; 9 @import './mixins'; 10 11 :root { 12 font-size: var(--font-size-root); 13 height: 100%; 14 15 &[lwt-newtab-brighttext] { 16 -moz-osx-font-smoothing: grayscale; 17 } 18 } 19 20 body, 21 #root { 22 min-height: 100vh; 23 } 24 25 #root { 26 position: relative; 27 } 28 29 body { 30 background-color: var(--newtab-background-color); 31 font-family: system-ui; 32 font-size: var(--font-size-root); 33 34 // rules for HNT wallpapers 35 background-repeat: no-repeat; 36 background-size: cover; 37 background-position: var(--newtab-wallpaper-backgroundPosition); 38 background-attachment: fixed; 39 background-image: 40 var(--newtab-wallpaper, ''), 41 linear-gradient(to right, var(--newtab-wallpaper-color, ''), var(--newtab-wallpaper-color, '')); 42 } 43 44 .no-scroll { 45 overflow: hidden; 46 } 47 48 h1, 49 h2 { 50 font-weight: var(--font-weight); 51 } 52 53 .inner-border { 54 border: 1px solid var(--border-color); 55 border-radius: var(--border-radius-small); 56 height: 100%; 57 inset-inline-start: 0; 58 pointer-events: none; 59 position: absolute; 60 inset-block-start: 0; 61 width: 100%; 62 z-index: 100; 63 } 64 65 @keyframes fadeIn { 66 from { 67 opacity: 0; 68 } 69 70 to { 71 opacity: 1; 72 } 73 } 74 75 .show-on-init { 76 opacity: 0; 77 transition: opacity 0.2s ease-in; 78 79 &.on { 80 animation: fadeIn 0.2s; 81 opacity: 1; 82 } 83 } 84 85 .actions { 86 border-block-start: 1px solid var(--border-color); 87 display: flex; 88 flex-direction: row; 89 flex-wrap: wrap; 90 justify-content: flex-start; 91 margin: 0; 92 padding: var(--space-large) var(--space-xlarge) 0; 93 } 94 95 // Default button (grey) 96 .button, 97 .actions button { 98 background-color: var(--newtab-button-secondary-color); 99 border: 1px solid var(--border-color); 100 border-radius: var(--border-radius-small); 101 color: inherit; 102 cursor: pointer; 103 margin-block-end: var(--space-large); 104 padding: var(--space-small) var(--space-xxlarge); 105 white-space: nowrap; 106 107 &:hover:not(.dismiss), 108 &:focus:not(.dismiss) { 109 box-shadow: $shadow-primary; 110 transition: box-shadow 150ms; 111 } 112 113 &.dismiss { 114 background-color: transparent; 115 border: 0; 116 padding: 0; 117 text-decoration: underline; 118 } 119 120 // Blue button 121 &.primary, 122 &.done { 123 background-color: var(--newtab-primary-action-background); 124 border: solid 1px var(--newtab-primary-action-background); 125 color: var(--newtab-primary-element-text-color); 126 margin-inline-start: auto; 127 } 128 } 129 130 input { 131 &[type='text'], 132 &[type='search'] { 133 border-radius: var(--border-radius-small); 134 } 135 } 136 137 // These styles are needed for -webkit-line-clamp to work correctly, so reuse 138 // this class name while separately setting a clamp value via CSS or JS. 139 .clamp { 140 -webkit-box-orient: vertical; 141 display: -webkit-box; 142 overflow: hidden; 143 word-break: break-word; 144 } 145 146 // Components 147 // stylelint-disable no-invalid-position-at-import-rule 148 @import '../components/A11yLinkButton/A11yLinkButton'; 149 @import '../components/Base/Base'; 150 @import '../components/ErrorBoundary/ErrorBoundary'; 151 @import '../components/Logo/Logo'; 152 @import '../components/TopSites/TopSites'; 153 @import '../components/Sections/Sections'; 154 @import '../components/Search/Search'; 155 @import '../components/ContextMenu/ContextMenu'; 156 @import '../components/ConfirmDialog/ConfirmDialog'; 157 @import '../components/CustomizeMenu/CustomizeMenu'; 158 @import '../components/WallpaperCategories/WallpaperCategories'; 159 @import '../components/Weather/Weather'; 160 @import '../components/DownloadModalToggle/DownloadModalToggle'; 161 @import '../components/Card/Card'; 162 @import '../components/CollapsibleSection/CollapsibleSection'; 163 @import '../components/DiscoveryStreamAdmin/DiscoveryStreamAdmin'; 164 @import '../components/MoreRecommendations/MoreRecommendations'; 165 @import '../components/DiscoveryStreamBase/DiscoveryStreamBase'; 166 @import '../components/ModalOverlay/ModalOverlay'; 167 @import '../components/Notifications/Notifications'; 168 169 // Widget Components 170 @import '../components/Widgets/Widgets'; 171 @import '../components/Widgets/Lists/Lists'; 172 @import '../components/Widgets/FocusTimer/FocusTimer'; 173 @import '../components/Widgets/WeatherForecast/WeatherForecast'; 174 175 // Discovery Stream Components 176 @import '../components/DiscoveryStreamComponents/CardGrid/CardGrid'; 177 @import '../components/DiscoveryStreamComponents/CardSections/CardSections'; 178 @import '../components/DiscoveryStreamComponents/Highlights/Highlights'; 179 @import '../components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule'; 180 @import '../components/DiscoveryStreamComponents/Navigation/Navigation'; 181 @import '../components/DiscoveryStreamComponents/SectionTitle/SectionTitle'; 182 @import '../components/DiscoveryStreamComponents/TopSites/TopSites'; 183 @import '../components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu'; 184 @import '../components/DiscoveryStreamComponents/DSCard/DSCard'; 185 @import '../components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter'; 186 @import '../components/DiscoveryStreamComponents/DSImage/DSImage'; 187 @import '../components/DiscoveryStreamComponents/DSMessage/DSMessage'; 188 @import '../components/DiscoveryStreamImpressionStats/ImpressionStats'; 189 @import '../components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState'; 190 @import '../components/DiscoveryStreamComponents/PrivacyLink/PrivacyLink'; 191 @import '../components/DiscoveryStreamComponents/TopicsWidget/TopicsWidget'; 192 @import '../components/DiscoveryStreamComponents/FeatureHighlight/FeatureHighlight'; 193 @import '../components/DiscoveryStreamComponents/FeatureHighlight/DownloadMobilePromoHighlight'; 194 @import '../components/DiscoveryStreamComponents/FeatureHighlight/FollowSectionButtonHighlight'; 195 @import '../components/DiscoveryStreamComponents/FeatureHighlight/WallpaperFeatureHighlight'; 196 @import '../components/DiscoveryStreamComponents/FeatureHighlight/ShortcutFeatureHighlight'; 197 @import '../components/DiscoveryStreamComponents/TopicSelection/TopicSelection'; 198 @import '../components/DiscoveryStreamComponents/AdBanner/AdBanner'; 199 @import '../components/DiscoveryStreamComponents/AdBannerContextMenu/AdBannerContextMenu'; 200 @import '../components/DiscoveryStreamComponents/PromoCard/PromoCard'; 201 @import '../components/DiscoveryStreamComponents/SectionContextMenu/SectionContextMenu'; 202 @import '../components/DiscoveryStreamComponents/InterestPicker/InterestPicker'; 203 @import '../components/DiscoveryStreamComponents/ReportContent/ReportContent'; 204 @import '../components/DiscoveryStreamComponents/PersonalizedCard/PersonalizedCard'; 205 206 // stylelint-enable no-invalid-position-at-import-rule