index.css

/** Debug Styles **/
#spot * {
    /* border: 1px solid red; */
}

#dockingStation * {
    /* border: 1px solid blue; */
}

#weatherStation * {
    /* border: 1px solid blue; */
}

                                        /** Universal Styles **/
html {
    font-size: 13px;
    overflow: hidden;
    background-color: whitesmoke;
}

* {
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    margin: 0rem;
    text-decoration: underline;
    font-size: 3rem;
}

.backgroundContainer{
    /* border: 1px solid red; */
    height: 100%;
    width: 15rem;
    margin: 0rem;

    display: flex;
    align-items: center;

    justify-content: center;

    background-image: url("./Assets/battery.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: .9rem 0rem;
}

.progressBar {
    /* Grid Style */
    display: block;
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    
    min-width: 0%;
    max-width: 100%;
    margin: 0rem;

    z-index: 0;
}

.progressBarOverlay{
    position: relative;
    background-color: transparent;
    z-index: 1;
}

.progressBarContainer{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.label {
    font-size: 2.5rem;
}

.output {
    /* Positioning */
    display: inline-block;
    margin-left: 1rem;
    text-align: center;

    /* Coloring */
    border: .1rem solid black;
    background-color: white;

    /* Sizing */
    min-height: 2rem;
    min-width: 5rem;
}

.output {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    /* Sizing */
    min-width: 12rem;
    min-height: 4rem;

    /* Font */
    font-weight: bold;
    font-size: 2rem;
    color: white;

    /* Border / Background */
    border-radius: 2rem;
    background-color: hsl(228, 66%, 47%);
}

.button .progressBarOverlay {
    background-color: transparent;
    pointer-events: none;
}

.button:active:not(#openDoorButton, #closeDoorButton, #stopDoorButton) {
    /* Styling */
    background-color: hsl(228, 66%, 70%);
}

                                            /** Header **/
header {
    height: 10vh;
    width: 100vw;
    background-color: #1c3596;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

#EPRILogo {
    /* justify-self: left; */
    margin-left: 5rem;
    height: 6vh;
}

#rebootButton, #terminalButton {
    /* justify-self: right; */
    margin-right: 3rem;
}

                                        /** Main Container **/
.container {
    /* Grid Style */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;

    height: 90vh;
    width: 100vw;

    /* flex-flow: column wrap; */
    
    /* dEFINE */
    /* grid-template-rows: repeat(2, calc(50vh - 0rem));
    grid-template-columns: repeat(2, calc(50vw - 0rem));
    grid-template-areas: "dockingStation spot"
                         "weatherStation camera"; */
    
    /* Sizing */
    font-size: 2rem;
}

.container > section {
    /* Alignment */

    display: flex;
    justify-content: center;
    flex-grow: 1;
    
    /* Style */
    border: .1rem solid black;
}

section > section {
    padding: 2rem;

    width: 100%;
    height: 100%;
}

/** Sizing for left 3 cells **/
#spotContainer, #cameraContainer, #weatherStationContainer {
    /* Sizing */
    width: 30%;
}

/** Sizing for right 2 cells **/
#dockingStationContainer, #messagesContainer {
    /* Sizing */
    width: 70%;
}

                                        /** Docking Station Section **/
#dockingStation {
    /* Grid Style */
    grid-area: dockingStation;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 4rem repeat(4, 6rem) 5rem;

    row-gap: 2rem;
    column-gap: 2rem;

    grid-template-areas: "title title title"
                         "indoorLight stopDoor open"
                         "outdoorLight stopDoor open"
                         "fanSpeed stopDoor close"
                         "fanStop stopDoor close"
                         "indoorTemp indoorTemp powerStatus";
}

#dockingStation > * {
    /* border: 1px solid red; */
}

#dockingStation > h1 { grid-area: title; }

#indoorLightButton, #outdoorLightButton #fanSpeedButton, #fanStopButton {

}

#indoorLightButton{ grid-area: indoorLight; }

#outdoorLightButton{ grid-area: outdoorLight; }

#fanSpeedButton { grid-area: fanSpeed; }

#fanStopButton { grid-area: fanStop; }

#stopDoorButton {
    grid-area: stopDoor;
    justify-self: center;

    border-radius: 3rem;

    font-size: 7rem;
    
    width: 100%;
    height: 100%;
    
    background-color: hsl(0, 100%, 50%);
}

#openDoorButton { grid-area: open;}

#openDoorButton * { font-size: 4rem;}

#openDoorProgress, #closeDoorProgress {
    /* text-align: center; */
    background-color: hsl(228, 66%, 47%);

    /* Grid Style */
    height: 100%;
    display: block;
    
    min-width: 0%;
    max-width: 100%;
    margin: 0rem;

    border-radius: 0;
}

#closeDoorProgress {
    width: 1%;
}

#closeDoorButton{ grid-area: close;}

