style.less

@import './style-guide.less';


// set default style
html,
body {
    font-family: @font-family;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}

// grid settings
.layout-container {
    .transition();
    background-color: @color-bg;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow: scroll;
    overflow-x: hidden;
    max-width: 1920px;
}

// top style bar
.background-top {
    content: "";
    height: 250px;
    display: block;
    width: 100%;
    background-color: @color-top;
    top: 0;
}

.content-container {
    height: 100vh;
    width: 80%;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -250px;
}

.container {
    height: 90%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


// general settings
.up {
    color: @color-up;
}

.down {
    color: @color-down;
}

.facebook {
    background-color: @color-facebook;
}

.twitter {
    background-color: @color-twitter;
}

.youtube {
    background-color: @color-youtube;
}

.instagram {
    background: @color-instagram  !important;
}

// card
.card {
    flex: 1;
    border-radius: 5px;
    display: flex;
    border-top: 5px solid transparent;
}

.card-background {
    background-color: @color-card;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0px 0px 5px 5px;
    padding: 10px 30px 10px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}



// header
.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
}

.header-title-container {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.header-title {
    font-weight: @font-weight-bold;
    font-size: @font-size-xl;
    color: @color-text-hard;
}

.header-followers {
    font-weight: @font-weight-bold;
    font-size: @font-size-s;
    color: @color-text-easy;
}

.header-mobile-divider {
    display: none;
}

.header-toggle-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header-toggle-text {
    font-weight: @font-weight-bold;
    font-size: @font-size-s;
    color: @color-toggle;
    margin-right: 10px;
}

// hide default input
.switch input {
    position: absolute;
    opacity: 0;
}

// style new toggle
.switch {
    display: flex;
    font-size: 20px;
    /* 1 */
    height: 1em;
    width: 2em;
    background: @color-toggle;
    border-radius: 1em;
    align-items: center;
    cursor: pointer;
}

// style slider knob
.switch div {
    height: 0.8em;
    width: 0.8em;
    border-radius: 1em;
    background: @color-top;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
    -webkit-transform: translate3d(10%, 0, 0);
    -moz-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
}

// style checked slider position
.switch input:checked+div {
    -webkit-transform: translate3d(140%, 0, 0);
    -moz-transform: translate3d(140%, 0, 0);
    transform: translate3d(140%, 0, 0);
}



// platform
.platforms {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: -20px 0 0 0; // wrapping space
}

.platforms>* {
    margin-top: 20px; // wrapping space
}

.platform {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
}

.platform-logo-name-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.platform-user-name {
    margin-left: 10px;
}

.platform-follower {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.platform-user-name {
    font-weight: @font-weight-bold;
    font-size: @font-size-s;
    color: @color-text-easy;
}

.platform-follower-count {
    font-weight: @font-weight-bold;
    font-size: @font-size-xxl;
    color: @color-text-hard;
    margin: 0;
}

.platform-follower-count-label {
    text-transform: uppercase;
    font-weight: @font-weight-regular;
    font-size: @font-size-s;
    color: @color-text-easy;
    letter-spacing: 0.3em;
}

.stats-text {
    font-weight: @font-weight-bold;
    font-size: @font-size-xs;
    margin-left: 5px;
}

.stats-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}


// overview title
.overview-title-container {
    margin-top: 30px;
    margin-bottom: 10px;
}

.overview-title {
    font-weight: @font-weight-bold;
    font-size: @font-size-l;
    color: @color-text-easy;
}

// overview

.overview-card {
    .transition();
    background-color: @color-card;
    border-radius: 5px;
    padding: 10px 30px 10px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.overview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    margin: -10px 0 0 0; // wrapping space
}

.overview>* {
    margin-top: 10px; // wrapping space
}

.stats {
    height: 150px;
    max-height: 150px;
    flex: 1 0 20%;
}

.overview-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 80%;
    max-width: 80%;
}

.overview-stats-title {
    font-weight: @font-weight-bold;
    font-size: @font-size-s;
    color: @color-text-easy;
    white-space: nowrap;
    margin-right: 10px;
}

.overview-stats-count {
    font-weight: @font-weight-bold;
    font-size: @font-stats-count;
    color: @color-text-hard;
}

// dark theme
.dark {

    .transition();
    background-color: @color-dark-bg;

    .background-top {
        .transition();
        background-color: @color-dark-top;
    }

    .header-mobile-divider {
        background-color: @color-dark-text-easy;
    }

    .header-toggle-text {
        color: @color-dark-text-easy;
    }

    .switch {
        background: @color-dark-toggle;
    }

    .switch div {
        background-color: @color-dark-top;
    }

    .header-title {
        color: @color-dark-text-hard;
    }

    .header-followers {
        color: @color-dark-text-easy;
    }

    .card-background {
        .transition();
        background-color: @color-dark-card;
    }

    .overview-card {
        .transition();
        background-color: @color-dark-card;
    }

    .instagram-card {
        .transition();
        background-color: @color-dark-card;
    }

    .platform-user-name {
        color: @color-dark-text-easy;
    }

    .platform-follower-count {
        color: @color-dark-text-hard;
    }

    .overview-title {
        color: @color-dark-text-hard;
    }

    .overview-stats-title {
        color: @color-dark-text-easy;
    }

    .overview-stats-count {
        color: @color-dark-text-hard;
    }
}



// mobile layout
@media (max-width: 940px) {

    .header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .header-mobile-divider {
        display: block;
        height: 1px;
        border: none;
        background-color: @color-text-easy;
        width: 100%;
        margin: 20px;
    }

    .header-toggle-container {
        margin-bottom: 20px;
        justify-content: space-between;
        width: 100%;
    }

    .overview-title-container {
        display: flex;
        justify-content: center;
    }

    .overview-title {
        flex-direction: column;
        align-items: center;
    }

    .stats {
        min-width: 150px;
    }

    .overview-stats-title{
        margin-right: 30px;
    }

    .overview:after {
        content: "";
        height: 100px;
        width: 100%;
    }
}