@charset "UTF-8"; @import 'base_config'; @import '../custom_config'; @import '../custom_color', '../custom_layout'; @import 'mixins'; .column { @include shadow-1dp; padding: 0; margin: 10px 8px; border-radius: $card-radius; &>.scrollable { background: $list-background-color } &:last-child { box-shadow: none } } .column-header { background: $top-bar-color; border-radius: $bar-radius; > button { padding: 16px 0 16px 16px; color: $top-bar-text-color; } &>.column-header__back-button { color: $top-bar-icon-color } &.active { .column-header__icon { color: $top-bar-unread-icon-color; text-shadow: none; } } &__icon { margin-right: 16px; color: $top-bar-icon-color; font-size: 20px; } &__buttons { height: 56px } &__button { background: $top-bar-color; color: $top-bar-icon-color; margin: 8px 10px; padding: 10px 12px; border-radius: 50%; &.active { color: $top-bar-icon-active-color; background: $icon-background-active-color; &:hover { color: $top-bar-icon-hover-color; background: $icon-background-hover-color; } } &:hover { color: $top-bar-icon-hover-color; background: $icon-background-hover-color; } } &__setting-btn { color: $icon-button-color; padding: 8px 0; &:hover { color: $icon-button-hover-color; text-decoration: none; } .fa { font-size: 20px } span { vertical-align: middle } } &__setting-arrows { font-size: 16px; border-bottom: 8px; .column-header__setting-btn { padding: 8px; border-radius: 50%; &:last-child { padding-right: 8px } } } &__wrapper { @include shadow-4dp; border-radius: $bar-radius; .announcements { border-top: 1px solid $border-color } &.active { @include shadow-4dp; &::before { background: transparent } } } &__collapsible { color: $ui-text-color; background: $card-background-color; border-top: 1px solid $border-color; &-inner { background: $card-background-color; padding: 16px; } &.collapsed { border-top: none } } &__back-button { background: $top-bar-color; color: $top-bar-icon-color; padding: 8px; margin: auto 0; border-radius: 50%; span { display: none } } } .column-subheading { color: $section-text-color; background: $background-color; padding: 12px 16px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; background: $background-color; padding: 16px; border-radius: $nav-drawer-item-radius; &:hover { background: $list-background-hover-color } &:active, &:focus { background: $list-background-active-color } &__icon { margin-right: 32px; font-size: 20px; } &--transparent { &.active { color: $ui-text-color; background: $menu-background-active-color; &:hover { background: $menu-background-active-hover-color } .fa { color: $icon-color } } &:hover { color: $ui-text-color; .fa { color: $icon-color } } } .fa { color: $icon-color } } .column-settings { &__section { color: $section-text-color; margin-bottom: 0; margin-top: 8px; } &__row .text-btn { margin-bottom: 0 } } .column-back-button { @include shadow-4dp; background: $top-bar-color; color: $top-bar-icon-color; padding: 16px; span { visibility: hidden } // hide "back" string } .column-inline-form { padding: 16px 0 16px 16px; background: $card-background-color; .icon-button { margin: 0 16px } } .setting-text { color: $primary-text-color; background: $text-field-background-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } } .empty-column-indicator { color: $secondary-text-color; background: $card-background-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; background: $list-background-inactive-color; &--unread { background: $list-background-color; .conversation__content__relative-time { color: $info-text-color } } &__unread { background: $primary-color } &__avatar { padding: 0 16px 0 0 } &__content { padding: 0; &__relative-time { font-size: 14px; color: $info-text-color; } &__names, &__names a { color: $primary-text-color; font-size: 16px; } } } // read status in notification column .muted { .status { &__content { color: $read-primary-text-color; p { color: $read-primary-text-color } a { color: $read-secondary-text-color } } &__display-name strong { color: $read-primary-text-color } } .poll { color: $read-primary-text-color; &__chart { background: $read-poll-bar-color; &.leading { background: $read-poll-bar-leading-color } } &__footer, &__link { color: $read-ui-text-color } } } .load-gap { border-bottom: 1px solid $border-color } .load-more { color: $icon-color; padding: 16px; &:hover { background: $menu-background-hover-color } } .getting-started { background: $background-color; color: $ui-text-color; &__wrapper { background: $background-color; height: auto !important; border-bottom: 1px solid $border-color; } &__footer { padding: 16px; p { color: $secondary-text-color; font-size: 12px; margin-bottom: 16px; } a { color: $ui-text-color } p a { color: $link-text-color } } &__trends { background: $background-color; margin-bottom: 0; h4 { color: $section-text-color; padding: 12px 16px; border-top: 1px solid $border-color; border-bottom: none; } } } .trends { &__header { color: $section-text-color; background: transparent; border-bottom: 1px solid $border-color; padding: 16px; .fa { margin-right: 8px } } &__item { padding: 16px; border-bottom: none; &__name { color: $secondary-text-color; font-size: 12px; a { color: $primary-text-color } } &__current { padding-right: 16px; margin-left: 4px; color: $secondary-text-color; } &__sparkline path { stroke: $primary-color; fill: $primary-color; fill-opacity: 0.5; } } } .setting-toggle { &__label { color: $ui-text-color; margin: 8px 8px 8px 14px; } } .announcements { background: $card-background-color; padding: 0; &__container { color: $primary-text-color } &__item { padding: 16px; font-size: 16px; &__unread { background: $badge-color } } &__pagination { color: $ui-text-color; padding: 8px 16px; bottom: 8px; .icon-button { font-size: 20px !important; width: 20px !important; height: 20px !important; margin: 0 8px; } } } .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } .reactions-bar { .emoji-button { color: $icon-button-color; font-size: 20px; &:hover { color: $icon-button-hover-color } &:active { color: $icon-button-active-color } } &__item { background: $contained-chip-color; border-radius: 17px; margin: 2px 4px; &.active { background-color: $contained-chip-selected-color; .reactions-bar__item__count { color: $ui-text-color } } &__emoji { width: 24px; height: 24px; margin: 4px 0 4px 2px; } &__count { font-size: 16px; margin: 0 8px; color: $secondary-text-color; } &:hover { background: $contained-chip-hover-color } } } .notification { &__filter-bar { background: $tab-background-color; border-bottom: 1px solid $border-color; z-index: 1; button { background: $tab-background-color; color: $tab-indicator-color; font-size: 16px; span { font-size: 14px } &.active { color: $tab-indicator-active-color; border-bottom: 4px solid $tab-indicator-active-color; &::before, &:after { border: none } &:focus { background: $tab-indicator-background-focus-color } } &:hover { background: $tab-indicator-background-hover-color } } } &__message { color: $secondary-text-color; margin: 0 16px 0 70px; font-size: 16px; } &__display-name:hover { color: inherit } } .notification-favourite .status.status-direct { .icon-button.disabled { color: $disabled-icon-color } } .relationship-tag { color: $ui-text-color; background-color: $relationship-tag-color; font-size: 12px; border-radius: 17px; padding: 4px 8px; opacity: 1; } .attachment-list__list a { color: $secondary-text-color }