harmony/pkg/web/public/assets/css/harmony.css

* {
    box-sizing: border-box;
    font-family: Helvetica, arial, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

nav ul, aside ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 5px;
}

.content {
    grid-area: content;
}

.sideleft {
    grid-area: sideleft;

    overflow-x: auto;
    overflow-y: scroll;

    border-bottom: 1px solid #cecece;
}

.sideright {
    grid-area: sideright;

    overflow-x: auto;
    overflow-y: scroll;

    border-bottom: 1px solid #cecece;
}

.status {
    grid-area: status;

    overflow-x: auto;
    overflow-y: scroll;
    border-bottom: 1px solid #cecece;
}

.footer {
    grid-area: footer;
}

.wrapper {
    margin: 0;
    width: 100vw;
    min-height: 100vh;

    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content min-content 1fr min-content min-content;
    grid-template-areas: "sideleft" "sideright" "header" "content" "status" "footer";

    font-size: 1.2em;
}

@media (min-width: 500px) {
    .wrapper {
        height: 100vh;
        grid-template-columns: 1fr 4fr;
        grid-template-rows: min-content 1fr 1fr min-content min-content;
        grid-template-areas: "sideleft header" "sideleft content" "sideright content" "status content" "footer footer";
    }

    #voiceptt {
        height: 100px !important;
    }

    .sideleft, .sideright, .status {
        min-width: 200px;
    }
}

@media (min-width: 750px) {
    .wrapper {
        height: 100vh;
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-rows: min-content 1fr min-content min-content;
        grid-template-areas: "sideleft header sideright" "sideleft content sideright" "status content sideright" "footer footer footer"
    }

    #voiceptt {
        height: 100px !important;
    }

    .sideleft, .sideright, .status {
        min-width: 200px;
    }
}

.sideleft, .sideright, .status, .content {
    padding: 7px;
}

.header {
    padding: 10px;

    overflow-x: auto;
    overflow-y: scroll;
}

.content {
    padding-left: 10px;
    padding-right: 10px;
}

button {
    border: 1px solid black;
    padding: 7px;
}

#mainheader {
    font-size: 1.5em;
}

button, #subheader, #chathistory, #chatinput, .status {
    font-size: 1.25em;
}

#header, #status {
    vertical-align: center;
}

.header {
    border-right: 1px solid #cecece;
}

.headericon {
    display: inline-block;
    width: 25px;
}

.widelinks a {
    display: block;
}

#chathistory {
    overflow-x: auto;
    overflow-y: scroll;

    min-height: 150px;

    border: 1px solid #cecece;
}

#chatinput {
    display:block;
    height: 100%;
    border: 0;
    resize: none;
}

#voicepttcontainer {
    border-top: 1px solid #cecece;
}

#voiceptt {
    width: 100%;
    height: 125px;
    border: 0;
}

.voiceinactive {
    display: inline-block;
    width: 27px;
}

.voiceactive {
    display: inline-block;
    width: 27px;
    padding-left: 4px;
}