/* CSS GMRS Live Status page * 4/8/24 * * 11/9/24 yt formats * 12/18/24 reformat header image. */ :root { --systemColor: brown; --systemFontColor:white;} /* system wide color */ body {background-color: #ECECEC;margin-top:0px;margin-left:0px;margin-right:0px;background-image: url("/status/images/background-witewash.jpg");background-attachment: fixed;background-repeat: no-repeat;background-size: cover;background-position: center center;border: 3px solid white;} .version-one { font-size: 2em; color: green; } .version-two { font-size: 2em; color: blue; } #lsnodeschart {font-size: 9.5px;} #header { position: relative; width: 100%; height: 124px; margin: 1px 0px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-image: url("/status/header_image.php"); /*url("/status/images/back-caney_lake.jpg");*/ background-position: center center; /* Centers the image */ background-repeat: no-repeat; /* Prevents the image from repeating */ background-size: cover; /* Ensures the image covers the entire header */ } #headerTitle{position: absolute;top: 8px; left: 10px; margin: 0px 0px;font-size: 1.1em;color: white; font-weight: bold;line-height: normal;letter-spacing: normal;font-family: "Lucida Grande", Lucida, Verdana, sans-serif;} #headerTitle a:link { text-decoration: none;color: white;} #headerTitle a:visited {text-decoration: none;color: white;} #headerTag { position: absolute;top: 58px; left: 10px; margin: 0px 0px;font-size: 0.9em;color: white; font-weight: bold;line-height: normal;font-family: "Lucida Grande", Lucida, Verdana, sans-serif;letter-spacing: normal;} #header2Tag {position: absolute;top: 103px;left: 10px; margin: 0px 0px;font-size: 0.9em;color: cyan; font-weight: bold;line-height: normal;font-family: "Lucida Grande", Lucida, Verdana, sans-serif;letter-spacing: normal;} #header3Tag {position: absolute;top: 54px; left: 10px; margin: 0px 0px;font-size: 1.3em;color: lightgreen;font-weight: bold;line-height: normal;font-family: "Lucida Grande", Lucida, Verdana, sans-serif;letter-spacing: normal;} #header4Tag {position: absolute;top: 54px; left: 10px; margin: 0px 0px;font-size: 1.3em;color: var(--systemFontColor); font-weight: bold;line-height: normal;font-family: "Lucida Grande", Lucida, Verdana, sans-serif;letter-spacing: normal;} #headerImg { position: absolute;top: 2px; right: 12px;} #menu { position: relative;width: 100%;float: left;padding: 0px 0px 0px 12px;box-sizing: border-box;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;background-color: var(--systemColor); font-size: 15px; font-family: Verdana,Arial,sans-serif;} #menu a { display: block; padding: 2px 8px 2px 2px; text-decoration: none; color: var(--systemFontColor);} #menu a:hover {background: transparent;font-weight: bold;} #menu a:active {color: white;} #menu a.active {color: white;} #menu ul {list-style-type: none;margin: 0;float: left;padding: 1px 8px 2px 3px;background-color: var(--systemColor);} #menu li {float: left;} #menu li a, .dropbtn { display: inline-block; text-align: center; text-decoration: none;} #menu li a:active {} #menu li a.active {color: white;} #menu li.dropdown {display: inline-block;} #menu .dropdown-content { background-color: var(--systemColor);display: none;position: absolute; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5;} #menu .dropdown-content a { color: white;padding: 1px 4px 4px 4px; text-decoration: none; display: block;text-align: left;} #menu .dropdown-content a:hover { color: yellow;background-color: var(--systemColor);font-weight: bold;} #menu .dropdown:hover .dropdown-content { display: block;} @media screen and (min-width: 300px) { #menu {font-size: 10px;}} @media screen and (min-width: 400px) { #menu {font-size: 11px;}} @media screen and (min-width: 500px) { #menu {font-size: 12px;}} @media screen and (min-width: 600px) { #menu {font-size: 15px;}} /* for my inline weather module */ table.weather{ font-family: verdana,arial,sans-serif;font-size: 12px;margin: auto;padding: 4px;border-collapse: collapse;border-radius: 10px;width: auto;} table.weather tr.AlertColor td { background-color: black;font-weight: bold; color: red;} table.weather tr.TempColor td { background-color: green;font-weight: bold; color: black;} table.weather tr.normalColor td { background-color: green;font-weight: bold; color: black;} /* The footer */ @media screen and (min-width: 300px) { table.weather {font-size: 8px;}} @media screen and (min-width: 400px) { table.weather {font-size: 9px;}} @media screen and (min-width: 500px) { table.weather {font-size: 12px;}} @media screen and (min-width: 800px) { table.weather {width: 700px;}} @media screen and (min-width: 900px) { table.weather {width: 800px;}} @media screen and (min-width: 1000px) {table.weather {width: 900px;}} table.footerGrid{ font-family: verdana,arial,sans-serif; margin: auto; padding: 4px; border-width: 1px;border-collapse: collapse; border-radius: 10px;text-align: center;border-color: black; color: black;} table.footerGrid tr.footer1 td { font-size: 12px;position: relative;width: 100%;float: left;padding: 0px 0px 0px 12px;box-sizing: border-box;text-align: center;background-color: #E8EAF6; color: black;} table.footerGrid tr.footer td { font-size: 12px;position: relative;width: 100%;float: left;padding: 0px 0px 0px 12px;box-sizing: border-box;text-align: center;background-color: var(--systemColor);color: var(--systemFontColor);} /* Better centering and moble view on stat box * font size set by screen size * * * on large screens we dont want auto 100% */ #statbox{ font-size: 12px; }/* overidden later place holder for changes */ table.gridtable { font-family: verdana, arial, sans-serif;margin: auto; color: black; padding: 4px; border-width: 1px; border-color: black; border-collapse: collapse; border-radius: 9px; overflow: hidden; width: auto;} table.gridtable thead tr:first-child th {border-top-left-radius: 10px; border-top-right-radius: 10px;} table.gridtable tbody tr:last-child td { border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;} table.gridtable td, table.gridtable th { border: 1px solid black;padding: 4px;} table.gridtable td{ border: 1px solid black;padding: 4px;background-color: #ffffff;} table.gridtable th { background-color: lightgray;} /* Add transparent border to maintain the black border appearance */ table.gridtable td:not(:first-child) { border-left: 1px solid black;} table.gridtable tr:not(:last-child) td{border-bottom: 1px solid black;} /* Add box-shadow to simulate rounded border */ table.gridtable td:first-child { box-shadow: 1px 0 0 0 black;} table.gridtable tr:last-child td { box-shadow: 0 1px 0 0 black;} /* Fix for small and large screens */ @media screen and (min-width: 300px) { table.gridtable {font-size: 8px;}} @media screen and (min-width: 400px) { table.gridtable {font-size: 9px;}} @media screen and (min-width: 500px) { table.gridtable {font-size: 12px;}} @media screen and (min-width: 600px) { table.gridtable {font-size: 13px;}} @media screen and (min-width: 800px) { table.gridtable {width: 700px;}} @media screen and (min-width: 900px) { table.gridtable {width: 800px;}} @media screen and (min-width: 1000px) {table.gridtable {width: 900px;}} /* Old Colors w r c b g backwards compatability */ table.gridtable tr.wColor td { background-color: white; font-weight: bold; color: black;} table.gridtable tr.rColor td { background-color: darkblue; font-weight: bold; color: yellow;} table.gridtable tr.cColor td { background-color: red; font-weight: bold; color: yellow;} table.gridtable tr.bColor td { background-color: palegreen; font-weight: bold; color: black;} table.gridtable tr.gColor td { background-color: lightgray; font-weight: bold; color: black;} table.gridtable tr.tColor td { background-color: lemonchiffon;font-weight: bold; color: black;} table.gridtable tr.lColor td { background-color: powderblue; font-weight: bold; color: black;} table.gridtable tr.pColor td { background-color: pink; font-weight: bold; color: black;} table.gridtable tr.lpColor td{ background-color: lightpink; font-weight: bold; color: black;} table.gridtable tr.headerColor td { background-color: var(--systemColor);font-weight: bold; color:var(--systemFontColor);} table.gridtable tr.descColor td { background-color: lemonchiffon;font-weight: bold; color: black;} table.gridtable tr.idle-status-Color td { background-color: lightgray; font-weight: bold; color: black;} table.gridtable tr.key-status-Color td { background-color: red; font-weight: bold; color: white;} table.gridtable tr.key-timeout-Color td { background-color: #ff4d4d; font-weight: bold; color: black;animation-name: flash;animation-duration: 0.2s;animation-timing-function: linear;animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;} table.gridtable tr.quickKey-status-Color td { background-color: #ff8080; font-weight: bold; color: black;animation-name: flash;animation-duration: 0.2s;animation-timing-function: linear;animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;} table.gridtable tr.bridgeYes-status-Color td { background-color: yellow; font-weight: bold; color: white;animation-name: flash;animation-duration: 0.2s;animation-timing-function: linear;animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;} table.gridtable tr.bridgeNo-status-Color td { background-color: yellow; font-weight: bold; color: white;animation-name: flash;animation-duration: 0.2s;animation-timing-function: linear;animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;} table.gridtable tr.bridgeNo-timeout-Color td { background-color: #ff4d4d; font-weight: bold; color: black;animation-name: flash;animation-duration: 0.2s;animation-timing-function: linear;animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;} table.gridtable tr.emergency-status-Color td { background-color: #ff4d4d; font-weight: bold; color: black;animation-name: flash;animation-duration: 0.2s;animation-timing-function: linear;animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;} table.gridtable tr.normalColor td:hover {font-weight: bold;color: red;} table.gridtable tr.keyedColor td:hover {font-weight: bold;color: yellow;} /* colors */ table.gridtable tr.connColor td { background-color: red; font-weight: bold; color: white;} table.gridtable tr.keyedColor td { background-color: darkblue; font-weight: bold; color: white;} table.gridtable tr.normalColor td { background-color: white; font-weight: bold; color: black;} table.gridtable tr.footerColor td { background-color: lightgray; font-weight: bold; color: black;} /* Colors for nodes hubs and repeaters Only while not keyed */ table.gridtable tr td.info-hub {font-weight: bold;color: #A52A2A;} table.gridtable tr td.info-rep {font-weight: bold;color: #45943D;} table.gridtable tr td.info-iax {font-weight: bold;color: #A200B8;} table.gridtable tr td.info-nod {font-weight: bold;color: black;} table.gridtable tr td.nodeNum {font-weight: bold;color: black;} .embed-youtube { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ padding-top: 30px; /* Optional top padding */ height: 0; overflow: hidden; max-width: 1500px; /* Set your maximum width here */ margin: auto; /* Center the embed */ } .embed-youtube iframe, .embed-youtube object, .embed-youtube embed { border: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @keyframes flash { from {color: black;} to {color: white;} } /* Position the install button at the bottom right corner */ #installButton { position: fixed; bottom: 20px; /* 20px from the bottom */ right: 20px; /* 20px from the right */ padding: 10px 20px; background-color: #8B4513; /* Brown color */ color: white; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; z-index: 1000; /* Ensure it is above other elements */ } /* Hover effect */ #installButton:hover { background-color: #5C2E0A; /* Darker brown for hover effect */ }