/**
* @license
* Copyright 2020 Sébastien CANET
* SPDX-License-Identifier: BSD-3-Clause
*/

/**
 * @fileoverview CSS for add-on used in Electron version,
 * add a 'serial monitor' to interact with boards.
 * @author scanet@libreduc.cc (Sébastien CANET)
 */

body {
    background-color: #F8F8F8;
}
#title {
    position: fixed;
    top: 0px;
    left: 6px;
    color:white;
}

.grid-container {
    display: grid;
    gap: 1px 1px;
    grid-template-areas: "serialSend serialSend" "serialPeek serialGraphWindow" "serialButtons serialButtons";
}

.serialSend{
    padding:5px 5px 5px 5px;
    grid-area: serialSend;
}
#serialSendBox{
    /* Firefox */
    width: -moz-calc(100% - 77px);
    /* WebKit */
    width: -webkit-calc(100% - 77px);
    /* Opera */
    width: -o-calc(100% - 77px);
    /* Standard */
    width: calc(100% - 77px);
}

.serialPeek{
    height: 380px;
    width: 600px;
    border: 1px solid #ccc;
    margin: 5px;
    border-radius: 5px;
    overflow: auto;
    background-color: #FFFFFF;
    grid-area: serialPeek;
}

.serialButtons{
    padding-right:5px;
    grid-area: serialButtons;
}

.serialGraphWindow{
    display: none;
    grid-area: serialGraphWindow;
    width: 450px;
    height: 380px;
    text-align: left;
}

.serialGraphButtons{
    visibility: hidden;
    align: right;
    grid-area: serialGraphButtons;
}
#serialGraph {
    background: #444;
    margin: 5px;
    font-family: consolas;
    color: white;
    font-size: 10px;
    pointer-events: none;
}