stylesheet.less

/*

General CSS Notes
=================

z-indexes
----------
The rule of thumb for the z-index values to use is setup below

 - Ground level: < 100 is for things that are flat on the surface without
                 expectations of overlaying anything in the UX.
 - Floaty level: >= 500 is the land of floating panels. Things like the
                 browser and inspector which expect to float over the
                 environment, for instance.
 - Overlay level: > 1000 is the land for things that overlay. Spinny
                  indicators, masks, etc.


Using fonts
------------
Go forth and see the typography.less file and use those.


Class and property ordering
---------------
This is a general guide on how to structure your classes.

.class {
    @vars;
    .mixins;
    properties: values;

    &.additional-parent-classes {
    }
    .sub-classes {
    }
}

*/

/* Processed with LESS from lib/views/stylesheet.less */
@font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-mono: 'Ubuntu Mono', 'Ubuntu-Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;

/* Define common colors. */
@label-color: #292929;
@text-entry-color: #6d6e70;
@charm-panel-orange: #dd4814;
@charm-panel-background-color: #eeeeee;
@deployer-bar-height: 50px;
@environment-header-height: 40px;
@inspector-dark: #1c1817;
@inspector-divider-bottom: rgba(0, 0, 0, 0.3);
@inspector-divider-top: rgba(255, 255, 255, 0.05);
@left-panel-width: 290px;
@machine-view-border-colour: #d9d9d9;
@navbar-height: 48px;
@navbar-border-dark: #191514;
@navbar-border-light: #2d2928;
@text-colour: #505050;
@border-radius: 2px;
@uncommitted-colour: #19b6ee;

// Imports need to be after vars.
@import "typography.less";
@import "mixins.less";

/* Common classes and setup */
body,
input,
button,
select,
textarea {
    font-family: @font-family;
    font-weight: 300;
}
body {
    overflow: hidden;
    height: 100%;
    margin-top: @navbar-height;
    background-color: #302b28;
    font-size: 14px;
    line-height: 18px;
    -webkit-font-smoothing: antialiased;
    // This won't start working until Firefox 25
    -moz-osx-font-smoothing: grayscale;
}
.link,
a,
a:hover {
    cursor: pointer;
    color: @charm-panel-orange;
    text-decoration: none;
}
button {
    cursor: pointer;
    -webkit-appearance: button;
}
input[type="text"],
input[type="password"] {
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid @bws-border;
    border-radius: @border-radius;
}
svg {
    stroke-width: 0;
    overflow: hidden;
}
li {
    line-height: 18px;
}
h2 {
    line-height: 36px;
}
h4 {
    font-size: 14px;
}
h4, h5, h6 {
    line-height: 18px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: inherit;
    font-weight: 300;
    color: inherit;
    text-rendering: optimizelegibility;
}
ul {
    padding: 0;
}
label {
    display: block;
}
strong {
    font-weight: 400;
}
.align-right {
    text-align: right;
}
i.sprite {
    display: inline-block;
    vertical-align: middle;
}
ul.menu li,
div.inline {
  float: left;
}
ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.alert {
    letter-spacing: normal;
}
.clearall {
    clear: both;
}
.hidden {
    display: none;
    visibility: hidden;
}
pre {
    margin-bottom: 10px;
    padding: 5px;
    background-color: #fdf6f2;
    border: none;
}
pre,
code {
    font-family: @font-family-mono;
    font-size: 14px;
    color: #333;
}
th {
    font-weight: 300;
}

/* Layout, widgets etc. */

/*
 * The main header above the canvas
 */
