jamhub.scss

$primary_color: #5DCC92;
$link_color: #5CCCC4;
$cell_height: 40px;
$label_height: 40px;
$site_width: 640px;

@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    transition: $args;
}

@mixin unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

@mixin border_box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

@mixin single_line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body {
    background: #e6e6e6;
    font-family: sans-serif;
    margin: 0;
    color: #333;
    font-size: 16px;

    &.nice_fonts {
        font-family: lato, sans-serif;
    }

    &.dragging  {
        @include unselectable;
        cursor: default;
    }
}

a {
    color: darken($link_color, 5%);

    &:hover {
        color: $link_color;
    }
}

.header {
    height: 200px;
    text-align: center;
    background: $primary_color;
    margin-bottom: 20px;
    color: white;
    overflow: hidden;

    .header_tools {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .multi_share {
        text-align: center;
        min-width: 110px;
        margin-top: 10px;

        border: 1px solid white;
        border-radius: 3px;
        overflow: hidden;

        height: 20px;

        @include transition(height 0.15s ease);

        &.open, &:hover {
            height: 113px;

            .top {
                @include transition(all 0.15s ease);
                background: rgba(255,255,255,0.8);
                color: $primary_color;
            }
        }

        .top {
            @include unselectable;
            text-align: center;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: white;
        }

        .button {
            display: block;
            border: 0;
            border-top: 1px solid white;
            border-radius: 0;
            text-align: center;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
        }

        .row:last-child {
            .button {
                border-radius: 0 0 3px 3px;
            }
        }
    }

    .button {
        @include transition(all 0.15s ease);
        border: 1px solid white;
        border-radius: 3px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        padding: 0 20px;
        display: inline-block;
        cursor: pointer;
        color: white;
        text-decoration: none;
        min-width: 110px;
        text-align: center;

        &:hover {
            color: $primary_color;
            background-color: white;
        }

        &:active {
            background-color: mix(white, $primary_color, 75%);
        }
    }

    h1 {
        margin: 0;
        margin-top: 52px;
        font-family: lato, sans-serif;
        font-weight: 200;
        font-size: 80px;
        line-height: 1.0;

        a {
            @include transition(border 0.2s ease);
            text-decoration: none;
            color: white;
            border-bottom: 1px solid rgba(255,255,255, 0);

            &:hover {
                border-bottom: 1px solid rgba(255,255,255, 0.5);
            }
        }
    }

    h2 {
        margin: 0;
        margin-top: 8px;
        font-size: 16px;
        font-weight: normal;
        letter-spacing: 0.10em;
    }
}


.jam_browser {
    margin: 0 20px;
}

.scrollbar_outer {
    @include unselectable;
    position: relative;
    height: 10px;
    margin-top: 6px;

    .scrollbar {
        position: absolute;
        background: #B8B8B8;
        top: 0;
        bottom: 0;
        border-radius: 24px;
        opacity: 0;
        @include transition(opacity 0.6s ease);

        &:hover, &.dragging {
            background: lighten(#B8B8B8, 3%);
        }

        &.visible {
            opacity: 1;
        }
    }
}

.calendar {
    overflow: hidden;
    cursor: move;

    .calendar_scrolling {
        height: 250px;
        position: relative;
        background: white;
    }

    .calendar_row {
        position: relative;
        height: $cell_height;
        margin: 3px 0;
    }

    .jam_cell {
        @include border_box;
        @include single_line;
        position: absolute;
        top: 0;
        bottom: 0;
        background: #A8A8A8;
        color: white;
        line-height: $cell_height;
        padding: 0 20px;

        &.after_end {
            opacity: 0.75;
        }

        &.small_text {
            font-size: 14px;
        }

        a {
            color: inherit;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }

    .calendar_rows, .day_markers {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .elapsed_time {
        @include border_box;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        background: #F5F5F5;
        border-right: 5px solid #E9E9E9;
        box-shadow: 0 0 0 1px #DEDEDE;
    }

    .day_markers {
        z-index: 1;
        @include unselectable;

        .day_marker {
            @include border_box;
            border-left: 1px solid #dadada;
            position: absolute;
            top: $label_height;
            bottom: 0;

            &:first-child {
                border-left: 0;
            }

            .day_ordinal, .day_name {
                position: absolute;
                left: 0;
                right: 0;
                height: $label_height;
                line-height: $label_height;
                padding-left: 20px;
            }

            .day_ordinal {
                top: 0;
                border-bottom: 1px solid #dadada;
                color: #666;
                font-weight: bold;
            }

            .day_name {
                bottom: 0;
                border-top: 1px solid #dadada;
                font-size: 13px;
                text-transform: uppercase;
                color: #777;
            }
        }
    }

    .calendar_rows {
        z-index: 2;
        top: $label_height * 2 + 2px;
        bottom: 30px;
    }

    .month_markers {
        @include unselectable;
        height: 20px;
        background: black;
        position: relative;
        z-index: 5;

        .month_marker {
            @include border_box;
            background: #B8B8B8;
            border-left: 1px solid darken(#B8B8B8, 10%);
            color: #444;

            position: absolute;
            top: 0;
            bottom: 0;
            height: $label_height;
            line-height: $label_height;
            padding: 0 20px;

            &:first-child {
                border-left: 0;
            }
        }
    }
}


.jam_list, .comments_outer {
    width: $site_width;
    margin: 0 auto;

    h2 {
        font-family: lato, sans-serif;
        font-weight: 200;
        color: #666;
        font-size: 48px;
        margin: 48px 0 24px 0;
    }
}

.tagged_jams {
    h2 {
        font-weight: normal;
        font-size: 20px;
        color: #555;
    }
}

.comments_outer {
    margin-top: 60px;
    margin-bottom: 60px;

    h3 {
        font-size: 20px;
        color: #555;
    }
}


.jam_box {
    background: white;
    overflow: hidden;
    margin-bottom: 24px;

    &.current_jam {
        margin-top: 48px;
    }

    &.has_image {
        overflow: hidden;

        h3, p {
            margin-right: 240px;
        }

        .progress_outer {
            clear: both;
        }

        .cover_image {
            float: right;
            background: #aaa;
            width: 200px;
            height: 160px;
            margin: 24px 20px 24px 0;
            background-size: cover;
            background-position: 50% 50%;
        }
    }

    h3 {
        font-weight: normal;
        font-size: 26px;
        margin: 24px 20px;
        color: #666;

        a {
            text-decoration: none;
            color: inherit;
            font-weight: inherit;

            &:hover {
                // text-decoration: underline;
                border-bottom: 2px solid #aaa;
            }
        }
    }

    p {
        margin: 24px 20px;
        line-height: 24px;
    }

    .jam_link {
        @include single_line;
    }

    .time_data {
        color: #777;

        strong {
            color: #888;
        }
    }

    .progress_outer {
        margin: 24px 20px;

        .time_labels {
            overflow: hidden;
        }

        .left_label, .right_label, .remaining_label {
            font-size: 16px;
            color: #777;
        }

        .left_label, .right_label {
            position: relative;
            margin-bottom: 16px;
        }

        .left_label {
            float: left;
            text-align: left;

            &:before {
                content: "";
                width: 2px;
                height: 8px;
                background: #ccc;
                position: absolute;
                bottom: -11px;
                left: 0;
            }
        }

        .right_label {
            text-align: right;

            &:before {
                content: "";
                width: 2px;
                height: 8px;
                background: #ccc;
                position: absolute;
                bottom: -11px;
                right: 0;
            }
        }

        .remaining_label {
            margin-top: 8px;
            text-align: right;
        }

        .progress {
            background: rgba(darken($primary_color, 10%), 0.3);
            height: 10px;
            position: relative;

            .progress_inner {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;

                width: 50%;
                background: $primary_color;
            }
        }
    }

    .jam_tags {
        margin: 24px 20px;
        text-align: right;

        .jam_tag {
            position: relative;
            background: darken($link_color, 5%);
            color: white;
            display: inline-block;
            padding: 0px 10px 0 8px;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            margin-left: 22px;
            text-decoration: none;

            &:hover {
                background-color: $link_color;
                &:before {
                    border-color:transparent $link_color transparent transparent;
                }
            }

            &:before {
                content: "";
                position: absolute;
                left: -12px;
                border-color:transparent darken($link_color, 5%) transparent transparent;
                border-style: solid;
                border-width: 12px 12px 12px 0;
            }
        }
    }
}

.link_back {
    text-align: center;

    a {
        @include transition(background 0.2s ease);
        color: #666;
        border: 1px solid #B9B9B9;
        border-radius: 3px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        display: inline-block;
        font-size: 18px;
        text-decoration: none;

        &:hover {
            background: rgba(0,0,0,0.07);
        }

        &:active {
            background: rgba(0,0,0,0.10);
        }
    }
}

.footer {
    width: $site_width;
    margin: 20px auto;
    text-align: center;
    border-top: 1px solid #D3D3D3;
    padding-top: 10px;
    font-size: 14px;
    color: #aaa;

    a {
        color: #999;
    }
}


.jam_year, .jam_tag_list {
    ul {
        overflow: hidden;
        margin: 0;
        padding: 24px 20px;

        background: white;
        font-size: 16px;
        line-height: 1.5;

        .simple_date {
            background: #eee;
            display: inline-block;
            font-family: monospace;
            padding: 2px 8px;
            vertical-align: middle;
            text-align: left;
            min-width: 70px;
            font-size: 14px;
            margin-right: 10px;
        }

        li {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-bottom: 5px;
        }
    }
}