discourse-themes/themes/23_material_design_theme/desktop_scss.scss

@use "sass:color";
@import "common/foundation/variables";

@mixin boxShadow {
  box-shadow:
    0 2px 5px 0 rgb(0, 0, 0, 0.16),
    0 0 0 0 rgb(0, 0, 0, 0.12);
}

@mixin buttonShadow {
  box-shadow:
    0 0 4px rgb(0, 0, 0, 0.14),
    0 4px 8px rgb(0, 0, 0, 0.28);
}

@mixin buttonTransition {
  transition:
    right 0.5s,
    bottom 0.5s,
    border-radius 0.5s,
    text-indent 0.2s,
    visibility 1s,
    width 0.2s ease,
    height 0.5s ease 0.4s,
    color 0.5s,
    background-color 2s,
    transform 0.5s;
}

// make header icons semi-translucent
.d-header-icons {
  .d-icon {
    color: var(--tertiary);
  }
}

// add shadow behind the list of topics on right in Category and Latest View
// add shadow behind list of categories on left in Category and Latest View
// add shadow behind topics in Latest view
.category-list,
.topic-list,
.latest-topic-list {
  @include boxShadow;
  background-color: var(--material-lighter-secondary);
}

.column {
  align-self: start;
}

// fix color of user profile navigation icons
.user-main .nav-pills {
  a.active i {
    color: var(--primary);
  }

  a:hover:not(.active) i {
    color: var(--quaternary);
  }
}

// create conversation cards
.topic-body {
  @include boxShadow;
  background-color: var(--material-lighter-secondary);
  margin-top: 10px;
  border-radius: 4px;
  padding: 15px 20px 0 20px;
}

// more space for avatars
.topic-avatar {
  border-top: 0;
  padding-right: 10px;

  .avatar-flair {
    right: 4px;
  }
}

// remove stray border from bottom of last post
.topic-status-info {
  border-top: 0;
}

// improve format of embedded posts
.embedded-posts {
  border: none;

  .topic-avatar {
    padding-left: 0;
  }

  &.top {
    padding-left: 2em;

    .row .topic-avatar,
    .row .topic-body {
      border: none;
    }

    .collapse-down {
      transform: translate(-120%, 62%);
    }
  }
}

.embedded-posts.top.topic-body {
  box-shadow: none;
  background-color: var(--secondary);
}

// darken color, remove shadow and border when pressed
.btn:active {
  background-color: rgb(0, 0, 0, 0.4);
  box-shadow: none;
}

// New Topic Fab
.d-combo-button:has(#create-topic) {
  display: flex;
  align-items: center;
  justify-content: center;

  @include buttonShadow;
  @include buttonTransition;
  margin: 0;
  height: 63px;
  width: 190px;
  border-radius: 40px;
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: z("composer", "content") - 1;
  background-color: var(--tertiary);
  color: var(--secondary);
  white-space: nowrap;
  overflow: hidden;

  .d-button-label {
    color: var(--secondary);
  }

  button {
    background: transparent;
    box-shadow: none;
    height: 100%;
  }

  .topic-drafts-menu-trigger {
    border-left: 1px solid var(--secondary);
    padding-left: 1em;
  }

  .chat-drawer-active & {
    z-index: z("chat-drawer") - 1;
    bottom: 60px;
  }

  @media screen and (width <= 1520px) {
    body:has(#reply-control.draft.show-preview) & {
      bottom: 60px;
    }
  }

  .d-icon {
    margin: 0;
    color: var(--secondary);
  }

  .d-button-label {
    display: inline-block;
    transition: all 0.3s;
    margin: 0 0.25em;
  }
}

#create-topic.btn-default .fa-plus {
  color: var(--secondary);
}

.timeline-container .topic-timeline .timeline-handle {
  background-color: var(--tertiary-medium);
}

// Reply Fab
.timeline-footer-controls {
  position: relative;
}

.widget-button.btn.create {
  border-radius: 50%;
  position: absolute;
  top: 55px;
  left: -10px;
  background-color: var(--tertiary);
  overflow: hidden;
  width: 60px;
  height: 60px;

  @include buttonShadow;
  @include buttonTransition;

  .d-icon {
    color: var(--secondary);
  }
}

// Increase size of reply icon
.widget-button.btn.create .fa-reply {
  color: var(--secondary);
  font-size: 20px;
}

// Proper spacing for iPad portrait
@media only screen and (width >= 768px) and (width <= 1250px) {
  .timeline-container {
    margin-left: 820px;
  }

  .topic-admin-popup-menu {
    left: -40% !important;
  }
}

// Properly space notifications button
.widget-button.btn.notifications-dropdown {
  right: 4px;
  position: relative;
  border-radius: 40px;
  width: 30px;
  padding: 6px;
}

// cards for search results
.fps-result {
  @include boxShadow;
  background-color: var(--material-lighter-secondary);
  margin-top: 10px;
  padding: 20px;
  border-radius: 4px;
}

@keyframes background-fade-highlight {
  0% {
    background-color: color.adjust($tertiary, $lightness: 20%);
  }

  100% {
    background-color: var(--material-lighter-secondary);
  }
}

// clipped user page button shadows
.user-main .about .controls {
  padding-right: 10px;
}

// RTL Overrides
.rtl {
  .topic-avatar {
    padding-right: initial;
    padding-left: 10px;

    .avatar-flair {
      right: initial;
      left: 4px;
    }
  }

  .embedded-posts .topic-avatar {
    padding-left: initial;
    padding-right: 0;
  }

  #create-topic.btn-default {
    right: initial;
    left: 50px;
  }

  .widget-button.btn.create {
    left: initial;
    right: -10px;
  }

  .widget-button.btn.notifications-dropdown {
    right: initial;
    left: 4px;
  }

  .user-main .about .controls {
    padding-right: initial;
    padding-left: 10px;
  }
}

// RTL Overrides
@media only screen and (width >= 768px) and (width <= 1250px) {
  .rtl {
    .timeline-container {
      margin-left: initial;
      margin-right: 820px;
    }

    .topic-admin-popup-menu {
      left: initial !important;
      right: -40% !important;
    }
  }
}

// Personal messages
.archetype-private_message {
  .topic-body {
    margin-left: -2em;
  }

  .small-action {
    max-width: 758px;
  }
}

// Chat
.chat-channel {
  height: calc(100dvh - (var(--header-offset) + 6em));
}

#main-chat-outlet {
  margin-top: 1.5em;
  box-shadow:
    0 2px 1px -1px rgb(0, 0, 0, 0.2),
    0 1px 1px 0 rgb(0, 0, 0, 0.14),
    0 1px 3px 0 rgb(0, 0, 0, 0.12);
}