Sorry, here's the exact SCSS code, and I've attached a screenshot of the screen layout design.
//
// lets limit screen build based on whether we are developing, debugging or running
//
@media screen and (min-width: 600px) {
.standardGradBG {
background: linear-gradient(#caf0cf, white) !important;
}
.standardBTNBG_css {
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #96e19f !important;
border-radius: 1vh !important;
color: black !important;
width: auto !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.2vh !important;
font-weight: bold !important;
color: black !important;
z-index: 100 !important;
margin: 3px 2px 3px 3px !important;
}
.standardBTNBGmedium_css {
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #96e19f !important;
border-radius: 1vh !important;
color: black !important;
font-size: 0.75vh !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
height: 2vh !important;
}
.standardBTNBGsmall_css {
background: linear-gradient(#dcf5df, white, #dcf5df) !important;
border-style: solid !important;
border-width: 2px !important;
border-color: #96e19f !important;
border-radius: 1vh !important;
color: black !important;
font-size: 0.85vw !important;
}
.clearMargins {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
border: 0 0 0 0 !important;
}
.menuGridRow {
height: 6vh !important;
}
.blackBackground_css {
background-color: black !important;
}
.clearBackground_css {
background-color: white !important;
width: auto !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.2vh !important;
font-weight: bold !important;
color: black !important;
}
.yellowBackground_css {
background-color: yellow !important;
width: auto !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.2vh !important;
font-weight: bold !important;
color: black !important;
}
.grayOutline {
border-style: solid solid solid solid !important;
border-width: 1px !important;
border-color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
background: white !important;
}
.bottomGreyLine {
border-style: none none dotted none !important;
border-width: 1px !important;
border-color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
background: white !important;
}
.cardTitle {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.5vh !important;
color: black !important;
background: linear-gradient(#caf0cf, white, #caf0cf);
font-weight: bold !important;
padding: 0 0 0 0 !important;
}
//
// Site List
//
.sitesListDiv_css {
position: fixed;
top: 5vh;
left: 0;
width: 25vw !important;
height: 44vh !important;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
.siteListGridRow {
height: auto !important;
background: white !important;
border-style: none none solid none !important;
margin: 0 0 1px 0 !important;
border-width: 1px !important;
border-color: lightgrey !important;
}
.siteListGridCell {
background: white !important;
}
.siteListItem {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 2vh !important;
color: black !important;
//background: white !important;
margin: 0 !important;
height: 2vh !important;
border: 0 !important;
padding-top: 1px !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
margin: 2px 0 0 0 !important;
width: 100% !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.siteSmallListItem {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.5vh !important;
color: grey !important;
//background: white !important;
margin: 0 !important;
line-height: 1.75vh !important;
height: 1.75vh !important;
border: 0 !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
margin: 2px 0 0 0 !important;
width: 100% !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.siteListItemLabel_css {
margin: 0 !important;
padding: 0 !important;
}
.sitesListBox {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
border: 0 0 0 0 !important;
}
.showSite {
height: auto !important;
}
.hideSite {
height: 0 !important;
padding: 0 0 0 0 !important;
margin: 0 0 0 0 !important;
border-width: 0 !important;
}
.siteNotSelected {
background-color:white !important;
}
.siteSelected {
background-color:yellow !important;
}
//
// SITE DETAIL
//
.siteDetailDiv {
position: fixed;
top: 49vh;
left: 0;
margin: 1px 0 0 0 !important;
height: 50.9vh !important;
width: 50vw !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#caf0cf, white);
overflow-y: hidden;
overflow-x: hidden;
}
.siteDetailCard {
position: fixed;
top: 49.1vh;
left: 0;
height: 50.25vh;
width: 25vw !important;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
overflow-y: auto;
overflow-x: hidden;
}
.sitesDetailBox {
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
}
.siteNameTitle {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 2vh !important;
color: black !important;
background: linear-gradient(#caf0cf, white, #caf0cf);
font-weight: bold !important;
padding: 5px 0 5px 0 !important;
width:100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.siteDetailText {
margin: 7px 0 -7px 0 !important;
padding: 1px 1px 1px 1px !important;
line-height: 1.5vh !important;
height: 1.6vh !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.4vh !important;
color: black !important;
}
.siteDetailInputText {
margin: 3px 0 -3px 0 !important;
padding: 1px 1px 1px 1px !important;
line-height: 1.5vh !important;
height: 1.6vh !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.7vh !important;
color: black !important;
}
.siteDetailGridRow {
border-style: none none dotted none !important;
border-width: 1px !important;
border-color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
background: white !important;
}
.updateSiteDetailButton {
color: black !important;
}
.cancelUpdateSiteDetailButton {
}
//
// Contacts Card
//
.contactsCard {
position: fixed;
top: 59.5vh;
left: 25.2vw;
width: 24.4vw !important;
height: 39.85vh;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
overflow-y: auto;
overflow-x: hidden;
}
.contactsTitle {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 2vh !important;
color: black !important;
font-weight: bold !important;
padding: 5px 0 5px 0 !important;
}
.contactsDiv {
width: 100% !important;
height: 36.5vh !important;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: white !important;
}
.contactsGrid {
background: linear-gradient(white, #edfaef);
}
.contactTypeText {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.25vh !important;
color: blue !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
.contactTitleText {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.25vh !important;
color: red !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
.contactName {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.5vh !important;
font-weight: bold !important;
color: black !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
.contactDetails {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.25vh !important;
color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
//
// site Details Buttons
//
.siteDetailsButtons {
position: fixed;
top: 49.1vh;
left: 25.2vw;
width: 24.4vw !important;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
}
//
// button Options Div
//
.buttonOptionsDiv {
position: fixed;
top: 5vh;
left: 25vw;
width: 25vw !important;
height: 44vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
.CPSAutomationImage {
width: 20vh !important;
height: auto !important;
z-index: 1 !important;
//opacity:0.4 !important;
}
.versionNumber {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.7vh !important;
color: black !important;
}
//
// search
//
.searchInputText {
margin: 3px 0 -3px 0 !important;
padding: 1px 1px 1px 1px !important;
line-height: 1.8vh !important;
height: 1.8vh !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.7vh !important;
color: black !important;
background: white !important;
}
//
// Right side of screen
//
.rightHandScreenDiv {
position: fixed;
top: 5vh;
left: 50.1vw;
width: 49.9vw !important;
height: 94.9vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
.mapsHistoryLogsCard {
position: fixed;
top: 10vh;
left: 50.25vw;
height: 60vh;
width: 49.5vw !important;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
}
.googleMap {
height: 52.9vh !important;
width:100% !important;
}
//
// Map Markers
//
.mapMarkersDIV {
position: fixed;
top: 70.5vh;
left: 50.25vw;
width: 49.5vw !important;
height: 28.9vh;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
overflow-y: auto;
overflow-x: hidden;
}
.mapMarkerIcon {
height: auto !important;
width: 1.5vw !important;
margin: 0 auto 0 auto !important;
padding: 0 0 0 0 !important;
}
.markerOptionIcon {
height: 2.5vh !important;
width: 1.5vw !important;
margin: 0 0 0 2px !important;
padding: 0 0 0 0 !important;
}
//
// Logs
//
.logsDiv {
height: 46vh !important;
width:100% !important;
overflow-y: auto;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
.logsList {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 0.75vw !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
color: black !important;
}
//
// Add new site Card
//
.addNewSiteCard {
position: fixed;
top: 23vh;
left: 26vw;
width: 23vw !important;
height: 18vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 2px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
//
// Select Team
//
.teamsDiv {
position: fixed;
top: 18vh;
left: 30vw;
width: 15vw !important;
height: 30vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 2px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
z-index:10;
}
.teamListDiv {
width: 13vw !important;
height: 18vh !important;
overflow-y: auto;
overflow-x: hidden;
z-index: 20;
padding: 0 0 0 0 !important;
}
}