.navbar {
    min-width: 800px;
    height: @navbar-height;
    margin: -@navbar-height 0 0 0;
    background-color: #221e1b;

    &,
    & > ul > li > a {
        color: #d7d3d0;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .right-nav,
    #browser-nav {
        & > li,
        & > li.tab > a {
            .border-box;
            display: block;
            height: @navbar-height;
            padding: 14px 20px 0 20px;
        }
        & > li {
            float: left;
            border-width: 0 1px;
            border-style: solid;
            border-left-color: @navbar-border-light;
            border-right-color: @navbar-border-dark;

            & > a {
                &.button {
                    margin: -8px 0 0 0;
                }
            }
        }
    }
    #browser-nav {
        float: left;
        border-right: 1px solid @navbar-border-light;

        & > li {
            &:first-child {
                border-left: none;
            }
            .brand {
                display: block;
                margin: -5px 10px 0 0;
                padding: 0;
            }
            & > a {
                &:hover {
                    text-decoration: none;
                }
            }
            &.tab a {
                margin: -14px -20px 0 -20px;

                &.active {
                    border-bottom: 3px solid @charm-panel-orange;
                }
                .sprite {
                    margin-right: 6px;
                }
            }
            // Can be removed when flags.mv is removed.
            &.import-export {
                padding: 17px 0 0 0;

                a {
                    .sprite-hover;
                    display: block;
                    float: left;
                    height: 15px;
                    padding:  0 10px;
                    line-height: 15px;

                    &:first-child {
                        border-left: 1px solid @navbar-border-dark;
                    }
                    &:last-child {
                        border-right: 1px solid @navbar-border-light;
                    }
                    .sprite {
                        display: block;
                        margin: 1px 0 0 0;
                    }
                    &:focus,
                    &:hover {
                        .sprite.hover {
                            display: block;
                        }
                    }
                }
                input[type=file] {
                    display: none;
                }
            }
            &.notifications-nav {
                position: relative;

                #notify-indicator {
                  .button;
                  margin: -5px 9px 0 0;
                  padding: 6px 12px;
                }
            }
        }
    }
    .right-nav {
        float: right;
        margin: 0;
        border-left: 1px solid @navbar-border-dark;

        & > li:last-child {
            border-right: none;
        }
        a.button.inverse {
            background-color: #1f1b18;

            &:hover {
                background-color: #1f1b18;
            }
        }
    }
}
#content {
    position: relative;
    background-color: #fff;
    width: 100%;
}
#main {
    overflow: hidden;
}
.crosshatch-background {
    background: url(/juju-ui/assets/images/non-sprites/pattern_tile.png) repeat;
}
#canvas {
    position: relative;
}
.zoom-plane {
    fill-opacity: 0;
    cursor: move;
}
/*
 * The keyboard shorcut panel
 */
#shortcut-help {
    .create-box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.5));
    position: absolute;
    left: 4%;
    right: 4%;
    top: 8%;
    bottom: 8%;
    opacity: 0.85;
    z-index: 1000;
    padding: 20px;
    background-color: black;
    border-radius: @border-radius;
    color: #fff;

    table {
        margin-top: 20px;

        th {
            text-align: left;
        }
        td {
            padding: 5px 20px;
        }
    }
}
/*
 * Intro text that appears on the canvas if there are no deployed services.
 */
#environment-help {
    color: #757575;
    text-align: center;
    /* This is absolute so that it does not push the svg down when it is
       visible.  That's important for animations hiding and showing this help,
       and if we want the help to appear when a service is present (such as the
       GUI itself). */
    position: absolute;
    overflow: hidden;
    padding: 0;
    width: 100%;
    height: 100%;
    /* pointer-events does not work in IE 10 except in SVG, so this is just a
       way to slightly improve the experience during transitions. */
    pointer-events: none;

    div.vertical-center-floater {
        height: 50%;
        margin-bottom: -250px;
        margin-top: 0;
        min-height: 225px;
    }
    div.content {
        height: 450px;
    }
    h1 {
        line-height: normal;
        margin-bottom: 1ex;
        font-size: 26px;
    }
    p {
        line-height: normal;
        font-size: 18px;
        width: 301px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2ex;
    }
}
/*
 * The actions menu that appears next to a service block.
 */
.environment-menu {
    .create-border-radius(@border-radius);
    .create-box-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    display: none;
    background-color: #fff;
    color: @text-colour;
    top: 0;
    left: 0;
    position: absolute;

    &.active {
        display: block;
    }
    .triangle {
        position: absolute;
        top: 22px;
        width: 0;
        height: 0;
        border-style: solid;
    }
    &.right .triangle {
        left: -16px;
        border-width: 10px 17.3px 10px 0;
        border-color: transparent #fff transparent transparent;
    }
    &.left .triangle {
        right: -16px;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent #fff;
    }
    &.top .triangle {
        top: auto;
        bottom: -16px;
        border-width: 17.3px 10px 0px 10px;
        border-color: #fff transparent transparent transparent;
    }
    .menu-title {
        margin: 10px;
    }
    .cancel {
        margin: 10px;
        float: right;
    }
    ul {
        margin: 0;
        list-style-type: none;

        li {
            background-position: 10px center;
            background-repeat: no-repeat;
            cursor: pointer;
            line-height: 32px;
            padding: 0 15px;
            white-space: nowrap;

            a {
              text-decoration: none;
              font-size: 13px;
              color: @text-colour;
            }
            &.add-relation {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_relation.png);
                .disabled {
                    color: red;
                }
            }
            &.landscape-reboot {
                background-image: url(/juju-ui/assets/images/non-sprites/landscape_restart_menu.png);
            }
            &.landscape-security {
                background-image: url(/juju-ui/assets/images/non-sprites/landscape_security_menu.png);
            }
            &:last-child {
                border-bottom: none;
            }
            &:hover {
                background-color: #f2f2f2;
            }
            &.disabled {
                color: gray;
                cursor: default;

                &:hover {
                    background-color: inherit;
                }
            }
        }
    }
    &#service-menu ul li {
        padding-left: 36px;
    }

}
.subordinate-rel-group {
    display: none;

    &.active {
        display: inline;
    }
}
#relation-menu {
    .relation-container {
        cursor: inherit;
        padding-left: 30px;
        padding-right: 0;
        line-height: 30px;
        background-repeat: no-repeat;
        background-position: 10px 11px;
        background-image: url("/juju-ui/assets/images/inspector-charm-running.png");
        &.error {
            background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
        }
        .endpoint.error {
            color: red;
        }
        &:hover {
            background-color: inherit;
        }
    }
    .triangle {
        bottom: -3px;
        border-width: 3px 5px 0 5px;
    }
    .relation-remove {
        cursor: pointer;
        display: inline-block;
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-image: url("/juju-ui/assets/images/trash.png");
        margin-bottom: -10px;
    }
    .inspect-relation {
        cursor: pointer;
    }
}

