h5ai/src/_h5ai/client/css/inc/general.less

@col-blue-200: #90caf9;
@col-blue-400: #42a5f5;
@col-blue-500: #2196F3;
@col-blue-700: #1976D2;
@col-blue-900: #0D47A1;
@col-green: #4caf50;
@col-red: #f44336;
@col-pink-a200: #ff4081;

@col-light: #ffffff;
@col-lightgray: #fafafa;
// @col-darkgray: #eeeeee;
@col-darkgray: #f3f3f3;
// @col-dark: #333;
@col-dark: #212121;

@col-text-primary-black: rgba(0,0,0,0.87);
@col-text-secondary-black: rgba(0,0,0,0.54);
@col-text-disabled-black: rgba(0,0,0,0.26);
@col-divider-black: rgba(0,0,0,0.12);

@col-text-primary-white: rgba(255,255,255,1.0);
@col-text-secondary-white: rgba(255,255,255,0.7);
@col-text-disabled-white: rgba(255,255,255,0.3);
@col-divider-white: rgba(255,255,255,0.12);

@col-text-selected: @col-text-primary-white;
@col-back-selected: @col-blue-400;

@col-text-highlight: #111111;

@col-font-light: @col-light;
@col-font-dark: @col-dark;

@col-back-light: @col-lightgray;
@col-back-dark: @col-darkgray;

@col: @col-text-primary-black;
@col-back: @col-back-dark;
@col-hover: @col-blue-400;
@col-border: rgba(0,0,0,0.05);
@col-border-strong: rgba(0,0,0,0.15);
@col-border-stronger: rgba(0,0,0,0.3);

@col-okay: @col-green;
@col-error: @col-red;

@col-link: @col-blue-400;
@col-link-hover: @col-blue-400;

@col-widget-back: rgb(245,245,245);
@col-widget-back-highlight: rgba(255,255,255,0.8);
@col-widget-back-hover: rgba(255,255,255,0.8);
@col-widget-back-sel: rgba(255,255,255,0.8);
@col-widget-sep: @col-border;

@col-sb-back: rgba(0,0,0,0.08);
@col-sb-thumb: rgba(0,0,0,0.15);
@col-sb-thumb-active: rgba(0,0,0,0.25);

@col-range-back: rgb(224,224,224);
@col-range-thumb: #555;

@border-widget: 1px solid @col-border;
@border-widget-sep: 1px solid @col-widget-sep;

@font-family: Roboto, Helvetica, Arial, sans-serif;
@font-weight: normal;
@font-size: 13px;
@font-family-mono: monospace;

// @max-icon-size: 24px;
@max-icon-size: 32px;
// @max-icon-size: 48px;


::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }

.transition (@transition) {
    -webkit-transition: @transition;
    transition: @transition;
}

.transform (@transform) {
    -webkit-transform: @transform;
    -ms-transform: @transform;
    transform: @transform;
    zoom: 1;
}

.card() {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}

.raised() {
    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
}

.popup() {
    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
}

.rounded() {
    // overflow: hidden;
    border-radius: 2px;
}

.el-button() {
    .card();
    .rounded();
    .transition(all 0.2s ease-in-out);
    color: @col-text-primary-white;
    background: @col-blue-400;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;

    &:hover {
        .raised();
    }
}

.el-input() {
    .card();
    .rounded();
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    font-family: @font-family;
    font-weight: @font-weight;
    color: @col-text-primary-black;
    background: @col-light;
    border: none;
    outline: none;
}


html {
    min-height: 100%;
    overflow: auto;

    &.js .noJsMsg {
        display: none;
    }
    &.browser .noBrowserMsg {
        display: none;
    }
}

body {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    font-family: @font-family;
    font-size: @font-size;
    font-weight: @font-weight;
    color: @col-text-primary-black;
    background: @col-back;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
}

#main-row {
    flex: 1 1 auto;
    order: 50;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;

    // non-webkit fix;
    height: 0;
}

*:focus {
    // outline: 1px solid @col-pink-a200;
    outline: none;
}