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

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

@import "constants.less";
@import "mixins.less";

@import "lungo.theme.default.font.css";

@theme:  #05b8e2;
    @theme-light: #05bde9;
    @theme-dark: #07acd0;
    @theme-highlight: #93d6e7;
        @theme-highlight-color: #1b6777;
        @theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    @theme-secondary: #2c2c2d;
        @theme-secondary-dark: #1c1c1c;


@color-border: #2566a4;
@color-border-light: #64b9e2;

@background-main: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
@background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
    @background-secondary-footer: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));

.app {
    background: @black;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

/* @group <header> & <footer> & <article> */
header {
    /*border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
    border-bottom: 1px solid #1a2838;

    background: @background-main;

    box-shadow: inset 0 1px 0 @color-border-light, inset 0 -1px 0 @color-border;

    position: absolute;
    z-index: 2;

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

    & .subtitle {
        color: rgba(255,255,255,0.6);
        text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
    }
}

footer {
    background: @background-secondary-footer;

    border-top: 1px inset #2A2A2A;
    color: #353b42;

    //border-bottom-left-radius: 5px;
    //border-bottom-right-radius: 5px;
}

article {
    background-color: #EBEBEB;
    & .title {
        color: #797979;
        text-shadow: 0px 1px 0px #fff;
    }
}
/* @end */

/* @group <nav> */
header nav {

    & a {
        color: @white;
        text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    }

    &:not(.plain) {
        & a {
            box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);

            &.accept { background: rgba(0, 255, 0, 0.4); }
            &.cancel { background: rgba(255, 0, 0, 0.4); }
        }
        &.onright a { box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2); }

        & a:active { box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5); }
    }

    &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
}

.toolbar a {
    color: #cdd9e3;
    .border-radius(4px);
    font-weight: bold;

    &.current, &.active {
        background: #111;
        box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
    }
}


.groupbar {
    background: #272a2d;
    border-bottom: solid 1px rgba(0,0,0,1);
    box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);

    & a {
        color: #6e6e6e;
        &.current {
            color:  #fff;
            border-bottom: solid 3px @color-border;
        }
    }
}
/* @end */

/* @group <aside> */
aside {
    color: #9faab1;
    background-color: #2f353a;

    & .title { background: #252525; }

    & a {
        color: #9faab1;
        text-shadow: 0px 1px 0px #000;
        &.current, &.current .icon { color: @white !important; }
    }

    &:not(.mini) a {
        border-bottom: 1px inset #222;
        border-top: 1px inset rgba(255,255,255,0.1);
    }

    & .anchor {
        background: #101010;
        color:  #7a7a7a;
    }
}

section.aside {
    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
    &.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
}

@media handheld, only screen and (min-width: 768px) {
    section.current, section.show {
        box-shadow: -4px 0 8px rgba(0,0,0,0.5);
        &.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
    }
}
/* @end */

/* @group .list */
.list, .list li:not(.toolbar) a { color: #2a2a2a; }

.list {
    & li {
        background: #fff;

        border-bottom: 1px inset #e1e1e1;


        &:last-child { border-bottom: none; }

        &.selectable:active {
            background: @theme-highlight;
            color: @theme-highlight-color;
            text-shadow: @theme-highlight-text-shadow;

            & small, & .onright:not(.bubble) {
                color: @white;
                text-shadow: none;
            }
        }

        & small, & .onright:not(.bubble) { color: #888; }
    }

    &.indented li {
        border-left: solid 1px #e1e1e1;
        border-right: solid 1px #e1e1e1;

        &:first-child { border-top: solid 1px #e1e1e1; }
        &:last-child { border-bottom: solid 1px  #e1e1e1; }
    }

    & .anchor {
        color: @white;
        background: @background-main;
        border: none;
    }

    & .tip {
        color: #7a7a7a;
        &.theme {
    color: #fff;
            background: @background-main;

        }
        &.dark {
            background: @background-secondary;
            color: #fff;
            text-shadow: 0px -1px 0px rgba(0,0,0,0.5);

            & a { color: #fff !important; }
        }
    }

    & .toolbar {
        border-bottom-color: rgba(0,0,0,0.2);

        & .toolbar a {
            box-shadow: 1px 0px 0px #d9d9d9;

            &:last-child { box-shadow: none; }
            &.current {
                background: transparent;
                color: #333;
                text-shadow: none !important;
            }

        }
    }
}
/* @end */

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

&.indented {
        & ul { .border-radius(5px); }
        & li {
            &:first-child { .border-radius(5px 5px 0px 0px); }
            &:last-child {
                .border-radius(0px 0px 5px 5px);
                box-shadow: 0 1px 0 rgba(0,0,0,0.05);
            }
        }
    }


/* @group .button */
.button {
    .border-radius(@border-radius);
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);

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

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

    &.default {
        background: #2c4579;
        &:active, &.active { background: #213761;}
    }
}
/* @end */

/* @group <form> */
@box-shadow-form: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);

form, .form {
    font-weight: bold;
    & li { min-height: 27px; }
    & label { color: #999; }
}

input, textarea, select {
    border: 1px solid #e1e1e1;
    .border-radius(@border-radius);
    color: #858585;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    box-shadow: @box-shadow-form;

    &.underline {
        border:  none;
        box-shadow: none;
        border-bottom: 2px solid #e1e1e1;
    }
}

input:focus, textarea:focus, select:focus {
    color:  @color-border-light;
    border-color: @color-border-light;
}

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

/* @group .range */
input[type="checkbox"] + span, input[type="radio"] + span {
    color: #fff;
    background: #a0a0a0;
    .border-radius(@border-radius);
}
    input[type="checkbox"] + span::before,
    input[type="radio"] + span::before {
        background: #c1c1c1;
        .border-radius(@border-radius);
    }

    input[type="checkbox"]:checked + span,
    input[type="radio"]:checked + span {
        background: @background-main;
        .border-radius(@border-radius);
    }
/* @end */



/* @group range */
input[type="range"] {
    background-color: #c7c7c7;
    .border-radius(@border-radius);
    box-shadow: @box-shadow-form-big;


    &:active {
        box-shadow: none;
        background: @background-main;
    }
    &::-webkit-slider-thumb {
        //border: solid 7px rgba(255,255,255, 0.5);
        box-shadow: 0 0 4px #333;
        background: #fff;
    }
    &:active::-webkit-slider-thumb {
        box-shadow: 0px 0px 4px #34b7dc;
    }
}
/* @end */

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

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

        & .value {
            background: @background-main;
            .border-radius(@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 */


/* @end */

.bubble {
    color: #fff;
    .border-radius(7px);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    font-weight: bold !important;

    box-shadow: 0 0 6px #000;

    &.count { background: @background-main; }
}
    header .bubble.count {
        background: @theme-secondary;
    }
/* @end */