Sengi-Windows-MacOS-Linux/src/app/components/stream/stream.component.scss

@import "variables";
@import "commons";
@import "panel";

.stream-edition {
    display: block;
    width: $stream-column-width;
    position: absolute;
    z-index: 50;
}

.stream-column {
    position: relative;
    width: $stream-column-width;
    height: calc(100%);
    overflow: hidden;
    background-color: $column-color;
    margin: 0 0 0 $stream-column-separator;

    &__stream-header {
        position: relative;
        width: $stream-column-width;
        border-bottom: 1px solid #222736;
    }
    &__open-menu {
        width: $stream-header-height - 10px;
        height: $stream-header-height - 10px;

        position: absolute;
        top: 5px;
        right: 5px;

        &:hover &--icon {
            color: darken(whitesmoke, 30);
        }
        &--icon {
            color: whitesmoke; // float: left;
            // position: relative;
            position: absolute;
            top: 4px;
            left: 8px;
        }
    }
    &__stream-selector {
        display: block;
        width: $stream-column-width;
        height: calc(#{$stream-header-height} - 1px);
        background-color: $column-header-background-color;
        text-decoration: none; 
        color: whitesmoke;
        position: relative;
        &--avatar {
            width: 20px;
            float: left;
            margin-left: 11px;
            position: relative;
            // left: 11px;
            top: 9px;
        }
        &--icon {
            float: left;
            margin-left: 11px;
            position: relative;
            // left: 11px;
            top: 9px;
        }
        &--text {
            float: left;
            margin-left: 9px;
        }
        &--title {
            font-size: 0.8em;
            font-weight: normal;
            // float: left;
            // margin-left: 10px;
            // position: absolute;
            position: relative;
            top: 9px;
            margin: 0;
            // left: 35px;

            &--only {
                top: 13px;
            }
        }        

        &--subtitle {
            color: $font-link-primary-hover;
            font-size: 0.7em;
            font-weight: normal;
            font-style: italic;
            // position: absolute;
            position: relative;
            top: 6px;
            // top: 21px;
            // top: 10px;
            // left: 35px;;
            // outline: 1px solid greenyellow;
            display: inline-block;
            white-space: nowrap;
            max-width: 240px;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-right: 5px;
        }
    }
}

.stream-statuses {
    display: block;
    height: calc(100% - #{$stream-header-height});
    width: 320px;
}


// .stream-overlay {
//     float: right;
//     width: $stream-column-width;
//     height: calc(100%);
// }


// .stream-toots {
//     height: calc(100% - 30px);
//     width: 320px;
//     overflow: auto;
//     &__status:not(:last-child) {
//         border: solid #06070b;
//         border-width: 0 0 1px 0;
//     }
// }
// .stream-overlay {
//     // position: absolute;
//     float: right;
//     //z-index: 100;
//     width: $stream-column-width;
//     height: calc(100%);
// }