/**
 * Primary styles
 *
 * Author: Jupyter Development Team
 */

@dashboard_tb_pad: 4px;
@dashboard_lr_pad: 7px;
// These are the total heights of the Bootstrap small and mini buttons. These values
// are not less variables so we have to track them statically.
@btn_small_height: 24px;
@btn_mini_height: 22px;
@dark_dashboard_color: @breadcrumb-color;

// The left padding of the selector button's contents.
@dashboard-selectorbtn-lpad: 7px;

ul#tabs {
    margin-bottom: @dashboard_tb_pad;
}

ul#tabs a {
    padding-top: @dashboard_tb_pad + 2px;
    padding-bottom: @dashboard_tb_pad;
}

[dir="rtl"] ul#tabs.nav-tabs > li {
    float : right;
}

[dir="rtl"] ul#tabs.nav.nav-tabs {
    padding-right: 0;
}

ul.breadcrumb {
    a:focus, a:hover {
        text-decoration: none;
    }
    i.icon-home {
        font-size: 16px;
        margin-right: 4px;
    }

    span {
        color: @dark_dashboard_color;
    }
}

.list_toolbar {
    padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
    vertical-align: middle;

    .tree-buttons {
        padding-top: 1px;
    }
}

[dir="rtl"] .list_toolbar {
    .tree-buttons .pull-right {
        .pull-left();
    }
    .col-sm-4 , .col-sm-8 {
        float : right;
    }
}

.dynamic-buttons {
    padding-top: @dashboard_tb_pad - 1px;
    display: inline-block;
    width: 400px;

}

.list_toolbar [class*="span"] {
    min-height: @btn_small_height;
}

.list_header {
    font-weight: bold;
    background-color: @page-backdrop-color
}

.list_placeholder {
    font-weight: bold;
    padding-top: @dashboard_tb_pad;
    padding-bottom: @dashboard_tb_pad;
    padding-left: @dashboard_lr_pad;
    padding-right: @dashboard_lr_pad;
}

.list_container {
  margin-top: @dashboard_tb_pad;
  margin-bottom: 5*@dashboard_tb_pad;
  border: 1px solid @table-border-color;
  border-radius: @border-radius-base;
}

.list_container > div {
  border-bottom: 1px solid @table-border-color;
  &:hover .list-item{
    background-color: red;
  };
}

.list_container > div:last-child {
  border: none;
}

.list_item {
  &:hover .list_item {
    background-color: @table-border-color;
  };
  a {text-decoration: none;}
  &:hover {
    background-color: darken(white,2%);
  }
}

.list_header>div, .list_item>div {
    padding-top: @dashboard_tb_pad;
    padding-bottom: @dashboard_tb_pad;
    padding-left: @dashboard_lr_pad;
    padding-right: @dashboard_lr_pad;
    line-height: @btn_mini_height;

    input {
        margin-right: @dashboard_lr_pad;
        margin-left: @dashboard_lr_pad + @dashboard-selectorbtn-lpad;
        vertical-align: text-bottom;
        line-height: @btn_mini_height;
        position: relative;
        top: -1px;
    }

    .item_link {
        margin-left: -1px;
        vertical-align: baseline;
        line-height: @btn_mini_height;
    }
}

[dir="rtl"] .list_item>div {

    input {
        margin-right : 0;
    }
}

.new-file input[type=checkbox] {
    visibility: hidden;
}

.item_name {
    line-height: @btn_mini_height;
    height: @btn_small_height;
}

.item_icon {
    font-size: 14px;
    color: @dark_dashboard_color;
    margin-right: @dashboard_lr_pad;
    margin-left: @dashboard_lr_pad;
    line-height: @btn_mini_height;
    vertical-align: baseline;
}

.item_modified {
    margin-right: @dashboard_lr_pad;
    margin-left: @dashboard_lr_pad;
}

.file_size {
    width: 65px;
    text-align: right;
}

[dir="rtl"] .item_modified.pull-right{
    .pull-left();
}

.item_buttons {
    line-height: 1em;
    .btn-toolbar();
    .btn {
        min-width: 13ex;
    }
    .running-indicator {
        padding-top: @dashboard_tb_pad;
        // accessibility improvement
        color: darken(@brand-success,25%);
    }
    .kernel-name {
        padding-top: @dashboard_tb_pad;
        color: @brand-info;
        margin-right: @dashboard_lr_pad;
        float: left;
    }
}

[dir="rtl"] .item_buttons.pull-right {
    .pull-left();
}

