31 files changed, 88 insertions(+), 90 deletions(-)

M app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
M app/javascript/flavours/glitch/styles/accessibility.scss
M app/javascript/flavours/glitch/styles/accounts.scss
M app/javascript/flavours/glitch/styles/admin.scss
M app/javascript/flavours/glitch/styles/components/about.scss
M app/javascript/flavours/glitch/styles/components/accounts.scss
M app/javascript/flavours/glitch/styles/components/columns.scss
M app/javascript/flavours/glitch/styles/components/doodle.scss
M app/javascript/flavours/glitch/styles/components/drawer.scss
M app/javascript/flavours/glitch/styles/components/lists.scss
M app/javascript/flavours/glitch/styles/components/local_settings.scss
M app/javascript/flavours/glitch/styles/components/misc.scss
M app/javascript/flavours/glitch/styles/components/modal.scss
M app/javascript/flavours/glitch/styles/components/single_column.scss
M app/javascript/flavours/glitch/styles/containers.scss
M app/javascript/flavours/glitch/styles/dashboard.scss
M app/javascript/flavours/glitch/styles/forms.scss
M app/javascript/flavours/glitch/styles/modal.scss
M app/javascript/flavours/glitch/styles/statuses.scss
M app/javascript/flavours/glitch/styles/tables.scss
M app/javascript/styles/fonts/roboto-mono.scss
M app/javascript/styles/mailer.scss
M app/javascript/styles/mastodon/accounts.scss
M app/javascript/styles/mastodon/admin.scss
M app/javascript/styles/mastodon/components.scss
M app/javascript/styles/mastodon/containers.scss
M app/javascript/styles/mastodon/dashboard.scss
M app/javascript/styles/mastodon/forms.scss
M app/javascript/styles/mastodon/modal.scss
M app/javascript/styles/mastodon/statuses.scss
M app/javascript/styles/mastodon/tables.scss

@@ 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 (
       <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)}
         </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)}
         </button>
 
-        <button onClick={this.props.onInvert}>
+        <button onClick={this.props.onInvert} className='column-header__button'>
           <b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
         </button>
 
-        <button onClick={this.props.onDeleteMarked}>
+        <button onClick={this.props.onDeleteMarked} className='column-header__button'>
           <Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
         </button>
       </div>

@@ 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;
   }
 }
 

@@ 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 {

@@ 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 {

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

@@ 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;

@@ 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;
       }
     }

@@ 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;

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

@@ 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%;
   }
 

@@ 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;

@@ 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;
     }
 

@@ 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%;

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

@@ 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;

@@ 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);
   }
 

@@ 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;
   }
 

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

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

@@ 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;
     }

@@ 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;

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

@@ 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 {

@@ 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 {

@@ 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 {

@@ 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;

@@ 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);
   }
 

@@ 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;
   }
 

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

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

@@ 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;
     }