.relation {
    stroke: rgb(167, 167, 167);
    stroke-width: 2px;

    &.error {
        stroke: #cc3333;
    }
    &.subordinate {
        stroke: rgb(167, 167, 167);
    }
    &.healthy {
        stroke: #33cc33;
    }
    &.pending {
        stroke: #e2e2e2;
    }
    &.pending-relation {
        stroke: #faaf40;

        &.dragging {
            stroke: #fa6a40
        }
    }
    &.unused {
        visibility: hidden;
    }
    &.subordinate-relation {
        stroke: #3333cc;
    }
}
.rel-indicator {
    cursor: pointer;
}
circle.mouse-down-indicator {
    stroke: #040404;
    stroke-width: 2px;
    fill: none;
}
g.service {
    fill: none;
    stroke: none;

    &.pending {
        opacity: 0.8;
    }
    text {
        text-anchor: middle;
    }
    .charm-label {
        font-style: italic;
        fill: #4c4c4c;
    }
    .name {
      fill: rgb(80, 80, 80);
      font-size: 14px;
    }
   .unit-count {
        stroke-width: 0;
        text-anchor: middle;
        dominant-baseline: central;
        fill: rgba(0,0,0,0);

        &.show-count {
            fill: rgba(0,0,0,1);
        }
        &.hide-count {
            fill: rgba(0,0,0,0);
        }
    }

    .sub-rel-count {
        text-anchor: middle;
        dominant_baseline: central;
        fill: #4f4f4f;
        font-size: 18px;

        &.active {
            font-style: italic;
            font-weight: bold;
            fill: #3333cc;
        }
    }

    .exposed-indicator {
        fill: #00F;

        &.off {
            visibility: hidden;
        }
        &.on {
            visibility: visible;
        }
    }

    .service-control-panel {
        visibility: hidden;

        &.active {
            visibility: visible;
        }
        image {
            cursor: pointer;
        }
    }
}
g.service-status {
    path {
        stroke-width: 0;
        fill: #fff;
    }
}
g.unit {
    stroke-width: 0; font-weight: bold;
    font-size: 18px;
    fill: #1626cf;

    .address {
        fill: #fff; font-size: 14px;
    }
    .unit-border {
        stroke-width: 2px; fill: #a0a0a0;
    }
}

/*
 * D3 StatusBar support
 */
.statusbar {
  .label {
    fill: white;
  }

  .error {
    fill: rgb(224, 56, 45);
  }

  .pending {
    fill: rgb(236, 168, 23);
  }

  .running {
    fill: rgb(56, 180, 74);
  }
}

/*
 * Notifier widget.
 * Contains notifications that appear from the header.
 */
.notifier-box {
    position: absolute;
    top: @navbar-height;
    left: 50%;
    margin: -2px 0 0 -125px;
    z-index: 9999;

    &.bundle {
        margin: -10px 0 0 150px;
    }

    .yui3-notifier-content {
        @box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        .create-border-radius(@border-radius);
        .create-box-shadow(@box-shadow);
        position: realtive;
        width: 250px;
        margin-top: 5px;
        padding: 7px 10px;
        background-color: #fff;
        color: #333;
        font-size: 12px;

        &.bottom-arrow {
            width: 177px;
        }

        &:first-child {
            margin-top: 0;

            &:before {
                content: '';
                position: absolute;
                display: block;
                top: -5px;
                left: 50%;
                width: 10px;
                height: 10px;
                margin-left: -6px;
                background-color: #fff;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &.bottom-arrow:before {
                top: inherit;
                bottom: -5px;
            }
        }
        div:last-child {
          color: #aaa;
        }
    }
}