#closeDoorButton * {font-size: 4rem;}

#internalTemperature, #powerStatus {
    display: flex;
    margin: 1rem 0rem;
    justify-self: center;
    align-content: center;

}

#internalTemperature{ grid-area: indoorTemp; }

#powerStatus { grid-area: powerStatus; display: flex; align-items: center; justify-content: center;}

#powerStatusOutput{
    width: 10rem;
    margin: 0rem 1rem;
    height: 100%;

    background-color: red;

    border: .3rem solid black;
    /* background-image: url(./Assets/connected.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0rem .5rem; */
}


                                                /** Spot Section **/
#spot {
    /* Grid Style */
    grid-area: spot;
    display: grid;
    grid-template-rows: 5rem 6rem

    /* Sizing */
    /* min-width: 24rem; */

    /* Border Style */
    /* border-left: .1rem solid black; */
    /* border-bottom: .1rem solid black; */
}
#battery {
    display: flex;
    justify-content: center;
    margin: 1rem 0rem;

    align-items: center;
}

/** Battery **/
#batteryGraphicBackground {
    /* Grid Style */
    
    /* Coloring */
    border: .1rem solid black;
    background-color: hsl(0, 0%, 95%);
    
    height: 80%;
    width: 12rem;
    

    
    /* Battery Style */
    border: 1;
    min-width: 10rem;
    min-height: 2rem;
    margin: 0rem;
}

#batteryGraphicOutput {}

#batteryPercentageOutput {
    margin: 0rem 1rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

                                        /** Weather Station Section **/
#weatherStation {
    /* Grid Style */
    grid-area: weatherStation;
    display: grid;
    grid-template-rows: repeat(6, 5rem);

    /* Border Style */
    /* border-top: .1rem solid black; */
    /* border-right: .1rem solid black; */
}

#externalTemperature, #windSpeed, #precipitation, #pressure, #humidity, #dewPoint {
    display: flex;
    margin: 1rem 0rem;
    justify-self: left;
    align-content: center;
}

                                        /** Camera Section **/
#camera {
    /* Grid Style */
    grid-area: camera;
    display: grid;
    grid-template-rows: 5rem 6rem 6rem;
    row-gap: 1rem;
    /* grid-template-rows: 1fr auto; */
    
    /* Border Style */
    /* border-top: .1rem solid black; */
    /* border-left: .1rem solid black; */
}

#camera > * {
    /* Grid Style */
    margin: .5rem 0rem;
    
    /* Grid Content Positioning / Sizing */
    width: 100%;
}

                                        /** messages Section **/
#messages{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 5rem 7.5rem;
    row-gap: 1rem;

    grid-template-areas: "title title"
                         "messageBox clear"
}

#messages > h1{grid-area: title;}

#messagesTextbox {
    grid-area: messageBox;
    display: flex;
    flex-grow: 1;

    text-align: left;

    padding: 0rem 2rem;
    /* box-shadow: inset .2rem .2rem rgba(0, 0, 0, 0.3); */
    /* box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 2px 0px inset; */

    width: 94%;
    height: 100%;

    border: .1rem solid black;

    background-color: white;
}

#clearTextboxButton {
    grid-area: clear;
    justify-self: center;
}

/** Media Queries to change layout when screen size gets too small **/
@media screen and (max-width: 739px) {
    html {
        overflow: scroll;
    }
    
    header {
        display: grid;
        margin: auto;
        height: 10vh;
        width: 108vw;
        background-color: blue;
    }
    
    .container {
        /* Grid Style */
        display: grid;
        margin: auto;
        
        /* Adjust the margin based on the viewport width */
        /* grid-template-rows: repeat(2, calc(50vh - 0rem));
        grid-template-columns: repeat(2, calc(50vw - 2rem)); */
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas: "dockingStation"
        "spot"
        "weatherStation"
        "camera";
        
        /* Sizing */
        font-size: 2rem;
    }
    .container > section {
        /* Alignment */
        padding: 2rem;
        
        /* Style */
        border: .1rem solid black;
        
        width: 100vw;
    }
    
}

@media screen and (max-height: 620px) and (min-width: 740px) {
    html {
        overflow: scroll;
    }

    header {
        display: grid;
        margin: auto;
        height: 10vh;
        width: 108vw;
        background-color: blue;
    }

    .container {
        /* Grid Style */
        display: grid;
        margin: auto;
        
        /* Adjust the margin based on the viewport width */
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(2, calc(50vw - 0rem));
        /* grid-template-columns: repeat(2, 1fr); */
        grid-template-areas: "dockingStation spot"
        "weatherStation camera";
        
        /* Sizing */
        font-size: 2rem;
    }
    .container > section {
        /* Alignment */
        padding: 2rem;
        
        /* Style */
        border: .1rem solid black;
    
        width: 100vw;
    }
}