treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix SCSS linting issues (#2207) 

* Disable font-family-no-missing-generic-family-keyword for font-awesome accessibility icons

* Run stylelint --fix

* Avoid `@extend` directives with doodle modal CSS

* Drop use of `@extend` for notification cleanup buttons SCSS

* Run prettier on SCSS
pull/59/head^2
Claire 2023-05-07 15:04:59 +02:00 committed by GitHub
parent a6207d243b
commit 6f64c79ca4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 88 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
View File

@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import classNames from 'classnames';
const messages = defineMessages({ const messages = defineMessages({
btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' }, btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
@ -36,19 +37,19 @@ class NotificationPurgeButtons extends ImmutablePureComponent {
//className='active' //className='active'
return ( return (
<div className='column-header__notif-cleaning-buttons'> <div className='column-header__notif-cleaning-buttons'>
<button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}> <button onClick={this.props.onMarkAll} className={classNames('column-header__button', { active: markNewForDelete })}>
<b>∀</b><br />{intl.formatMessage(messages.btnAll)} <b>∀</b><br />{intl.formatMessage(messages.btnAll)}
</button> </button>
<button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}> <button onClick={this.props.onMarkNone} className={classNames('column-header__button', { active: !markNewForDelete })}>
<b>∅</b><br />{intl.formatMessage(messages.btnNone)} <b>∅</b><br />{intl.formatMessage(messages.btnNone)}
</button> </button>
<button onClick={this.props.onInvert}> <button onClick={this.props.onInvert} className='column-header__button'>
<b>¬</b><br />{intl.formatMessage(messages.btnInvert)} <b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
</button> </button>
<button onClick={this.props.onDeleteMarked}> <button onClick={this.props.onDeleteMarked} className='column-header__button'>
<Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)} <Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
</button> </button>
</div> </div>

4
app/javascript/flavours/glitch/styles/accessibility.scss
View File

@ -24,9 +24,11 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
position: absolute; position: absolute;
content: '\F00C'; content: '\F00C';
font-size: 50%; font-size: 50%;
font-family: FontAwesome;
inset-inline-end: -0.55em; inset-inline-end: -0.55em;
top: -0.44em; 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;
} }
} }

4
app/javascript/flavours/glitch/styles/accounts.scss
View File