/*
 * Canvas zoom control
 */
.zoom-controls {
    position: absolute;
    right: 20px;
    top: 40px;
}
.flag-mv .zoom-controls {
    top: 80px;
}
.yui3-slider-y .yui3-slider-rail,
.yui3-slider-y .yui3-slider-rail-cap-top,
.yui3-slider-y .yui3-slider-rail-cap-bottom {
    background-image: none;
}
.yui3-slider-y .yui3-slider-rail {
    .create-border-radius(@border-radius);
    .create-box-shadow(inset 0 0 4px rgba(0,0,0,.51));
    background-color: #bbbbbb;
    width: 10px;
}

.yui3-slider-y .yui3-slider-thumb-shadow {
    display: none;
}
.yui3-slider-y .yui3-slider-thumb {
    width: 21px;
    height: 21px;
    left: 0;
    overflow: visible;
}
.yui3-slider-y .yui3-slider-thumb-image {
    left: -5px;
}
#zoom-in-btn,
#zoom-out-btn {
    position: relative;
    left: -5px;
    width: 20px;
    height: 20px;
    overflow: hidden;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#zoom-in-btn {
    top: -10px;
}
#zoom-out-btn {
    top: 10px;
}
.yui3-slider-thumb {
  &:focus {
    outline: none;
  }
}
/*
 * This panel is displayed when deleting relations.
 */
.yui3-panel {
    .create-border-radius(@border-radius);
    .create-box-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);

    .yui3-widget-bd {
        margin-bottom: 20px;
    }
    .yui3-widget-buttons {
        float: right;

        .button {
            margin-left: 10px;
        }
    }
}
.yui3-widget-mask {
    background: black;
    opacity: 0.4;
}
.controls {
    .read-only {
        padding-top: 5px;
    }
}
.unit-button-palette {
    float: right;
}
#destroy-service {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
.service-view+.viewlet-manager {
    overflow-y: auto;
}
#full-screen-mask {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

/*
 * This is used for the initial page before displaying the canvas
 * e.g. login, connecting to Juju and browser not supported screens
 */
.centered-column {
    display: block;
    z-index: 10001;
    position: absolute;
    top: 80px;
    left: 50%;
    text-align: center;
    width: 320px;
    margin-left: -160px;

    /* This enables us to use the .centered-column
    class inside of the main application */
    &.in-main {
        top: 0;
    }
    div {
        width: 280px;
        text-align: left;
        margin: 0 auto;
    }
    .panel {
        .create-border-radius(@border-radius);
        margin: 20px 0;
        padding: 0 20px 20px 20px;
        background-color: #f5f5f5;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);

        input {
            .border-box;
            width: 100%;
            margin-bottom: 20px;

            &[disabled] {
                background-color: #eee;
            }
        }
        input[type=submit] {
            .button;
        }
        .header {
            .type9;
            margin: 0 0 20px -20px;
            padding: 10px 20px;
            background-color: #ddd;
            -webkit-border-top-left-radius: @border-radius;
            -webkit-border-top-right-radius: @border-radius;
            -moz-border-radius-topleft: @border-radius;
            -moz-border-radius-topright: @border-radius;
            border-top-left-radius: @border-radius;
            border-top-right-radius: @border-radius;
            text-align: center;
        }
        .form-error {
            .type9;
            margin-bottom: 20px;
            color: red;
        }
    }
    #loading-spinner {
        height: 100px;
    }
}

body.flag-mv {
    #browser-nav .import-export {
        display: none;
    }
}

/** Browser Setup **/
@import "browser/reset.less";
@import "browser/vars.less";

/** SubApps **/
@import "browser/main.less";

/** Widgets **/
@import "browser/bundle-panel.less";
@import "browser/bws-searchbox.less";
@import "browser/token-container.less";
@import "browser/charm-full.less";
@import "browser/token.less";
@import "browser/overlay-indicator.less";
@import "browser/section-title.less";
@import "browser/tabview.less";
@import "inspector/scale-up.less";
@import "machine-view/serviceunit-token.less";
@import "machine-view/container-token.less";
@import "machine-view/create-machine-view.less";
@import "machine-view/machine-token.less";
@import "machine-view/machine-view-panel.less";
@import "machine-view/machine-view-token-base.less";
@import "machine-view/service-scale-up-view.less";
@import "content-panel.less";
@import "deployer-bar.less";
@import "dropdown.less";
@import "environment-header.less";
@import "juju-inspector.less";

/** Views **/
@import "browser/onboarding.less";
@import "browser/editorial.less";
@import "browser/search.less";

/** Cookies **/
@import "cookies.less";