[dir="rtl"] .item_buttons {
    .kernel-name {
        margin-left : @dashboard_lr_pad;
        float : right;
        // accessibility improvement
        color: #489eb8;
        font-weight: 700;
    }
}

.toolbar_info {
    height: @btn_small_height;
    line-height: @btn_small_height;
}

.list_item input:not([type=checkbox]) {
    // These settings give these inputs a height that matches @btn_mini_height = 22
    padding-top: 3px;
    padding-bottom: 3px;
    height: @btn_mini_height;
    line-height: 14px;
    margin: 0px;
}

.highlight_text {
    color: blue;
}

#project_name {
    display: inline-block;
    padding-left: @dashboard_lr_pad;
    margin-left: -2px;
    // accessibility improvement
    color: darken(@link-color, 10%);

    > .breadcrumb {
        padding: 0px;
        margin-bottom: 0px;
        background-color: transparent;
        font-weight: bold;

    }
}

.sort_button {
    display: inline-block;
    padding-left: @dashboard_lr_pad;
}

[dir="rtl"] .sort_button.pull-right {
    .pull-left();
}

#tree-selector {
    padding-right: 0px;
}

#button-select-all {
    min-width: 50px;
}

[dir="rtl"] #button-select-all.btn {
    float : right ;
}

#select-all {
    margin-left: @dashboard_lr_pad;
    margin-right: 2px;
    margin-top: 2px;

    height: 16px;
}

[dir="rtl"] #select-all.pull-left {
    .pull-right();
}

.menu_icon {
    margin-right: 2px;
}

.tab-content .row {
    margin-left: 0px;
    margin-right: 0px;
}

.folder_icon:before {
    .icon(@fa-var-folder-o);
}

.notebook_icon:before {
    .icon(@fa-var-book);
    position: relative;
    top: -1px;
}

.running_notebook_icon:before {
    .icon(@fa-var-book);
    position: relative;
    top: -1px;

    color: @brand-success;
}


.file_icon:before {
    .icon(@fa-var-file-o);
    position: relative;
    top: -2px;
}

#notebook_toolbar .pull-right {
    padding-top: 0px;
    margin-right: -1px;
}

ul#new-menu {
    // align right instead of left
    left: auto;
    right: 0;
}

#new-menu .dropdown-header {
    font-size: 10px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 0 3px;
    margin: -3px 20px 0;
}

.kernel-menu-icon {
    padding-right: 12px;
    width: 24px;
    content: @fa-var-square-o;
}

.kernel-menu-icon:before {
    content: @fa-var-square-o;
}

.kernel-menu-icon-current:before {
    content: @fa-var-check;
}

#tab_content {
    padding-top: @page-header-padding;
}

#running {
    .panel-group{
        .panel {
            margin-top: 3px;
            margin-bottom: 1em;

            .panel-heading {
                background-color: @page-backdrop-color;
                padding-top: @dashboard_tb_pad;
                padding-bottom: @dashboard_tb_pad;
                padding-left: @dashboard_lr_pad;
                padding-right: @dashboard_lr_pad;
                line-height: @btn_mini_height;

                a:focus, a:hover {
                    text-decoration: none;
                }
            }

            .panel-body {
                padding: 0px;

                .list_container {
                    margin-top: 0px;
                    margin-bottom: 0px;
                    border: 0px;
                    border-radius: 0px;

                    .list_item {
                        border-bottom: 1px solid @table-border-color;

                        &:last-child {
                            border-bottom: 0px;
                        }
                    }
                }
            }
        }
    }
}

.delete-button {
    display: none;
}

.duplicate-button {
    display: none;
}

.rename-button {
    display: none;
}

.move-button {
    display: none;
}

.download-button {
    display: none;
}

.shutdown-button {
    display: none;
}

.dynamic-instructions {
    display: inline-block;
    padding-top: @dashboard_tb_pad;
}

//TO show tooltips via keyboard for"Duplicate","View","Rename", "Download", "Shutdown", "Edit","Move", "Delete" buttons.
.dynamic-buttons {
    button:focus + [role="tooltip"] {
        visibility: visible;
        opacity: 1;
    }

    [role="tooltip"] {
        /* Position the tooltip */
        position: absolute;
        top:70%;
        display:inline;
        //--------------
        visibility: hidden;
        background-color: #F0EFEF;
        color: #080808;
        text-align: center;
        padding: 3px;
        outline-color: grey;
        outline-offset: -2px;
        outline-style: auto;
        outline-width:1px;
        z-index: 1;
        opacity: 0;
        transition: opacity .6s;
        margin: 3px;
        font-size:10px;
    }
}
