style.scss

@import 'mixins';

// 設定整頁背景
body,
html {
    background: url('https://mkx.tw/plurk');
    background-attachment: fixed;
    background-size: cover;
    font-family: century gothic;
}

.adsense {
    border: 0 !important;
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    width: 0 !important;
}

// Put dashboard to sidebar
#dashboard_holder {
    $topbar-height: 42px;

    left: 0;
    margin-bottom: 0;
    min-width: 60px;
    padding: 0;
    position: absolute;
    top: $topbar-height;
    width: auto;
    z-index: 999999;
}

#plurk-dashboard {
    display: flex;
    flex-direction: column;

    // reorder the 3 components
    $ordered-selectors: ('.dash-group-form', '.dash-group-left', '.dash-group-right');
    @each $selector in $ordered-selectors {
        #{$selector} {
            display: flex;
            order: index($ordered-selectors, $selector);
        }
    }

    // dash groups
    $groups: (
        dash-group-form: ('\f011', 40vw, auto),
        dash-group-left: ('\f02b', 258px, 192px),
    );
    @each $class, $attr in $groups {
        .#{$class} {
            @include dash-group(nth($attr, 1), nth($attr, 2), nth($attr, 3));
        }
    }

    & > .dash-group-form {
        &:hover > .dash-segment {
            min-height: 106px;
        }
    }

    // dash segments
    & > .dash-group-right {
        flex-direction: column;

        $segments: (
            dash-segment-stats:   ('\f035', auto, auto),
            dash-segment-friends: ('\f017', 300px, 165px),
            dash-segment-fans:    ('\f016', 660px, 130px),
            dash-segment-award:   ('\f018', 400px, 135px),
        );
        @each $class, $attr in $segments {
            .#{$class} {
                @include dash-segment(nth($attr, 1), nth($attr, 2), nth($attr, 3));
            }
        }

        .dash-segment-stats:hover .segment-content {
            min-width: 710px;
            min-height: 120px;
        }
    }
}

#timeline_holder {
    & > .browse_button {
        bottom: 15px;
        height: 90px;
        top: unset !important;
    }
}

#footer {
    padding-bottom: 20px;
    padding-top: 90px;
}