source: CLARIN_style/_.scss

@charset "UTF-8";

//          Colors

$red: #9e0025;
//$blue: #52acda;
//$dark_powder_blue: #003399;
//$clarin_blue_old: #007bc5;
$clarin_blue: #00406f;
$grey: #e3e3e3;
$light_grey: #f3f3f3;

$text: black;
$text_emphasized: #222;
$text_deemphasized: #666;
//$hyperlink_color: #03683f;

$hyperlink_text_color: $clarin_blue;
$hyperlink_text_emphasized_color: $red;
$hyperlink_text_deemphasized_color: rgba($clarin_blue, 0.01);
// rgba($hyperlink_text_emphasized_color, 0.0);

$hyperlink_text_periphery_color: #544431;
$hyperlink_text_emphasized_periphery_color: $red;
$hyperlink_text_deemphasized_periphery_color: orange;
// rgba($hyperlink_text_emphasized_periphery_color, 0.0);

$menu_item_selected_color: rgba($grey, 0.9);
$menu_item_active_color: rgba($grey, 0.8);
$menu_background_color: rgba($grey, 0.6);

$thin_separator_grey_color: #e7e7e7;

$background_color: #f9f9f9;
$periphery_background_color: rgba($grey, 0.4);

//          Dimensions

//$header_height: 7vh;
$footer_height: 10vh;
//$inner_body_height: 100vh - $header_height - $footer_height;
$outer_leftright_padding: 2vw;
$outer_topbottom_padding: 1vh;
$content_padding: 2vh 1vw;
//$width: 100vw - ($margins * 2);

//          Fonts

// https://bugzilla.mozilla.org/show_bug.cgi?id=604421

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), local('Roboto-Regular'), url('Roboto_with_European_character_sets.woff') format('woff');
}

$font-stack: 'Roboto', sans-serif;

$body_font_size: 1rem;
$application_brand_font_size: 1.8rem;
$application_menu_font_size: 1.5rem;
$fixed_navigation_element_font_size: 1.25rem;

html {
    font-size: initial !important;
    height: 100%;
    line-height: initial !important;
    overflow: hidden;
    width: 100%;
    word-wrap: break-word;
    z-index: -1;
}

body {
    //border: solid 1px rgba($clarin_blue, 0.4);
    bottom: 0;
    color: $text_emphasized;
    display: -webkit-flex;
    display: flex;
    font-family: $font-stack;
    font-size: $body_font_size;
    flex: 1 1 auto;
    flex-flow: column;
    justify-content: space-around;
    margin: 0;
    left: 0;
    line-height: 1.5;
    position: absolute;
    //min-height: max-content;
    right: 0;
    top: 0;
    z-index: 0;
}

body > div {
    padding: $outer_topbottom_padding $outer_leftright_padding;
}

div#header {
    align-content: space-around;
    align-items: center;
    background-color: $periphery_background_color;
    border-bottom: 2px solid $thin_separator_grey_color;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    min-height: fit-content;
    order: 1;
    z-index: 1;
}

div#brand {
    display: flex;
    flex: none;
    flex-flow: row wrap;
    font-size: $application_brand_font_size;
    font-weight: bold;
    justify-content: flex-start;
    order: 1;
    padding: 2% 2vw;
    text-overflow: ellipsis;
}

div#menu {
    align-content: stretch;
    align-items: stretch;
    background-color: $menu_background_color;
    display: flex;
    flex: auto;
    flex-flow: row wrap;
    font-size: $application_menu_font_size;
    justify-content: space-between;
    order: 2;
    padding: unset;
}

div#menu > * {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex: auto;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 3% 3%;
    text-align: center;
}

div#menu > .active {
    background-color: $menu_item_selected_color;
}

//div#menu > a:hover {
//    // border: dashed 1px red;
//}

div#login {
    display: flex;
    flex: none;
    flex-flow: row wrap;
    font-size: $fixed_navigation_element_font_size;
    justify-content: flex-end;
    order: 3;
    padding: 2% 2vw;

    :not(.fa) {
        font-family: $font-stack; // TODO: optimize
    }
}

div#content {
    flex: auto;
    flex-flow: column nowrap;
    height: 100%;
    justify-content: space-between;
    align-content: flex-start;
    order: 2;
    overflow-y: auto;
    margin: $content_padding;
    z-index: 1;
}

div#footer {
    align-content: space-around;
    align-items: center;
    background-color: $periphery_background_color; // TODO: parameterize
    border-top: 2px solid $thin_separator_grey_color;
    display: flex;
    flex-flow: row nowrap;
    font-size: $fixed_navigation_element_font_size;
    min-height: fit-content;
    //height: $footer_height;
    justify-content: space-between;
    order: 3;
    z-index: 3;

    a {
        img {
            //display: inline-block;
            //max-width: 20%;
            max-height: $footer_height * 0.98;
            //overflow: hidden;
        }
    }
}

a {
    text-decoration: none !important;
    transition: color 1s ease-out !important; // TODO: scale 1s ease-in, color

    color: rgba($clarin_blue, 0.90);

    &:link {
        color: $hyperlink_text_color;
    }

    &:visited {
        color: $hyperlink_text_deemphasized_color;
    }

    &:hover,
    &:focus {
        color: $hyperlink_text_emphasized_color;
    }

    &:active {
        color: $hyperlink_text_emphasized_color;
    }
}

//a:link              { color:red; }
//a:visited           { color:green; }
//a:hover             { color:blue; }
//a:active            { color:orange; }

//div.periphery a {
//    &:link {
//        color: $hyperlink_text_periphery_color
//    }
//
//    &:visited {
//        color: $hyperlink_text_periphery_color; //green; // $hyperlink_text_deemphasized_periphery_color;
//    }
//
//    &:hover,
//    &:focus {
//        color: $hyperlink_text_emphasized_periphery_color;
//        background-color: $menu_item_active_color;
//    }
//
//    &:active {
//        color: $hyperlink_text_emphasized_periphery_color;
//    }
//}

hr {
    clear: both;
}

//      Tables

table {
    tbody {
        tr:nth-child(2n+1) td {
            background-color: $grey !important;
        }

        td:first-child {
            border-top-left-radius: 6px !important;
            border-bottom-left-radius: 6px !important;
        }

        td:last-child {
            border-top-right-radius: 6px !important;
            border-bottom-right-radius: 6px !important;
        }

        tr {
            //border-bottom: 1px solid #e6e6e6 !important;
            vertical-align: middle !important;
            //background-clip: padding-box !important;
            //border-collapse: collapse !important;
        }

        tr:last-child td:first-child {
            border-bottom-left-radius: 6px !important;
        }

        tr:last-child td:last-child {

            border-bottom-right-radius: 6px !important;
        }

        tr:last-child {
            border-bottom: 1px solid $clarin_blue !important;
        }
    }
}

span.positive, span.negative {
    border-radius: 10px 10px 10px 10px;
    padding: 1px;
}

span.positive {
    background-color: rgba(0, 255, 0, 0.4);
}

span.negative {
    background-color: rgba(255, 0, 0, 0.4);
}

table:not(.datatables-table) {
    tr:first-child {
        border-top: 1px solid $clarin_blue !important;
    }

    td, th {
        padding: 5px;
    }

    th {
        background-color: $grey;
        border-right: 1px dotted black;
    }
}