Lungo.js/src/stylesheets/Lungo.theme.default.less

/**
 * Stylesheet
 *
 * @namespace Lungo.Theme
 * @class Default
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "mixins.less";

@theme: #0093D5;
    @theme-light:  #39ABE1;

@theme: #2A95D3;
    @theme-light:  #25AEEB;
@theme-dark: #222;
    @theme-dark-current: #111;
    @theme-dark-nav: #888;
    @theme-dark-nav-active: #fff;
@theme-contrast: #444;
@aside: #191919;

@color: #484a49;


@notification-error: #e33100;
@notification-alert: #ffb515;
@notification-success: #009600;


@form-border-radius: 1px;

.app {
    background: #000;
    font-family: Helvetica, Arial, sans-serif;
}

.theme, li.theme, a.theme {
    background: @theme-light;
    &:active { background: @theme;}
}

/* @group <header> & <footer> & <article> */
section > header {
    background-color: @theme;
    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)");

    & .title {
        color: #fff;
        text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    }

    & .subtitle {
        color: #fff;
        opacity: 0.7;
    }
}

section > footer {
    background-color: @theme-dark;
    .box-shadow(inset 0 3px 0 #333);
    & > nav a {
        .box-shadow(1px 0 0 #151515);
        &.current {
            color:  @theme-dark-nav-active;
            background: @theme-dark-current;
            .box-shadow(~"-1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3");
        }
    }

}

section > article, section > [data-control="pull"] { background: #f4f5f5; }

[data-control="pull"] {
    color: #666;
    text-shadow: 0 1px 0 white;
}

aside {
    color: #fff;
    background: @aside;

    & header, footer {
        background: @theme-dark-current;
        text-shadow: none;
    }
    & header {
        .box-shadow(inset 0 -1px 0 rgba(0,0,0,0.2));
    }
    & article { background: none; }

    & nav {
        & .icon {color:white;}
    }

    & .list li {
        background: none;
        border-bottom-color: @theme-dark;

        &.current {
            background: @theme;
            border-bottom-color: @theme;

            & strong, & small, & .icon { color: #fff; }
        }
        & strong, & small, & .icon { color: @theme-dark-nav; }
    }
}

section.aside {
    .box-shadow(~"-1px 0 0 rgba(0,0,0,0.2)");
    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
}

/* @end */

/* @group <nav> */
header nav {
    & a { color: #fff; }

    &.box {
        &:not(.right) a { .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)"); }
        &.right a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
        & a:active { background: rgba(0,0,0,0.1); }
    }

    &.button a {
        border-radius: @form-border-radius;
        .linear-gradient(top, ~','rgba(0,0,0,0.0), ~','rgba(0,0,0,0.1));
        box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0, 0, 0, .5);
        &:active { background: rgba(0,0,0,0.2); }
    }
}

section > nav.groupbar {
    background-color: @theme-dark;
    & > a.current { .box-shadow(inset 0 -3px 0 @theme); }
}

footer > nav > a, nav.groupbar > a{
    color: @theme-dark-nav;
    &.current { color:  @theme-dark-nav-active; }
}

/* @end */

/* @group <aside> */


/* @group .list */
@list-border: #ddd;
@list-color: #2a2a2a;

.list {
    & li {
        background: #fff;
        border-bottom: inset 1px @list-border;

        &, & a { color: @list-color; }

        &.dark {
            background: @theme-contrast;
            &, & a { color: #fff; }
        }

        &.selectable:active, &.theme {
            background: @theme-light;
            &, & a { color: #fff; }
        }

         &.light {
            background:  @list-border;
            text-shadow: 0 1px 0 #eee;
            &, & a { color: @theme-dark-nav; }
        }

        &.anchor {
            background: @theme-dark;
            border-bottom: none;
            &, & a { color: #fff !important; }
        }

        & small, & .right:not(.bubble) { opacity: 0.8; }
    }

    &:not(.indented) li {
        &.dark, &.theme, &.light {
            border-bottom-color: rgba(0,0,0,0.1);
        }
    }

    &.indented li {

    }
}



/* @end */

/* @group widgets */
.splash {
    background: @theme-dark;
    color: #fff;
    text-shadow: 0 1px 0px rgba(0,0,0,0.2);
}




/* @group .button */
a.button {
    .border-radius(@form-border-radius);

    // .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255, 0.2)");
    .box-shadow(~"inset 0 2px 0 rgba(255,255,255, 0.2)");

    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);

    &:active { .box-shadow(~"inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3)"); }
}

/* @end */

/* @group <form> */
@box-shadow-form: ~'inset 0 1px 2px rgba(0,0,0,0.1)';
@box-shadow-form-active: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
@form-border-color: #D0D4C6;
label { color: #999; }

input:not([type=range]), textarea, select {
    border: 1px solid @form-border-color;
    .border-radius(@form-border-radius);
    // .box-shadow(@box-shadow-form);
    color: #858585;
    font-family: Helvetica, Arial, sans-serif;
    background: #fff;

    &:focus {
        color: #484a49;
        border-color: @theme;
        .box-shadow(0 0 1px @theme-light);
    }

    &[disabled] {
        background: #ddd;
        border-color: #999;
        color: #999; }
}

.select:after {
    background: @form-border-color;
    color: white;
    border-top-right-radius: @form-border-radius;
    border-bottom-right-radius: @form-border-radius;
}

/* @group range */
input[type=range] {
    .box-shadow(@box-shadow-form);
    .border-radius(@form-border-radius);

    &:not(.checkbox) {
        background-color: #c7c7c7;
        &:active { background-color: @theme-light;  }
    }

    &.checkbox {
        background-color: #aaaaaa;
        color: rgba(255,255,255,0.6);
        &.active { background-color: @theme-light; }
    }

    &::-webkit-slider-thumb {
        border-radius: @form-border-radius;
        box-shadow:0px 1px 2px 1px rgba(0,0,0,0.3);
        background: #fff; }

    &::-webkit-slider-thumb::after {
        background: #ddd; }
}
/* @end */

/* @group .progress */
.progress {
    .labels {
        font-size: 12px;
        font-weight: bold;
        line-height: 18px;
        color: #858585;
    }

    & .bar {
        .box-shadow(@box-shadow-form);
        background: #c7c7c7;
        .border-radius(@form-border-radius);

        & .value {
            background-color: @theme-light;
            .border-radius(@form-border-radius);

            & .label {
                float: right;
                margin-right: 3px;
                font-weight: bold;
                color: rgba(0,0,0,0.6);
                text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
                font-size: 12px;
            }
        }
    }
}
/* @end */


/* @group .bubble */
.bubble {
    color: #fff;
    .border-radius(2px);

    &.count { background: @theme; }
}
    header .count {
        background: @theme-dark !important;
    }

    footer .bubble {
        .box-shadow(~'inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)');
    }

    article .list .bubble {
        .box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
    }

    aside .list .bubble { background: rgba(0,0,0,0.25); }
/* @end */

/* @group .bubble */
.notification {
    color: #fff;
    & .window {
        &.confirm { background: #333; }

        &.notify {
            text-shadow: 0 1px 0px rgba(0,0,0,0.1);
            .box-shadow(~'inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25)');

            &.error { background: @notification-error; }
            &.alert { background: @notification-alert; }
            &.success { background: @notification-success; }
        }

        &.url {
            & .close {
                background: #000;
                border: solid 2px #fff;
                box-shadow: 0 0 4px black;
            }
        }
    }
}