weave-scope/client/app/styles/main.less

@import "../../node_modules/material-ui/src/less/scaffolding";
@import "../../node_modules/material-ui/src/less/components";
@import "../../node_modules/font-awesome/less/font-awesome.less";

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* weave company colours */
@weave-gray-blue: rgb(85,105,145);
@weave-blue: rgb(0,210,255);
@weave-orange: rgb(255,75,25);
@weave-charcoal-blue: rgb(50,50,75); // #32324B

@primary-color: @weave-charcoal-blue;
@background-color: lighten(@primary-color, 66%);
@background-secondary-color: lighten(@background-color, 8%);
@text-color: lighten(@primary-color, 10%);
@text-secondary-color: lighten(@primary-color, 33%);
@text-tertiary-color: lighten(@primary-color, 50%);
@text-darker-color: @primary-color;
@white: @background-secondary-color;

html, body {
}

.wrap {
}


/* Space out content a bit */
body {
    background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
    color: @text-color;
    line-height: 150%;
}

#app {
}

.header {
    position: absolute;
    top: 32px;
    width: 100%;
    height: 80px;
    z-index: 20;
}

.logo {
    margin: -8px 64px 0 64px;
    height: 64px;
    width: 250px;
    float: left;
}

.topologies {
    float: left;
    position: relative;
    margin-top: 7px;
    margin-left: 128px;

    &-icon {
        font-size: 12px;
        color: @text-secondary-color;
        margin-right: 16px;
        position: relative;
        top: -1px;
    }

    .topologies-item {
        margin: 8px 16px 6px 0;
        cursor: pointer;
        display: inline-block;

        &-label {
            color: @text-secondary-color;
            font-size: 16px;
            text-transform: uppercase;
        }

        &-active, &:hover {
            .topologies-item-label {
                color: @text-color;
            }
        }
    }
}

.groupings {
    float: left;
    position: relative;
    margin-top: 7px;
    margin-left: 128px;

    &-item {
        font-size: 16px;
        margin: 8px 12px 6px 0;
        cursor: pointer;
        display: inline-block;
        color: @text-tertiary-color;

        &-active, &:hover {
            color: @text-color;
        }
    }
}

#stats {

    .stat-value {
        text-align: center;
        padding-top: 15px;
    }

    .value {
        font-size: 36px;
        display: block;
    }
    .stat-label {
        position: relative;
        top: 4px;
        color: @text-secondary-color;
        text-transform: uppercase;
        font-weight: normal;
    }
}

#nodes {

    svg {
        position: absolute;
        top: 0px;
    }

    text {
        font-size: 14px;
        font-family: Roboto;
        fill: @text-secondary-color;
        text-shadow: 0 2px 0 @white, 2px 0 0 @white, 0 -2px 0 @white, -2px 0 0 @white;

        &.node-label {
            fill: @text-color;
        }

        &.node-sublabel {
            font-size: 12px;
            fill: @text-secondary-color;
        }
    }

    g.node {
        cursor: pointer;
    }

    .link {
      stroke: @text-secondary-color;
      stroke-width: 1.5px;
      fill: none;
      opacity: 0.5;
    }

    circle.border {
        stroke-width: 3px;
        fill: none;
    }

    circle.shadow {
        stroke: none;
        fill: @background-secondary-color;
    }

    circle.node {
      fill: @text-color;
    }
}

#details {
    position: absolute;
    z-index: 1024;
    display: block;
    right: 36px;
    top: 24px;
    bottom: 48px;
    width: 32em;

    .details-tools {
        float: right;
        padding: 16px 24px;
        color: @white;

        span {
            cursor: pointer;
            &:hover {
                color: white;
            }
        }
    }
}

.mui-paper, .mui-paper-container {
    height: 100%;
}

.node-details {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.86);

    &-header {

        padding: 24px 36px 24px 36px;

        &-label {
            color: white;
            margin-bottom: 0;

            &-minor {
                font-size: 120%;
                color: @white;
            }

        }

    }

    &-content {
        padding: 0 36px 0 36px;
    }

    &-table {

        margin-bottom: 8px;

        &-title {
            text-transform: uppercase;
            margin-bottom: 0;
            color: @text-secondary-color;
            font-size: 100%;
        }

        &-row {
            > div {
                display: inline-block;
            }

            &-key {
                width: 9em;
            }

            &-value-major {
                margin-right: 0.5em;
            }

            &-value-scalar {
                width: 2em;
                text-align: right;
                margin-right: 0.5em;
            }

            &-value-minor,
            &-value-unit {
                font-size: 95%;
                color: @text-secondary-color;
            }

        }

    }

}