@ -33,7 +33,7 @@
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
height: 200px; height: 200px;
} }
} }
@ -162,7 +162,7 @@
color: lighten($inverted-text-color, 10%); color: lighten($inverted-text-color, 10%);
} }
@media screen and (max-width: 700px) { @media screen and (width <= 700px) {
padding: 30px 20px; padding: 30px 20px;
.page { .page {

4
app/javascript/flavours/glitch/styles/admin.scss
View File

@ -1377,7 +1377,7 @@ a.sparkline {
} }
} }
@media screen and (max-width: 930px) { @media screen and (width <= 930px) {
grid-template-columns: minmax(0, 1fr); 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; border: 0;
&__item { &__item {

2
app/javascript/flavours/glitch/styles/components/about.scss
View File

@ -136,7 +136,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
display: block; display: block;
h4 { h4 {

10
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -79,7 +79,7 @@ $ui-header-height: 55px;
display: none; display: none;
} }
@media screen and (min-width: 320px) { @media screen and (width >= 320px) {
.logo--wordmark { .logo--wordmark {
display: block; display: block;
} }
@ -205,7 +205,7 @@ $ui-header-height: 55px;
&:last-child { &:last-child {
padding: 0; padding: 0;
padding-inline-end: 15px;; padding-inline-end: 15px;
} }
} }
@ -441,9 +441,7 @@ $ui-header-height: 55px;
align-items: stretch; align-items: stretch;
justify-content: space-around; justify-content: space-around;
button { .column-header__button {
@extend .column-header__button;
background: transparent; background: transparent;
text-align: center; text-align: center;
padding: 10px 5px; padding: 10px 5px;
@ -809,7 +807,7 @@ $ui-header-height: 55px;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
} }

4
app/javascript/flavours/glitch/styles/components/doodle.scss
View File

@ -1,8 +1,6 @@
$doodle-background: #d9e1e8; $doodle-background: #d9e1e8;
.doodle-modal { .doodle-modal {
@extend .boost-modal;
width: unset; width: unset;
} }
@ -16,8 +14,6 @@ $doodle-background: #d9e1e8;
} }
.doodle-modal__action-bar { .doodle-modal__action-bar {
@extend .boost-modal__action-bar;
.filler { .filler {
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;

2
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@ -229,7 +229,7 @@
cursor: inherit; cursor: inherit;
} }
@media screen and (min-height: 640px) { @media screen and (height >= 640px) {
display: block; display: block;
} }
} }

4
app/javascript/flavours/glitch/styles/components/lists.scss
View File

@ -6,7 +6,7 @@
width: 380px; width: 380px;
overflow: hidden; overflow: hidden;
@media screen and (max-width: 420px) { @media screen and (width <= 420px) {
width: 90%; width: 90%;
} }
@ -60,7 +60,7 @@
width: 380px; width: 380px;
overflow: hidden; overflow: hidden;
@media screen and (max-width: 420px) { @media screen and (width <= 420px) {
width: 90%; width: 90%;
} }

2
app/javascript/flavours/glitch/styles/components/local_settings.scss
View File

@ -125,7 +125,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
@media screen and (max-width: 630px) { @media screen and (width <= 630px) {
.glitch.local-settings__navigation { .glitch.local-settings__navigation {
width: 40px; width: 40px;
flex-shrink: 0; flex-shrink: 0;

8
app/javascript/flavours/glitch/styles/components/misc.scss
View File

@ -827,7 +827,7 @@ body > [data-popper-placement] {
overflow: hidden; overflow: hidden;
} }
@media screen and (min-width: 631px) { @media screen and (width >= 631px) {
.columns-area { .columns-area {
padding: 0; 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) { .trends__item:nth-of-type(3) {
display: none; display: none;
} }
} }
@media screen and (max-height: 720px) { @media screen and (height <= 720px) {
.trends__item:nth-of-type(2) { .trends__item:nth-of-type(2) {
display: none; display: none;
} }
} }
@media screen and (max-height: 670px) { @media screen and (height <= 670px) {
display: none; display: none;
} }

22
app/javascript/flavours/glitch/styles/components/modal.scss
View File

@ -115,7 +115,7 @@
text-align: center; text-align: center;
} }
@media screen and (max-width: 550px) { @media screen and (width <= 550px) {
.onboarding-modal { .onboarding-modal {
width: 100%; width: 100%;
height: 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 { .onboarding-modal__page p {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@ -413,6 +413,7 @@
margin-inline-start: 10px; margin-inline-start: 10px;
} }
.doodle-modal,
.boost-modal, .boost-modal,
.confirmation-modal, .confirmation-modal,
.report-modal, .report-modal,
@ -485,6 +486,7 @@
} }
} }
.doodle-modal__action-bar,
.boost-modal__action-bar, .boost-modal__action-bar,
.confirmation-modal__action-bar, .confirmation-modal__action-bar,
.mute-modal__action-bar, .mute-modal__action-bar,
@ -560,7 +562,7 @@
font-weight: 700; font-weight: 700;
margin-bottom: 15px; margin-bottom: 15px;
@media screen and (max-height: 800px) { @media screen and (height <= 800px) {
font-size: 22px; font-size: 22px;
} }
} }
@ -747,7 +749,7 @@
display: flex; display: flex;
border-top: 1px solid $ui-secondary-color; border-top: 1px solid $ui-secondary-color;
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
flex-wrap: wrap; flex-wrap: wrap;
overflow-y: auto; overflow-y: auto;
} }
@ -758,7 +760,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 50%; width: 50%;
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
width: 100%; width: 100%;
} }
} }
@ -775,13 +777,13 @@
color: $highlight-text-color; color: $highlight-text-color;
} }
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
max-height: 10vh; max-height: 10vh;
} }
} }
.focal-point-modal__content { .focal-point-modal__content {
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
max-height: 40vh; max-height: 40vh;
} }
} }
@ -877,7 +879,7 @@
} }
} }
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
padding: 10px; padding: 10px;
max-width: 100%; max-width: 100%;
order: 2; order: 2;
@ -1152,7 +1154,7 @@
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
} }
@ -1233,7 +1235,7 @@
} }
} }
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
img, img,
video { video {
max-height: 100%; max-height: 100%;

2
app/javascript/flavours/glitch/styles/components/single_column.scss
View File

@ -94,7 +94,7 @@
} }
} }
@media screen and (min-width: 600px) { @media screen and (width >= 600px) {
.tabs-bar__link { .tabs-bar__link {
span { span {
display: inline; display: inline;

6
app/javascript/flavours/glitch/styles/containers.scss
View File

@ -2,7 +2,7 @@
width: 700px; width: 700px;
margin: 0 auto; margin: 0 auto;
@media screen and (max-width: 740px) { @media screen and (width <= 740px) {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
@ -44,7 +44,7 @@
margin-top: 40px; margin-top: 40px;
box-sizing: border-box; box-sizing: border-box;
@media screen and (max-width: 400px) { @media screen and (width <= 400px) {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
padding: 20px; padding: 20px;
@ -64,7 +64,7 @@
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid $ui-base-color; border-bottom: 1px solid $ui-base-color;
@media screen and (max-width: 440px) { @media screen and (width <= 440px) {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 20px; padding: 20px;

2
app/javascript/flavours/glitch/styles/dashboard.scss
View File

@ -59,7 +59,7 @@
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-gap: 10px; grid-gap: 10px;
@media screen and (max-width: 1350px) { @media screen and (width <= 1350px) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
} }

2
app/javascript/flavours/glitch/styles/forms.scss
View File

@ -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; margin-top: 40px;
} }

2
app/javascript/flavours/glitch/styles/modal.scss
View File

@ -30,7 +30,7 @@
} }
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
.account-header { .account-header {
margin-top: 0; margin-top: 0;
} }

2
app/javascript/flavours/glitch/styles/statuses.scss
View File

@ -59,7 +59,7 @@
} }
} }
@media screen and (max-width: 740px) { @media screen and (width <= 740px) {
.detailed-status, .detailed-status,
.status, .status,
.load-more { .load-more {

2
app/javascript/flavours/glitch/styles/tables.scss
View File

@ -357,7 +357,7 @@ a.table-action-link {
} }
} }
@media screen and (max-width: 870px) { @media screen and (width <= 870px) {
.accounts-table tbody td.optional { .accounts-table tbody td.optional {
display: none; display: none;
} }

3
app/javascript/styles/fonts/roboto-mono.scss
View File

@ -3,8 +3,7 @@
src: local('Roboto Mono'), src: local('Roboto Mono'),
url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), 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.woff') format('woff'),
url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
format('truetype'),
url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
format('svg'); format('svg');
font-weight: 400; font-weight: 400;

2
app/javascript/styles/mailer.scss
View File

@ -547,7 +547,7 @@ ul.rules-list {
} }
} }
@media (max-width: 697px) { @media (width <= 697px) {
.email-container, .email-container,
.col-1, .col-1,
.col-2, .col-2,

4
app/javascript/styles/mastodon/accounts.scss
View File

@ -33,7 +33,7 @@
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
height: 200px; height: 200px;
} }
} }
@ -158,7 +158,7 @@
color: lighten($inverted-text-color, 10%); color: lighten($inverted-text-color, 10%);
} }
@media screen and (max-width: 700px) { @media screen and (width <= 700px) {
padding: 30px 20px; padding: 30px 20px;
.page { .page {

4
app/javascript/styles/mastodon/admin.scss
View File

@ -1371,7 +1371,7 @@ a.sparkline {
} }
} }
@media screen and (max-width: 930px) { @media screen and (width <= 930px) {
grid-template-columns: minmax(0, 1fr); 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; border: 0;
&__item { &__item {

54
app/javascript/styles/mastodon/components.scss
View File

@ -514,7 +514,7 @@ body > [data-popper-placement] {
outline: 0; outline: 0;
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
} }
@ -535,7 +535,7 @@ body > [data-popper-placement] {
all: unset; all: unset;
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
height: 100px !important; // Prevent auto-resize textarea height: 100px !important; // Prevent auto-resize textarea
resize: vertical; resize: vertical;
} }
@ -2413,7 +2413,7 @@ $ui-header-height: 55px;
display: none; display: none;
} }
@media screen and (min-width: 320px) { @media screen and (width >= 320px) {
.logo--wordmark { .logo--wordmark {
display: block; display: block;
} }
@ -2525,7 +2525,7 @@ $ui-header-height: 55px;
overflow: hidden; overflow: hidden;
} }
@media screen and (min-width: 631px) { @media screen and (width >= 631px) {
.columns-area { .columns-area {
padding: 0; padding: 0;
} }
@ -2585,7 +2585,7 @@ $ui-header-height: 55px;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
@media screen and (min-width: 631px) { @media screen and (width >= 631px) {
background: lighten($ui-base-color, 14%); background: lighten($ui-base-color, 14%);
border-bottom-color: 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 { .tabs-bar__link {
span { span {
display: inline; display: inline;
@ -2825,7 +2825,7 @@ $ui-header-height: 55px;
color: $darker-text-color; color: $darker-text-color;
} }
@media screen and (min-width: 600px) { @media screen and (width >= 600px) {
padding: 40px; padding: 40px;
} }
} }
@ -2935,7 +2935,7 @@ $ui-header-height: 55px;
height: 36px; height: 36px;
color: $dark-text-color; color: $dark-text-color;
@media screen and (min-width: 600px) { @media screen and (width >= 600px) {
display: flex; display: flex;
} }
} }
@ -2987,7 +2987,7 @@ $ui-header-height: 55px;
position: sticky; position: sticky;
background: $ui-base-color; background: $ui-base-color;
@media screen and (min-width: 600) { @media screen and (width >= 600) {
padding: 0 40px; padding: 0 40px;
} }
@ -3255,7 +3255,7 @@ $ui-header-height: 55px;
user-select: none; user-select: none;
} }
@media screen and (min-height: 640px) { @media screen and (height >= 640px) {
display: block; 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) { .trends__item:nth-of-type(3) {
display: none; display: none;
} }
} }
@media screen and (max-height: 720px) { @media screen and (height <= 720px) {
.trends__item:nth-of-type(2) { .trends__item:nth-of-type(2) {
display: none; display: none;
} }
} }
@media screen and (max-height: 670px) { @media screen and (height <= 670px) {
display: none; display: none;
} }
@ -3700,7 +3700,7 @@ $ui-header-height: 55px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
} }
@ -4496,7 +4496,7 @@ a.status-card.compact:hover {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
} }
@ -5831,7 +5831,7 @@ a.status-card.compact:hover {
font-weight: 700; font-weight: 700;
margin-bottom: 15px; margin-bottom: 15px;
@media screen and (max-height: 800px) { @media screen and (height <= 800px) {
font-size: 22px; font-size: 22px;
} }
} }
@ -6018,7 +6018,7 @@ a.status-card.compact:hover {
display: flex; display: flex;
border-top: 1px solid $ui-secondary-color; border-top: 1px solid $ui-secondary-color;
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
flex-wrap: wrap; flex-wrap: wrap;
overflow-y: auto; overflow-y: auto;
} }
@ -6029,7 +6029,7 @@ a.status-card.compact:hover {
box-sizing: border-box; box-sizing: border-box;
width: 50%; width: 50%;
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
width: 100%; width: 100%;
} }
} }
@ -6051,13 +6051,13 @@ a.status-card.compact:hover {
color: $inverted-text-color; color: $inverted-text-color;
} }
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
max-height: 10vh; max-height: 10vh;
} }
} }
.focal-point-modal__content { .focal-point-modal__content {
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
max-height: 40vh; 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; padding: 10px;
max-width: 100%; max-width: 100%;
order: 2; 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; $duration: 400ms;
$delay: 100ms; $delay: 100ms;
@ -7266,7 +7266,7 @@ noscript {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
} }
@ -7357,7 +7357,7 @@ noscript {
width: 380px; width: 380px;
overflow: hidden; overflow: hidden;
@media screen and (max-width: 420px) { @media screen and (width <= 420px) {
width: 90%; width: 90%;
} }
@ -7412,7 +7412,7 @@ noscript {
width: 380px; width: 380px;
overflow: hidden; overflow: hidden;
@media screen and (max-width: 420px) { @media screen and (width <= 420px) {
width: 90%; width: 90%;
} }
@ -7511,7 +7511,7 @@ noscript {
} }
} }
@media screen and (max-width: 480px) { @media screen and (width <= 480px) {
img, img,
video { video {
max-height: 100%; max-height: 100%;
@ -9068,7 +9068,7 @@ noscript {
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
display: block; display: block;
h4 { h4 {

6
app/javascript/styles/mastodon/containers.scss
View File

@ -2,7 +2,7 @@
width: 700px; width: 700px;
margin: 0 auto; margin: 0 auto;
@media screen and (max-width: 740px) { @media screen and (width <= 740px) {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
@ -44,7 +44,7 @@
margin-top: 40px; margin-top: 40px;
box-sizing: border-box; box-sizing: border-box;
@media screen and (max-width: 400px) { @media screen and (width <= 400px) {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
padding: 20px; padding: 20px;
@ -64,7 +64,7 @@
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid $ui-base-color; border-bottom: 1px solid $ui-base-color;
@media screen and (max-width: 440px) { @media screen and (width <= 440px) {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 20px; padding: 20px;

2
app/javascript/styles/mastodon/dashboard.scss
View File

@ -59,7 +59,7 @@
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-gap: 10px; grid-gap: 10px;
@media screen and (max-width: 1350px) { @media screen and (width <= 1350px) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
} }

2
app/javascript/styles/mastodon/forms.scss
View File

@ -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; margin-top: 40px;
} }

2
app/javascript/styles/mastodon/modal.scss
View File

@ -30,7 +30,7 @@
} }
} }
@media screen and (max-width: 600px) { @media screen and (width <= 600px) {
.account-header { .account-header {
margin-top: 0; margin-top: 0;
} }

2
app/javascript/styles/mastodon/statuses.scss
View File

@ -63,7 +63,7 @@
} }
} }
@media screen and (max-width: 740px) { @media screen and (width <= 740px) {
.detailed-status, .detailed-status,
.status, .status,
.load-more { .load-more {

2
app/javascript/styles/mastodon/tables.scss
View File

@ -361,7 +361,7 @@ a.table-action-link {
} }
} }
@media screen and (max-width: 870px) { @media screen and (width <= 870px) {
.accounts-table tbody td.optional { .accounts-table tbody td.optional {
display: none; display: none;
} }