Cofffee-Assets/styles/material-light/theme/columns.scss

@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 }