desktop.scss

@import "common/foundation/variables";

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

@mixin buttonShadow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(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);
}

//underline navigation links

.nav-pills > li > a {
  border-bottom: 3px solid transparent;
}

.nav-pills > li.active > a {
  color: var(--primary);
  background-color: var(--secondary);
  border-bottom: 3px solid var(--tertiary);
}

//remove highlighting navigation background on hover
.nav-pills > li > a:hover {
  background-color: var(--secondary);
}

//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: 0px;
  }
  &.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: rgba(0, 0, 0, 0.4);
  box-shadow: none;
}

//New Topic Fab
#create-topic.btn-default {
  display: flex;
  align-items: center;
  justify-content: center;
  @include buttonShadow;
  @include buttonTransition;
  padding: 0;
  margin: 0;
  width: 63px;
  height: 63px;
  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-icon {
    margin: 0;
    color: var(--secondary);
  }
  .d-button-label {
    display: inline-block;
    transition: all 0.3s;
    margin: 0 0.25em;
  }

  &:not(:hover):not(:active):not(:focus) {
    .d-button-label {
      opacity: 0;
      width: 0;
      margin: 0;
    }
    .d-icon {
      margin: 0 0.25em;
    }
  }
}

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

#create-topic.btn-default:hover {
  width: 190px;
}

.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);
  @include buttonShadow;
  overflow: hidden;
  width: 60px;
  height: 60px;
  @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 (min-width: 768px) and (max-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: lighten($tertiary, 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 (min-width: 768px) and (max-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: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}