DEV: consolidate mobile stylesheets into common where possible

app/assets/stylesheets/common/admin/admin_report_table.scss

@@ -19,6 +19,9 @@
     margin: 0;
     border: 1px solid var(--primary-low);
     table-layout: fixed;
+    @include breakpoint("mobile-extra-large") {
+      font-size: var(--font-down-1);
+    }
 
     tbody {
       border-top: 0;
@@ -26,11 +29,28 @@
   }
 
   .table .admin-report-table-header {
+    @include breakpoint("mobile-extra-large") {
+      font-weight: 500;
+      border-right: 1px solid var(--primary-low);
+      padding: auto;
+      .title {
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+        text-align: right;
+        transform: rotate(180deg);
+        .emoji {
+          transform: rotate(-180deg);
+        }
+      }
+    }
     .sort-btn {
       outline: none;
       background: none;
       padding: 3px 8px;
       @include ellipsis;
+      @include breakpoint("mobile-extra-large") {
+        display: none;
+      }
     }
 
     &.is-current-sort {
@@ -60,6 +80,9 @@
   .admin-report-table-cell {
     &.user .username {
       margin-left: 0.25em;
+      @include breakpoint("mobile-extra-large") {
+        display: none;
+      }
     }
   }
 

app/assets/stylesheets/common/admin/admin_reports.scss

@@ -7,6 +7,29 @@
       margin-bottom: 1em;
       border-bottom: 1px solid var(--primary-low);
     }
+
+    @include breakpoint(mobile-extra-large) {
+      .body {
+        flex-direction: column;
+
+        .filters {
+          order: 0;
+          margin: 0;
+          width: 100%;
+        }
+
+        .main {
+          order: 2;
+        }
+
+        .report-alert {
+          margin: 0;
+          order: 1;
+          flex: 1 0 0px;
+          padding: 1em;
+        }
+      }
+    }
   }
 
   .admin-report-chart .chart-canvas-container .chart-canvas {

app/assets/stylesheets/common/admin/badges.scss

@@ -1,11 +1,13 @@
 // Styles for admin/badges
 .admin-badges {
   // flex page layout
-
   .badges {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
+    @include breakpoint("mobile-extra-large") {
+      margin: 0 0.25em;
+    }
     .badges-header {
       display: flex;
       align-items: center;
@@ -19,6 +21,10 @@
     }
     .content-list {
       flex: 0 0 27%;
+      @include breakpoint("mobile-extra-large") {
+        flex: 0 0 100%;
+        width: 100%;
+      }
     }
   }
 
@@ -29,6 +35,10 @@
       border-right: 1px solid var(--primary-low);
       border-left: 1px solid var(--primary-low);
       border-bottom: 1px solid var(--primary-low);
+      @include breakpoint("mobile-extra-large") {
+        max-height: 40vh;
+        margin-right: 0;
+      }
       .admin-badge-list-item {
         &:first-child {
           border-top: none;
@@ -77,6 +87,10 @@
 
   .current-badge {
     margin: 20px;
+    @include breakpoint("mobile-extra-large") {
+      margin: 20px 0;
+      width: 100%;
+    }
 
     .form-kit__field-question {
       .form-kit__control-radio-label {
@@ -118,6 +132,12 @@
     padding: 10px;
     border-top: 1px solid var(--primary-low);
   }
+
+  @include breakpoint("mobile-extra-large") {
+    .badge-intro {
+      flex: 0 1 75%;
+    }
+  }
 }
 
 .award-badge {

app/assets/stylesheets/common/admin/customize.scss

@@ -93,19 +93,37 @@
   .admin-container {
     padding-left: 10px;
     padding-right: 10px;
+    @include breakpoint("mobile-extra-large") {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+    }
   }
   .admin-footer {
     margin-top: 20px;
   }
-  .color-schemes li {
+  .color-schemes {
+    @include breakpoint("mobile-extra-large") {
+      ul {
+        max-height: 250px;
+        overflow-x: auto;
+      }
+    }
+
+    li {
       .d-icon {
         margin-right: 0.25em;
         color: var(--primary-medium);
       }
     }
+  }
   .show-current-style {
     display: inline-block;
     vertical-align: top;
+    @include breakpoint("mobile-extra-large") {
+      padding: 0;
+      width: 100%;
+    }
 
     .title {
       font-size: var(--font-up-4);
@@ -682,6 +700,29 @@
     .admin-controls {
       display: block;
     }
+
+    @include breakpoint("mobile-extra-large") {
+      .controls,
+      .admin-controls {
+        width: 100%;
+      }
+      h1,
+      h1 input {
+        width: 100%;
+      }
+      .copy-to-clipboard {
+        display: none;
+      }
+      .sp-replacer {
+        flex-shrink: 0;
+      }
+      td {
+        vertical-align: top;
+      }
+      td.actions {
+        width: 40px;
+      }
+    }
   }
   .colors {
     thead th {
@@ -755,6 +796,14 @@
       }
     }
   }
+
+  @include breakpoint("mobile-extra-large") {
+    .themes-list,
+    .color-schemes {
+      width: 100%;
+      margin-bottom: 1em;
+    }
+  }
 }
 
 .add-upload-modal {

app/assets/stylesheets/common/admin/dashboard.scss

@@ -285,6 +285,9 @@
   display: flex;
   flex: 1 0 0px;
   flex-direction: column;
+  @include breakpoint("mobile-extra-large") {
+    font-size: var(--font-down-1);
+  }
 
   .counters-header {
     display: grid;
@@ -292,7 +295,6 @@
     grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
     border: 1px solid var(--primary-low);
     border-bottom: 0;
-    font-weight: 700;
     text-align: right;
     align-items: center;
     padding: 0.65em 0.25em;
@@ -646,6 +648,12 @@
       margin-left: 1em;
     }
   }
+
+  @include breakpoint("mobile-extra-large") {
+    .section-body {
+      grid-template-columns: none;
+    }
+  }
 }
 
 .whats-new,
@@ -724,5 +732,13 @@
   &__new-feature-version {
     margin-left: auto;
     color: var(--primary-low-mid);
+    @include breakpoint("mobile-extra-large") {
+      font-size: var(--font-down-1);
+    }
+  }
+  @include breakpoint("mobile-extra-large") {
+    h3 {
+      margin-right: 0.5em;
+    }
   }
 }

app/assets/stylesheets/common/base/_index.scss

@@ -28,6 +28,7 @@
 @import "groups";
 @import "header";
 @import "history";
+@import "invite-signup";
 @import "json_schema";
 @import "lightbox";
 @import "login";

app/assets/stylesheets/common/base/alert.scss

@@ -34,6 +34,10 @@
     &.clickable {
       color: var(--tertiary);
       z-index: z("base");
+      @include breakpoint("mobile-extra-large") {
+        margin: 0;
+        padding: 1em;
+      }
     }
   }
 

app/assets/stylesheets/common/base/dialog.scss

@@ -10,6 +10,10 @@
 .dialog-container {
   z-index: z("modal", "dialog");
   display: flex;
+  // fixes modal placement on Android when keyboard is visible
+  html.keyboard-visible:not(.ios-device) & {
+    height: calc(100% - env(keyboard-inset-height));
+  }
 }
 
 /**

app/assets/stylesheets/common/base/directory.scss

@@ -29,6 +29,9 @@
   .directory-controls {
     display: flex;
     justify-content: space-between;
+    @include breakpoint("mobile-extra-large") {
+      display: block;
+    }
     .total-rows {
       color: var(--primary-medium);
       font-weight: normal;
@@ -39,6 +42,18 @@
     margin-bottom: 0.5em;
     color: var(--primary-medium);
     font-size: var(--font-down-1);
+    @include breakpoint("mobile-extra-large") {
+      margin-bottom: 1em;
+    }
+  }
+
+  @include breakpoint("mobile-extra-large") {
+    .period-chooser-header h2.selected-name {
+      font-size: var(--font-up-1);
+    }
+    .filter-name {
+      width: 100%;
+    }
   }
 }
 

app/assets/stylesheets/common/base/discourse.scss

@@ -620,6 +620,7 @@ textarea {
 }
 
 #main {
+  position: relative;
   img.avatar {
     &.header {
       width: 45px;

app/assets/stylesheets/common/base/edit-category.scss

@@ -8,6 +8,9 @@ div.edit-category {
   grid-row-gap: 1em;
   grid-column-gap: 1.5em;
   grid-template-areas: "header header" "sidebar content" "sidebar warning" "sidebar footer";
+  @include breakpoint("mobile-extra-large") {
+    display: block;
+  }
 
   .edit-category-title-bar {
     grid-area: header;
@@ -17,6 +20,21 @@ div.edit-category {
     align-self: start;
     background-color: var(--primary-very-low);
     padding: 20px;
+    @include breakpoint("mobile-extra-large") {
+      justify-content: start;
+      align-items: center;
+      padding-bottom: 1em;
+      .menu-toggle {
+        order: 1;
+        margin-right: 1em;
+      }
+
+      h2 {
+        order: 2;
+        margin-bottom: 0;
+        @include ellipsis;
+      }
+    }
 
     .category-back {
       height: 2em;
@@ -27,13 +45,52 @@ div.edit-category {
   .edit-category-nav {
     grid-area: sidebar;
     grid-row: 2 / span 3;
+    @include breakpoint("mobile-extra-large") {
+      width: 100%;
+      background-color: var(--secondary);
+      position: relative;
+      border-top: 1px solid var(--primary-low);
+      border-bottom: 1px solid var(--primary-low);
+      margin: 0.5em 0;
+      overflow: hidden;
+      &:after {
+        background: linear-gradient(
+          to right,
+          rgba(var(--secondary-rgb), 0),
+          rgba(var(--secondary-rgb), 1)
+        );
+        content: "";
+        position: absolute;
+        right: 0px;
+        height: 100%;
+        width: 30px;
+      }
+    }
     .nav-stacked {
       background-color: var(--secondary);
+      @include breakpoint("mobile-extra-large") {
+        white-space: nowrap;
+        flex-wrap: nowrap;
+        overflow-x: scroll;
+        display: inline-flex;
+        width: 100%;
+        margin-bottom: 0;
+        li {
+          font-size: var(--font-down-1);
+          border-bottom: none;
+        }
+        a.active::after {
+          display: none;
+        }
+      }
     }
   }
 
   .edit-category-content {
     grid-area: content;
+    @include breakpoint("mobile-extra-large") {
+      padding: 0.5em;
+    }
   }
 
   #list-area & h2 {
@@ -158,7 +215,11 @@ div.edit-category {
     display: flex;
     justify-content: space-between;
     align-self: start;
-    padding: 0 1.5em 2em 0;
+    padding-block: 0 2em;
+    padding-inline: 1.5em 0;
+    @include breakpoint("mobile-extra-large") {
+      padding-inline: 0.5em;
+    }
   }
 
   .category-topic-auto-close-hours,

app/assets/stylesheets/common/base/emoji.scss

@@ -49,6 +49,16 @@ sup img.emoji {
   height: 320px;
   max-height: 50vh;
   max-width: 420px;
+  @include breakpoint("mobile-extra-large") {
+    border: none;
+    position: fixed;
+    width: 100%;
+    max-width: 100vh;
+    top: 0;
+    left: 0;
+    border-bottom: 1px solid var(--primary-low);
+    min-height: 50vh;
+  }
 
   img.emoji {
     // custom emojis might import images of various sizes
@@ -119,6 +129,15 @@ sup img.emoji {
         display: none;
       }
     }
+
+    @include breakpoint("mobile-extra-large") {
+      img.emoji {
+        // custom emojis might import images of various sizes
+        // we don't want them to be deformed in the picker
+        width: 28px !important;
+        height: 28px !important;
+      }
+    }
   }
 
   .emoji-picker-category-buttons {

app/assets/stylesheets/common/base/invite-signup.scss

@@ -23,3 +23,17 @@
     padding-bottom: 1em;
   }
 }
+
+@include breakpoint("mobile-extra-large") {
+  .invites-show {
+    box-sizing: border-box;
+    padding: 1em;
+
+    .invitation-cta {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 2rem;
+    }
+  }
+}

app/assets/stylesheets/common/base/lightbox.scss

@@ -7,6 +7,10 @@ $meta-element-margin: 6px;
   &:hover .meta {
     opacity: 0.9;
     transition: opacity 0.5s;
+    @include breakpoint("mobile-extra-large") {
+      opacity: 0.7;
+      transition: none;
+    }
   }
 }
 
@@ -45,6 +49,13 @@ $meta-element-margin: 6px;
   transition: opacity 0.2s;
   display: flex;
   align-items: center;
+  @include breakpoint("mobile-extra-large") {
+    background: var(--secondary);
+    color: var(--primary-high);
+    height: 25px;
+    width: 25px;
+    right: 0;
+  }
 
   .filename {
     margin: $meta-element-margin;
@@ -68,6 +79,17 @@ $meta-element-margin: 6px;
     flex-shrink: 0;
     flex-grow: 3;
   }
+
+  @include breakpoint("mobile-extra-large") {
+    .filename,
+    .informations,
+    .d-icon-far-image {
+      display: none;
+    }
+    .d-icon-discourse-expand {
+      color: var(--primary-high);
+    }
+  }
 }
 
 .mfp-preloader .spinner {

app/assets/stylesheets/common/base/menu-panel.scss

@@ -111,6 +111,15 @@
     flex: 0;
   }
 
+  @include breakpoint("mobile-extra-large") {
+    .panel-body-contents {
+      height: 100%;
+      .quick-access-panel li {
+        padding-block: 0.15em;
+      }
+    }
+  }
+
   .menu-tabs-container {
     display: flex;
     flex-direction: column;
@@ -129,6 +138,9 @@
       position: relative;
       border-radius: 0;
       padding: 0.857em;
+      @include breakpoint("mobile-extra-large") {
+        padding: 1.2em 1.4em;
+      }
       @media screen and (max-height: 400px) {
         // helps with 400% zoom level
         font-size: var(--font-down-1);

app/assets/stylesheets/common/base/reviewables.scss

@@ -34,6 +34,9 @@
     display: flex;
     flex-direction: row;
     margin-top: 1em;
+    @include breakpoint("mobile-extra-large") {
+      flex-direction: column;
+    }
 
     .reviewable-list {
       flex: 1;
@@ -41,16 +44,42 @@
       max-width: 760px; // Match topic post width
       min-width: 0;
       margin-right: auto;
+      @include breakpoint("mobile-extra-large") {
+        order: 2;
+        width: 100%;
+        padding-bottom: 4em;
+      }
     }
 
     .reviewable-filters {
       width: 250px;
       height: 100%;
       box-sizing: border-box;
+      @include breakpoint("mobile-extra-large") {
+        order: 1;
+        margin: 0;
+        padding: 0.5em;
+        width: 100%;
+        background-color: var(--primary-very-low);
+        padding: 0.5em 1em 1em 1em;
+        margin-bottom: 1em;
+        .reviewable-filters-actions {
+          display: flex;
+          justify-content: space-between;
+        }
+        .reviewable-filter {
+          .filter-label {
+            margin: 0;
+          }
+        }
+      }
     }
 
     .reviewable-list + .reviewable-filters {
       margin-left: 1em;
+      @include breakpoint("mobile-extra-large") {
+        margin: 0 0 0.5em 0;
+      }
     }
   }
 }
@@ -218,7 +247,7 @@
 
 .reviewable-item {
   background: var(--primary-very-low);
-  padding: 1.5rem;
+  padding: 1.5rem 1.5rem 1rem 1.5rem;
 
   .topic-statuses {
     font-size: var(--font-up-2);
@@ -270,6 +299,15 @@
     margin: 1.5rem 0 1rem;
     background: var(--secondary);
     padding: 1rem;
+    @include breakpoint("mobile-extra-large") {
+      .reviewable-post-header,
+      .post-body {
+        max-width: 100%;
+        p {
+          overflow-x: scroll;
+        }
+      }
+    }
   }
 
   .reviewable-actions {
@@ -277,6 +315,17 @@
     flex-wrap: wrap;
     gap: 0.5rem;
     width: 100%;
+    @include breakpoint("mobile-extra-large") {
+      margin-right: -0.5em;
+      margin-bottom: 0.5em;
+      > div,
+      > button {
+        margin-right: 0.25em;
+      }
+      .btn.reviewable-action {
+        margin-bottom: 0;
+      }
+    }
 
     button {
       white-space: nowrap;
@@ -297,8 +346,20 @@
     .reviewable-action-dropdown {
       margin-right: 0.5em;
     }
+
+    @include breakpoint("mobile-extra-large") {
+      .reviewable-action,
+      .reviewable-action-dropdown .dropdown-select-box-header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .d-icon {
+          margin: 0 0.15 0 0;
+        }
+      }
+    }
   }
-  padding-bottom: 1em;
 }
 
 .reviewable-stale {
@@ -325,11 +386,27 @@
   margin-top: 1rem;
   min-width: 50%;
   color: var(--primary-high);
+  @include breakpoint("mobile-extra-large") {
+    display: flex;
+    width: 100%;
+    overflow-x: scroll;
+    border-top: 1px solid var(--primary-low);
+  }
 
   &__table-wrapper {
     overflow-x: scroll;
   }
 
+  @include breakpoint("mobile-extra-large") {
+    thead {
+      tr {
+        display: flex;
+        flex-direction: column;
+        border: 0;
+      }
+    }
+  }
+
   th {
     white-space: nowrap;
   }
@@ -371,6 +448,17 @@
 
   tbody {
     border-width: 1px;
+    @include breakpoint("mobile-extra-large") {
+      display: flex;
+      border: 0;
+      .reviewable-score {
+        display: flex;
+        flex-direction: column;
+      }
+      tr {
+        border: 0;
+      }
+    }
     td {
       white-space: nowrap;
       vertical-align: baseline;
@@ -396,6 +484,12 @@
   }
 }
 
+@include breakpoint("mobile-extra-large") {
+  .reviewable-scores-and-history table {
+    width: 100%;
+  }
+}
+
 .reviewable-score-reason {
   margin: 0.5em 0;
   max-width: var(--topic-body-width);

app/assets/stylesheets/common/base/sidebar.scss

@@ -9,6 +9,9 @@
   --d-sidebar-row-horizontal-padding: 1rem;
   // ems so height is variable along with font size
   --d-sidebar-row-height: 2.2em;
+  @include breakpoint(mobile-extra-large) {
+    --d-sidebar-row-height: 2.4em;
+  }
 
   --d-sidebar-background: var(--secondary);
   --d-sidebar-admin-background: var(--primary-very-low);
@@ -177,9 +180,11 @@
   .row-wrapper {
     display: grid;
     grid-template-columns: 2em 4.5em repeat(2, 1fr) 2em;
+    @include breakpoint(mobile-extra-large) {
+      grid-template-columns: 4.5em repeat(2, 1fr) 2em;
+    }
     padding: 0.55em 0 0.7em;
     -webkit-user-drag: none;
-    user-drag: none;
     cursor: default;
     border-top: 2px solid transparent;
     border-bottom: 2px solid transparent;
@@ -201,6 +206,9 @@
     }
     .link-icon {
       grid-column: 2;
+      @include breakpoint(mobile-extra-large) {
+        grid-column: 1;
+      }
     }
 
     .input-group {

app/assets/stylesheets/common/components/more-topics.scss

@@ -6,6 +6,10 @@
   .nav {
     margin-block: 0;
     top: 2px;
+    @include breakpoint(mobile-extra-large) {
+      margin-block: 0 7px;
+      border-bottom: 1px solid var(--primary-low);
+    }
     li {
       .btn {
         color: var(--primary);
@@ -70,4 +74,19 @@
   .more-topics__browse-more {
     padding-left: 0.5em;
   }
+
+  @include breakpoint("mobile-extra-large") {
+    .more-content-topics {
+      padding: 15px 0 15px 0;
+
+      .badge-category,
+      .badge-category-parent {
+        font-size: var(--font-down-1);
+        vertical-align: top;
+      }
+      .suggested-topics-message {
+        margin-top: 1em;
+      }
+    }
+  }
 }

app/assets/stylesheets/common/components/signup-progress-bar.scss

@@ -1,12 +1,24 @@
 $progress-bar-line-width: 2px;
 $progress-bar-circle-size: 1.2rem;
 $progress-bar-icon-size: 0.8rem;
+@include breakpoint(mobile-extra-large) {
+  $progress-bar-circle-size: 0.5rem;
+}
 
 .signup-progress-bar {
   width: 100%;
   display: flex;
   box-sizing: border-box;
   margin-bottom: 1.2em;
+  @include breakpoint(mobile-extra-large) {
+    width: auto;
+    margin: 1.5rem 1.2rem;
+    gap: 1rem;
+    .account-created &,
+    .activate-account & {
+      margin-inline: 0;
+    }
+  }
 
   &__segment {
     width: 100%;
@@ -14,6 +26,9 @@ $progress-bar-icon-size: 0.8rem;
     flex-direction: column;
     gap: 0.5rem;
     color: var(--primary-low-mid);
+    @include breakpoint(mobile-extra-large) {
+      width: auto;
+    }
 
     &:first-child .signup-progress-bar__circle {
       transform: translateX(50%);
@@ -80,11 +95,20 @@ $progress-bar-icon-size: 0.8rem;
     border-radius: 50%;
     border: $progress-bar-line-width solid var(--primary-low-mid);
     background-color: var(--secondary);
+    @include breakpoint("mobile-extra-large") {
+      height: $progress-bar-circle-size;
+      width: $progress-bar-circle-size;
+      transform: none !important;
+    }
 
     .--active & {
       border-color: var(--success);
       background: var(--success);
       box-shadow: 0 0 1px 5px var(--success-low);
+      @include breakpoint("mobile-extra-large") {
+        background: var(--success);
+        box-shadow: 0 0 1px 5px var(--success-low);
+      }
     }
     .--completed & {
       background-color: var(--success);
@@ -95,4 +119,11 @@ $progress-bar-icon-size: 0.8rem;
   &__line.--completed {
     background-color: var(--success);
   }
+
+  &__step-text,
+  &__line {
+    @include breakpoint("mobile-extra-large") {
+      display: none;
+    }
+  }
 }

app/assets/stylesheets/common/components/topic-map.scss

@@ -392,6 +392,12 @@ body:not(.archetype-private_message) {
           background: var(--d-hover);
         }
       }
+
+      @include breakpoint("mobile-extra-large") {
+        a {
+          padding: 0;
+        }
+      }
     }
 
     .topic-link {

app/assets/stylesheets/common/components/user-stream-item.scss

@@ -126,6 +126,9 @@
     font-size: var(--font-0);
     max-width: 400px;
     @include ellipsis;
+    @include breakpoint("mobile-extra-large") {
+      vertical-align: middle;
+    }
   }
 
   .edit-reason {
@@ -159,6 +162,11 @@
 
   .group-member-info {
     display: flex;
+    @include breakpoint("mobile-extra-large") {
+      .name {
+        vertical-align: inherit;
+      }
+    }
   }
 }
 

app/assets/stylesheets/common/components/welcome-header.scss

@@ -1,24 +1,35 @@
 .login-welcome-header {
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;
   overflow-wrap: anywhere;
 
   .login-title {
-    font-size: var(--font-up-6);
     margin: 0;
     line-height: var(--line-height-medium);
+    font-size: var(--font-up-6);
+    @include breakpoint(mobile-extra-large) {
+      font-size: var(--font-up-5);
+    }
   }
 
   .login-subheader {
-    font-size: var(--font-up-1);
     margin: 0;
+    font-size: var(--font-up-1);
+    @include breakpoint(mobile-extra-large) {
+      font-size: var(--font-0);
+    }
   }
 
   .waving-hand {
-    width: 35px;
-    height: 35px;
     margin-left: 0.5em;
     align-self: center;
+    width: 35px;
+    height: 35px;
+    @include breakpoint(mobile-extra-large) {
+      width: 30px;
+      height: 30px;
+    }
   }
 }

app/assets/stylesheets/desktop/_index.scss

@@ -3,7 +3,6 @@
 @import "compose";
 @import "discourse";
 @import "header";
-@import "invite-signup";
 @import "latest-topic-list";
 @import "menu-panel";
 @import "modal";

app/assets/stylesheets/desktop/header.scss

@@ -22,10 +22,6 @@
   }
 }
 
-#main {
-  position: relative;
-}
-
 .search-link .blurb {
   color: var(--secondary-medium);
   display: block;

app/assets/stylesheets/mobile/_index.scss

@@ -1,21 +1,6 @@
-@import "admin_badges";
-@import "admin_customize";
-@import "admin_flags";
-@import "admin_report_counters";
-@import "admin_report_table";
-@import "admin_report";
-@import "admin_reports";
-@import "alert";
 @import "compose";
-@import "dashboard";
-@import "dialog";
-@import "directory";
 @import "discourse";
-@import "edit-category";
-@import "emoji";
 @import "header";
-@import "invite-signup";
-@import "lightbox";
 @import "menu-panel";
 @import "list-controls";
 @import "login-modal";
@@ -26,9 +11,6 @@
 @import "personal-message";
 @import "post-action-feedback";
 @import "push-notifications-mobile";
-@import "reviewables";
-@import "sidebar";
-@import "signup-progress-bar";
 @import "topic-list";
 @import "topic-post";
 @import "topic";

app/assets/stylesheets/mobile/admin_badges.scss

@@ -1,37 +0,0 @@
-.mobile-view {
-  .admin-badges {
-    .badges {
-      margin: 0 0.25em;
-      .content-list {
-        flex: 0 0 100%;
-        width: 100%;
-        .admin-badge-list {
-          max-height: 40vh;
-          margin-right: 0;
-        }
-      }
-    }
-    .badge-intro {
-      flex: 0 1 75%;
-    }
-    .current-badge {
-      margin: 20px 0;
-      width: 100%;
-      textarea {
-        width: 100%;
-      }
-    }
-    input[type="text"] {
-      width: 100%;
-    }
-  }
-
-  .badges-header .create-new-badge .btn-default {
-    .d-button-label {
-      display: none;
-    }
-    .d-icon {
-      margin-right: 0;
-    }
-  }
-}

app/assets/stylesheets/mobile/admin_customize.scss

@@ -1,49 +0,0 @@
-body .admin-customize {
-  .show-current-style {
-    padding: 0;
-    width: 100%;
-  }
-
-  .themes-list,
-  .color-schemes {
-    width: 100%;
-    margin-bottom: 1em;
-  }
-
-  .admin-container {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-  }
-
-  .content-list.color-schemes ul {
-    max-height: 250px;
-    overflow-x: auto;
-  }
-
-  .color-scheme {
-    h1,
-    h1 input {
-      width: 100%;
-    }
-    .copy-to-clipboard {
-      display: none;
-    }
-
-    .controls,
-    .admin-controls {
-      width: 100%;
-    }
-
-    .sp-replacer {
-      flex-shrink: 0;
-    }
-
-    td {
-      vertical-align: top;
-    }
-    td.actions {
-      width: 40px;
-    }
-  }
-}

app/assets/stylesheets/mobile/admin_flags.scss

@@ -1,7 +0,0 @@
-.admin-contents table.grid tr.admin-flag-item {
-  grid-template-columns: auto min-content;
-
-  .d-toggle-switch {
-    margin-right: 0;
-  }
-}

app/assets/stylesheets/mobile/admin_report.scss

@@ -1,21 +0,0 @@
-.admin-report.post-edits {
-  .admin-report-table {
-    .report-table {
-      thead tr th.edit_reason,
-      tbody tr td.edit_reason {
-        width: auto;
-      }
-    }
-  }
-}
-
-.admin-report.trending-search {
-  .admin-report-table {
-    .report-table {
-      thead tr th.term,
-      tbody tr td.term {
-        width: 50%;
-      }
-    }
-  }
-}

app/assets/stylesheets/mobile/admin_report_counters.scss

@@ -1,5 +0,0 @@
-.counters-list {
-  .counters-header .counters-cell {
-    font-weight: normal;
-  }
-}

app/assets/stylesheets/mobile/admin_report_table.scss

@@ -1,32 +0,0 @@
-.admin-report-table {
-  .table {
-    font-size: var(--font-down-1);
-  }
-
-  .table .admin-report-table-header {
-    font-weight: 500;
-    border-right: 1px solid var(--primary-low);
-    padding: auto;
-
-    .title {
-      writing-mode: vertical-rl;
-      text-orientation: mixed;
-      text-align: right;
-      transform: rotate(180deg);
-
-      .emoji {
-        transform: rotate(-180deg);
-      }
-    }
-
-    .sort-btn {
-      display: none;
-    }
-  }
-
-  .table tbody tr td {
-    &.user .username {
-      display: none;
-    }
-  }
-}

app/assets/stylesheets/mobile/admin_reports.scss

@@ -1,24 +0,0 @@
-.admin-reports {
-  .admin-report {
-    .body {
-      flex-direction: column;
-
-      .filters {
-        order: 0;
-        margin: 0;
-        width: 100%;
-      }
-
-      .main {
-        order: 2;
-      }
-
-      .report-alert {
-        margin: 0;
-        order: 1;
-        flex: 1 0 0px;
-        padding: 1em;
-      }
-    }
-  }
-}

app/assets/stylesheets/mobile/alert.scss

@@ -1,7 +0,0 @@
-.alert.alert-info {
-  &.clickable {
-    // there are (n) new or updated topics, click to show
-    margin: 0;
-    padding: 1em;
-  }
-}

app/assets/stylesheets/mobile/components/_index.scss

@@ -1,7 +1,2 @@
-@import "bookmark-menu";
-@import "more-topics";
 @import "topic-footer-mobile-dropdown";
-@import "topic-map";
 @import "user-card";
-@import "user-stream-item";
-@import "welcome-header";

app/assets/stylesheets/mobile/components/more-topics.scss

@@ -1,19 +0,0 @@
-.more-topics__container {
-  .nav {
-    margin-block: 0 7px;
-    border-bottom: 1px solid var(--primary-low);
-  }
-
-  .more-content-topics {
-    padding: 15px 0 15px 0;
-
-    .badge-category,
-    .badge-category-parent {
-      font-size: var(--font-down-1);
-      vertical-align: top;
-    }
-    .suggested-topics-message {
-      margin-top: 1em;
-    }
-  }
-}

app/assets/stylesheets/mobile/components/topic-map.scss

@@ -1,9 +0,0 @@
-.fk-d-menu-modal {
-  &.topic-map__links-content {
-    li {
-      a {
-        padding: 0;
-      }
-    }
-  }
-}

app/assets/stylesheets/mobile/components/user-stream-item.scss

@@ -1,12 +0,0 @@
-// Mobile styles for "user-stream-item" component
-.user-stream {
-  .name {
-    vertical-align: middle;
-  }
-
-  .group-member-info {
-    .name {
-      vertical-align: inherit;
-    }
-  }
-}

app/assets/stylesheets/mobile/components/welcome-header.scss

@@ -1,16 +0,0 @@
-.login-welcome-header {
-  box-sizing: border-box;
-
-  .login-title {
-    font-size: var(--font-up-5);
-  }
-
-  .login-subheader {
-    font-size: var(--font-0);
-  }
-
-  .waving-hand {
-    width: 30px;
-    height: 30px;
-  }
-}

app/assets/stylesheets/mobile/dashboard.scss

@@ -1,32 +0,0 @@
-.dashboard-next {
-  .activity-metrics .counters-list {
-    font-size: var(--font-down-1);
-  }
-  .navigation a.navigation-link {
-    padding: 0.4em;
-    font-size: var(--font-down-1);
-    .emoji {
-      width: 1.3em;
-      height: 1.3em;
-      margin-right: 0;
-    }
-  }
-  .dashboard-new-features .section-body {
-    grid-template-columns: none;
-  }
-
-  .admin-new-feature-item {
-    &__new-feature-emoji {
-      padding-left: 0em;
-    }
-  }
-}
-
-.admin-new-feature-item {
-  h3 {
-    margin-right: 0.5em;
-  }
-  &__new-feature-version {
-    font-size: var(--font-down-1);
-  }
-}

app/assets/stylesheets/mobile/dialog.scss

@@ -1,6 +0,0 @@
-.dialog-container {
-  // fixes modal placement on Android when keyboard is visible
-  html.keyboard-visible:not(.ios-device) & {
-    height: calc(100% - env(keyboard-inset-height));
-  }
-}

app/assets/stylesheets/mobile/directory.scss

@@ -1,24 +0,0 @@
-.directory {
-  .period-chooser .period-chooser-header h2.selected-name {
-    font-size: var(--font-up-1);
-  }
-
-  &.users-directory {
-    .filter-name {
-      width: 100%;
-    }
-
-    .directory-last-updated {
-      margin-bottom: 1em;
-    }
-  }
-
-  .directory-controls {
-    display: block;
-  }
-
-  .total-rows {
-    color: var(--primary-medium);
-    padding: 5px;
-  }
-}

app/assets/stylesheets/mobile/discourse.scss

@@ -116,11 +116,6 @@ blockquote {
 
 // Special elements
 
-#main-outlet-wrapper {
-  margin-left: unset;
-  margin-right: unset;
-}
-
 #main-outlet {
   padding-top: 1.25em;
   &:after {
@@ -130,7 +125,3 @@ blockquote {
     transition: opacity 0.2s;
   }
 }
-
-#main {
-  position: relative;
-}

app/assets/stylesheets/mobile/edit-category.scss

@@ -1,66 +0,0 @@
-div.edit-category {
-  display: block;
-
-  .edit-category-nav {
-    width: 100%;
-    background-color: var(--secondary);
-    position: relative;
-    border-top: 1px solid var(--primary-low);
-    border-bottom: 1px solid var(--primary-low);
-    margin: 0.5em 0;
-    overflow: hidden;
-    &:after {
-      background: linear-gradient(
-        to right,
-        rgba(var(--secondary-rgb), 0),
-        rgba(var(--secondary-rgb), 1)
-      );
-      content: "";
-      position: absolute;
-      right: 0px;
-      height: 100%;
-      width: 30px;
-    }
-  }
-
-  .nav-stacked {
-    white-space: nowrap;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    display: inline-flex;
-    width: 100%;
-    margin-bottom: 0;
-    li {
-      font-size: var(--font-down-1);
-      border-bottom: none;
-    }
-    a.active::after {
-      display: none;
-    }
-  }
-
-  .edit-category-title-bar {
-    justify-content: start;
-    align-items: center;
-    padding-bottom: 1em;
-
-    .menu-toggle {
-      order: 1;
-      margin-right: 1em;
-    }
-
-    h2 {
-      order: 2;
-      margin-bottom: 0;
-      @include ellipsis;
-    }
-  }
-
-  .edit-category-content {
-    padding: 0.5em;
-  }
-
-  .edit-category-footer {
-    padding: 0 0.5em 2em 0.5em;
-  }
-}

app/assets/stylesheets/mobile/emoji.scss

@@ -1,18 +0,0 @@
-.emoji-picker {
-  border: none;
-  position: fixed;
-  width: 100%;
-  max-width: 100vh;
-  top: 0;
-  left: 0;
-  border-bottom: 1px solid var(--primary-low);
-  min-height: 50vh;
-  .emoji-picker-emoji-area {
-    img.emoji {
-      // custom emojis might import images of various sizes
-      // we don't want them to be deformed in the picker
-      width: 28px !important;
-      height: 28px !important;
-    }
-  }
-}

app/assets/stylesheets/mobile/invite-signup.scss

@@ -1,11 +0,0 @@
-.invites-show {
-  box-sizing: border-box;
-  padding: 1em;
-
-  .invitation-cta {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-top: 2rem;
-  }
-}

app/assets/stylesheets/mobile/lightbox.scss

@@ -1,25 +0,0 @@
-.lightbox .meta,
-.lightbox:hover .meta {
-  opacity: 0.7;
-  transition: none;
-}
-
-.meta {
-  align-items: center;
-  background: var(--secondary);
-  color: var(--primary-high);
-  height: 25px;
-  width: 25px;
-  bottom: 0;
-  right: 0;
-
-  .filename,
-  .informations,
-  .d-icon-far-image {
-    display: none;
-  }
-
-  .d-icon-discourse-expand {
-    color: var(--primary-high);
-  }
-}

app/assets/stylesheets/mobile/menu-panel.scss

@@ -1,22 +1,3 @@
-.panel-body-contents {
-  // 2em padding very useful for iOS Safari's overlayed bottom nav
-  // padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
-
-  .user-menu.revamped & {
-    height: 100%;
-
-    .quick-access-panel li {
-      padding-block: 0.15em;
-    }
-  }
-}
-
-.tabs-list .btn {
-  .user-menu.revamped & {
-    padding: 1.2em 1.4em;
-  }
-}
-
 .hamburger-panel .revamped {
   --d-sidebar-row-horizontal-padding: 1rem;
   --d-sidebar-highlight-backgrond: var(--primary-low);

app/assets/stylesheets/mobile/reviewables.scss

@@ -1,110 +0,0 @@
-.reviewable {
-  .reviewable-container {
-    flex-direction: column;
-
-    .reviewable-list {
-      order: 2;
-      width: 100%;
-      padding-bottom: 4em;
-    }
-
-    .reviewable-filters {
-      order: 1;
-      margin: 0;
-      padding: 0.5em;
-      width: 100%;
-    }
-
-    .reviewable-list + .reviewable-filters {
-      margin: 0 0 0.5em 0;
-    }
-  }
-
-  .reviewable-scores {
-    display: flex;
-    width: 100%;
-    overflow-x: scroll;
-    border-top: 1px solid var(--primary-low);
-    thead {
-      tr {
-        display: flex;
-        flex-direction: column;
-        border: 0;
-      }
-    }
-
-    tbody {
-      display: flex;
-      border: 0;
-
-      .reviewable-score {
-        display: flex;
-        flex-direction: column;
-      }
-      tr {
-        border: 0;
-      }
-
-      td {
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-.reviewable-filters {
-  background-color: var(--primary-very-low);
-  padding: 0.5em 1em 1em 1em;
-  margin-bottom: 1em;
-
-  .reviewable-filters-actions {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .reviewable-filter {
-    .filter-label {
-      margin: 0;
-    }
-  }
-}
-
-.reviewable-contents {
-  .reviewable-post-header,
-  .post-body {
-    max-width: 100%;
-
-    p {
-      overflow-x: scroll;
-    }
-  }
-}
-
-.reviewable-actions {
-  margin-right: -0.5em;
-  margin-bottom: 0.5em;
-
-  > div,
-  > button {
-    margin-right: 0.25em;
-  }
-
-  .btn.reviewable-action {
-    margin-bottom: 0;
-  }
-
-  .reviewable-action,
-  .reviewable-action-dropdown .dropdown-select-box-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .d-icon {
-      margin: 0 0.15 0 0;
-    }
-  }
-}
-
-.reviewable-scores-and-history table {
-  width: 100%;
-}

app/assets/stylesheets/mobile/sidebar.scss

@@ -1,12 +0,0 @@
-:root {
-  --d-sidebar-row-height: 2.4em;
-}
-
-.sidebar-section-form-modal {
-  .row-wrapper {
-    grid-template-columns: 4.5em repeat(2, 1fr) 2em;
-    .link-icon {
-      grid-column: 1;
-    }
-  }
-}

app/assets/stylesheets/mobile/signup-progress-bar.scss

@@ -1,30 +0,0 @@
-$progress-bar-circle-size: 0.5rem;
-
-.signup-progress-bar {
-  width: auto;
-  margin: 1.5rem 1.2rem;
-  gap: 1rem;
-
-  .account-created &,
-  .activate-account & {
-    margin-inline: 0;
-  }
-
-  &__segment {
-    width: auto;
-  }
-  &__circle {
-    height: $progress-bar-circle-size;
-    width: $progress-bar-circle-size;
-    transform: none !important;
-    .--active & {
-      background: var(--success);
-      box-shadow: 0 0 1px 5px var(--success-low);
-    }
-  }
-
-  &__step-text,
-  &__line {
-    display: none;
-  }
-}