orcashub-discourse-theme/mobile/mobile.scss

@import "chat-mobile";

.top-header-image {
    height: 80px;
    width: 154px;
    background-size: 154px 80px;
}

.custom-search-banner-wrap {
  h1 {
    font-size: 2.5em !important;
  }

  p {
    font-weight: normal;
    font-size: $font-up-1;
  }
}

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

#main-outlet {
  margin-inline: auto;
}

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: 0;
  width: calc(100% - 3em);
  background-color: var(--secondary);
  margin-bottom: 0;
}

html body.navigation-category #main-outlet {
  width: calc(100% - 1em) !important;
}

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

.navigation-categories .navigation-container,
.categories-list .navigation-container {
  border-bottom: 0 !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: 0 0 12px rgba(0, 0, 0, 0.25);
  }
}

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

.topic-list .topic-list-data .main-link {
  width: 90%;
}

.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: 0 0 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 {
  display: none;
}

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

.topic-list-item {
  > .topic-list-data {
    width: 100%;
  }

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

.list-controls .nav-pills .list-control-toggle-link-trigger {
  color: var(--secondary);
}

// Hide the "4/7" topic navigation when on mobile since it's always stuck to the bottom anyway.
.topic-navigation {
  display: none !important;
}

// Footer
.custom-footer {
    .list {
        margin: 2rem 0;
    }
}

// Community Resources Category
.category-resources {

    // Topic List

    .topic-list-data {
        .right {
            margin-left: 0 !important;
            display: flex;
            align-items: center;
        }
    }

    // Topic Post

    .topic-avatar,
    .topic-meta-data {
        display: none !important;
    }
}