source: OpenWorkouts-current/ow/static/less/modules/workout.less @ d24a64a

.workout-content {
    padding: 2em  1em;
    @media (min-width: @screen-s){
        padding: 2em 6em;
    }
     @media (min-width: @screen-m){
        display: flex;
        justify-content:space-between;
    }
}

/* list mode */
.workout-list {
    margin-right: 2em;
    width: 100%;
    >h2{
        font-weight: 300;
        margin: 0 0 1.5em;
    }
    /* provisional layout, replace this with grid layout system based on final content */
}

/* Module resume on dashboard workouts */
.workout-resume {
    padding: 1.5em 0;
    position: relative;
    max-width: 700px;
    @media (min-width: @screen-m){
        padding-left: 2em;
        border-left: 1px solid @color-main-light;
        transition: all 250ms ease-in-out;
    }
    &:hover{
        border-color: @color-main;
        .workout-title{
            &:before{
                color: @color-main;
            }
        }
    }
    ul{
        padding: 0;
        list-style-type: none;
        .font-size(13);
        a{
            display: block;
            text-decoration: none;
        }
    }
}
.bike{
    &:before{
        display: block;
        //position: absolute;
        content: "";
        width: 30px;
        height: 30px;
        //left:-3.25em;
        //top: 1.6em;
        background-image: url('../media/img/bike.svg');
        background-size: 100%;
    }
}

.workout-title{
    .font-size(14);
    margin: 0 0 0em 0;
    position: relative;
    &:before{
        transition: all 250ms ease-in-out;
        content: "▶";
        position: absolute;
        left: -3.25em;
        top:.35em;
        color:@color-main-light;
        .font-size(10);
    }
    a{
        color: @color-main;
        text-decoration: none;
        &:hover {
            color: @color-app;
        }
    }
}

.workout-info {
    display: flex;
    align-items:center;
    margin: .25em 0;
    li{
        color: @color-main-medium;
        &:after{
            content: "|";
            margin:0 .5em;
        }
        &:last-child{
            &:after{
                content: "";
                margin:0;
            }
        }
    }
}

.workout-map {
    margin-top: 1em;
    img {
        width: 100%;
    }
}

.workout-intro {
    .font-size(13);
    color: @color-main;
}

.workout-options{
    display: inline-block;
    border:1px solid @color-main-light;
    margin-bottom: 0;
    border-radius: 4px;
    padding: 0;
    width: auto;
    background-color: white;
    li{
        display: inline-block;
        border-right: 1px solid @color-main-light;
        &:last-child{
            border-right:none;
        }
    }
    a{
        display: block;
        color: @color-main-medium;
        padding: .5em .75em;
        text-decoration: none;
        &:hover{
            color: @color-main;
        }
        &.is-active {
            background-color: @color-main-medium;
            color: white;
        }
    }
}

.owo-del{
    a{
        &:hover{
            color: red;
        }
    }
}

.workout-aside{
    width: 100%;
    @media (min-width: @screen-m){
        max-width: 300px;
        padding-left: 1.5em;
        border-left:1px solid @color-main-light;
    }
}



.aside-profile {
    margin-bottom: 1em;
    img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 50%;
    }
    h2 {
        font-weight: 400;
        .font-size(18);
         margin: 0 0 .5em 0;
    }
    ul {
        list-style-type: none;
        margin:0;
        padding:0;
        .font-size(13);
        color: @color-main-dark;
    }
}



/* Workout detail */
#map {
    height: 400px;
    @media (min-width: @screen-s){
        height: calc(100vh - 380px);
    }
}

.workout-detail {
    padding: 0em  1em;
    @media (min-width: @screen-s){
        max-width: 1280px;
        margin: 0 auto;
    }
     @media (min-width: @screen-m){
        display: flex;
        justify-content:space-between;
    }
}

.workout-detail-resume {
    max-width: 500px;
    margin-bottom: 2em;
    padding-top: 2em;
    @media (min-width: @screen-m){
        margin-right: 6em;
    }
    h3 {
        margin-top: 0;
        margin-bottom: .5em;
        & + div {
            .font-size(14);
            color: @color-main-medium;
            line-height: 1.35em;
        }
    }
    .workout-options {
        .font-size(13);
    }
}

.workout-detail-info {
    max-width: 600px;
    @media (min-width: @screen-m){
        border-right: 1px solid @color-main-light;
        border-left: 1px solid @color-main-light;
        padding:2em 1em 2em 2em;
    }
    ul {
        list-style-type: none;
        padding:0;
        margin: 0;
        display: flex;
        justify-content:space-between;
        flex-flow: row wrap;
        span {
            display: block;
            .font-size(13);
            color: @color-main-medium;
            margin-bottom: .25em;
            &.min,
            &.avg,
            &.max {
                display: inline-block;
                color: white;
                padding: .5em .85em;
                border-radius: 3px;
            }
            &.max {
                background-color: @color-app;
            }
            &.min {
                background-color: #1395CA;
                margin-right: .5em;
            }

            &.avg {
                background-color: #17C898;
                margin-right: .5em;
            }
        }
    }
    li {
        margin-bottom: 2em;
        margin-right: 1em;
        color: @color-main-medium;
        .font-size(15);
        &.important {
            .font-size(21);
            color: @color-main;
        }
    }
}



/* Week report */
.svg-cotent {
    svg {
        width: 100%;
        height: 100%;
    }

    .label {
        .font-size(13);
        text-anchor: middle;
    }
    .tick {
        .font-size(13);
    }

}

/* dashboard graphics*/
.x-axis path, .x-axis line {
    fill: none;
    stroke: none;
}

.bar {
    fill: #f8b5be;
    &:hover {
        fill: #ee4056;
    }
}

.current {
    fill: #ee4056;
}



.week-stats {
    border: 1px solid @color-main-light;
    background-color: fade(@color-main-light, 10%);
    padding: .75em;
    border-radius: 4px;
    margin-bottom: 2em;
    h3 {
        margin: 0;
        .font-size(14);
        & + p {
            margin: .25em 0 2em 0;
            color: @color-main-medium;
            .font-size(13);
        }
    }
}

.workout-activity-summary {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: fade(@color-main, 80%);
    margin-bottom: .75em;
    li {
        color: @color-main-light;
        border-bottom: 1px solid @color-main-medium;
        padding: .75em 1em;
        display: flex;
        justify-content: space-between;
        &:last-child {
            margin-bottom: 0;
            border: none;
        }
        span {
            &:first-child {
                font-weight: bold;
            }
        }
    }
}

.workout-activity-tree {
    list-style-type: none;
    padding: 0;
    margin: 0;
    transition:all 250ms ease-in-out;
    .font-size(13);
    >li {
        margin-bottom: .5em;
        padding-bottom: .5em;
        border-bottom: 1px solid @color-main-light;
    }
    a {
        text-decoration: none;
        display: block;
        color: @color-app;
        &:hover{
            color: @color-main;
        }

        &.viewing-year {
            color: @color-main;
            font-weight: 700;
            margin-bottom: .5em;
            .font-size(16);
        }
        &.viewing-month {
            background-color: @color-main-light;
            color: @color-main;
            font-weight: 700;
        }
    }
}


.workout-activity-tree-year {
    list-style-type: none;
    padding: 0;
    margin: 0;
    >li {
        display: block;
        margin-bottom: .5em;
    }
    a {
        display: flex;
        justify-content: space-between;
        padding: .5em;
        background-color: @color-main-xtralight;
        color: @color-main-dark;
        &:hover {
            background-color: @color-main-light;
        }
    }
}