// Copyright 2022 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only .Stories { background: $color-gray-95; display: flex; height: var(--window-height); left: 0; position: absolute; top: 0; user-select: none; width: 100%; z-index: $z-index-stories; &__pane { background: $color-gray-80; border-right: 1px solid $color-gray-65; display: flex; flex-direction: column; height: 100%; width: 380px; padding-top: calc(14px + var(--title-bar-drag-area-height)); &__add-story__button { @include color-svg('../images/icons/v2/plus-24.svg', $color-white); height: 22px; position: absolute; right: 63px; top: 0px; width: 22px; } &__settings__button { @include dark-theme { @include color-svg( '../images/icons/v2/more-horiz-24.svg', $color-white ); } height: 22px; margin-left: 24px; opacity: 1; position: absolute; right: 16px; top: 0px; width: 22px; } &__header { align-items: center; display: flex; justify-content: space-between; padding: 0 16px; position: relative; &--centered { justify-content: flex-start; } &--title { @include font-body-1-bold; color: $color-gray-05; display: flex; flex: 1; justify-content: center; } &--centered .Stories__pane__header--title { text-align: center; width: 100%; } &--back { @include button-reset; height: 24px; position: absolute; width: 24px; @include color-svg( '../images/icons/v2/chevron-left-24.svg', $color-white ); @include keyboard-mode { &:hover { @include color-svg( '../images/icons/v2/chevron-left-24.svg', $color-ultramarine-light ); } } } } &__list { @include scrollbar; display: flex; flex-direction: column; flex: 1; overflow-y: overlay; padding: 0 14px; &--empty { @include font-body-1; align-items: center; color: $color-gray-45; display: flex; flex: 1; flex-direction: column; justify-content: center; } } } &__search__container { margin: 14px 16px 10px 16px; } &__placeholder { align-items: center; color: $color-gray-45; display: flex; flex-direction: column; flex: 1; justify-content: center; &__stories { height: 56px; margin-bottom: 22px; width: 56px; @include color-svg( '../images/icons/v2/stories-outline-56.svg', $color-gray-45 ); } } &__hidden-stories { @include button-reset; @include font-body-1-bold; align-items: center; color: $color-gray-05; display: flex; justify-content: space-between; padding: 12px 24px; position: relative; width: 100%; &::after { @include color-svg( '../images/icons/v2/chevron-right-24.svg', $color-gray-05 ); content: ''; height: 16px; width: 16px; } &--expanded { &::after { @include color-svg( '../images/icons/v2/chevron-down-24.svg', $color-gray-05 ); } } } }