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

@import "variables";
@import "mixins";
@import "commons";
$validated-font-color: #4fde23;
$validated-background: #164109;
$header-height: 140px;
$full-alias-color: rgb(201, 201, 201);
$full-alias-color-hover: white;
$floating-header-height: 60px;

.outer-profile {
    height: calc(100%);
    // width: $stream-column-width;
    overflow: hidden;
    position: relative;
}

.profile {
    // overflow: auto;
    height: calc(100%);
    // width: $stream-column-width;
    overflow: auto;

    &__not-found {
        padding-top: 15px;
        text-align: center;
    }

    &__floating-header {
        transition: all .2s;
        transition-timing-function: ease-in;

        height: $floating-header-height;
        width: calc(100% - #{$scroll-bar-width});
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #0f111a;

        position: absolute;
        top: -66px;
        z-index: 100;

        // border-bottom: 1px solid #222736;
        box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .25);

        // opacity: 0;

        &__inner {
            overflow: hidden;
            height: $floating-header-height;
            background-color: rgba(0, 0, 0, .45);
        }

        &__activated {
            // opacity: 1;
            transition: all .25s;
            transition-timing-function: ease-out;
            top: 0px;
        }

        &__avatar {
            position: absolute;
            top: 6px;
            left: 6px;
            width: calc(#{$floating-header-height} - 14px);
            height: calc(#{$floating-header-height} - 14px);
            border-radius: 2px;
        }

        &__names {
            position: absolute;
            top: 6px;
            left: 56px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            height: calc(#{$floating-header-height} - 14px);
            width: calc(100% - 44px - 65px);
            padding: 3px 5px 0px 3px;

            &__display-name {
                font-size: 15px;
                color: white;
                margin: 0 0 2px 0;
            }

            &__fullhandle {
                transition: all .2s;
                font-size: 15px;
                color: $full-alias-color;

                &:hover {
                    color: $full-alias-color-hover;
                }
            }
        }

        &__follow {
            // transition: all .4s;
            position: absolute;
            top: 6px;
            right: 10px;
            font-size: 28px;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
    }

    &__moved {
        padding: 5px;
        text-align: center;

        &--link {
            transition: .2s;
            color: white;
            display: inline-block;
            max-width: calc(100%);
            text-overflow: ellipsis;
            overflow: hidden;

            &:hover {
                color: rgb(255, 190, 71);
            }
        }
    }

    &__disabled {
        filter: gray;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }

    &-header {
        background-position: center center;
        background-repeat: no-repeat;

        background-size: cover;
        position: relative;
        overflow: hidden; // background-color: black;
        //border-bottom: 1px solid black;

        & h2 {
            font-size: $default-font-size;
        }

        &__inner {
            overflow: auto;
            height: $header-height;
            background-color: rgba(0, 0, 0, .45);
        }

        &__avatar {
            position: absolute;
            bottom: 12px;
            left: 12px;
            width: 80px;
            border-radius: 3px;
        }

        &__follow {
            // transition: all .4s;
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 28px;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;

            &--button {
                display: inline-block;
                transition: all .2s;
                color: white;

                &:hover {
                    color: rgb(216, 216, 216);
                }
            }

            &--unfollowed {}

            &--followed {
                transition: all .2s;
                color: #38abff;
                color: #5fbcff;
                color: #85ccff;

                &:hover {
                    color: #85ccff;
                    color: #38abff;
                }
            }

            &--waiting {
                position: relative;
                top: -5px;
                left: 6px;
            }
        }

        &__state {
            position: absolute;
            top: 14px;
            left: 14px;

            top: 11px;
            left: 11px;

            font-size: 12px;
            // max-width: 150px;
            width: 265px;

            //outline: 1px solid greenyellow;

            &--data {
                display: inline-block;
                background-color: rgba(0, 0, 0, .60);
                padding: 4px 10px;
                border-radius: 4px;
                text-align: center;
                margin: 0 2px 2px 0;
            }
        }

        &__more {
            position: absolute;
            bottom: 5px;
            right: 16px;
        }
    }

    &-sub-header {
        // overflow: auto;
        // height: calc(100% - #{$header-height});
        // height: calc(100%);
        // height: calc(20% - 190px);
        // height: 150px;
        // border: 1px solid greenyellow;
    }

    &-name {
        padding: 9px 10px 10px 10px;
        width: calc(100%);

        &__link {
            width: calc(100%);
            font-size: 15px;
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0;

            &:not(:last-child) {
                margin-bottom: 3px;
            }
        }

        &__display-name {
            color: white;
        }

        &__fullhandle a {
            transition: all .2s;
            color: $full-alias-color;

            &:hover {
                color: $full-alias-color-hover;
            }
        }
    }

    &-follows {
        width: calc(100%);  
        font-size: 13px;
        border-bottom: 1px solid #0f111a;

        display: flex;

        &__link {
            color: white;
            flex-grow: 1;
            padding: 5px;
            text-align: center;
            background-color: #1a1f2e;
            transition: all .2s;

            &:hover {
                text-decoration: none;
                background-color: #131722;
            }
        }
    }

    &-description {
        padding: 9px 10px 15px 10px;
        font-size: 13px;
        // border-bottom: 1px solid black;

        &__content {
            width: calc(100%);
            word-break: break-word;
        }
    }

    &__extra-info {
        background-color: #20273a;
        background-color: #141824;
        background-color: #1a1f2e;
        font-size: 13px;
        transition: all .4s;

        display: flex;

        &__section {
            // outline: 1px dotted orange;

            flex-grow: 1;

            text-align: center;
            padding: 5px 0 7px 0;
        }

        &__preparefloating {
            width: calc(100% - #{$scroll-bar-width});
            position: absolute;
            top: -66px;
            z-index: 99;
        }

        &__floating {
            top: 60px;
            box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .45);
        }

        &__links {
            color: white;

            &--selected {
                text-decoration: underline;
            }
        }
    }

    &-fields {
        font-size: 13px;
        border-bottom: 1px solid black;

        &__field {
            &:not(:last-child) {
                border-bottom: 1px solid black;
            }

            &--name {
                padding: 10px;
                border-right: 1px solid black;
                text-align: center;
                width: calc(33%);
                background-color: #0b0d13;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            &--value {
                padding: 10px;
                width: calc(66%);
                float: right;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            &--validated {
                background-color: $validated-background;
                // border: 1px solid $validated-font-color;
            }
        }

        @include clearfix;
    }

    &__status-switching-section {
        height: calc(100vh - 35px - #{$floating-header-height} - #{$stream-header-height} - #{$stream-selector-height});
    }

    &-no-toots {
        text-align: center;
        margin: 15px;
        // border: 2px solid whitesmoke;
    }
}

.status-media {
    &__image {
        width: calc(50% - 2px);
        height: 150px;
        object-fit: cover;
        margin: 1px;
        float: left;
    }
}

.fa-lock {
    margin-left: 5px;
    color: gray;
    font-size: 14px;
}

//Mastodon styling
:host ::ng-deep .profile-fields__field--value {
    // font-size: 14px;
    color: $status-primary-color;

    & a,
    .mention,
    .ellipsis {
        color: $status-links-color;
    }

    & .invisible {
        display: none;
    }

    & p {
        margin: 0px; //font-size: .9em;
        // font-size: 14px;
    }
}

:host ::ng-deep .profile-fields__field--validated {
    // font-size: 14px;
    color: $validated-font-color;

    & a,
    .mention,
    .ellipsis {
        color: $validated-font-color;
    }

    & .invisible {
        display: none;
    }

    & p {
        margin: 0px; //font-size: .9em;
        // font-size: 14px;
    }
}