mobile.scss

@import "chat-mobile";

.custom-search-banner-wrap {
  h1 {
    font-size: 2.5em !important;
  }
  p {
    font-weight: normal;
    font-size: $font-up-1;
  }
}

html
  body:not(.static-tos):not(.static-faq):not(.static-privacy):not(
    .about-page
  ):not(.static-faq):not(.badges-page):not(.tags-page):not(
    .archetype-banner
  ):not(.archetype-regular):not(.archetype-private_message):not(
    .admin-interface
  ):not(.edit-category):not(.user-summary-page):not(.user-activity-page):not(
    .user-invites-page
  ):not(.user-preferences-page):not(.user-messages-page):not(
    .user-notifications-page
  ):not(.user-badges-page)
  #main-outlet {
  width: calc(100% - 1em);
  padding: 0em 0.5em 1em 0.5em;
  box-shadow: none;
  background-color: transparent;
}

html body #main-outlet .docs {
  padding: 1em;
  background-color: var(--secondary);
}

html body.static-tos #main-outlet,
html body.no-ember #main-outlet,
html body.static-privacy #main-outlet,
html body.about-page #main-outlet,
html body.static-faq #main-outlet,
html body.tags-page #main-outlet,
html body.badges-page #main-outlet,
html body.archetype-banner #main-outlet,
html body.archetype-regular #main-outlet,
html body.archetype-private_message #main-outlet,
html body.admin-interface #main-outlet,
html body.user-summary-page #main-outlet,
html body.user-activity-page #main-outlet,
html body.user-invites-page #main-outlet,
html body.user-preferences-page #main-outlet,
html body.user-messages-page #main-outlet,
html body.user-notifications-page #main-outlet,
html body.user-badges-page #main-outlet,
html body.staff:not(.navigation-topics) #main-outlet {
  border-radius: 0px;
  width: calc(100% - 3em);
  background-color: var(--secondary);
  margin-bottom: 0px;
}

.container.posts > .row {
  max-width: calc(100vw - 1.5em);
}

.navigation-categories .navigation-container,
.categories-list .navigation-container {
  border-bottom: 0px !important;
}

body.category .category-breadcrumb .select-kit-header,
#navigation-bar,
.navigation-controls {
  margin-bottom: 0.5em !important;
}

body.category .navigation-categories .list-container,
.categories-list .list-container {
  padding-top: 1em !important;
}

ol.category-breadcrumb {
  margin-top: 1em;
}

.categories-list .list-controls {
  background: var(--secondary);
  padding: 0.5em;
  border-radius: 8px;
}

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }
  .drop {
    top: calc(100% + 0.5em);
    border-radius: 8px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
  }
}

.topic-list .topic-list-data {
  padding: 1em 1em 0 1em;
  max-width: unset;
}

.custom-search-banner-wrap .search-context {
  top: 3em !important;
}

.top-lists {
  background-color: var(--secondary);
  border-radius: 8px;
  padding: 0.25em 0.25em 0.25em 0.5em;
  margin-bottom: 0.5em;
}

.users-directory.directory,
.reviewable {
  width: 100%;
  background-color: var(--secondary);
  margin-left: -0.5em;
  padding: 0 0.5em;
}

.tag-groups-container {
  background: var(--secondary);
  padding: 2em 1em;
  border-radius: 0.25em;
  margin-top: 1em;
}

.search-container .search-advanced .search-results {
  padding: none;
}

.fps-result {
  background: var(--secondary);
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  margin-bottom: 0.5em;
}

.search-container .search-header {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.search-container .search-advanced .search-info {
  padding-right: 1em;
  padding-left: 1em;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.full-width .contents .topic-list .topic-list-header tr {
  background-color: var(--secondary);
  border-radius: 8px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  margin-bottom: 1em;
}

.topic-list .topic-item-stats {
  flex-wrap: wrap;
}

.topic-list-item .discourse-tags {
  order: 3;
  width: 100%;
  margin-top: 0.5em;
}

.full-width .contents .topic-list .topic-list-item .posts-map {
  padding: 0;
  .number {
    margin: 0;
  }
}

.full-width
  .contents
  .topic-list
  .topic-list-body
  .topic-list-item
  .topic-list-data.posts {
  width: unset;
}

.topic-list .topic-list-header .topic-list-data,
.topic-list .topic-list-item .topic-list-data {
  padding: 15px;
}

// default category list styles when the modern category boxes theme component isn't used

.category-list-item.category {
  background: var(--secondary);
  border-radius: 1em;
  tbody {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  td {
    width: 100%;
  }
  .num.posts {
    padding-right: 0.25em;
  }
}