Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

styles: Use range context queries to eliminate *_max variables. 

On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2021-02-03 17:49:05 -08:00 committed by Tim Abbott
parent d679aa015d
commit 64b78ad992
27 changed files with 119 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -53,6 +53,7 @@
"postcss-calc": "^8.0.0", "postcss-calc": "^8.0.0",
"postcss-extend-rule": "^3.0.0", "postcss-extend-rule": "^3.0.0",
"postcss-loader": "^4.0.2", "postcss-loader": "^4.0.2",
"postcss-media-minmax": "https://github.com/andersk/postcss-media-minmax.git#01239f17f4a9872ace1dd133cee526a7de4ac9f5",
"postcss-nested": "^5.0.0", "postcss-nested": "^5.0.0",
"postcss-simple-vars": "^6.0.0", "postcss-simple-vars": "^6.0.0",
"regenerator-runtime": "^0.13.3", "regenerator-runtime": "^0.13.3",

1
postcss.config.js
View File

@ -11,6 +11,7 @@ module.exports = {
variables: media_breakpoints, variables: media_breakpoints,
}, },
"postcss-calc": {}, "postcss-calc": {},
"postcss-media-minmax": {},
autoprefixer: {}, autoprefixer: {},
}, },
}; };

9
static/js/css_variables.js
View File

@ -22,14 +22,5 @@ module.exports = {
ml_min: ml + "px", ml_min: ml + "px",
mm_min: mm + "px", mm_min: mm + "px",
ms_min: ms + "px", ms_min: ms + "px",
xs_max: xs - 1 + "px",
sm_max: sm - 1 + "px",
md_max: md - 1 + "px",
lg_max: lg - 1 + "px",
xl_max: xl - 1 + "px",
ml_max: ml - 1 + "px",
mm_max: mm - 1 + "px",
ms_max: ms - 1 + "px",
}, },
}; };

2
static/js/message_viewport.js
View File

