ilkkao/mas

@import "bootstrap/less/bootstrap";

@import "bootswatch/superhero/bootswatch";
@import "bootswatch/superhero/variables";
@icon-font-path: "/app/assets/fonts/";

@import (inline) "bootstrap-datepicker/dist/css/bootstrap-datepicker3.css";

@import (inline) "vendor/jquery.atwho.min.css";
@import (inline) "magnific-popup/dist/magnific-popup.css";
@import (inline) "perfect-scrollbar/css/perfect-scrollbar.css";

@import "font-awesome/less/font-awesome";
@fa-font-path: "/app/assets/fonts";

@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

@grid-margin: 4px;

@import "window";
@import "main";
@import "logs";
@import "dialog";
@import "spinner";

body {
    font-family: 'Source Sans Pro', sans-serif;
}

body > .ember-view { // ember root element
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.error-text {
    color: yellow;
}

/* global classses */

.hidden {
    visibility: hidden;
}

/* Bootswatch color customizations */

@mas-brand-color: #303035;
@mas-bg-color: lighten(@mas-brand-color, 65%);

/* These bootswap/bootstrap less variable names are totally misleading. Some of them are used
   everywhere, not just in a single component as their name suggests */
@navbar-default-bg: lighten(@mas-brand-color, 10%);
@body-bg: @mas-bg-color;
@dropdown-divider-bg: lighten(@mas-bg-color, 50%);
@table-bg-hover: darken(@well-bg, 7%);
@dropdown-bg: lighten(@mas-brand-color, 10%);

/* Bootstrap customizations */

.dropdown-menu {
    margin: 0;
    background-color: #303035;
}

.dropdown-header {
    color: #bed3eb
}

.form-control {
    color: black;
}

/* At.who customizations */

.atwho-view {
    color: #222;

    img {
        height: 20px;
    }
}

.btn-default:focus, .btn-default.focus {
    background-color: rgba(57, 68, 78, 0.3);
}

/* magnific popup customizations */

.mfp-bg {
    opacity: 0.9;
    filter: alpha(opacity=90);
}