/*
* Styles pour DjangoCodeMirror
* Créé par David THENON en Février 2012
*/

// Load CodeMirror core stylesheets
@import "CodeMirror/codemirror";
@import "CodeMirror/dialog";

// Load icon files
@import "djangocodemirror-icons/*.png";

// TODO: Remove this fucking "cale" and use a correct clearfix instead
hr,
.cale{
    margin:0;
    padding:0;
    visibility:hidden;
    width:0px;
    height:0.05px;
    font-size:0;
    clear:both;
}

/*___________________________
    Ajustements sur CodeMirror
*/

.DjangoCodeMirror{
    padding:0;
    float: left;
    width: 63%;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    background-color: #ffffff;
    
    .CodeMirror{
        font-size:1.1em;
        line-height:1.1em;
        // Force font to monospace, as some codemirror themes defines other family fonts 
        // like serif or sans-serif like..
        // NOTE: This does not work, theme selectors are higher than this..
        font-family: monospace !important;
        
        .CodeMirror-scroll{
            border-top:0;
            border-bottom:0;
        }
    }
    
    .DjangoCodeMirror_menu ul,
    .DjangoCodeMirror_tabs ul{
        margin:0;
        padding:0;
        float: none;
        width: auto;
    }
    
    //___________________________
    //  Menu des boutons
    //
    .DjangoCodeMirror_menu{
        margin: 0;
        padding: .2em .35em .2em .35em;
        background: #ffffff;
        background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 41%, #ededed 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(41%,#f3f3f3), color-stop(100%,#ededed));
        background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        background: linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
        border: 1px solid #ffffff;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 5px 5px 0 0;
        
        ul{
            li{
                margin: 0;
                padding: 0;
                list-style:none;
                float:left;
                position:relative;
                background-color: transparent;
                border:1px solid transparent;
                
                &:hover{
                    background-color: #ffffff;
                    border-radius: 3px;
                    border:1px solid #dedede;
                }
                
                /*____________________________________
                    Editor icons sprites
                */
                &.dcm-icons-fullscreen_enter a{ @include djangocodemirror-icons-sprite(fullscreen_enter); }
                &.dcm-icons-fullscreen_exit a{ @include djangocodemirror-icons-sprite(fullscreen_exit); display:none; }
                &.dcm-icons-disk a{ @include djangocodemirror-icons-sprite(disk); }
                &.dcm-icons-arrow_undo a{ @include djangocodemirror-icons-sprite(arrow_undo); }
                &.dcm-icons-arrow_undo_disabled a{ @include djangocodemirror-icons-sprite(arrow_undo_disabled); }
                &.dcm-icons-arrow_redo a{ @include djangocodemirror-icons-sprite(arrow_redo); }
                &.dcm-icons-arrow_redo_disabled a{ @include djangocodemirror-icons-sprite(arrow_redo_disabled); }
                &.dcm-icons-h1 a{ @include djangocodemirror-icons-sprite(h1); }
                &.dcm-icons-h2 a{ @include djangocodemirror-icons-sprite(h2); }
                &.dcm-icons-h3 a{ @include djangocodemirror-icons-sprite(h3); }
                &.dcm-icons-bold a{ @include djangocodemirror-icons-sprite(bold); }
                &.dcm-icons-italic a{ @include djangocodemirror-icons-sprite(italic); }
                &.dcm-icons-text_allcaps a{ @include djangocodemirror-icons-sprite(text_allcaps); }
                &.dcm-icons-world_link a{ @include djangocodemirror-icons-sprite(world_link); }
                &.dcm-icons-page_link a{ @include djangocodemirror-icons-sprite(page_link); }
                &.dcm-icons-bullet_picture a{ @include djangocodemirror-icons-sprite(bullet_picture); }
                &.dcm-icons-picture a{ @include djangocodemirror-icons-sprite(picture); }
                &.dcm-icons-photo a{ @include djangocodemirror-icons-sprite(photo); }
                &.dcm-icons-list-bullet a{ @include djangocodemirror-icons-sprite(list-bullet); }
                &.dcm-icons-list-numeric a{ @include djangocodemirror-icons-sprite(list-numeric); }
                &.dcm-icons-quotes a{ @include djangocodemirror-icons-sprite(quotes); }
                &.dcm-icons-sourcecode a{ @include djangocodemirror-icons-sprite(sourcecode); }
                &.dcm-icons-help a{ @include djangocodemirror-icons-sprite(help); }
                &.dcm-icons-cog_edit a{ @include djangocodemirror-icons-sprite(cog_edit); }
                
                &.dcm-icons-arrow_undo:hover,
                &.dcm-icons-arrow_redo:hover{
                    background-color: transparent;
                    border:1px solid transparent;
                }
                //&.dcm-icons-disk.error{
                //    background-color: #ee0000;
                //}
                &.dcm-icons-arrow_undo a,
                &.dcm-icons-arrow_undo.inactive a{
                    cursor: default !important;
                    @include djangocodemirror-icons-sprite(arrow_undo_disabled);
                }
                &.dcm-icons-arrow_undo.active a{
                    @include djangocodemirror-icons-sprite(arrow_undo);
                }

                &.dcm-icons-arrow_redo a,
                &.dcm-icons-arrow_redo.inactive a{
                    cursor: default !important;
                    @include djangocodemirror-icons-sprite(arrow_redo_disabled);
                }
                &.dcm-icons-arrow_redo.active a{
                    @include djangocodemirror-icons-sprite(arrow_redo);
                }
                &.dcm-icons-arrow_undo.active:hover,
                &.dcm-icons-arrow_redo.active:hover{
                    background-color: #ffffff;
                    border:1px solid #dedede;
                }
            }
            
            .button a{
                margin: 3px;
                padding:0;
                display:block;
                width:16px;
                height:16px;
                text-indent:-10000px;
                background-color: transparent;
                background-repeat:no-repeat;
                background-position: center;
                cursor: pointer;
                
            }
            
            .separator,
            .separator:hover{
                margin:0 .4em;
                width:1px;
                height:22px;
                overflow:hidden;
                border-left:0;
                border-top:1px solid #CCC;
                border-right:1px solid #ffffff;
                border-bottom:1px solid #ffffff;
                background-color:#CCC;
            }
        }
    }
    
    //___________________________
    //  Barre de status et onglets
    //
    .DjangoCodeMirror_tabs{
        background: #ededed;
        border-top: 1px solid #e0e0e0;
        border-radius: 0 0 5px 5px;
        ul{
            li{
                margin: .3em 0 .3em 0.7em;
                padding:0;
                list-style:none;
                float:left;
            }
            
            .tab a{
                display:block;
                opacity:0.4;
                margin:0;
                padding: .3em .5em .3em .5em;
                cursor: pointer;
                font-size:0.6em;
                color:#404040;
                text-decoration:none;
                text-transform:uppercase;
                border: 1px solid #d0d0d0;
                border-radius: 3px;
                background-color:#ededed;
                
                &:hover{
                    opacity:1.0;
                    color:#0072ff;
                }
                
                .error,
                &:hover .error{
                    color: #FF0000;
                }
            }
            
            .tabactive a{
                background-color:#ffffff;
                box-shadow: 0px 0px 1px #0072ff;
                opacity:1.0;
                
                &:hover{
                    color:#000000;
                }
            }
        }
        .cursor_pos{
            padding: .9em .8em .4em .5em;
            float:right;
            font-size:0.6em;
            color:#707070;
        }
    }
    
    /*____________________________________
        Ajustements pour le mode maximiser
    */
    &.fullScreen{
        border:0;
        border-radius:0;
        font-size:1.1em;
        
        .CodeMirror{
            line-height:1.3em;
        }
        
        .CodeMirror-scroll{
            border:0;
        }
        .DjangoCodeMirror_menu{
            border-radius:0;
            
            .dcm-icons-fullscreen_enter a{
                display: none;
            }
            .dcm-icons-fullscreen_exit a{
                display: block;
            }
        }
    }
}

