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";

@theme: #05bde9;
@theme-light:  #42c8fc;
@theme-dark: #07acd0;
@color: #484a49;

@section-radius: 4px;
@header: #efeeed;
    @header-bottom: #e0dedf;
@footer: #353b42;
    @footer-bottom: #272a2d;

@color-secondary: #353b42;
    @color-secondary-dark: #272a2d;


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

/* @group <header> & <footer> & <article> */
section > header {
    .linear-gradient(top, ~','@header 0%, ~','@header-bottom 100%);
    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3)");
    .border-radius(@section-radius @section-radius 0px 0px);
    & .title { color: @color; }
    & .subtitle {
        color: rgba(255,255,255,0.6);
        text-shadow: 0px -1px 0px rgba(0,0,0,0.3); }
}

section > footer {
    .linear-gradient(top, ~','@footer 0%, ~','@footer-bottom 60%);
    color: #353b42;
    .border-radius(0px 0px @section-radius @section-radius); }

article { background: #f4f5f5; }
/* @end */

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

    &: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); }

            &:active {
                color: @white;
                &.accept { background: rgba(0, 255, 0, 0.2); }
                &.cancel { background: rgba(255, 0, 0, 0.2); }
                &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.1); }
            }
        }

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

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

footer nav {
    & a {
        color: rgba(0,0,0,0.6);
        .text-shadow(0 1px 0 rgba(255,255,255,0.1));

        &.current, &.active {
            color: @white;
            text-shadow: 0 0 1px @white;
            background: @black;
            .box-shadow(~"-1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)"); }
    }
}

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

    &.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: @color-secondary;
    & a {
        color: #e3e4e3;
        &.current {
            color:  @white;
            .box-shadow(inset 0 -3px 0 @theme); }
    }
}
/* @end */

/* @group <aside> */
aside {
    color:  #fff;
    background: #333;

    & header, footer {
        .box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
        background: #272727; }

    & article { background: none; }

    & .list {
        & ul { background: none; }

        & li {
            color: #F0F0F0;
            border-top: 1px solid rgba(255,255,255,0.05);
            border-bottom: 1px solid #2f2f2f;
            &.current { background: @theme; }
            & strong {
                text-shadow: 0 1px 1px rgba(0,0,0,0.75);
                color: @white; }
            & small { color:  rgba(255,255,255,0.5); }
        }
    }

    & a.current { background: @theme; }
}

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

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

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

section .list {
    & ul, li { background: #fff; }
    & li {
        border-bottom: 1px inset #eee;
    }
}

.list li {
    &:last-child { border-bottom: none; }

    &.selectable:active {
        background: @theme-light;

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

    &.highlight { background: #eee; }

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

    & small, & .right:not(.bubble) { opacity: 0.75; }
    & strong { color: #333; }
}
/* @end */

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

&.indented {
    & ul {
        .border-radius(2px);
        box-shadow: 0 0 2px rgba(0,0,0,0.2);
    }

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


/* @group .button */
.button {
    .border-radius(2px);
    .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), 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)"); }

    &.theme {
        background: @theme;
        &:active, &.active { background: @theme-dark;}
    }
}

/* @end */

/* @group <form> */
@box-shadow-form: ~'inset 0 2px 1px 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';

@border-radius-form: 2px;

form, .form {
    & label {
        color: #999;
    }
}
input, textarea, select {
    border: 1px solid #ccc;
    .border-radius(@border-radius-form);
    color: #858585;
    font-family: Helvetica, Arial, sans-serif;
    .box-shadow(@box-shadow-form);

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

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

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

    input[type="checkbox"]:checked + span,
    input[type="radio"]:checked + span {
        .linear-gradient(top, ~','@theme 0%, ~','@theme-dark 100%);
        .border-radius(@border-radius-form);
    }
/* @end */

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

    &:active { .box-shadow(none); }

    &::-webkit-slider-thumb {
        .border-radius(12px);
        background: #a0a0a0;
    }
    &:active::-webkit-slider-thumb {
        .box-shadow(0px 0px 4px @theme-light);
        .linear-gradient(top, ~','@theme 0%, ~','@theme-dark 100%);
    }
}
/* @end */

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

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

        & .value {
            .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%);
            .border-radius(@border-radius-form);

            & .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: @white;
    .border-radius(2px);
    &.count { .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%); }
}
    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 */