Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 12:51:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1851544 - use clearer media queries in new tab styling, r=Standard8,omc-reviewers,thecount,aminomancer

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D188836
This commit is contained in:
Gijs Kruitbosch 2023-09-27 14:45:18 +00:00
parent 5a4df671a9
commit 1e67277c8f
11 changed files with 63 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.stylelintrc.js
View File

@ -240,20 +240,6 @@ module.exports = {
},
overrides: [
{
// TODO: Bug 1851544: Re-enable the rule or change the rule set-up.
files: [
"browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss",
"browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss",
"browser/components/newtab/content-src/asrouter/templates/SimpleBelowSearchSnippet/_SimpleBelowSearchSnippet.scss",
"browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss",
"browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss",
"browser/components/newtab/content-src/components/Search/_Search.scss",
],
rules: {
"media-feature-range-notation": null,
},
},
{
files: "*.scss",
customSyntax: "postcss-scss",

14
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
View File

@ -1478,7 +1478,7 @@ html {
margin: 25px 0;
padding-bottom: 30px;
}
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
padding-bottom: unset;
}
@ -1486,7 +1486,7 @@ html {
.onboardingContainer .screen[pos=split] .multi-select-container {
margin-inline: 0 10px;
}
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split] .multi-select-container {
flex-direction: row;
align-self: stretch;
@ -1519,12 +1519,12 @@ html {
background-color: #2B2A33;
}
}
@media only screen and (min-width: 800px) {
@media only screen and (width >= 800px) {
.onboardingContainer .screen[pos=split] .tiles-theme-section {
margin-inline-start: -10px;
}
}
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split] {
flex-direction: column;
min-height: 550px;
@ -1652,12 +1652,12 @@ html {
border-radius: 0 0 8px 8px;
}
}
@media only screen and (max-height: 650px) and (min-width: 800px) and (max-width: 990px) {
@media only screen and (height <= 650px) and (800px <= width <= 990px) {
.onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
display: none;
}
}
@media only screen and (max-height: 650px) and (max-width: 620px) {
@media only screen and (height <= 650px) and (width <= 620px) {
.onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
position: absolute;
padding: 0;
@ -1691,7 +1691,7 @@ html {
.onboardingContainer .rtamo-icon {
text-align: start;
}
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
.onboardingContainer .rtamo-icon {
text-align: center;
}

16
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
View File

@ -754,7 +754,7 @@ html {
margin: 25px 0;
padding-bottom: 30px;
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
padding-bottom: unset;
}
}
@ -764,7 +764,7 @@ html {
.multi-select-container {
margin-inline: 0 10px;
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
flex-direction: row;
align-self: stretch;
align-items: center;
@ -804,13 +804,13 @@ html {
}
}
@media only screen and (min-width: 800px) {
@media only screen and (width >= 800px) {
.tiles-theme-section {
margin-inline-start: -10px;
}
}
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
flex-direction: column;
min-height: $small-main-section-height + $small-secondary-section-height;
@ -976,12 +976,12 @@ html {
}
@media only screen and (max-height: 650px) {
@media only screen and (height <= 650px) {
// Hide the "Sign in" button on the welcome screen when it would
// otherwise overlap the screen. We'd reposition it, but then it would
// overlap the dismiss button. We may change the alignment so they don't
// overlap in a future revision.
@media (min-width: 800px) and (max-width: 990px) {
@media (800px <= width <= 990px) {
.section-main .secondary-cta.top {
display: none;
}
@ -989,7 +989,7 @@ html {
// Reposition the "Sign in" button on the welcome screen to move inside
// the screen when it would otherwise overlap the screen.
@media (max-width: 620px) {
@media (width <= 620px) {
.section-main .secondary-cta.top {
position: absolute;
padding: 0;
@ -1032,7 +1032,7 @@ html {
.rtamo-icon {
text-align: start;
@media only screen and (max-width: 800px) {
@media only screen and (width <= 800px) {
text-align: center;
}
}

10
browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
View File

@ -36,7 +36,7 @@ $modal-scrollbar-z-index: 1100;
z-index: $modal-scrollbar-z-index;
// modal takes over entire screen
@media(max-width: 960px) {
@media(width <= 960px) {
height: 100%;
top: 0;
left: 0;
@ -57,11 +57,11 @@ $modal-scrollbar-z-index: 1100;
line-height: 37px;
letter-spacing: -0.13px;
@media(max-width: 960px) {
@media(width <= 960px) {
margin-top: 100px;
}
@media(max-width: 850px) {
@media(width <= 850px) {
margin-top: 30px;
}
}
@ -77,12 +77,12 @@ $modal-scrollbar-z-index: 1100;
background-color: $white;
// if modal is short enough, footer becomes sticky
@media(max-width: 850px) and (max-height: 730px) {
@media(width <= 850px) and (height <= 730px) {
position: sticky;
}
// if modal is narrow enough, footer becomes sticky
@media(max-width: 650px) and (max-height: 600px) {
@media(width <= 650px) and (height <= 600px) {
position: sticky;
}

2
browser/components/newtab/content-src/asrouter/templates/SimpleBelowSearchSnippet/_SimpleBelowSearchSnippet.scss
View File

@ -61,7 +61,7 @@
width: 696px;
}
@media (max-width: 865px) {
@media (width <= 865px) {
margin-inline-start: 0;
}

4
browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
View File

@ -1,4 +1,4 @@
@media (max-height: 701px) {
@media (height < 700px) {
.personalize-button {
position: absolute;
top: 16px;
@ -6,7 +6,7 @@
}
}
@media (min-height: 700px) {
@media (height >= 700px) {
.personalize-button {
position: fixed;
top: 16px;

4
browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
View File

@ -279,7 +279,7 @@ $col4-header-font-size: 14;
grid-template-columns: repeat(3, 1fr);
}
@media (max-height: 1065px) {
@media (height <= 1065px) {
.excerpt {
display: none;
}
@ -289,7 +289,7 @@ $col4-header-font-size: 14;
@include small-cards;
}
@media (min-width: $break-point-widest) and (max-height: 964px) {
@media (min-width: $break-point-widest) and (height <= 964px) {
@include small-cards;
grid-template-columns: repeat(4, 1fr);

4
browser/components/newtab/content-src/components/Search/_Search.scss
View File

@ -179,7 +179,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
margin-top: -48px;
}
@media (max-height: 700px) {
@media (height <= 700px) {
.search-wrapper {
padding: 0 0 30px;
}
@ -262,7 +262,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
}
}
@media (min-height: 701px) {
@media (height > 700px) {
body:not(.inline-onboarding) .fixed-search {
main {
padding-top: 124px;

24
browser/components/newtab/css/activity-stream-linux.css
View File

@ -1310,7 +1310,7 @@ main.has-snippet {
margin-top: -48px;
}
@media (max-height: 700px) {
@media (height <= 700px) {
.search-wrapper {
padding: 0 0 30px;
}
@ -1382,7 +1382,7 @@ main.has-snippet {
}
}
@media (min-height: 701px) {
@media (height > 700px) {
body:not(.inline-onboarding) .fixed-search main {
padding-top: 124px;
}
@ -1597,14 +1597,14 @@ main.has-snippet {
z-index: 11002;
}
@media (max-height: 701px) {
@media (height < 700px) {
.personalize-button {
position: absolute;
top: 16px;
inset-inline-end: 16px;
}
}
@media (min-height: 700px) {
@media (height >= 700px) {
.personalize-button {
position: fixed;
top: 16px;
@ -2786,7 +2786,7 @@ main.has-snippet {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-height: 1065px) {
@media (height <= 1065px) {
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt {
display: none;
}
@ -2835,7 +2835,7 @@ main.has-snippet {
flex-grow: 0;
}
}
@media (min-width: 1122px) and (max-height: 964px) {
@media (min-width: 1122px) and (height <= 964px) {
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
grid-template-columns: repeat(4, 1fr);
}
@ -4214,7 +4214,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
display: none;
z-index: 1100;
}
@media (max-width: 960px) {
@media (width <= 960px) {
.modalOverlayInner {
height: 100%;
top: 0;
@ -4235,12 +4235,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
line-height: 37px;
letter-spacing: -0.13px;
}
@media (max-width: 960px) {
@media (width <= 960px) {
.modalOverlayInner h2 {
margin-top: 100px;
}
}
@media (max-width: 850px) {
@media (width <= 850px) {
.modalOverlayInner h2 {
margin-top: 30px;
}
@ -4255,12 +4255,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
text-align: center;
background-color: #FFF;
}
@media (max-width: 850px) and (max-height: 730px) {
@media (width <= 850px) and (height <= 730px) {
.modalOverlayInner .footer {
position: sticky;
}
}
@media (max-width: 650px) and (max-height: 600px) {
@media (width <= 650px) and (height <= 600px) {
.modalOverlayInner .footer {
position: sticky;
}
@ -4336,7 +4336,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
width: 696px;
}
}
@media (max-width: 865px) {
@media (width <= 865px) {
.SimpleBelowSearchSnippet .innerWrapper {
margin-inline-start: 0;
}

24
browser/components/newtab/css/activity-stream-mac.css
View File

@ -1314,7 +1314,7 @@ main.has-snippet {
margin-top: -48px;
}
@media (max-height: 700px) {
@media (height <= 700px) {
.search-wrapper {
padding: 0 0 30px;
}
@ -1386,7 +1386,7 @@ main.has-snippet {
}
}
@media (min-height: 701px) {
@media (height > 700px) {
body:not(.inline-onboarding) .fixed-search main {
padding-top: 124px;
}
@ -1601,14 +1601,14 @@ main.has-snippet {
z-index: 11002;
}
@media (max-height: 701px) {
@media (height < 700px) {
.personalize-button {
position: absolute;
top: 16px;
inset-inline-end: 16px;
}
}
@media (min-height: 700px) {
@media (height >= 700px) {
.personalize-button {
position: fixed;
top: 16px;
@ -2790,7 +2790,7 @@ main.has-snippet {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-height: 1065px) {
@media (height <= 1065px) {
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt {
display: none;
}
@ -2839,7 +2839,7 @@ main.has-snippet {
flex-grow: 0;
}
}
@media (min-width: 1122px) and (max-height: 964px) {
@media (min-width: 1122px) and (height <= 964px) {
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
grid-template-columns: repeat(4, 1fr);
}
@ -4218,7 +4218,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
display: none;
z-index: 1100;
}
@media (max-width: 960px) {
@media (width <= 960px) {
.modalOverlayInner {
height: 100%;
top: 0;
@ -4239,12 +4239,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
line-height: 37px;
letter-spacing: -0.13px;
}
@media (max-width: 960px) {
@media (width <= 960px) {
.modalOverlayInner h2 {
margin-top: 100px;
}
}
@media (max-width: 850px) {
@media (width <= 850px) {
.modalOverlayInner h2 {
margin-top: 30px;
}
@ -4259,12 +4259,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
text-align: center;
background-color: #FFF;
}
@media (max-width: 850px) and (max-height: 730px) {
@media (width <= 850px) and (height <= 730px) {
.modalOverlayInner .footer {
position: sticky;
}
}
@media (max-width: 650px) and (max-height: 600px) {
@media (width <= 650px) and (height <= 600px) {
.modalOverlayInner .footer {
position: sticky;
}
@ -4340,7 +4340,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
width: 696px;
}
}
@media (max-width: 865px) {
@media (width <= 865px) {
.SimpleBelowSearchSnippet .innerWrapper {
margin-inline-start: 0;
}

24
browser/components/newtab/css/activity-stream-windows.css
View File

@ -1310,7 +1310,7 @@ main.has-snippet {
margin-top: -48px;
}
@media (max-height: 700px) {
@media (height <= 700px) {
.search-wrapper {
padding: 0 0 30px;
}
@ -1382,7 +1382,7 @@ main.has-snippet {
}
}
@media (min-height: 701px) {
@media (height > 700px) {
body:not(.inline-onboarding) .fixed-search main {
padding-top: 124px;
}
@ -1597,14 +1597,14 @@ main.has-snippet {
z-index: 11002;
}
@media (max-height: 701px) {
@media (height < 700px) {
.personalize-button {
position: absolute;
top: 16px;
inset-inline-end: 16px;
}
}
@media (min-height: 700px) {
@media (height >= 700px) {
.personalize-button {
position: fixed;
top: 16px;
@ -2786,7 +2786,7 @@ main.has-snippet {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-height: 1065px) {
@media (height <= 1065px) {
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt {
display: none;
}
@ -2835,7 +2835,7 @@ main.has-snippet {
flex-grow: 0;
}
}
@media (min-width: 1122px) and (max-height: 964px) {
@media (min-width: 1122px) and (height <= 964px) {
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
grid-template-columns: repeat(4, 1fr);
}
@ -4214,7 +4214,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
display: none;
z-index: 1100;
}
@media (max-width: 960px) {
@media (width <= 960px) {
.modalOverlayInner {
height: 100%;
top: 0;
@ -4235,12 +4235,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
line-height: 37px;
letter-spacing: -0.13px;
}
@media (max-width: 960px) {
@media (width <= 960px) {
.modalOverlayInner h2 {
margin-top: 100px;
}
}
@media (max-width: 850px) {
@media (width <= 850px) {
.modalOverlayInner h2 {
margin-top: 30px;
}
@ -4255,12 +4255,12 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
text-align: center;
background-color: #FFF;
}
@media (max-width: 850px) and (max-height: 730px) {
@media (width <= 850px) and (height <= 730px) {
.modalOverlayInner .footer {
position: sticky;
}
}
@media (max-width: 650px) and (max-height: 600px) {
@media (width <= 650px) and (height <= 600px) {
.modalOverlayInner .footer {
position: sticky;
}
@ -4336,7 +4336,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
width: 696px;
}
}
@media (max-width: 865px) {
@media (width <= 865px) {
.SimpleBelowSearchSnippet .innerWrapper {
margin-inline-start: 0;
}