/*____________________________________
    Pour la prévisualisation
*/
.DjangoCodeMirrorPreviewScene{
    border: 0;
    background-color: #ffffff;
    border-radius: 5px 5px 0 0;
}

/*____________________________________
    Pour le panneau de paramètres éditables
*/
.DjangoCodeMirror_settings_panel{
    background-color: #ffffff;
    border-radius: 5px;
    
    a.close {
        display: block;
        width: 16px;
        height: 16px;
        text-indent: -10000px;
        background-color: #ededed;
        @include djangocodemirror-icons-sprite(cross);
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 5px;
        border-radius: 3px;
        border: 1px solid #dfdfdf;
        
        &:hover {
            background-color: #ffffff;
        }
    }
    
    h2 {
        margin: 0;
        padding: 6px;
        font-size:16px;
        height: 32px;
        color: #7f7f7f;
        text-shadow: #9f9f9f 1px 1px 2px;
        background: #ffffff;
        background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 41%, #ededed 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(41%,#f3f3f3), color-stop(100%,#ededed));
        background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        background: linear-gradient(top,  #ffffff 0%,#f3f3f3 41%,#ededed 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
        border: 1px solid #ffffff;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 5px 5px 0 0;
    }
    
    form{
        margin: 0;
        
        input.submit{
            padding-bottom: 1em;
        }
        
        fieldset{
            background: transparent;
            border: 0;
            box-shadow: none;
            legend{
                background: transparent;
            }
        }
    }
}

#DjangoCodeMirror_fullscreen_scene .DjangoCodeMirror_settings_panel{
    border: 0;
    border-radius: 0;
}

/*______________________________________
//  Pour les retours d'erreur du parser ReST
//  TODO: Move to RST stylesheet, this have nothing to do within djangocodemirror 
//  stylesheet
//
.system-message {
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.system-message-title {
  color: inherit;
  font-weight: bold;
}
*/

/*____________________________________
    Pour la démo
*/
#djangocodemirror-sample{
    margin: auto;
    width: 800px;
    
    .DjangoCodeMirror{
        padding:0;
        float: none;
        width: 100%;
        background: #ededed;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
    }
}
