mastodon/app/javascript/styles/mastodon-material-dev/columns.scss

@charset "UTF-8";
@import 'config';
@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: $ui-text-color;
    }

    &.active {
        .column-header__icon {
            color: $primary-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: $icon-button-color;
        margin: 8px 10px;
        padding: 10px 12px;
        border-radius: 50%;

        &.active {
            color: $icon-button-active-color;
            background: $icon-background-active-color;

            &:hover {
                color: $icon-button-active-color;
                background: $icon-background-hover-color;
            }
        }

        &:hover {
            color: $icon-button-hover-color;
            background: $icon-background-hover-color;
        }
    }

    &__setting-btn {
        color: $icon-button-color;

        &:hover {
            color: $icon-button-hover-color;
            background: $icon-background-hover-color;
        }
    }

    &__setting-arrows { font-size: 16px }

    &__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;
        border-top: 1px solid $border-color;

        &-inner {
            background: $top-bar-color;
            padding: 16px;
        }
    }

    &__back-button {
        background: $top-bar-color;
        color: $icon-color;
        padding: 8px;
        margin: auto 0;
        border-radius: 50%;

        span { display: none }
    }
}

.column-subheading {
    color: $section-text-color;
    background: $menu-background-color;
    padding: 12px 16px;
    border-top: 1px solid $border-color;
}

.column-link {
    color: $ui-text-color;
    background: $menu-background-color;
    padding: 16px;
    border-radius: $nav-drawer-item-radius;

    &:hover { background: $menu-background-hover-color }

    &:active,
    &:focus { background: $menu-background-active-color }

    &__icon {
        margin-right: 32px;
        font-size: 20px;
    }
}

.column-settings {
    &__section {
        color: $section-text-color;
        margin-bottom: 0;
        margin-top: 8px;
    }
}

.column-back-button {
    @include shadow-4dp;
    background: $top-bar-color;
    color: $icon-color;
    padding: 16px;
}

.column-inline-form {
    padding: 16px 0 16px 16px;
    background: $card-background-color;

    .icon-button { margin: 0 16px }
}

.setting-text {
    color: $primary-text-color;
    background: $search-bar-color;
    border-radius: $bar-radius;

    &::placeholder { color: $tips-text-color }

    &:focus {
        @include shadow-1dp;
        background: $search-bar-focus-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;
        }
    }
}

.muted {
    .status__content {
        color: $primary-text-color;

        p { color: $primary-text-color }

        a { color: $secondary-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 }

    }
}

.setting-toggle {
    &__label {
        color: $ui-text-color;
        margin: 8px 8px 8px 14px;
    }
}

.announcements {
    background: $background-color;
    padding: 0;

    &__container { color: $primary-text-color }

    &__item {
        padding: 16px;
        font-size: 16px;

        &__unread { background: $badge-color }
    }
}

.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: $top-bar-color;
        border-bottom: 1px solid $border-color;
    
        button {
            background: $top-bar-color;
            color: $secondary-text-color;
            font-size: 16px;

            span { font-size: 14px }
    
            &.active {
                color: $tab-indicator-color;
                border-bottom: 4px solid $tab-indicator-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 }
}

div.notification.notification-favourite.focusable,
div.notification.notification-follow.focusable { background: $list-background-inactive-color }

.notification-favourite .status.status-direct { background: transparent }

.relationship-tag {
    color: $ui-inverted-text-color;
    background-color: $media-icon-background-color;
    font-size: 12px;
    border-radius: 17px;
}