@import "bootstrap/less/mixins.less";
@import "bootstrap/less/variables.less";
@import "variables.less";

//
// Main styles
//
html, body, #wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
    background: darken(#FFF, 4%);
}

.btn {
    transition: background 1s;
}


//
// Scrollable ui layout
//
@media (max-width: @screen-xs-max) {
    #sidebar {
        z-index: @zindex-navbar-fixed - 10;
    }
    .active-row {
        z-index: @zindex-navbar-fixed;
        background: darken(#FFF, 4%);
    }
}
.ui-row {
    overflow: hidden;
    position: absolute;
}
.ui-scroll {
    overflow: auto;
}
.ui-scroll-y {
    overflow-y: scroll;
}
.ui-scroll-x {
    overflow-x: scroll;
}
// UI with navbar
.ui-body {
    width: 100%;
    bottom: 0;
    top: @navbar-height;
}
.ui-row.navbar {
    width: 100%;
    // height: @navbar-height;
    overflow: visible;
}
// Scrollable grid
.ui-left,
.ui-right {
    top: 0;
    bottom: 0;
}
.ui-left { left: 0; }
.ui-right { right: 0; }

//
// Basic styles for all navbars
//
.navbar {
    padding: 0 10px;
    .btn {
        margin-top: 7px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: @border-radius-base;
    }
}

//
// Modals
//
.modal-header {
    background-color: darken(#FFF, 4%);
    border-radius: 4px 4px 0 0;
}
.modal-body {
    padding-top: 0;
    .pretty-form .form-group {
        margin-left:  -(@padding-base-horizontal);
        margin-right: -(@padding-base-horizontal);
        padding-top    : 5px;
        padding-bottom : 5px;
    }
}
.modal-settings {
    .modal-header {
        padding-bottom: 0;
        .nav-tabs {
            margin: 10px 0 0;
            border-bottom: none;
        }
    }
    .modal-body {
        padding-top: 20px;
    }
}

.m0 {
    margin: 0;
}

//
// RemoteStorage widget
//
#remotestorage-widget {
    right: 50% !important;
    top: 5px !important;
    z-index: @zindex-modal-background !important;
}
.distraction-free {
    #remotestorage-widget {
        display: none;
    }
}