/**
 * This is a custom SCSS stylesheet for the Twitter application. First we include the Sencha Touch SCSS, without including
 * the parts we don't need (e.g. tabs, pickers, carousel etc). After that we simply define our application's CSS using
 * normal CSS or SCSS syntax.
 *
 * To compile this stylesheet, we just open up a terminal window, cd to twitter/resources/scss (the location of this file)
 * and run this command:
 *
 *     compass compile
 *
 * This builds an optimized application.css file, placing it in the twitter/resources/css directory.
 *
 * Note - to run the compass command you must have the Ruby language installed (if you're on OS X you already have it,
 * if you're on windows it's easy to install - see http://rubyforge.org/frs/?group_id=167). Once you have ruby, open
 * up a terminal window and type in:
 *
 *     gem install haml compass compass-colors
 *
 * After this you can run 'compass compile' as above to compile the stylesheet.
 */

//custom colors used in this file.
$twitter-blue: #54738d;
$gray: #d4d6e1;

//sencha touch variables we need to override
$list-pressed-color: lighten($gray, 5%);
$list-active-color: $gray;
$list-active-gradient: matte;

//import the sencha touch theme
@import 'sencha-touch/default/all';

//include all the components we need styling for
@include sencha-panel;
@include sencha-buttons;
@include sencha-toolbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-form;
@include sencha-toolbar-forms;
@include sencha-loading-spinner;

//create a custom toolbar ui using the twitter blue color we defined above
@include sencha-toolbar-ui('searchbar', $twitter-blue);

//search container
.searchcontainer {
    border-right: 1px solid darken($twitter-blue, 20);
}

//searchbar
.x-toolbar-searchbar {
    padding: .2em;
    border-color: darken($twitter-blue, 20) !important;

    &.big {
        padding: .5em;
        height: 4.7em !important;
    }

    .x-field {
        width: auto;
        min-height: 0;
        padding: 0 .1em 0 .2em;
        @include border-radius(.5em);

        input {
            margin: .2em;
            width: 80%;
        }
    }

    .x-title {
        line-height: 1em;
        font-size: .7em;
        color: #eeeff0;
        text-shadow: 0 -1px 0 rgba(0,0,0,.5);
        text-align: center;
        font-weight: bold;
        margin: 0 0 .5em 0;
    }
}

//search list
.x-list-searchlist {
    .x-data-item {
        text-shadow: 0 1px 0 rgba(255,255,255,.9);
        color: darken($twitter-blue, 30);
        padding: 0.5em 0.8em;
        height: 2.8em;
        border-top: 1px solid darken(#F2F3F6, 10) !important;

        &.x-item-selected {
            text-shadow: 0 1px 0 rgba(255,255,255,.6);
            color: darken($twitter-blue, 30);
            border-top: 1px solid darken($gray, 30);
            border-bottom: 1px solid darken($gray, 10);
            @include background-gradient($list-active-color, $list-active-gradient);
        }

        .search {
            overflow: visible;
        }

        .search {
            line-height: 1em;
        }
    }
}

.searchcontainer .x-list-inner,
.searchcontainer .x-list-inner .x-inner {
    width: 100%
}

.searchcontainer .x-data-item .x-innerhtml {
    padding: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

//tweetlist
.x-dataview-timeline {
    .x-dataview-emptytext {
        padding: 3em;
        font-weight: bold;
        text-align: center;
    }

    .x-data-item {
        padding: 1em;
        background: #fff;
        border-bottom: 1px solid $gray;

        .avatar {
            width: 48px;
            height: 48px;
            margin-right: .5em;
            border: 1px solid $gray;
            @include border-radius(.4em);
             -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
        }

        .username {
            font-weight: bold;
            margin-bottom: .2em;
        }

        .text {
            color: #444;
            line-height: 1.5em;
            overflow: visible;

            .link {
                color: $twitter-blue;
                text-decoration: underline;
            }

            .username {
                color: #000;
            }

            .hashtag {
                cursor: pointer;
                padding: 0.07em 0.3em;
                @include border-radius(0.4em);
                background: rgba(200,200,200,.3);
            }
        }

        .username,
        .text {
            font-size: .9em;
        }

        &.popular {
            position: relative;
            @include background-gradient(lighten($twitter-blue, 45), recessed);

            .hashtag {
                background: rgba(255,255,255,.4);
            }

            .retweets {
                color: rgba(0,0,0,0.4);
                font-size: .7em;
                margin-top: .5em;
            }

            &:after {
                position: absolute;
                top: .5em;
                right: .5em;
                width: 1.5em;
                height: 1.5em;
                -webkit-mask-image: theme_image($theme-name, "pictos/favorites_circle.png");
                -webkit-mask-size: 100% 100%;
                background: rgba(255,255,255,.7);
                z-index: 10;
                content: "";
            }
        }
    }
}