diff --git a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx index 1d807bc23..9d1139a05 100644 --- a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx +++ b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx @@ -11,6 +11,7 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; const messages = defineMessages({ btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' }, @@ -36,19 +37,19 @@ class NotificationPurgeButtons extends ImmutablePureComponent { //className='active' return (
- - - -
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index c7fc74b2a..68f4f8f1e 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -24,9 +24,11 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' position: absolute; content: '\F00C'; font-size: 50%; - font-family: FontAwesome; inset-inline-end: -0.55em; top: -0.44em; + + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- this is an icon font, this can't use a generic font */ + font-family: FontAwesome; } } diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 6268135a6..d10169e02 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -33,7 +33,7 @@ border-radius: 4px 4px 0 0; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { height: 200px; } } @@ -162,7 +162,7 @@ color: lighten($inverted-text-color, 10%); } - @media screen and (max-width: 700px) { + @media screen and (width <= 700px) { padding: 30px 20px; .page { diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 58223143f..2adee62d6 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -1377,7 +1377,7 @@ a.sparkline { } } - @media screen and (max-width: 930px) { + @media screen and (width <= 930px) { grid-template-columns: minmax(0, 1fr); } } @@ -1663,7 +1663,7 @@ a.sparkline { } } - @media screen and (max-width: 800px) { + @media screen and (width <= 800px) { border: 0; &__item { diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index 705827473..ba5528296 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -136,7 +136,7 @@ margin-bottom: 20px; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { display: block; h4 { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 77bbcc640..d2d29f596 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -281,7 +281,7 @@ .notification__message { margin-inline-start: 42px; - padding-top:8px; + padding-top: 8px; padding-inline-start: 26px; cursor: default; color: $darker-text-color; diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index f9a5720e5..2404578df 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -79,7 +79,7 @@ $ui-header-height: 55px; display: none; } - @media screen and (min-width: 320px) { + @media screen and (width >= 320px) { .logo--wordmark { display: block; } @@ -205,7 +205,7 @@ $ui-header-height: 55px; &:last-child { padding: 0; - padding-inline-end: 15px;; + padding-inline-end: 15px; } } @@ -441,9 +441,7 @@ $ui-header-height: 55px; align-items: stretch; justify-content: space-around; - button { - @extend .column-header__button; - + .column-header__button { background: transparent; text-align: center; padding: 10px 5px; @@ -809,7 +807,7 @@ $ui-header-height: 55px; background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index c3b67da4a..eb053c14d 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,8 +1,6 @@ $doodle-background: #d9e1e8; .doodle-modal { - @extend .boost-modal; - width: unset; } @@ -16,8 +14,6 @@ $doodle-background: #d9e1e8; } .doodle-modal__action-bar { - @extend .boost-modal__action-bar; - .filler { flex-grow: 1; margin: 0; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 9e0286bea..af637b69b 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -229,7 +229,7 @@ cursor: inherit; } - @media screen and (min-height: 640px) { + @media screen and (height >= 640px) { display: block; } } diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index d00a1941b..e173016b6 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -6,7 +6,7 @@ width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } @@ -60,7 +60,7 @@ width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index dee42bfdd..cb0b401b4 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -125,7 +125,7 @@ margin-bottom: 10px; } -@media screen and (max-width: 630px) { +@media screen and (width <= 630px) { .glitch.local-settings__navigation { width: 40px; flex-shrink: 0; diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index f41914464..d6666acd2 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -827,7 +827,7 @@ body > [data-popper-placement] { overflow: hidden; } -@media screen and (min-width: 631px) { +@media screen and (width >= 631px) { .columns-area { padding: 0; } @@ -1134,19 +1134,19 @@ body > [data-popper-placement] { } } - @media screen and (max-height: 810px) { + @media screen and (height <= 810px) { .trends__item:nth-of-type(3) { display: none; } } - @media screen and (max-height: 720px) { + @media screen and (height <= 720px) { .trends__item:nth-of-type(2) { display: none; } } - @media screen and (max-height: 670px) { + @media screen and (height <= 670px) { display: none; } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 354e5a04f..c68c5fc53 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -115,7 +115,7 @@ text-align: center; } -@media screen and (max-width: 550px) { +@media screen and (width <= 550px) { .onboarding-modal { width: 100%; height: 100%; @@ -382,7 +382,7 @@ } } -@media screen and (max-width: 320px) and (max-height: 600px) { +@media screen and (width <= 320px) and (height <= 600px) { .onboarding-modal__page p { font-size: 14px; line-height: 20px; @@ -413,6 +413,7 @@ margin-inline-start: 10px; } +.doodle-modal, .boost-modal, .confirmation-modal, .report-modal, @@ -485,6 +486,7 @@ } } +.doodle-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, @@ -560,7 +562,7 @@ font-weight: 700; margin-bottom: 15px; - @media screen and (max-height: 800px) { + @media screen and (height <= 800px) { font-size: 22px; } } @@ -747,7 +749,7 @@ display: flex; border-top: 1px solid $ui-secondary-color; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { flex-wrap: wrap; overflow-y: auto; } @@ -758,7 +760,7 @@ box-sizing: border-box; width: 50%; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { width: 100%; } } @@ -775,13 +777,13 @@ color: $highlight-text-color; } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 10vh; } } .focal-point-modal__content { - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 40vh; } } @@ -877,7 +879,7 @@ } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { padding: 10px; max-width: 100%; order: 2; @@ -1152,7 +1154,7 @@ background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -1233,7 +1235,7 @@ } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { img, video { max-height: 100%; diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 6563fa47b..2f8f7e2dd 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -94,7 +94,7 @@ } } -@media screen and (min-width: 600px) { +@media screen and (width >= 600px) { .tabs-bar__link { span { display: inline; diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index d75ccecee..4d3d4c546 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -2,7 +2,7 @@ width: 700px; margin: 0 auto; - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { width: 100%; margin: 0; } @@ -44,7 +44,7 @@ margin-top: 40px; box-sizing: border-box; - @media screen and (max-width: 400px) { + @media screen and (width <= 400px) { width: 100%; margin-top: 0; padding: 20px; @@ -64,7 +64,7 @@ margin-bottom: 10px; border-bottom: 1px solid $ui-base-color; - @media screen and (max-width: 440px) { + @media screen and (width <= 440px) { width: 100%; margin: 0; padding: 20px; diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index f25765d1d..bc34c6ec0 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -59,7 +59,7 @@ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-gap: 10px; - @media screen and (max-width: 1350px) { + @media screen and (width <= 1350px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index f69e8f276..dbc89a703 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -723,7 +723,7 @@ code { } } - @media screen and (max-width: 740px) and (min-width: 441px) { + @media screen and (width <= 740px) and (width >= 441px) { margin-top: 40px; } diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss index 29b1f162b..0b7220b21 100644 --- a/app/javascript/flavours/glitch/styles/modal.scss +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -30,7 +30,7 @@ } } -@media screen and (max-width: 600px) { +@media screen and (width <= 600px) { .account-header { margin-top: 0; } diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index 77e9d38bd..02c653863 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -59,7 +59,7 @@ } } - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { .detailed-status, .status, .load-more { diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 0c730f1a7..b583d3d8e 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -357,7 +357,7 @@ a.table-action-link { } } - @media screen and (max-width: 870px) { + @media screen and (width <= 870px) { .accounts-table tbody td.optional { display: none; } diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss index 66f3eed9f..5a7b87dc1 100644 --- a/app/javascript/styles/fonts/roboto-mono.scss +++ b/app/javascript/styles/fonts/roboto-mono.scss @@ -3,8 +3,7 @@ src: local('Roboto Mono'), url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'), - url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') - format('truetype'), + url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'), url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg'); font-weight: 400; diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 18fe522eb..a12f74fc0 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -547,7 +547,7 @@ ul.rules-list { } } -@media (max-width: 697px) { +@media (width <= 697px) { .email-container, .col-1, .col-2, diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 853d7f70d..8b7b63407 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -33,7 +33,7 @@ border-radius: 4px 4px 0 0; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { height: 200px; } } @@ -158,7 +158,7 @@ color: lighten($inverted-text-color, 10%); } - @media screen and (max-width: 700px) { + @media screen and (width <= 700px) { padding: 30px 20px; .page { diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index acb4baf4f..a439b0e39 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1371,7 +1371,7 @@ a.sparkline { } } - @media screen and (max-width: 930px) { + @media screen and (width <= 930px) { grid-template-columns: minmax(0, 1fr); } } @@ -1657,7 +1657,7 @@ a.sparkline { } } - @media screen and (max-width: 800px) { + @media screen and (width <= 800px) { border: 0; &__item { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d1d54d0f0..49875524d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -514,7 +514,7 @@ body > [data-popper-placement] { outline: 0; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -535,7 +535,7 @@ body > [data-popper-placement] { all: unset; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { height: 100px !important; // Prevent auto-resize textarea resize: vertical; } @@ -2413,7 +2413,7 @@ $ui-header-height: 55px; display: none; } - @media screen and (min-width: 320px) { + @media screen and (width >= 320px) { .logo--wordmark { display: block; } @@ -2525,7 +2525,7 @@ $ui-header-height: 55px; overflow: hidden; } -@media screen and (min-width: 631px) { +@media screen and (width >= 631px) { .columns-area { padding: 0; } @@ -2585,7 +2585,7 @@ $ui-header-height: 55px; &:hover, &:focus, &:active { - @media screen and (min-width: 631px) { + @media screen and (width >= 631px) { background: lighten($ui-base-color, 14%); border-bottom-color: lighten($ui-base-color, 14%); } @@ -2602,7 +2602,7 @@ $ui-header-height: 55px; } } -@media screen and (min-width: 600px) { +@media screen and (width >= 600px) { .tabs-bar__link { span { display: inline; @@ -2825,7 +2825,7 @@ $ui-header-height: 55px; color: $darker-text-color; } - @media screen and (min-width: 600px) { + @media screen and (width >= 600px) { padding: 40px; } } @@ -2935,7 +2935,7 @@ $ui-header-height: 55px; height: 36px; color: $dark-text-color; - @media screen and (min-width: 600px) { + @media screen and (width >= 600px) { display: flex; } } @@ -2987,7 +2987,7 @@ $ui-header-height: 55px; position: sticky; background: $ui-base-color; - @media screen and (min-width: 600) { + @media screen and (width >= 600) { padding: 0 40px; } @@ -3255,7 +3255,7 @@ $ui-header-height: 55px; user-select: none; } - @media screen and (min-height: 640px) { + @media screen and (height >= 640px) { display: block; } } @@ -3604,19 +3604,19 @@ $ui-header-height: 55px; } } - @media screen and (max-height: 810px) { + @media screen and (height <= 810px) { .trends__item:nth-of-type(3) { display: none; } } - @media screen and (max-height: 720px) { + @media screen and (height <= 720px) { .trends__item:nth-of-type(2) { display: none; } } - @media screen and (max-height: 670px) { + @media screen and (height <= 670px) { display: none; } @@ -3700,7 +3700,7 @@ $ui-header-height: 55px; margin-bottom: 20px; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -4496,7 +4496,7 @@ a.status-card.compact:hover { background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -5831,7 +5831,7 @@ a.status-card.compact:hover { font-weight: 700; margin-bottom: 15px; - @media screen and (max-height: 800px) { + @media screen and (height <= 800px) { font-size: 22px; } } @@ -6018,7 +6018,7 @@ a.status-card.compact:hover { display: flex; border-top: 1px solid $ui-secondary-color; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { flex-wrap: wrap; overflow-y: auto; } @@ -6029,7 +6029,7 @@ a.status-card.compact:hover { box-sizing: border-box; width: 50%; - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { width: 100%; } } @@ -6051,13 +6051,13 @@ a.status-card.compact:hover { color: $inverted-text-color; } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 10vh; } } .focal-point-modal__content { - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { max-height: 40vh; } } @@ -6108,7 +6108,7 @@ a.status-card.compact:hover { } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { padding: 10px; max-width: 100%; order: 2; @@ -7136,7 +7136,7 @@ noscript { } } -@media screen and (max-width: 630px) and (max-height: 400px) { +@media screen and (width <= 630px) and (height <= 400px) { $duration: 400ms; $delay: 100ms; @@ -7266,7 +7266,7 @@ noscript { background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { font-size: 16px; } } @@ -7357,7 +7357,7 @@ noscript { width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } @@ -7412,7 +7412,7 @@ noscript { width: 380px; overflow: hidden; - @media screen and (max-width: 420px) { + @media screen and (width <= 420px) { width: 90%; } @@ -7511,7 +7511,7 @@ noscript { } } - @media screen and (max-width: 480px) { + @media screen and (width <= 480px) { img, video { max-height: 100%; @@ -9068,7 +9068,7 @@ noscript { margin-bottom: 20px; } - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { display: block; h4 { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index fb71ad034..3d646da23 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -2,7 +2,7 @@ width: 700px; margin: 0 auto; - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { width: 100%; margin: 0; } @@ -44,7 +44,7 @@ margin-top: 40px; box-sizing: border-box; - @media screen and (max-width: 400px) { + @media screen and (width <= 400px) { width: 100%; margin-top: 0; padding: 20px; @@ -64,7 +64,7 @@ margin-bottom: 10px; border-bottom: 1px solid $ui-base-color; - @media screen and (max-width: 440px) { + @media screen and (width <= 440px) { width: 100%; margin: 0; padding: 20px; diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index f25765d1d..bc34c6ec0 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -59,7 +59,7 @@ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-gap: 10px; - @media screen and (max-width: 1350px) { + @media screen and (width <= 1350px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index dc52bcd87..d17303b85 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -722,7 +722,7 @@ code { } } - @media screen and (max-width: 740px) and (min-width: 441px) { + @media screen and (width <= 740px) and (width >= 441px) { margin-top: 40px; } diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 29b1f162b..0b7220b21 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -30,7 +30,7 @@ } } -@media screen and (max-width: 600px) { +@media screen and (width <= 600px) { .account-header { margin-top: 0; } diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index 6c9ea916a..590d03fb8 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -63,7 +63,7 @@ } } - @media screen and (max-width: 740px) { + @media screen and (width <= 740px) { .detailed-status, .status, .load-more { diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 49e5bbf9f..38cfc8727 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -361,7 +361,7 @@ a.table-action-link { } } - @media screen and (max-width: 870px) { + @media screen and (width <= 870px) { .accounts-table tbody td.optional { display: none; }