@ -307,7 +307,7 @@ exports.is_narrow = function () {
// This basically returns true when we hide the right sidebar for // This basically returns true when we hide the right sidebar for
// the left_side_userlist skinny mode. It would be nice to have a less brittle // the left_side_userlist skinny mode. It would be nice to have a less brittle
// test for this. // test for this.
return window.innerWidth <= media_breakpoints.xl_max; return window.innerWidth < media_breakpoints.xl_min;
}; };
exports.system_initiated_animate_scroll = function (scroll_amount) { exports.system_initiated_animate_scroll = function (scroll_amount) {

2
static/styles/alerts.css
View File

@ -240,7 +240,7 @@ $alert-error-red: hsl(0, 80%, 40%);
} }
/* @media queries */ /* @media queries */
@media (max-width: $lg_max) { @media (width < $lg_min) {
.alert-box { .alert-box {
width: 80%; width: 80%;
left: 10%; left: 10%;

4
static/styles/app_components.css
View File

@ -268,7 +268,7 @@
.stream_sorter_toggle { .stream_sorter_toggle {
margin-left: auto; margin-left: auto;
@media (max-width: $lg_max) { @media (width < $lg_min) {
margin-left: unset; margin-left: unset;
} }
} }
@ -390,7 +390,7 @@
} }
} }
@media (max-width: $md_max) { @media (width < $md_min) {
/* Override Bootstrap's responsive grid to display input at full width */ /* Override Bootstrap's responsive grid to display input at full width */
.input-append .stream-list-filter { .input-append .stream-list-filter {
/* Input width = 100% - 10px margin x2 - 6px padding x2 - 1px border x2. */ /* Input width = 100% - 10px margin x2 - 6px padding x2 - 1px border x2. */

10
static/styles/compose.css
View File

@ -16,7 +16,7 @@
line-height: 1em; line-height: 1em;
} }
@media (min-width: $sm_min) { @media (width >= $sm_min) {
display: none; display: none;
} }
} }
@ -33,7 +33,7 @@
display: none; display: none;
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
.compose_stream_button, .compose_stream_button,
.compose_private_button { .compose_private_button {
display: none; display: none;
@ -497,20 +497,20 @@ a#undo_markdown_preview {
} }
/* This max-width must be synced with message_viewport.is_narrow */ /* This max-width must be synced with message_viewport.is_narrow */
@media (max-width: $xl_max) { @media (width < $xl_min) {
.compose-content { .compose-content {
margin-right: 7px; margin-right: 7px;
} }
} }
@media (max-width: $md_max) { @media (width < $md_min) {
.compose-content { .compose-content {
margin-right: 7px; margin-right: 7px;
margin-left: 7px; margin-left: 7px;
} }
} }
@media (max-width: $mm_max) { @media (width < $mm_min) {
#stream_message_recipient_topic.recipient_box { #stream_message_recipient_topic.recipient_box {
width: calc(100% - 175px); width: calc(100% - 175px);
min-width: 95px; min-width: 95px;

4
static/styles/drafts.css
View File

@ -11,7 +11,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media (max-width: $md_max) { @media (width < $md_min) {
height: 95%; height: 95%;
max-width: none; max-width: none;
width: 90%; width: 90%;
@ -111,7 +111,7 @@
right: -80px; right: -80px;
font-size: 0.9em; font-size: 0.9em;
@media (max-width: $sm_max) { @media (width < $sm_min) {
right: 0; right: 0;
} }

2
static/styles/informational_overlays.css
View File

@ -122,7 +122,7 @@
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
@media only screen and (max-width: $md_max) { @media only screen and (width < $md_min) {
.informational-overlays { .informational-overlays {
.overlay-content { .overlay-content {
width: calc(100% - 20px); width: calc(100% - 20px);

2
static/styles/lightbox.css
View File

@ -253,7 +253,7 @@
} }
} }
@media only screen and (min-width: $ms_min) and (max-width: $md_max) { @media only screen and ($ms_min <= width < $md_min) {
#lightbox_overlay { #lightbox_overlay {
.image-actions { .image-actions {
float: left; float: left;

4
static/styles/popovers.css
View File

@ -353,7 +353,7 @@ ul {
} }
} }
@media (max-width: $md_max) { @media (width < $md_min) {
.message-info-popover, .message-info-popover,
.user-info-popover { .user-info-popover {
display: flex !important; display: flex !important;
@ -402,7 +402,7 @@ ul {
pointer-events: all; pointer-events: all;
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
.popover-inner { .popover-inner {
width: 70%; width: 70%;
} }

2
static/styles/portico/archive.css
View File

@ -26,7 +26,7 @@ body {
margin-top: 12px; margin-top: 12px;
} }
@media (max-width: 500px) { @media (width <= 500px) {
.header { .header {
height: 40px; height: 40px;
line-height: 10px; line-height: 10px;

62
static/styles/portico/integrations.css
View File

@ -35,16 +35,16 @@ $category-text: hsl(219, 23%, 33%);
border: none; border: none;
} }
@media (max-width: 768px) { @media (width <= 768px) {
width: auto; width: auto;
} }
@media (max-width: 686px) { @media (width <= 686px) {
width: calc(100% - 50px); width: calc(100% - 50px);
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 450px) { @media (width <= 450px) {
width: 100%; width: 100%;
} }
} }
@ -60,12 +60,12 @@ $category-text: hsl(219, 23%, 33%);
pointer-events: all; pointer-events: all;
} }
@media (max-width: 500px) { @media (width <= 500px) {
height: auto; height: auto;
} }
} }
@media (max-width: 450px) { @media (width <= 450px) {
padding: 40px 0; padding: 40px 0;
} }
} }
@ -141,12 +141,12 @@ $category-text: hsl(219, 23%, 33%);
border: 1px solid $border-green; border: 1px solid $border-green;
} }
@media (max-width: 768px) { @media (width <= 768px) {
width: 375px; width: 375px;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 550px) { @media (width <= 550px) {
width: calc(100% - 80px); width: calc(100% - 80px);
} }
} }
@ -159,11 +159,11 @@ $category-text: hsl(219, 23%, 33%);
color: $border-green; color: $border-green;
} }
@media (max-width: 768px) { @media (width <= 768px) {
width: 445px; width: 445px;
} }
@media (max-width: 550px) { @media (width <= 550px) {
width: 100%; width: 100%;
} }
} }
@ -212,7 +212,7 @@ $category-text: hsl(219, 23%, 33%);
} }
} }
@media (max-width: 906px) { @media (width <= 906px) {
display: none; display: none;
} }
} }
@ -226,7 +226,7 @@ $category-text: hsl(219, 23%, 33%);
font-weight: 600; font-weight: 600;
} }
@media (max-width: 906px) { @media (width <= 906px) {
display: block; display: block;
width: 670px; width: 670px;
@ -282,27 +282,27 @@ $category-text: hsl(219, 23%, 33%);
} }
} }
@media (max-width: 830px) { @media (width <= 830px) {
width: 666px; width: 666px;
} }
@media (max-width: 786px) { @media (width <= 786px) {
width: 509px; width: 509px;
} }
@media (max-width: 768px) { @media (width <= 768px) {
width: 666px; width: 666px;
} }
@media (max-width: 686px) { @media (width <= 686px) {
width: 509px; width: 509px;
} }
@media (max-width: 578px) { @media (width <= 578px) {
width: 351px; width: 351px;
} }
@media (max-width: 357px) { @media (width <= 357px) {
width: 299px; width: 299px;
} }
} }
@ -311,7 +311,7 @@ $category-text: hsl(219, 23%, 33%);
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
@media (max-width: 906px) { @media (width <= 906px) {
text-align: center; text-align: center;
} }
} }
@ -380,7 +380,7 @@ $category-text: hsl(219, 23%, 33%);
} }
} }
@media (max-width: 830px) { @media (width <= 830px) {
width: 134px; width: 134px;
height: 180px; height: 180px;
@ -406,11 +406,11 @@ $category-text: hsl(219, 23%, 33%);
} }
} }
@media (max-width: 375px) { @media (width <= 375px) {
width: 120px; width: 120px;
} }
@media (max-width: 357px) { @media (width <= 357px) {
width: 108px; width: 108px;
height: 160px; height: 160px;
@ -452,7 +452,7 @@ $category-text: hsl(219, 23%, 33%);
display: none; display: none;
} }
@media (max-width: 768px) { @media (width <= 768px) {
border: none; border: none;
display: flex !important; display: flex !important;
@ -510,21 +510,21 @@ $category-text: hsl(219, 23%, 33%);
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
@media (min-width: 768px) { @media (width >= 768px) {
margin-top: 15px; margin-top: 15px;
} }
@media (max-width: 768px) { @media (width <= 768px) {
display: none; display: none;
} }
} }
@media (max-width: 768px) { @media (width <= 768px) {
font-size: 22px; font-size: 22px;
} }
} }
@media (max-width: 768px) { @media (width <= 768px) {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -533,7 +533,7 @@ $category-text: hsl(219, 23%, 33%);
border-bottom: 1px solid $light-blue-border; border-bottom: 1px solid $light-blue-border;
} }
@media (max-width: 768px) { @media (width <= 768px) {
.name { .name {
display: block; display: block;
} }
@ -549,20 +549,20 @@ $category-text: hsl(219, 23%, 33%);
margin: 20px 0; margin: 20px 0;
} }
@media (min-width: 768px) { @media (width >= 768px) {
width: calc(100% - 200px); width: calc(100% - 200px);
} }
@media (max-width: 768px) { @media (width <= 768px) {
margin-left: 0; margin-left: 0;
} }
} }
@media (max-width: 768px) { @media (width <= 768px) {
flex-direction: column; flex-direction: column;
} }
@media (max-width: 450px) { @media (width <= 450px) {
padding: 0 25px; padding: 0 25px;
} }
} }

