/*

This is a custom SCSS stylesheet for the Twitter application. First we include the Sencha Touch SCSS, commenting out
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.

*/


$include-default-icons: false;
$include-default-uis: false;
$base-color: #3E7AAD;
$list_active_color: lighten($base-color, 10%);

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

@include sencha-panel;
@include sencha-buttons;
//@include sencha-sheet;
//@include sencha-picker;
//@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
//@include sencha-carousel;
//@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
//@include sencha-form;
//@include sencha-msgbox;

@include sencha-toolbar-ui('dark', darken($base-color, 15%));

// @include pictos-button-icon()

.x-item-selected {
    color: #fff !important;
}

body {
    background-color: #ccc;
}

.navigation {
    width: 250px;
    border-right: 1px solid #444;
}

.search-item .action {
    opacity: 0;
}

.search-item .delete {
    float: right;
    color: #fff;
    font-size: 0.7em;
    padding: 5px 8px;
    border-color: #555;
    
    @include linear-gradient(color-stops(#D17E84, #BD1421 24px));
}

.search-item-active .search-item .action {
    opacity: 1;
    -webkit-transition: opacity 0.3s linear;
}

.navigation .x-panel-body {
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    background: #eee;
    
    .x-button {
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      @include border-radius(0);
      padding: 0 8px;
      background: #eee;
      height: 48px;
      
      span {
        line-height: 45px;
        color: #444;
        text-shadow: #fff 0 1px 0;
      }
      
      &.x-button-pressed {
        color: #000;
        background-color: #fff;
      }
    }
}

.navigation .x-panel-body .x-button-active {
    color: #2A5BC2;
}

.navigation.x-floating .x-panel-body {
    border-bottom: 0px;
}

.navigation .x-panel-body .x-button img,
.navigation .x-button.x-docked img {
    width: 28px;
    margin-right: 8px;
    height: 40px;
}

.searches {
    border-right: 1px solid #000;
}

.timeline {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #ccc;
}

.timeline .tweet {
    margin: 10px 20px 20px;
    position: relative;
    min-height: 100px;
    overflow: hidden;
}

.x-tablet .tweet {
  -webkit-transform: translate3d(0,0,0);
}

.timeline .tweet > img {
    padding: 2px;
    width: 60px;
    height: 60px;
    background-color: #fff;
}

.tweet {
    @include display-box;
    @include box-orient(horizontal);
}

.timeline .tweet-bubble {
    position: relative;
    min-height: 100px;
    margin-left: 15px;
    overflow: hidden;
    -webkit-border-radius: 6px;
    @include box-flex(1);

}

.tweet-bubble > div {
    min-height:100px;
    -webkit-border-radius: 4px;
}

.timeline .x-tweetanchor {
    width: 14px;
    height: 14px;
    background-color: #eee;
    top: 10px;
    left: 68px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    
//    setting z-index to -1 caused massive performance problems, commented out for now
//    z-index: -1;
}

.timeline .loading-indicator, .no-searches {
    padding: 20px;
    text-align: center;
    color: #555;
}

.timeline .tweet-active .x-tweetanchor {
    background-color: #111;
}

.timeline .tweet-content {
    padding: 15px;
    z-index: 1;
    background: #eee;
    color: #444;
    text-shadow: #fff 0 1px 0;
}

.timeline .tweet-content a {
    color: #2578C1;
}

.timeline .tweet-content h2 {
    font-weight: bold;
    color: #111;
}

.timeline .x-toolbar-actions {
    background-color: #111;
    z-index: 0;
    border: 1px solid #444;
}

.timeline .x-toolbar-actions .x-button {
    height: 100px;
    width: 100px;
    border-right: 1px solid #fff;
}

.timeline .x-toolbar-actions .x-button img {
    width: 100px;
    height: 100px;
}

.nextPage p {
    padding: 15px 20px;
    margin-bottom: 25px;
    text-align: center;
    color: #555;
}

.nextPage p.loading {
    display: none;
}

.nextPage.x-loading {    
    p.load {
        display: none;
    }
    
    p.loading {
        display: block;
    }
}

.x-example {
    background-repeat: no-repeat;
    background-position: center center;
}
.x-example-list {
    background-image: url(favorites/list.png);
}

.posted {
    display: none;
}

.twitter-search-bar .x-button.x-view-selected {
    background-color: #eee;
}

.x-toolbar {
    padding: 1px;
    height: 1.8em;
}
.x-toolbar .x-input-search {
    width: 100%;
    font-size: 1.2em;
}