38
static/styles/portico/landing_page.css
View File

@ -2854,7 +2854,7 @@ nav {
} }
/* -- media queries -- */ /* -- media queries -- */
@media (max-width: 1426px) { @media (width <= 1426px) {
.portico-landing.hello .integrations .integration-icons .hide-1 { .portico-landing.hello .integrations .integration-icons .hide-1 {
display: none; display: none;
} }
@ -2868,7 +2868,7 @@ nav {
} }
} }
@media (max-width: 1390px) { @media (width <= 1390px) {
.portico-landing.plans .portico-landing.plans
.pricing-container .pricing-container
.block:not(:first-child) .block:not(:first-child)
@ -2877,7 +2877,7 @@ nav {
} }
} }
@media (max-width: 1376px) { @media (width <= 1376px) {
.portico-landing.plans .price-box { .portico-landing.plans .price-box {
margin: 20px; margin: 20px;
} }
@ -2917,14 +2917,14 @@ nav {
} }
} }
@media (min-width: 1296px), (max-width: 985px) and (min-width: 687px) { @media (width >= 1296px), (687px <= width <= 985px) {
/* while there are nine, show only two rows of four. */ /* while there are nine, show only two rows of four. */
.portico-landing .testimonials .company-box > div:last-of-type { .portico-landing .testimonials .company-box > div:last-of-type {
display: none; display: none;
} }
} }
@media (max-width: 1295px) { @media (width <= 1295px) {
.portico-landing.hello .apps .right-side { .portico-landing.hello .apps .right-side {
display: none; display: none;
} }
@ -2952,7 +2952,7 @@ nav {
} }
} }
@media (max-width: 1100px) { @media (width <= 1100px) {
.tour .carousel-inner img { .tour .carousel-inner img {
&.zulip-topic, &.zulip-topic,
&.slack-overwhelming, &.slack-overwhelming,
@ -2992,7 +2992,7 @@ nav {
} }
} }
@media (max-width: 1024px) { @media (width <= 1024px) {
.portico-landing.hello .gradients .gradient { .portico-landing.hello .gradients .gradient {
height: 1400px; height: 1400px;
} }
@ -3060,7 +3060,7 @@ nav {
} }
} }
@media (max-width: 985px) { @media (width <= 985px) {
.features .feature-box .text-content { .features .feature-box .text-content {
width: 100%; width: 100%;
height: auto; height: auto;
@ -3161,7 +3161,7 @@ nav {
} }
} }
@media (max-width: 906px) { @media (width <= 906px) {
.portico-landing.why-page .hero p br { .portico-landing.why-page .hero p br {
display: none; display: none;
} }
@ -3188,7 +3188,7 @@ nav {
} }
} }
@media (max-width: 830px) { @media (width <= 830px) {
.portico-landing.features-app { .portico-landing.features-app {
section { section {
.headliner { .headliner {
@ -3247,7 +3247,7 @@ nav {
} }
} }
@media (max-width: 768px) { @media (width <= 768px) {
nav { nav {
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
@ -3362,7 +3362,7 @@ nav {
} }
} }
@media (max-width: 686px) { @media (width <= 686px) {
.portico-landing { .portico-landing {
padding-top: 120px; padding-top: 120px;
} }
@ -3599,7 +3599,7 @@ nav {
} }
} }
@media (max-width: 640px) { @media (width <= 640px) {
.portico-landing.hello .integrations .integration-icons .group { .portico-landing.hello .integrations .integration-icons .group {
margin: 10px 16px 0 16px; margin: 10px 16px 0 16px;
} }
@ -3617,7 +3617,7 @@ nav {
} }
} }
@media (max-width: 550px) { @media (width <= 550px) {
.portico-landing.features-app { .portico-landing.features-app {
section { section {
&.hero { &.hero {
@ -3694,7 +3694,7 @@ nav {
} }
} }
@media (max-width: 450px) { @media (width <= 450px) {
.portico-landing.plans .price-box { .portico-landing.plans .price-box {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -3790,7 +3790,7 @@ nav {
} }
} }
@media (max-width: 375px) { @media (width <= 375px) {
.portico-landing.hello .integrations .integration-icons .group { .portico-landing.hello .integrations .integration-icons .group {
width: 130px; width: 130px;
height: 215px; height: 215px;
@ -3817,7 +3817,7 @@ nav {
} }
} }
@media (max-width: 360px) { @media (width <= 360px) {
.portico-landing.features-app { .portico-landing.features-app {
section { section {
.keyboard-shortcuts { .keyboard-shortcuts {
@ -3832,7 +3832,7 @@ nav {
} }
/* For iPhone 5/SE device */ /* For iPhone 5/SE device */
@media (max-width: 320px) { @media (width <= 320px) {
.portico-landing.features-app { .portico-landing.features-app {
section { section {
.keyboard-shortcuts { .keyboard-shortcuts {
@ -3846,7 +3846,7 @@ nav {
} }
} }
@media (max-width: 313px) { @media (width <= 313px) {
.portico-landing .testimonials .quote-container { .portico-landing .testimonials .quote-container {
width: 93%; width: 93%;
padding-left: 7%; padding-left: 7%;

4
static/styles/portico/markdown.css
View File

@ -142,7 +142,7 @@
margin: 0 0 2px; margin: 0 0 2px;
} }
@media (max-width: 500px) { @media (width <= 500px) {
margin-left: 0; margin-left: 0;
} }
} }
@ -173,7 +173,7 @@
vertical-align: middle; vertical-align: middle;
} }
@media (max-width: 500px) { @media (width <= 500px) {
padding: 10px; padding: 10px;
} }
} }

14
static/styles/portico/portico.css
View File

@ -1352,7 +1352,7 @@ input.new-organization-button {
margin-bottom: 25px !important; margin-bottom: 25px !important;
} }
@media (max-width: 800px) { @media (width <= 800px) {
.app.help { .app.help {
.markdown { .markdown {
width: 100vw; width: 100vw;
@ -1426,7 +1426,7 @@ input.new-organization-button {
} }
} }
@media (max-width: 815px) { @media (width <= 815px) {
.footer { .footer {
width: 450px; width: 450px;
margin-left: auto; margin-left: auto;
@ -1438,7 +1438,7 @@ input.new-organization-button {
} }
} }
@media (max-width: 767px) { @media (width <= 767px) {
body { body {
padding: 0 !important; padding: 0 !important;
} }
@ -1489,7 +1489,7 @@ input.new-organization-button {
} }
} }
@media (max-width: 558px) { @media (width <= 558px) {
.team { .team {
.bdfl { .bdfl {
.profile-name, .profile-name,
@ -1500,7 +1500,7 @@ input.new-organization-button {
} }
} }
@media (max-width: 500px) { @media (width <= 500px) {
.app.help { .app.help {
.sidebar { .sidebar {
top: 39px; top: 39px;
@ -1555,7 +1555,7 @@ input.new-organization-button {
} }
} }
@media (max-width: 475px) { @media (width <= 475px) {
.footer { .footer {
width: auto; width: auto;
@ -1566,7 +1566,7 @@ input.new-organization-button {
} }
} }
@media (max-width: 400px) { @media (width <= 400px) {
.footer { .footer {
section { section {
width: calc(100% - 40px); width: calc(100% - 40px);

12
static/styles/portico/portico_signin.css
View File

@ -1036,25 +1036,25 @@ button#register_auth_button_gitlab {
/* -- media queries -- */ /* -- media queries -- */
@media (max-width: 950px) { @media (width <= 950px) {
.split-view .left-side { .split-view .left-side {
width: 400px; width: 400px;
} }
} }
@media (max-width: 850px) { @media (width <= 850px) {
.split-view .left-side { .split-view .left-side {
width: 350px; width: 350px;
} }
} }
@media (max-width: 815px) { @media (width <= 815px) {
.flex { .flex {
min-height: calc(100vh - 530px); min-height: calc(100vh - 530px);
} }
} }
@media (max-width: 795px) { @media (width <= 795px) {
.register-account #registration { .register-account #registration {
padding: 10px; padding: 10px;
} }
@ -1116,7 +1116,7 @@ button#register_auth_button_gitlab {
} }
} }
@media (max-width: 500px) { @media (width <= 500px) {
.new-style .get-started { .new-style .get-started {
font-size: 1.6em; font-size: 1.6em;
} }
@ -1160,7 +1160,7 @@ button#register_auth_button_gitlab {
} }
} }
@media (max-width: 400px) { @media (width <= 400px) {
.flex { .flex {
min-height: calc(100vh - 560px); min-height: calc(100vh - 560px);
} }

2
static/styles/portico/stats.css
View File

@ -225,7 +225,7 @@ p {
} }
} }
@media (min-width: 1680px) { @media (width >= 1680px) {
.center-charts { .center-charts {
width: calc( width: calc(
816px * 2 816px * 2

4
static/styles/recent_topics.css
View File

@ -11,7 +11,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media (max-width: $md_max) { @media (width < $md_min) {
height: 95%; height: 95%;
max-width: none; max-width: none;
width: 90%; width: 90%;
@ -279,7 +279,7 @@
white-space: nowrap; white-space: nowrap;
} }
@media (max-width: $md_max) { @media (width < $md_min) {
/* Hide participants and last message time /* Hide participants and last message time
on smaller screens. This ensures user always on smaller screens. This ensures user always
has a nice UI experience. */ has a nice UI experience. */

2
static/styles/rendered_markdown.css
View File

@ -464,7 +464,7 @@
right: 12px; right: 12px;
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
.rendered_markdown .message_embed { .rendered_markdown .message_embed {
height: auto; height: auto;

6
static/styles/right_sidebar.css
View File

@ -196,7 +196,7 @@
} }
/* This max-width must be synced with message_viewport.is_narrow */ /* This max-width must be synced with message_viewport.is_narrow */
@media (max-width: $xl_max) { @media (width < $xl_min) {
#sidebar-keyboard-shortcuts { #sidebar-keyboard-shortcuts {
/* This is supposed to fix this appearing improperly in narrow /* This is supposed to fix this appearing improperly in narrow
windows. It's likely the wrong solution; a proper fix likely windows. It's likely the wrong solution; a proper fix likely
@ -210,14 +210,14 @@
} }
} }
@media (max-width: $md_max) { @media (width < $md_min) {
#user_search_section .user-list-filter { #user_search_section .user-list-filter {
/* input should be 100% - 6px padding x2 - 1px border x2. */ /* input should be 100% - 6px padding x2 - 1px border x2. */
width: calc(100% - 12px - 2px); width: calc(100% - 12px - 2px);
} }
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
#userlist-toggle { #userlist-toggle {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;

10
static/styles/settings.css
View File

@ -1761,7 +1761,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
margin: 20px; margin: 20px;
} }
@media (max-width: $lg_max) { @media (width < $lg_min) {
.user-avatar-section, .user-avatar-section,
.realm-icon-section { .realm-icon-section {
float: none; float: none;
@ -1784,7 +1784,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
/* This value needs to match with the same in subscriptions.css, as /* This value needs to match with the same in subscriptions.css, as
we have some shared styles declared there */ we have some shared styles declared there */
@media (max-width: $md_max) { @media (width < $md_min) {
#settings_overlay_container { #settings_overlay_container {
/* this variable allows JavaScript to detect this media query */ /* this variable allows JavaScript to detect this media query */
--single-column: yes; --single-column: yes;
@ -1829,7 +1829,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
} }
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
#pw_strength { #pw_strength {
margin: auto; margin: auto;
} }
@ -1862,7 +1862,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
} }
} }
@media (max-width: $ml_max) { @media (width < $ml_min) {
#api_key_buttons, #api_key_buttons,
#download_zuliprc { #download_zuliprc {
flex-direction: column; flex-direction: column;
@ -1870,7 +1870,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
} }
} }
@media only screen and (max-width: $lg_max) { @media only screen and (width < $lg_min) {
/* Show bot-information-box at full width on small /* Show bot-information-box at full width on small
screen sizes. Not having this media query breaks the screen sizes. Not having this media query breaks the
information box */ information box */

8
static/styles/subscriptions.css
View File

@ -1087,7 +1087,7 @@ ul.grey-box {
} }
} }
@media (max-width: $lg_max) { @media (width < $lg_min) {
.subscriptions-container { .subscriptions-container {
max-width: 95%; max-width: 95%;
} }
@ -1103,7 +1103,7 @@ ul.grey-box {
} }
} }
@media (max-width: $lg_max) { @media (width < $lg_min) {
.subscriptions-container .left .search-container { .subscriptions-container .left .search-container {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
@ -1119,7 +1119,7 @@ ul.grey-box {
Longer-term we should extract this logic two-column-overlay class Longer-term we should extract this logic two-column-overlay class
to read more naturally. */ to read more naturally. */
@media (max-width: $md_max) { @media (width < $md_min) {
.subscriptions-container { .subscriptions-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -1180,7 +1180,7 @@ ul.grey-box {
} }
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
#subscription_overlay .subscription_settings .button-group { #subscription_overlay .subscription_settings .button-group {
display: block; display: block;
float: unset; float: unset;

4
static/styles/typing_notifications.css
View File

@ -11,13 +11,13 @@
} }
/* This max-width must be synced with message_viewport.is_narrow */ /* This max-width must be synced with message_viewport.is_narrow */
@media (max-width: $xl_max) { @media (width < $xl_min) {
#typing_notifications { #typing_notifications {
margin-right: 7px; margin-right: 7px;
} }
} }
@media (max-width: $md_max) { @media (width < $md_min) {
#typing_notifications { #typing_notifications {
margin-right: 7px; margin-right: 7px;
margin-left: 7px; margin-left: 7px;

4
static/styles/user_status.css
View File

@ -8,14 +8,14 @@
overflow: hidden; overflow: hidden;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
@media (max-width: $ml_max) { @media (width < $ml_min) {
width: 100%; width: 100%;
} }
} }
input.user_status { input.user_status {
width: 336px; width: 336px;
@media (max-width: $ml_max) { @media (width < $ml_min) {
width: 94%; width: 94%;
} }
} }

24
static/styles/zulip.css
View File

@ -1584,7 +1584,7 @@ div.focused_table {
padding: 12px 6px; padding: 12px 6px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@media (max-width: $sm_max) { @media (width < $sm_min) {
padding: 7px 3.5px; /* based on having ~41.66% decrease */ padding: 7px 3.5px; /* based on having ~41.66% decrease */
} }
i { i {
@ -1639,14 +1639,14 @@ div.focused_table {
height: 50%; height: 50%;
color: hsl(0, 0%, 88%); color: hsl(0, 0%, 88%);
font-size: 20px; font-size: 20px;
@media (max-width: $sm_max) { @media (width < $sm_min) {
top: 10%; top: 10%;
} }
} }
&::before { &::before {
left: -3px; left: -3px;
@media (max-width: $sm_max) { @media (width < $sm_min) {
/* this ensures the before "|" doesn't overlap /* this ensures the before "|" doesn't overlap
with the stream name text on small narrows */ with the stream name text on small narrows */
left: 0; left: 0;
@ -1671,7 +1671,7 @@ div.focused_table {
padding: 12px 0; padding: 12px 0;
padding-left: 10px; padding-left: 10px;
@media (max-width: $sm_max) { @media (width < $sm_min) {
padding: 7px 0; padding: 7px 0;
padding-left: 10px; padding-left: 10px;
} }
@ -1689,7 +1689,7 @@ div.focused_table {
font-size: 20px; font-size: 20px;
padding: 10px 15px 0 0; padding: 10px 15px 0 0;
@media (max-width: $sm_max) { @media (width < $sm_min) {
padding: 5px 15px 0 0; padding: 5px 15px 0 0;
} }
} }
@ -1827,13 +1827,13 @@ div.focused_table {
padding: 0; padding: 0;
} }
@media (min-width: $sm_min) { @media (width >= $sm_min) {
.pill { .pill {
padding: 2px 0 2px 0 !important; padding: 2px 0 2px 0 !important;
font-size: 14px; font-size: 14px;
} }
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
#search_arrows .pill { #search_arrows .pill {
line-height: 20px; line-height: 20px;
@ -2600,7 +2600,7 @@ select.inline_select_topic_edit {
} }
/* This max-width must be synced with message_viewport.is_narrow */ /* This max-width must be synced with message_viewport.is_narrow */
@media (max-width: $xl_max) { @media (width < $xl_min) {
.app-main, .app-main,
.header-main { .header-main {
min-width: 750px; min-width: 750px;
@ -2680,7 +2680,7 @@ select.inline_select_topic_edit {
} }
} }
@media (max-width: $md_max) { @media (width < $md_min) {
body { body {
padding: 0; padding: 0;
} }
@ -2778,7 +2778,7 @@ select.inline_select_topic_edit {
} }
} }
@media (max-width: $sm_max) { @media (width < $sm_min) {
.column-right.expanded .right-sidebar, .column-right.expanded .right-sidebar,
.column-left.expanded .left-sidebar { .column-left.expanded .left-sidebar {
margin-top: 31px; margin-top: 31px;
@ -2883,7 +2883,7 @@ select.inline_select_topic_edit {
} }
} }
@media (max-width: $mm_max) { @media (width < $mm_min) {
html { html {
overflow-x: hidden; overflow-x: hidden;
} }
@ -2896,7 +2896,7 @@ select.inline_select_topic_edit {
} }
} }
@media (max-width: $md_max) { @media (width < $md_min) {
#feedback_container { #feedback_container {
width: calc(90% - 30px); width: calc(90% - 30px);
left: 5%; left: 5%;

4
yarn.lock
View File

@ -9528,6 +9528,10 @@ postcss-loader@^4.0.2:
schema-utils "^3.0.0" schema-utils "^3.0.0"
semver "^7.3.4" semver "^7.3.4"
"postcss-media-minmax@https://github.com/andersk/postcss-media-minmax.git#01239f17f4a9872ace1dd133cee526a7de4ac9f5":
version "5.0.0"
resolved "https://github.com/andersk/postcss-media-minmax.git#01239f17f4a9872ace1dd133cee526a7de4ac9f5"
postcss-media-query-parser@^0.2.3: postcss-media-query-parser@^0.2.3:
version "0.2.3" version "0.2.3"
resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244" resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"